This is a migrated thread and some comments may be shown as answers.

Cascading Multiselect

1 Answer 48 Views
This is a migrated thread and some comments may be shown as answers.
Jako
Top achievements
Rank 1
Jako asked on 12 Aug 2015, 01:56 PM

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.

1 Answer, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 14 Aug 2015, 12:26 PM
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!
 
Asked by
Jako
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Share this question
or