Cascading MultiColumnComboBoxes
The cascading MultiColumnComboBox is a series of two or more MultiColumnComboBoxes in which each MultiColumnComboBox is filtered according to the selected options that are based on the dataValueField in the previous MultiColumnComboBox.
The child MultiColumnComboBox cascades from the parent one if the cascadeFrom option is defined. The cascadeFrom option has to refer to the parent ID.
The cascading functionality works only when you define the
cascadeFromproperty and initialize the parent MultiColumnComboBox.
The child MultiColumnComboBox takes the following actions during initialization:
- Checks if the
cascadeFromproperty is set. If not, cascading is disabled. - Tries to find the parent MultiColumnComboBox 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 ones demonstrated in the following example.
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 filter operator is always
"eq". To filter the data, the child MultiColumnComboBox uses thedataValueFieldoption of the parent MultiColumnComboBox.
To initialize a cascading MultiColumnComboBox, use the following example.
<label for="categories">Categories</label>
<input id="categories"/>
<label for="products">Products</label>
<input id="products" disabled="disabled"/>
<script>
$(document).ready(function() {
var categories = $("#categories").kendoMultiColumnComboBox({
filter: "contains",
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
}
}).data("kendoMultiColumnComboBox");
var products = $("#products").kendoMultiColumnComboBox({
autoBind: false,
cascadeFrom: "categories",
filter: "contains",
placeholder: "Select product...",
dataTextField: "ProductName",
dataValueField: "ProductID",
columns: [
{ field: "ProductID", title: "ID", width: 120 },
{ field: "ProductName", title: "Name", width: 120 },
{ field: "UnitsInStock ", title: "UnitsInStock", width: 120 }
],
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
}
}
}).data("kendoMultiColumnComboBox");
})
</script>