Grouping Overview

The ComboBox enables 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 ComboBox will be grouped. For a runnable example, refer to the demo on grouping in the ComboBox.

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

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

 @(Html.Kendo().ComboBox() .Name("customers") .DataSource(source => source .Custom() .Group(g => g.Add("Country", typeof(string))) .Transport(transport => transport .Read(read => { read.Action("Grouping_GetCustomers", "ComboBox"); })) ) .DataTextField("ContactName") .DataValueField("CustomerID") )

<kendo-combobox name="customers" datatextfield="ContactName" datavaluefield="CustomerID"> <datasource type="DataSourceTagHelperType.Custom"> <groups> <group typeof="string" field="Country"></group> </groups> <transport> <read url="@Url.Action("GetCascadeProducts", "ComboBox")" /> </transport> </datasource> </kendo-combobox>

Group headers are not displayed in the ComboBox if all items belong to a single group.

See Also

• Grouping by the ComboBox HtmlHelper for ASP.NET Core (Demo)
• Server-Side API