Cascading Multiselect

2 posts, 0 answers
  1. Jako
    Jako avatar
    107 posts
    Member since:
    Apr 2012

    Posted 12 Aug 2015 Link to this post

    Hi, I am trying to create a cascading MultiSelect, but I can't seem to get it right.

    I have the following two multiselects and the piece of javascript that refreshes the data. I get the value of #MultiSelect1, but it never passes through to the Action2 Json method, the parameter  is ALWAYS null?

     

    <div class="col-lg-2">
        <label>Multi1</label>
    </div>
    <div class="col-lg-10">
        @(Html.Kendo().MultiSelectFor(m => m.MultiSelect1)
            .DataSource(s => { s.Read(r => { r.Action("Action1", "Report"); }).ServerFiltering(true); })
            .DataTextField("Name")
            .DataValueField("Id")
            .HtmlAttributes(new { style = "width:300px" })
            .Events(evt => {evt.Change("onChange"); })
        )                           
    </div>
                    
    <div class="col-lg-2">
        <label>Multi2</label>
    </div>
    <div class="col-lg-10">
        @(Html.Kendo().MultiSelectFor(m => m.MultiSelect2)
            .DataSource(s => { s.Read(r => { r.Action("Action2", "Report").Data("getList"); }).ServerFiltering(true); })
            .DataTextField("Name")
            .DataValueField("Id")
            .AutoBind(false)
            .HtmlAttributes(new { style = "width:300px" })
        )
    </div>
     
    <script type="text/javascript">
        function getList()
        {
            var list = $("#MultiSelect1").val();
     
            return {
                idList:list
            }
        }
    </script>

    Controller:

    public JsonResult Action2(List<string> idList)
    {
        .    
    }

    What am I missing? I have tried playing around with the object type of idList string[] etc.

     Thank you.

  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 14 Aug 2015 Link to this post

    Hi,

    The value should be sent but the list will not be bound on the server in the format used by default by jQuery. You should either serialize the values in the format ParameterName[index]:
    function getList() {
        var list = $("#MultiSelect1").val();
        var data = {};
        for (var i = 0; i < list.length; i++) {
            data["idList[" + i + "]"] = list[i];
        }
        return data;
    }

    or change the traditional option:
    $.ajaxSetup({
        traditional: true
    });


    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top