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>