This is a migrated thread and some comments may be shown as answers.

Foreign Key columns, Cascading Drop Downs and InCell Editing

3 Answers 266 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Barry Burton
Top achievements
Rank 1
Barry Burton asked on 26 Mar 2014, 01:10 PM
I have two drop downs in my Kendo grid, one for categories and one for sub-categories.  The sub-categories drop down needs to change based on the value of the category drop down.  This if fairly common scenario, but a bear to implement for someone who is new to Kendo.  For anyone attempting to do so, I strongly recommend searching the forum for 'KendoGridWithInCellCascadingDropDownLists' and studying it closely.  

I now have everything working properly and thought I would share a bit of what I learned from the experience.

a. While in InCell editing mode you cannot do something like this in your filter function:

    function filterSubCategories()
    {
        return { catId: $("#CategoryId").data("kendoDropDownList").value() };
    }

Instead, you must use the following to get the "CategoryId":

    function filterSubCategories()
    {
        var grid    = $("#equip-grid").data("kendoGrid");
        var editRow = grid.tbody.find("tr:has(.k-edit-cell)");
        var model   = grid.dataItem(editRow);

        return { catId: model.CategoryId };
    }

To me this is less than intuitive, NOT very developer friendly and somewhat of a hack!

b. In Inline edit mode, the filter function is called when the user selects an item from the CATEGORY drop down.  In InCell edit mode, the filter function is called when the user first clicks the SUB-CATEGORY drop down button.

This behavior in item b. is the reason for my post.  WHY this inconsistency, why not call the filter function when the user changes the CATEGORY drop down?

From a useabilty stand-point, I need to clear the SUB-CATEGORY drop down and set it to the OptionLabel value, whenever the CATEGORY drop down changes.  

Any thoughts on how to accomplish this?


3 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 28 Mar 2014, 12:08 PM
Hi Barry,

I already answered to this query in duplicated ticket created by you, however I will include the answer to the current thread as well:

Please note that the current behavior of the "incell" edit mode is expected and intended - the editors inside the Grid are initialized only when given cell is opened for editing (rendering all editors will have huge impact on performance especially in older browsers like IE7/8). The cascading functionality on other hand is handled internally by the DropDownLists - that why when only one editor is initialized at a time it's not possible to enable the cascading functionality out of the box. There are several ways to achieve the desired behavior and which one you would choose depends entirely on you and the exact setup that you have. For example you can get the parent dataItem from the current row (using Grid API and jQuery as you already did) and handle the changes of the parent DropDownLists using the "Change" event of the Grid DataSource as demonstrated below: 
  • Child DropDownList "Data" function: 
    function getCurrentEditedModel() {
        var grid = $("#Grid").data("kendoGrid");
        var editRow = grid.tbody.find("tr:has(.k-edit-cell)");
        return grid.dataItem(editRow);
    }
      
    function filterVendors() {
        var model = getCurrentEditedModel();
        return {
            customerId:model.CustomerId
        };
    }
  • Grid DataSource "Change" event:
    function onChange(e) {
        if (e.action == "itemchange") {
            if (e.field == "CustomerId") {
                var model = e.items[0];
                model.set("VendorId", 0);
            }
    }
For your convenience I created runable example which implements the above solution and uploaded it to our CodeLibrary:
Regards,
Vladimir Iliev
Telerik
 

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

 
0
Andrew
Top achievements
Rank 1
answered on 24 Mar 2016, 07:11 PM

I'm trying to implement this solution with in-cell edit.  When I get to the "grid.tbody.find("tr:has(.k-edit-cell)");" line I keep getting an exception of "Cannot read property 'field' of undefined" kendo.all.js:4261

 

I'm using kendo UI 2016.1.226 and wondering if this implementation has changed since Vladimir's post.  Any update to the function syntax or tips to help me out?

 

Thanks.

0
Vladimir Iliev
Telerik team
answered on 28 Mar 2016, 07:36 AM
Hello Andrew,

I tried to reproduce the problem locally but to no avail – everything is working as expected on our side using the previously provided project. Could you please modify it in order to reproduce the issue and send it back to us? 

Regards,
Vladimir Iliev
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
Barry Burton
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Andrew
Top achievements
Rank 1
Share this question
or