Post additional data as list kendo multiselect read

Question

I have a two kendo multiselect and i want my roles multiselect to sort of cascade from the other in a way that on the roles multiselect read i want to post a list of the values selected in my systems multiselect. This is what my roles multiselect looks like:

 @(Html.Kendo().MultiSelect()
              .Name("Roles")
                .DataTextField("Name")
                .DataValueField("Id")
              .Placeholder("Select roles")
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetRoles", "UserAdmin").Data("additionalItemsGetRoles");
                  })
                  .ServerFiltering(true);
              })
             )


<script>
 function additionalItemsGetRoles() {
    var multiselect = $("#Systems").data("kendoMultiSelect").dataItems();
    var length = multiselect.length;
    var systems = [];
    for (var i = 0; i < length; i++) {
        systems.push({
            Name: multiselect[i].Name,
            SystemId: multiselect[i].SystemId,
            Description: multiselect[i].Description
        });
    }
    var json = JSON.stringify(systems);
    console.log(json);
    return json;
}
</script>

and here is what my action method looks like:

       public ActionResult GetRoles([DataSourceRequest] DataSourceRequest request, IList<SystemViewModel> systems)
    {

And here is what my console.log(json) shows in the console. enter image description here

And here is my viewmodel:

   public string SystemId { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }

I tried to set the action method as [httpPost] but then it can't find the method at all.

Everytime it posts to the controller it get null. What am i doing wrong here?

Justin Greywolf Justin Greywolf · Accepted Answer · 2015-07-06T19:45:50

OK, if I understand correctly, what you want to do is to filter one multiselect list, based on the selected items in another multiselect list. Yes?

I am actually doing something similar, and here is what I did:

First, setup the two MultiSelect "widgets" Set the Change event on the first MultiSelect ("regionChange") Set the .Data parameter of DataSource to a js function ("regionfilter")

@(Html.Kendo().MultiSelect()
    .Name("region")
    .DataTextField("Name")
    .DataValueField("Id")
    .AutoBind(false)
    .Events(e => e.Change("regionChange"))
    .DataSource(ds => ds
        .Read(read => read.Action("GetRegionsForFilter", "Authorization")
    )
)

@(Html.Kendo().MultiSelect()
    .Name("branch")
    .DataTextField("Name")
    .DataValueField("Id")
    .AutoBind(false)
    .DataSource(ds => ds
        .Read(read => read.Action("GetBranchesForFilter", "Authorization")
        .Data("regionfilter"))
        .ServerFiltering(true)
    )
)

Define js functions (I have an additional function to get the MultiSelect values, because I am using this on a couple of other MultiSelect "widgets" no the page, AND I am actually doing reverse filtering for some (such as Branch/Region though I snipped out the filtering being done on region)

function regionChange() {
    var value = this.value(),
        grid = $("#grid").data("kendoGrid");

    <-- snipped logic related to filtering grid -->

    $('#branch').data('kendoMultiSelect').dataSource.read();
}

function regionfilter() {
    var values = getMultiSelectValues("region");
    return { regions: values.toString() };
}

function getMultiSelectValues(multiSelectControl) {
    var multiSelect = $("#" + multiSelectControl).data("kendoMultiSelect");
    var values = multiSelect.value($("#value").val());
    return values;
}

Finally, in my controller I am just returning a JsonResult (get request) that accepts a string argument (comma separated list of strings)

public JsonResult GetBranchesForFilter(string regions)
{
    var list = _repository.Branches().GetAll().Select(x => new { x.Id, x.Name, x.RegionId });
    if (!String.IsNullOrWhiteSpace(regions))
        list = list.Where(x => regions.Contains(x.RegionId.ToString()));

    return Json(list.OrderBy(o => o.Name), JsonRequestBehavior.AllowGet);
}

Post additional data as list kendo multiselect read

1 Answers