Inline Grid with cascading dropdowns and client templates always setting null by default

[Scott]

I have a grid very similar to the one in this telerik example where I am using 3 different client templates to populate and bind 3 drop downs in my grid:

https://demos.telerik.com/aspnet-core/grid/editing-custom

My dropdowns are: Category, Department, Configuration

 

So my grid is defined like this with custom editors

columns.Bound(e => e.Category).ClientTemplate("#=Category.CategoryName#").Title("Category");
columns.Bound(e => e.Department).ClientTemplate("#=Department.DepartmentName#").Title("Department");
columns.Bound(e => e.Configuration).ClientTemplate("#=Configuration.ConfigurationName#").Title("Configuration");

And the model I'm binding to looks just like in the example:

[System.ComponentModel.DataAnnotations.UIHint("Category")]
public CategoryViewModel Category {
    get;
    set;
}

[System.ComponentModel.DataAnnotations.UIHint("Department")]
public DepartmentViewModel Department {
    get;
    set;
}

[System.ComponentModel.DataAnnotations.UIHint("Configuration")]
public ConfigurationViewModel Configuration{
    get;
    set;
}

 

I need the dropdowns to cascade.....choose a Category, it loads Departments associated with that category, choose a Department, it loads configurations associated with that department. So my code in the custom editor is simply (this is for category, for department it passes the selected categoryId in the read action , etc)

@model DMA.Model.CategoryViewModel
<script>
    function onCategoryChange(e) {
       $("#Department").data("kendoDropDownList").dataSource.read();   
    }
</script>
@(Html.Kendo().DropDownListFor(m => m)
.DataValueField("CategoryID")
        .DataTextField("CategoryName")
        .DataSource(source => {
         source.Read(read =>
            {
                read.Action("GetCategories", "Wizard");
            });
        }).Events(e => e.Change("onCategoryChange"))
)

 

And visually works correctly, choosing a category will re-fill the department options and by default the first item is now selected. But if you go to save it at this point, even though the first item is selected, the model does not reflect that: e.model.Department = null. You have to physically choose an item from the Department drop down to get it to set that model value correctly. What is going on here? Why is not binding the model to the selected item when it refills? 

 

 

[Anton Mironov]

Hi, Scott,

Thank you for the provided code snippets.

I would recommend two approaches to this case.

1. Trying the.OptionLabel functionality in the Department dropdown template:

.OptionLabel("Select department")

2. Find a sample project attached with needed behavior implemented. In case of Inline and Popup editing, you can see that the model is updated under the hood.

Let me know if further assistance is needed.

 

Kind Regards,
Anton Mironov
Progress Telerik