New to Telerik UI for ASP.NET Core? Download free 30-day trial

Grouping

The MultiSelect allows you to bind it to a grouped data source.

To group the data, define a group datasource expression which uses a custom DataSource configuration, and specify the field by which the MultiSelect will be grouped.

The data source sorts the grouped data either in ascending or descending order. To persist a specific group order, use the server grouping feature of Kendo UI for jQuery. To define the serverGrouping option, use the ServerGrouping method of the DataSource.

The following example demonstrates how to group the data in the MultiSelect by country.

    @(Html.Kendo().MultiSelect()
        .Name("customers")
        .DataTextField("ContactName")
        .DataValueField("CustomerID")
        .Placeholder("Select customers...")
        .DataSource(source =>  source
            .Custom()
            .Group(g => g.Add("Country", typeof(string)))
            .Transport(transport => transport
                .Read(read =>
                {
                    read.Action("Customers_Read", "MultiSelect")
                        .Data("onAdditionalData");
                }))
                .ServerFiltering(true))
    )
    <script>
        function onAdditionalData() {
            return {
                text: $("#customers").val()
            };
        }
    </script>
    <kendo-multiselect name="customers"
                       datatextfield="ContactName"
                       datavaluefield="CustomerID"
                       placeholder="Select customers...">
        <datasource type="DataSourceTagHelperType.Custom" server-filtering="true">
            <groups>
                <group field="Country" typeof="string"></group>
            </groups>
            <transport>
                 <read url="@Url.Action("Customers_Read", "MultiSelect")" data="onAdditionalData"/>
            </transport>
        </datasource>
    </kendo-multiselect>
    <script>
        function onAdditionalData() {
            return {
                text: $("#customers").val()
            };
        }
    </script>

See Also

In this article