Cascading DropDownLists
The cascading DropDownList is a series of two or more DropDownLists in which each DropDownList is filtered according to the selected options in the previous DropDownList.
Basic Concepts and Requirements
The child DropDownList cascades from the parent one if the cascadeFrom option is defined. The cascadeFrom option has to point to the parent ID.
The child DropDownList takes the following actions during initialization:
- Checks if the
cascadeFromproperty is set. If not, cascading is disabled. - Tries to find the parent DropDownList object. If the result is
null, then the functionality is omitted. - Listens to any changes of the parent value.
-
If the parent does not have a value, the child is disabled. If the parent has a value, the child is enabled and filters its data accordingly. The filter options are similar to the following:
field: "parentID", //the dataValueField of the parent operator: "eq", value: "" // Parent's value.The following example demonstrates the parameters of this request.
filter[logic]: and filter[filters][0][field]: parentID filter[filters][0][operator]: eq filter[filters][0][value]:
- The cascading functionality works only when you define the
cascadeFromproperty and initialize the parent DropDownList.- The filter operator is always
"eq". To filter the data, the child DropDownList uses thedataValueFieldoption of the parent DropDownList.
Enabling Cascading
The following example demonstrates how to initialize a cascading DropDownList.
<input id="parent" />
<input id="child" />
<script type="text/javascript">
$(function() {
$("#parent").kendoDropDownList({
dataTextField: "parentName",
dataValueField: "parentID"
// Define the settings for the DropDownList.
});
$("#child").kendoDropDownList({
cascadeFrom: "parent"
// Define other settings.
});
});
</script>
MVVM Value Binding
The MVVM value binding updates the model when a UI element triggers a change event. When widgets cascade, however, they do not raise a change event and the model is not updated.
- For more information on how to sync a
modelby implementing a custom MVVM binding that will update the model accordingly, refer to this runnable demo example . - For more information on why a widget does not trigger a
changeevent, refer to this GitHub discussion.