Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Kendo UI MVC Send MultiSelect data values to Action method

The Kendo UI Ajax Binding documentation at Ajax Binding describes passing multiple data parameters to an Action method but it does not address passing arrays like MultiSelect values.

In the example below, if multisel is set to a string like "237896", the controller receives sitesFilter="237896". But if multisel is set to the MultiSelect value as shown below, the controller receives sitesFilter = null.

What is the proper way to send all of the MultiSelect values to the Action method using the MVC wrapper?

    .DataSource(dataSource => dataSource
                              .Ajax()
                              .ServerOperation(false)
                              .Read(read => read.Action("Documents_Read", "Document")
                                                .Type(HttpVerbs.Post)
                                                .Data("getCriteria"))

    function getCriteria() {
    var multisel = $("#sites").data("kendoMultiSelect").value();
    return {
        sitesFilter: multisel
    };
}

    public ActionResult Documents_Read([DataSourceRequest] DataSourceRequest request, string sitesFilter=null)
    {
        return Json(GetDocuments(sitesFilter).ToDataSourceResult(request), JsonRequestBehavior.DenyGet);
    }

EDIT: getCriteria should convert the data to a string as shown below:

 function getCriteria() {
        var multisel = $("#sites").data("kendoMultiSelect").value().toString();
        return {
            sitesFilter: multisel
        };
like image 359
Mark Avatar asked Mar 29 '13 22:03

Mark


People also ask

What is Kendo MultiSelect?

The MultiSelect component is part of Kendo UI for jQuery, a professional grade UI library with 110+ components for building modern and feature-rich applications.

How do you initialize kendo MultiSelect?

To initialize the MultiSelect, use the <option> tag of an existing <select> element with defined data items. You can also initialize the MultiSelect through binding it to local or remote data and then using the <select> element.


2 Answers

My solution doesn't use Ajax, but describes the transmission of multiselected values to the Controller in general! Ajaxify it, Model transmission should work similarly!

.cshtml Filter View: form with selection fields to POST the chosen values to the Controller. Model.Products is a List of Type Product with properties ID and DisplayName.

<div class="editor-field">
    @{
        IEnumerable<Product> productSelectList = Model.Products;
        Html.Kendo().MultiSelectFor(model => model.ProductIds)
            .BindTo(new SelectList(productSelectList, "ID", "DisplayName"))
            .HtmlAttributes(new { style = "width: 400px;" })
            .Render();    
    }
</div>

Controller.cs: Action

[HttpPost]
public ActionResult SearchForLicenseTerm(SearchLicenseTermFilterViewModel searchLicenseTermFilterViewModel)
{
    // Search logic
}

Model.cs: specific Model used

public class SearchLicenseTermFilterViewModel
{
    public SearchLicenseTermFilterViewModel()
    {
        ProductIds = new List<Guid?>();
    }        
    public List<Guid?> ProductIds { get; set; }
}

Received POST data in the Controller Action .jpeg: You are seeing the filled List of GUIDs of the select entries from the Kendo.MultiSelect

enter image description here

like image 171
florian.isopp Avatar answered Oct 22 '22 15:10

florian.isopp


var multisel = $("#sites").data("kendoMultiSelect").value(); was not being converted to a string.

var multisel = $("#sites").data("kendoMultiSelect").value().toString(); solved the problem.

like image 2
Mark Avatar answered Oct 22 '22 17:10

Mark