# 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](https://docs.telerik.com/kendo-ui/api/data/datasource#configuration-serverGrouping). 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.

```Razor HtmlHelper
    @(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>
```

```Razor TagHelper
    <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

* [Grouping by the MultiSelect HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/multiselect/grouping)
* [Server-Side API](https://www.telerik.com/aspnet-core-ui/documentation/api/multiselect)