What is missing to make my cascading DropDownList work

Question

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: "----------------" ,
});

Answer 1

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:

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

2. 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