Cascading kendoDropDownList, get selected text in first dropdown - kendo-ui

Question

I'm fairly new to Kendo UI and got the basics for my code here : http://demos.telerik.com/kendo-ui/dropdownlist/cascadingdropdownlist
I got 2 api calls, where the first take no parameters and return a list if items (Id, Name)
The second api call take in an Id, and return a seconds list of items (also just an object with Id and Name)
From this I want to have 2 cascading kendo dropdowns.
However my problem is the second one's url always have the id being null or empty, and I cannot figure out what is the right syntax:
// First dropdown, all good
var controllers = $("#Controller").kendoDropDownList({
optionLabel: "Select controller...",
dataTextField: "Name",
dataValueField: "Id",
dataSource: {
serverFiltering: true,
transport: {
read: "/SharedData/GetControllers/"
}
}
}).data("kendoDropDownList");
// second dropdown, always hit the api method with the id being null or empty (depending on syntax for url)
var actions = $("#Action").kendoDropDownList({
autoBind: true,
cascadeFrom: "controllers",
cascadeFromField: "Id",
optionLabel: "Select Action...",
dataTextField: "Id",
dataValueField: "Name",
dataSource: {
serverFiltering: true,
transport: {
// HELP: need pass id to this route (which is id of selected controller)
read: "/SharedData/GetControllerActions/id=" + $("#Controller").data("kendoDropDownList").text()
}
}
}).data("kendoDropDownList");

Answer 1

I believe the problem is that your datasource only gets set one time - at the time of initialization - and at this time the value of the dropdown is null. What i would do is add a change event on the first dropdown like this:
var controllers = $("#Controller").kendoDropDownList({
optionLabel: "Select controller...",
dataTextField: "Name",
dataValueField: "Id",
dataSource: {
serverFiltering: true,
transport: {
read: "/SharedData/GetControllers/"
}
},
change: function(e) {
setSecondDS();
}
}).data("kendoDropDownList");
var setSecondDS = function() {
//initialize your new kendo datasource here
var dataSource = new kendo.data.DataSource({
//your stuff here
transport:
serverFiltering:
});
$("#Action").data("kendoDropDownList").setDataSource(dataSource);
}