[SOLVED] kendoComboBox Cascade from multiple parents

kendoComboBox Cascade from multiple parents

How do i cascade from multiple parents in kendoUi's kendoComboBox?

let say i have to parent comboboxes; comboBoxA : [A,B,C,D] and comboBoxB : [1,2,3,4] and cascasding from field 'desc' in both comboboxes will return [A,B,C,D,1,2,3,4]

$('#comboBoxChild').kendoComboBox({
 cascadeFrom: ??
});

Solution

The following code is from the official Kendo UI Jquery demo, which clearly demonstrates Kendo cascading ComboBox.

var categories = $("#categories").kendoComboBox({
    filter: "contains",
    placeholder: "Select category...",
    dataTextField: "CategoryName",
    dataValueField: "CategoryID",
    dataSource: {
        type: "odata",
        serverFiltering: true,
        transport: {
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
        }
    }
}).data("kendoComboBox");

var products = $("#products").kendoComboBox({
    autoBind: false,
    cascadeFrom: "categories",
    filter: "contains",
    placeholder: "Select product...",
    dataTextField: "ProductName",
    dataValueField: "ProductID",
    dataSource: {
        type: "odata",
        serverFiltering: true,
        transport: {
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
        }
    }
}).data("kendoComboBox");

var orders = $("#orders").kendoComboBox({
    autoBind: false,
    cascadeFrom: "products",
    filter: "contains",
    placeholder: "Select order...",
    dataTextField: "Order.ShipCity",
    dataValueField: "OrderID",
    dataSource: {
        type: "odata",
        serverFiltering: true,
        transport: {
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Order_Details?$expand=Order"
        }
    }
}).data("kendoComboBox");

Updated:

Copy the code below to https://dojo.telerik.com/ to run the demo.

Cascading Kendo ComboBox from multiple parents!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
</head>
<body>

    supplier: <select id="suppliers"></select>
    product: <select id="products"></select>
    <script>
      $(function() {
        var productsDataSource = new kendo.data.DataSource({
          type: "odata",
          serverFiltering: true,
          transport: {
            read: {
              url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
            },
            parameterMap: function(data) {
              return kendo.data.transports.odata.parameterMap.call(this, data);
            }
          }
        });

        $("#products").kendoMultiSelect({
          autoBind: false,
          dataTextField: "ProductName",
          dataValueField: "ProductID",
          dataSource: productsDataSource
        });

        $("#suppliers").kendoMultiSelect({
          autoBind: false,
          dataTextField: "CompanyName",
          dataValueField: "SupplierID",
          dataSource: {
            type: "odata",
            serverFiltering: true,
            transport: {
              read: {
                url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Suppliers"
              }
            }
          },
          change: function() {
            var filters = buildFilters(this.dataItems());
            productsDataSource .filter(filters);
          }
        });

        function buildFilters(dataItems) {
          var filters = [],
              length = dataItems.length,
              idx = 0, dataItem;

          for (; idx < length; idx++) {
            dataItem = dataItems[idx];

            filters.push({
              field: "SupplierID",
              operator: "eq",
              value: parseInt(dataItem.SupplierID)
            });
          }

          return {
            logic: "or",
            filters: filters
          };
        }
      });
    </script>
</body>
</html>