<%: Html.Kendo().MultiSelect()
.Name("productMultiSelect") //The name of the MultiSelect is mandatory. It specifies the "id" attribute of the widget.
.DataTextField("ProductName") //Specify which property of the Product to be used by the MultiSelect as a text.
.DataValueField("ProductID") //Specify which property of the Product to be used by the MultiSelect as a value.
.BindTo(Model) //Pass the list of Products to the MultiSelect.
%>

@(Html.Kendo().MultiSelect()
.Name("productMultiSelect") //The name of the MultiSelect is mandatory. It specifies the "id" attribute of the widget.
.DataTextField("ProductName") //Specify which property of the Product to be used by the MultiSelect as a text.
.DataValueField("ProductID") //Specify which property of the Product to be used by the MultiSelect as a value.
.BindTo(Model) //Pass the list of Products to the MultiSelect.
)

Example

<%: Html.Kendo().MultiSelect()
.Name("productMultiSelect") //The name of the MultiSelect is mandatory. It specifies the "id" attribute of the widget.
.DataTextField("ProductName") //Specify which property of the Product to be used by the MultiSelect as a text.
.DataValueField("ProductID") //Specify which property of the Product to be used by the MultiSelect as a value.
.Filter(FilterType.Contains)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetProducts", "Home"); //Set the Action and Controller names.
})
.ServerFiltering(true); //If true, the DataSource will not filter the data on the client.
})
%>

@(Html.Kendo().MultiSelect()
.Name("productMultiSelect") //The name of the MultiSelect is mandatory. It specifies the "id" attribute of the widget.
.DataTextField("ProductName") //Specify which property of the Product to be used by the MultiSelect as a text.
.DataValueField("ProductID") //Specify which property of the Product to be used by the MultiSelect as a value.
.Filter(FilterType.Contains)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetProducts", "Home"); //Set the Action and Controller names.
})
.ServerFiltering(true); //If true, the DataSource will not filter the data on the client.
})
)

Important:

The ToDataSourceResult() extension method modifies the structure of the result and the widget is not able to bind to it. In this case, return a simple array of data.

<%: Html.Kendo().MultiSelect()
.Name("productMultiSelect")
.DataTextField("ProductName") //Specify which property of the Product to be used by the MultiSelect as a text.
.DataValueField("ProductID") //Specify which property of the Product to be used by the MultiSelect as a value.
.DataSource(source =>
{
source.Custom()
.ServerFiltering(true)
.Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances
.Transport(transport =>
{
transport.Read("GetProducts", "Home");
})
.Schema(schema =>
{
schema.Data("Data") //define the [data](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
.Total("Total"); //define the [total](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
});
})
%>

@(Html.Kendo().MultiSelect()
.Name("productMultiSelect")
.DataTextField("ProductName") //Specify which property of the Product to be used by the MultiSelect as a text.
.DataValueField("ProductID") //Specify which property of the Product to be used by the MultiSelect as a value.
.DataSource(source =>
{
source.Custom()
.ServerFiltering(true)
.Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances.
.Transport(transport =>
{
transport.Read("GetProducts", "Home");
})
.Schema(schema =>
{
schema.Data("Data") //define the [data](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
.Total("Total"); //define the [total](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
});
})
)

Below are listed the steps for you to follow when configuring the Kendo UI MultiSelect to send parameters to the server.

<%: Html.Kendo().MultiSelect()
.Name("productMultiSelect") //The name of the MultiSelect is mandatory. It specifies the "id" attribute of the widget.
.DataTextField("ProductName") //Specify which property of the Product to be used by the MultiSelect as a text.
.DataValueField("ProductID") //Specify which property of the Product to be used by the MultiSelect as a value.
.Filter(FilterType.Contains)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetProducts", "Home")
.Data("onAdditionalData");
});
source.serverFiltering(true);
})
%>
<script>
function onAdditionalData() {
return {
text: $("#productMultiSelect").data("kendoMultiSelect").input.val()
};
}
</script>

@(Html.Kendo().MultiSelect()
.Name("productMultiSelect") //The name of the MultiSelect is mandatory. It specifies the "id" attribute of the widget.
.DataTextField("ProductName") //Specify which property of the Product to be used by the MultiSelect as a text.
.DataValueField("ProductID") //Specify which property of the Product to be used by the MultiSelect as a value.
.Filter(FilterType.Contains)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetProducts", "Home") //Set the Action and Controller names.
.Data("onAdditionalData");
});
source.ServerFiltering(true);
})
)
<script>
function onAdditionalData() {
return {
text: $("#productMultiSelect").data("kendoMultiSelect").input.val()
};
}
</script>

The following example demonstrates how the GetProducts method is used.

When deferred binding—AutoBind: false—is used, specify a list of data items instead of just a list of strings. This functionality is supported in Kendo UI Q1 SP1 2013 and later versions.

<%= Html.Kendo().MultiSelect()
.Name("productMultiSelect") //The name of the MultiSelect is mandatory. It specifies the "id" attribute of the widget.
.DataTextField("ProductName") //Specifies which property of the Product to be used by the MultiSelect as a text.
.DataValueField("ProductID") //Specifies which property of the Product to be used by the MultiSelect as a value.
.Filter(FilterType.Contains)
.AutoBind(false)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetProducts", "Home") //Set the Action and Controller name
.Data("onAdditionalData");
});
})
.Value(new List<Product> {
new Product { ProductName = "Chai", ProductID = 1 },
new Product { ProductName = "Chang", ProductID = 2 }
})
%>

@(Html.Kendo().MultiSelect()
.Name("productMultiSelect") //The name of the MultiSelect is mandatory. It specifies the "id" attribute of the widget.
.DataTextField("ProductName") //Specify which property of the Product to be used by the MultiSelect as a text.
.DataValueField("ProductID") //Specify which property of the Product to be used by the MultiSelect as a value.
.Filter(FilterType.Contains)
.AutoBind(false)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetProducts", "Home") //Set the Action and Controller name
.Data("onAdditionalData");
});
})
.Value(new List<Product> {
new Product { ProductName = "Chai", ProductID = 1 },
new Product { ProductName = "Chang", ProductID = 2 }
})
)

The data source sorts the grouped data either in ascending or descending order. If you want to persist a specific group order, use the server grouping feature. Use the DataSource ServerGrouping method to define the serverGrouping option.

To reference an existing Kendo UI MultiSelect instance, use the jQuery.data() configuration option. Once a reference is established, use the MultiSelect API to control its behavior.

Example

//Put this after your Kendo UI MultiSelect for ASP.NET MVC declaration.
<script>
$(function() {
//Notice that the Name() of the MultiSelect is used to get its client-side instance.
var multiselect = $("#productMultiSelect").data("kendoMultiSelect");
});
</script>

Was this article helpful?

/

Give article feedback

Tell us how we can improve this article

Code samples are inaccurate / outdated.
I expected to find other / more information.
There are typos / broken links / broken page elements.
Content is inaccurate / outdated.
Other
By checking this box you consent to Progress contacting you by email about your response on this page.

Support Resources

Community

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.