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
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][field]: parentID filter[filters][operator]: eq filter[filters][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 the
dataValueFieldoption of the parent DropDownList.
The following example demonstrates how to initialize a cascading DropDownList.
MVVM Value Binding
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.