Cascading Multiselect

[Jako]

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.

[Daniel]

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