CODEWITHSUNDEEP
kendo-uicascadingdropdownkendo-combobox
user2012783
user2012783

Reputation: 193

Kendo 3 Tier Cascading DropDownList

Im trying to do a simple cascading dropdownist but for some reason the 3 drop down list isnt cascading correctly. Is cascading the engineType from the previous dropdownlist nut not taking into count the make.

for example select make->Audi, then EngineType->Deisel. the 3 dropdownlist should show 'A4'. but it shows all Deisel engines.

any help would be great on this.

$(document).ready(function () {

  var makes = $("#makes").kendoDropDownList({
        autoBind: true,
        optionLabel: "Select",
        dataTextField: "make",
        dataValueField: "make",
        dataSource: [
            { make: "Audi"},
            { make: "BMW" },
            { make: "Saab"}
        ]
  }).data("kendoDropDownList");

  var engineType = $("#engineTypes").kendoDropDownList({
        autoBind: false,
        cascadeFrom: "makes",
        optionLabel: "Select",
        dataTextField: "engineType",
        dataValueField: "engineType",
        dataSource: [
            { make: "Audi", engineType: "Deisel"},
            { make: "Audi", engineType: "Petrol"},
            { make: "BMW", engineType: "Deisel"},
            { make: "Saab", engineType: "Deisel"}
        ]
  }).data("kendoDropDownList");

  var models = $("#models").kendoDropDownList({
        autoBind: false,
        cascadeFrom: "engineTypes",
        optionLabel: "Select",
        dataTextField: "chose",
        dataValueField: "chose",
        dataSource: [
          { make: "Audi", engineType: "Deisel", chose: "A4"},
            { make: "Audi", engineType: "Petrol", chose: "A5"},
            { make: "BMW", engineType: "Deisel", chose: "3 Series"},
            { make: "Saab", engineType: "Deisel", chose: "900"}
        ]
  }).data("kendoDropDownList");

});

Upvotes: 0

Views: 871

Answers (1)

Atanas Korchev
Atanas Korchev

Reputation: 30671

The problem is caused because the second dropdownlist (engine types) contains duplicate values. You need to give each item some unique value. Something like this:

 var engineType = $("#engineTypes").kendoDropDownList({
        autoBind: false,
        cascadeFrom: "makes",
        optionLabel: "Select",
        dataTextField: "engineType",
        dataValueField: "value",
        dataSource: [
          { make: "Audi", engineType: "Deisel", value: 1 },
          { make: "Audi", engineType: "Petrol", value: 2 },
          { make: "BMW", engineType: "Deisel", value: 3 },
          { make: "Saab", engineType: "Deisel", value: 4}
        ]
  }).data("kendoDropDownList");

  var models = $("#models").kendoDropDownList({
        autoBind: false,
        cascadeFrom: "engineTypes",
        optionLabel: "Select",
        dataTextField: "chose",
        dataValueField: "chose",
        dataSource: [
          { make: "Audi", value: 1, chose: "A4"},
          { make: "Audi", value: 2, chose: "A5"},
          { make: "BMW", value: 3, chose: "3 Series"},
          { make: "Saab", value: 4, chose: "900"}
        ]
  }).data("kendoDropDownList");

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

Upvotes: 1

Related Questions