What is missing to make my cascading DropDownList work

kendo-combobox, kendo-ui

Solution

The documentation about cascading is available here: http://docs.kendoui.com/getting-started/web/combobox/cascading

Here is how filtering works:

If the parent has a value, then the child will be enabled and will filter its data depending on it. Here how the filter options will look like: ` field: "parentID", //the dataValueField of the parent operator: "eq", value: "" //parent's value `

This means that the child dropdownlist (combobox) will use the field configured via `dataValueField` of the parent to do the filtering (cascading). In your case this doesn't work because `dataValueField` of the parent is set to "id". This field however serves a different purpose in the `productsList` array.

Currently there is no feature which allows one to specify the field used for cascading.

You have two options:

- Do what @OnaBai suggested. Rename the "id" field of the `categoriesList` to "categorie_id" and set `dataValueField` accordingly.

Implement cascading manually. First remove the cascadeFrom option and then do this in the change event of the parent:

change: function() {
    var products = $("#products").data("kendoDropDownList");

    products.dataSource.filter( {
      field: "categorie_id",
      value: this.value(),
      operator: "eq"
    });

    products.value(0);
}

Here is a live demo: http://jsbin.com/ogEj/1/edit

Problem

Very easy case displayed here: http://jsbin.com/ahoYoPi/3/edit I need to specify that the child's inner field to filter (eq) against the parent's value field is "category_id"... Of course, Kendo's documentation doesn't say anything about how to do that... Or is it something so super obvious it doesn't deserve to be explained ? ``` var categoriesList = new Array ( {"id":"1","categoryName":"Fruits"}, {"id":"2","categoryName":"Vegetables"} ); var productsList = new Array( {"id":"1","categorie_id":"1","productName":"Apples"}, {"id":"2","categorie_id":"1","productName":"Oranges"}, {"id":"3","categorie_id":"2","productName":"Carottes"}, {"id":"4","categorie_id":"2","productName":"Patatoes"}); $("#categories").kendoDropDownList({ dataTextField: "categoryName", dataValueField: "id", dataSource: categoriesList, optionLabel: "----------------" , change: function() { $("#products").data("kendoDropDownList").value(0); } }); $("#products").kendoDropDownList({ cascadeFrom: "categories", dataTextField: "productName", dataValueField: "id", dataSource: productsList, optionLabel: "----------------" , }); ```

Original source