Issues with popup editing, editor templates and MVVM bindings

[Victor]

Hi!

We have a grid using popup editing from an ASP editor template - pretty simple. In the popup there is a cascading dropdown (company => department). Our primary goal this time was to auto-select the first entry in the department dropdown on databinding (could this maybe be added as an option of the dropdown in the future?), but when developing this we ran into some MVVM issues. The editor template is similar to this (with an added debug input box to illustrate MVVM behaviour):

@(Html.Kendo().DropDownList()

       .Name("CompanyId")

       .OptionLabel("Choose company")

       .BindTo(MMHtmlHelperExtension.SelectListForCompany(Model != null ? Model.CompanyId : null))

       .HtmlAttributes(new { data_value_primitive = "true" })

      )

 

@(Html.Kendo().DropDownList()

       .Name("DepartmentId")

        .OptionLabel("Choose department") //We would like to remove this, but if this is removed and the dropdown contains only one element that element cannot be selected

       .DataSource(source => source

           .Read(read => read.Action("GetDepartmentsInCompany", "EditorTemplates", new {area = ""}))

           .ServerFiltering(true))

       .Enable(false)

       .AutoBind(false)

       .CascadeFrom("CompanyId")

       .HtmlAttributes(new { data_value_primitive = "true" })

      )
<input id="inputToIllustrateMVVMBehaviour" data-bind="value: DepartmentId" />

To select the first element we tried (in javascript on document ready) using the select() function and the value() function, both of which visibly changed the value of the department dropdown but none of which changed the MVVM value (input value visibly, but more importantly grid ajax post on finishing editing):

departmentDropDownList
            .dataSource
            .bind("change", function(e) {
                    if (departmentDropDownList.select() == 0) {
                        departmentDropDownList.select(1); //Visibly changes the dropdown, but does not update the MVVM value
                        $("#DepartmentId_listbox").children().eq(1).click(); //Extremely hacky workaround that actually works. Selecting a department manually by clicking also works.
                    }
                });

SO - the main questions:

• Is it possible to make the line "departmentDropDownList.select(1)" actually update the model? Can the update be forced in some way? Isn't that type of code really supposed to work out of the box?
• Is it possible to access the model of the popup directly? (instead of "dropdown.select(1)" do "popupModel.DepartmentId = theNewId" for example)
• Also - when adding/updating a grid using popup, the new line's columns "Company name" and "Deparment name" will be empty in this case until the post-back is done (the Id columns will work though). Is it possible to update the Company/Department name values when selecting values in each dropdown?

Best regards
Victor

[Vladimir Iliev]

Hi Victor,

Please check the answers of your questions below:

1) Current approach of using the "select" method to change the value would not work  - better approach would be to update the underlying model as demonstrated in next answer.

2) You can get the current edited model and modify required fields in Grid PopUp edit mode in the following way:

//change event of the DropDownList
function onChange(e) {
    var item = e.items[0];
    var grid = $("#grid").data("kendoGrid")
    var fieldName = "EmployeeID";
    var model = grid.dataSource.getByUid(departmentDropDownList.element.closest("[data-uid]").data("uid"));
    if (model["EmployeeID"] == 0) {
        model.set(fieldName, item["EmployeeID"]);
    }
}

3) As this question is out of the original topic, may I kindly ask you to open a new support thread / forum post for the Grid and provide the current Grid code and the model that is bound to it? In this way it is much easier to follow and concentrate on the particular issue which usually leads to its faster resolving.

Regards,
Vladimir Iliev
Telerik

 

 

[Victor]

Hi Vladimir and thanks for the reply!

1) Ok. I am guessing this is due to some MVVM specifics, however there are some issues with the suggestion - see (2)

2) Thanks for the suggestion, unfortunately it will not really work in our situation;

The two cascading dropdowns are defined in the editor template for the viewmodel (separate .cshtml file) and reused. "#grid" is not known since it could be any grid (or just a normal ASP editor template and not a popup template at all).


3) Absolutely, I will get back if we still have issues here after resolving this one


Regards
Victor 

[Vladimir Iliev]

Hi Victor,

Basically in your current scenario you can use the "change" event of the DropDownList DataSource, however to be able to set correctly the new value you should release the execution of the current thread using "setTimeout" function as the data is not yet loaded in the widget. In the "setTimeout" function you can check if there is no selected item (the DDL should have "OptionLabel" defined), to select the first item from the list and manually trigger the "change" event of the DropDownList (in order to update the underlying model).

e.g.:

function onChange(e) {
    setTimeout(function () {
        var ddl = $("#VendorId").data("kendoDropDownList");
        if (ddl.select() == 0) {
            ddl.select(1);
            ddl.trigger("change");
        }
    })
}

Regards,
Vladimir Iliev
Telerik

 

 

[Victor]

Hi again!

Thanks for that, that is for sure a better solution than emitting a click event!

Two quick follow-up questions:
* In [cascading] DropDownList without an optionlabel and with only one element that element looks selected but is not in reality, also it is impossible to select that element since a change event is never emitted. I would guess this is a bug - is it something that is being worked on?
* Regarding the original question: Is there any plan to have a configuration option "Dropdownlist.AutoselectOptions.SelectFirst / SelectIfSingleOption" or similar? Would be really nice!

Thanks
/Victor

[Vladimir Iliev]

Hi Victor,

Please check the answers of your questions below:

1)  In [cascading] DropDownList without an optionlabel and with only one element that element looks selected but is not in reality, also it is impossible to select that element since a change event is never emitted - This behavior is correct and it's intended. In such cases you should have "OptionLabel" defined or implement custom solution to explicitly apply the value of the child DropDownList on change of the parent DropDownList (as you already did). 

2) Regarding the original question: Is there any plan to have a configuration option - Currently we have no such configuration option in our RoadMap, however I would suggest to share your idea at KendoUI UserVoice to allow other users evaluate and vote for it. Most voted ideas are included in next KendoUI releases. 

Regards,
Vladimir Iliev
Telerik