Foreign Key columns, Cascading Drop Downs and InCell Editing

4 posts, 0 answers
  1. Barry Burton
    Barry Burton avatar
    25 posts
    Member since:
    Jan 2010

    Posted 26 Mar 2014 Link to this post

    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?


  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 28 Mar 2014 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Andrew
    Andrew avatar
    5 posts
    Member since:
    Apr 2011

    Posted 24 Mar in reply to Vladimir Iliev Link to this post

    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.

  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 28 Mar Link to this post

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready