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

2 posts, 0 answers
  1. Scott
    Scott avatar
    24 posts
    Member since:
    Oct 2019

    Posted 29 Jul 2020 Link to this post

    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? 

     

     

  2. Anton Mironov
    Admin
    Anton Mironov avatar
    168 posts

    Posted 03 Aug 2020 Link to this post

    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

Back to Top