Cascading comboboxes with pre-set the selected items don’t work correct with local data

[Apostol]

Hi,

I’m using telerik.kendoui.professional.2014.1.416.commercial, it seems cascading comboboxes with pre-set the selected items don’t work correct with local data sources or I don’t configure them correct.
I modified the script section of the http://demos.telerik.com/kendo-ui/web/combobox/cascadingcombobox.html example to the following code: 

$(document).ready(function() {
     var categories = $("#categories").kendoComboBox({
         filter: "contains",
         placeholder: "Select category...",
         dataTextField: "CategoryName",
         dataValueField: "CategoryID",
         dataSource: { data: [{"CategoryName": "Condiments", "CategoryID": 2}] },
         value: 2
     }).data("kendoComboBox");

     var products = $("#products").kendoComboBox({
         autoBind: false,
         cascadeFrom: "categories",
         filter: "contains",
         placeholder: "Select product...",
         dataTextField: "ProductName",
         dataValueField: "ProductID",
         dataSource: { data: [{"ProductName": "Chef Anton's Gumbo Mix", "ProductID": 5, "CategoryID": 2}, {"ProductName": "Aniseed Syrup", "ProductID": 3, "CategoryID": 2}] },
         value: 5
     }).data("kendoComboBox");

     var orders = $("#orders").kendoComboBox({
         autoBind: false,
         cascadeFrom: "products",
         filter: "contains",
         placeholder: "Select order...",
         dataTextField: "ShipCity",
         dataValueField: "OrderID",
         dataSource: { data: [{"ShipCity": "Graz", "OrderID": 10382, "ProductID": 5}, {"ShipCity": "London", "OrderID": 10289, "ProductID": 5}] },
         value: 10382
     }).data("kendoComboBox");

     $("#get").click(function() {
         var categoryInfo = "\nCategory: { id: " + categories.value() + ", name: " + categories.text() + " }",
             productInfo = "\nProduct: { id: " + products.value() + ", name: " + products.text() + " }",
             orderInfo = "\nOrder: { id: " + orders.value() + ", name: " + orders.text() + " }";

         alert("Order details:\n" + categoryInfo + productInfo + orderInfo);
     });
 });

In result the first cascading combobox # products loads its filtered options and preset its selected item, but the second cascading combobox #orders stays disabled same as its parent (#products) does not have a value.

Here is what I found in the kendoui.web code, the brief execution flow is:

1.  #categories combobox init executes, initially it sets selectedIndex to -1, but due to options.autoBind is true it runs _filterSource method, it leads to firing of the datasource change event, that causes the combobox refresh and due to it has value, the matched item being selected (selectedIndex is not -1).

2.  #products combobox init executes. It runs _cascade method, it updates the autoBind property to false, the parent (#categories) datasoure is set and it has a selected item (i.e. parent's data item is defined), so it leads to selection of matching #products item (selectedIndex is not equal to -1). Immediately after _cascade execution _init method overrides selectedIndex back to -1 (but does not clear selection) and due to the autoBind option has been set to false, the _init doesn’t call  _filterSource method, i.e. in result the #products has selected item, but its selectedIndex property is not synchronized.  

3.  #orders combobox init executes. It runs _cascade method, but its parent data item cannot be get, due to parent’s selectedIndex is equal to -1. That leads #order combobox to stay disabled.

I found a solution modifying the read methos of combobox datasource transport objects using some timeout:

 

$(document).ready(function() {
    var categories = $("#categories").kendoComboBox({
        filter: "contains",
        placeholder: "Select category...",
        dataTextField: "CategoryName",
        dataValueField: "CategoryID",
        dataSource: {
            type: "json",
            serverFiltering: true,
            transport: {
              read: function(options) {
                var _data = [{"CategoryName": "Condiments", "CategoryID": 2}];
                setTimeout(function() { options.success(_data); }, 100);
              }
            }
        },
      value: 2
    }).data("kendoComboBox");

    var products = $("#products").kendoComboBox({
        autoBind: false,
        cascadeFrom: "categories",
        filter: "contains",
        placeholder: "Select product...",
        dataTextField: "ProductName",
        dataValueField: "ProductID",
        dataSource: {
            type: "json",
            serverFiltering: true,
            transport: {
              read: function(options) {
                var _data = [{"ProductName": "Chef Anton's Gumbo Mix", "ProductID": 5, "CategoryID": 2}, {"ProductName": "Aniseed Syrup", "ProductID": 3, "CategoryID": 2}];
                setTimeout(function() { options.success(_data); }, 100);
              }
            }

        },
      value: 5
    }).data("kendoComboBox");

    var orders = $("#orders").kendoComboBox({
        autoBind: false,
        cascadeFrom: "products",
        filter: "contains",
        placeholder: "Select order...",
        dataTextField: "ShipCity",
        dataValueField: "OrderID",
        dataSource: {
            type: "json",
            serverFiltering: true,
            transport: {
              read: function(options) {
                var _data = [{"ShipCity": "Graz", "OrderID": 10382, "ProductID": 5}, {"ShipCity": "London", "OrderID": 10289, "ProductID": 5}];
                setTimeout(function() { options.success(_data); }, 100);
              }
            }
        },
      value: 10382
    }).data("kendoComboBox");

    $("#get").click(function() {
        var categoryInfo = "\nCategory: { id: " + categories.value() + ", name: " + categories.text() + " }",
            productInfo = "\nProduct: { id: " + products.value() + ", name: " + products.text() + " }",
            orderInfo = "\nOrder: { id: " + orders.value() + ", name: " + orders.text() + " }";

        alert("Order details:\n" + categoryInfo + productInfo + orderInfo);
    });
});

Could you recommend me another approach to solve that problem or advice me how properly to configure the cascading comboboxes to work with local data?

Thanks
 

[Georgi Krustev]

Hello Apostol,

Thank you for drawing our attention to this bug. We was able to narrow the problem and the fix will be included in the next official release of Kendo UI due the end of this week. Here you can check the state of the issue.
As a gratitude for your involvement and investigation, I updated your Telerik points.

Regards,
Georgi Krustev
Telerik