my attempt (Where I have Kendo DropDownList 1 as #Type and Kendo DropDownList 2 as #Units:
$('#Type').change(function (e) {
//if (e.target.value == "Electirc") {
var val = e.target.value;
var ddL = $('#Units').data("kendoDropDownList")
if (val == "Electric") {
ddl.dataSource.data({Text:"-", value:"null"},{Text:"kW", value:"kW"},{Text:"GJ", value:"GJ"})
//$("#Units").html("<option value='null'>item1:-</option><option value='kW'>item1: kW</option><option value='GJ'>item1: GJ</option>");
}
})
The goal would be to have the contents of DDL2 to change based on the selection by DDL1
2 Answers, 1 is accepted
Rank 1
in case anyone is intrested:
$('#Type').change(function (e) {
var val = e.target.value;
var ddL = $('#Units').data("kendoDropDownList").dataSource;
var length = ddL._data.length;
if (length != 0) {
for (var i = length; i >= 0; i--) {
ddL._data.remove(ddL._data[i]);
}
}
if (val == "Electric") {
ddL.add({Text:"-", value:"null"});
ddL.add({Text:"kW", value:"kW"});
ddL.add({ Text: "GJ", value: "GJ" });
}
else if (val == "Natural Gas" || val == "Fuel Oil") {
ddL.add({ Text: "-", value: "null" });
ddL.add({ Text: "ft³", value: "CubicFeet" });
ddL.add({ Text: "therms", value: "therms" });
}
else if (val == "Water") {
ddL.add({Text:"-", value:"null"});
ddL.add({Text:"Gal", value:"Gallons"});
ddL.add({ Text: "L", value: "Liters" });
}
})
Hello Matt,
You can also check the cascading dropdownlists demo, where the content is filtered based on parent selection:
http://demos.telerik.com/kendo-ui/dropdownlist/cascadingdropdownlist
Regards,Kiril Nikolov
Telerik
See What's Next in App Development. Register for TelerikNEXT.