Edit this page

Grouping

As of the Kendo UI Q1 2015 (2015.1.318) release, the Kendo UI AutoComplete, the ComboBox, the DropDownList and the MultiSelect widgets support binding to a grouped DataSource.

This functionality allows you to display data items categorized by a specific model field. For more information on the data source grouping functionality, refer to the group configuration article.

Enabling

To enable the grouping functionality in a ComboBox, use the remote transport and a grouped data source.

Example
<div class="demo-section k-header">
    <h4>Customers</h4>
    <input id="customers" style="width: 400px" />
</div>

<script>
    $(document).ready(function() {
        $("#customers").kendoComboBox({
            dataTextField: "ContactName",
            dataValueField: "CustomerID",
            height: 200,
            dataSource: {
                type: "odata",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                },
                group: { field: "Country" } //group the data by 'Country' field
            }
        });
    });
</script>

Configuration

To display grouped items in the widget, group the data source component by using its group configuration. Once you define the group option, the widget automatically displays the suggestion items grouped.

Important

The grouped data will be sorted either in ascending or descending order. This behavior is expected and cannot be modified. To group the data in a specific order, use server grouping.

Customization

The widget exposes the groupTemplate and fixedGroupedTemplate templates. They enable you to configure the rendering of the group titles.

Inline Group Title

To customize the inline group title displayed next to the suggestion item in the popup element, use the groupTemplate option. The inline group title is rendered as an absolutely positioned, right-aligned group element and is displayed in every first element of each new group. The parameter that is passed to the template is the group title value.

The following example demonstrates how to define a custom group template.

Example
<div class="demo-section k-header">
    <h4>Customers</h4>
    <input id="customers" style="width: 400px" />
</div>

<script>
    $(document).ready(function() {
        $("#customers").kendoComboBox({
            height: 200,
            groupTemplate: "<strong>#:data#</strong>", //`data` is the title of the group
            dataTextField: "ContactName",
            dataValueField: "CustomerID",
            dataSource: {
                type: "odata",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                },
                group: { field: "Country" } //group the data by 'Country' field
            }
        });
    });
</script>

Fixed Group Header

To customize the group title displayed in the fixed group header positioned on top of the list, use the fixedGroupTemplate option. It shows the group title of the current visible group. The value is updated dynamically on the scroll position of the grouped list. The parameter passed to the template is the group title value.

The following example demonstrates how to define a custom fixed group template.

Example
<div class="demo-section k-header">
    <h4>Customers</h4>
    <input id="customers" style="width: 400px" />
</div>

<script>
    $(document).ready(function() {
        $("#customers").kendoComboBox({
            height: 200,
            fixedGroupedTemplate: "<strong>#:data#</strong>", //`data` is the title of the group
            dataTextField: "ContactName",
            dataValueField: "CustomerID",
            dataSource: {
                type: "odata",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                },
                group: { field: "Country" } //group the data by 'Country' field
            }
        });
    });
</script>

See Also

Other articles on the Kendo UI ComboBox:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy