New to Kendo UI for jQuery? Download free 30-day trial

Cascade Based on Parent DataField

Environment

Product Progress® Kendo UI® DropDownList for jQuery
Product Version 2019.2.514

Description

How can I filter my child collection based on a property that is not the parent dataValueField in my cascading Kendo UI DropDownLists?

Solution

You can filter a child collection by another datafield by using the cascadeFromParentField property.

      $("#parent").kendoDropDownList({
        dataTextField: "name",
        dataValueField: "id",
        dataSource: [
          { name: "Parent1", id: 1, parentTest: 92 },
          { name: "Parent2", id: 2, parentTest: 91 }
        ]
      });

      $("#child").kendoDropDownList({
        cascadeFrom: "parent",
        cascadeFromField: "childTest",
        cascadeFromParentField: "parentTest",
        dataTextField: "name",
        dataValueField: "id",
        dataSource: [
          { name: "Child1", id: 1, parentId: 1, childTest: 91 },
          { name: "Child2", id: 2, parentId: 2, childTest: 91 },
          { name: "Child3", id: 3, parentId: 1, childTest: 92 },
          { name: "Child4", id: 4, parentId: 2, childTest: 93 },
        ]
      });
    <input id="parent" />
    <input id="child" />

    <script>
      $("#parent").kendoDropDownList({
        dataTextField: "name",
        dataValueField: "id",
        dataSource: [
          { name: "Parent1", id: 1, parentTest: 92 },
          { name: "Parent2", id: 2, parentTest: 91 }
        ]
      });

      $("#child").kendoDropDownList({
        cascadeFrom: "parent",
        cascadeFromField: "childTest",
        cascadeFromParentField: "parentTest",
        dataTextField: "name",
        dataValueField: "id",
        dataSource: [
          { name: "Child1", id: 1, parentId: 1, childTest: 91 },
          { name: "Child2", id: 2, parentId: 2, childTest: 91 },
          { name: "Child3", id: 3, parentId: 1, childTest: 92 },
          { name: "Child4", id: 4, parentId: 2, childTest: 93 },
        ]
      });
    </script>

See Also

In this article