KendoDropDownList - cascading data from one drop down to another - kendo-ui

Question

I am making a game, and have a specific requirement where players pick a playable character race, and then I want a second drop down list to show the list of available genders for that race. I thought this would be easy to do using the Cascade property of the kendo.ui.DropDownListOptions... like this.
var racesOptions = {
index: -1,
valuePrimitive: true,
dataTextField: "Name",
dataValueField: "Name",
dataSource: {
transport: {
read: {
dataType: 'json',
url: '/api/races/list',
type: 'GET'
}
}
}
};
var genderOptions = {
index: -1,
valuePrimitive: true,
cascadeFrom: 'race',
cascadeFromField: 'Genders'
};
The shape of data coming in from /api/races/list looks like this;
[{
"Name": "race1",
// ... other data ... //
"Genders": [ "Male", "Female", "Other" ]
}, {
"Name": "race2",
// ... other data ... //
"Genders" : ["Female"]
}, {
"Name": "race3",
// ... other data ... //
"Genders": ["Male"]
}]
I thought this was going to be a no-brainer. The second drop down cascades from the first; When the first has a value, I figured the second would get the CascadeFromFieldvalue. But that's not happening... In fact, the only way I've been able to accomplish this is with the following code in the #race widget's change event.
change: function (e) {
// the specific race entity selected
var entity = e.sender.dataItem().toJSON();
// set the selected race's genders
var genders = $('#genders').data('kendoDropDownList');
genders.destroy();
genders = $('#genders').kendoDropDownList({
index: -1,
valuePrimitive: true,
dataSource: {
data: entity.Genders
}
}).data('kendoDropDownList');
genders.select(-1);
genders.trigger('change');
}
That change event does work, but it's messy and kind of obtuse. Is there another way I can get the Cascading to work as I'm expecting?

Answer 1

The value for cascadeFromField: needs to point to the parent ID field. In your case the ID field in the Races datasource.
Here's a small example that should help.
<h4>Race:</h4>
<input id="race" />
<h4>Gender:</h4>
<input id="gender" />
<script>
$("#race").kendoDropDownList({
optionLabel: "Select race...",
dataTextField: "raceName",
dataValueField: "raceID",
dataSource: [
{ raceName: "Race1", raceID: 1 },
{ raceName: "Race2", raceID: 2 },
{ raceName: "Race3", raceID: 3 }
]
});
$("#gender").kendoDropDownList({
optionLabel: "Select gender...",
cascadeFrom: "race",
cascadeFromField: "raceID",
dataTextField: "genderName",
dataValueField: "genderID",
dataSource: [
{ genderName: "Male", genderID: 1, raceID: 1 },
{ genderName: "Female", genderID: 2, raceID: 1 },
{ genderName: "Other", genderID: 3, raceID: 1 },
{ genderName: "Female", genderID: 4, raceID: 2 },
{ genderName: "Male", genderID: 4, raceID: 3 }
]
});
</script>
You can check out this demo using the above code.