Multiple cascading Combobox

[Neil]

I've managed to get two combo boxes cascading and updating correctly.  Currently I have two combo boxes called

CarMake
CarModel

So when you get a car make it will show you the models for the selected make. 

Now I want to added two more combo boxes, called FuelType, and ColourType.  These combo boxes need to be refreshed when either CarMake, or CarModel are changed.

How can I do this ?

[Neil]

I have managed to get what I wanted working, however I've hit another problem as listed here http://stackoverflow.com/questions/17845424/cant-read-kendoui-dropdown-list-value

[Daniel]

Hello Neil,

The code to get the values looks correct. You could also use the dropdownlist value method. I am not sure if I understand how the dropdownlists will initially be populated. Since the read method is used to pass the parameter, it will not be included in the initial request which will cause an exception on the server and an empty JsonResult will be returned(which will cause another exception because a JSON result is returned for a GET request without using the AllowGet flag). Could you clarify a bit? Generally speaking, you should use the request Data function to pass any additional values so that they are included in the requests trigger by the dropdownlist.

Regards,
Daniel
Telerik

[Neil]

To initialise the list boxes I call

$(document).ready(function () {

$('#Make').data("kendoDropDownList").dataSource.read(
{ FilterInfo: "{'Procedure':'GetMakes','Id':[null,null,null]}" });

$('#Fuel').data("kendoDropDownList").dataSource.read(
{ FilterInfo: "{'Procedure':'GetFuelTypes','Id':[null,null,null]}" });
});

[Daniel]

Hello again Neil,

Thanks for clarifying. The most likely reason for the problem is that if any of the dropdowns does not have initially value, you will get an invalid JSON string("Id":["1","2",]) and the object will not be deserialized correctly on the server. Please check if using the following approach to create the string resolves the problem:

function UpdateFilterParameters() {

    var iMake = $("#Make").val();
    var iModel = $("#Model").val();
    var iFuel = $("#Fuel").val();
    var ids = (iMake || "null") + "," + (iModel || "null") + "," + (iFuel || "null");

    $('#Make').data("kendoDropDownList").dataSource.read(
        { FilterInfo: "{'Procedure':'GetMakes','Id':[" + ids + "]}" });

    $('#Model').data("kendoDropDownList").dataSource.read(
         { FilterInfo: "{'Procedure':'GetModels','Id':[" + ids + "]}" });

    $('#Fuel').data("kendoDropDownList").dataSource.read(
        { FilterInfo: "{'Procedure':'GetFuelTypes','Id':[" + ids + "]}" });

};

Regards,
Daniel
Telerik

[Neil]

Perfect, works as I want.   Thanks for your help.