Multiple cascading Combobox

6 posts, 1 answers
  1. Neil
    Neil avatar
    5 posts
    Member since:
    Jun 2013

    Posted 23 Jul 2013 Link to this post

    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 ?
  2. Neil
    Neil avatar
    5 posts
    Member since:
    Jun 2013

    Posted 24 Jul 2013 Link to this post

    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
  3. Kendo UI is VS 2017 Ready
  4. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 25 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Neil
    Neil avatar
    5 posts
    Member since:
    Jun 2013

    Posted 25 Jul 2013 Link to this post

    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]}" });
    });
  6. Answer
    Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 26 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Neil
    Neil avatar
    5 posts
    Member since:
    Jun 2013

    Posted 26 Jul 2013 Link to this post

    Perfect, works as I want.   Thanks for your help.
Back to Top
Kendo UI is VS 2017 Ready