@progress/kendo-dropdowns-react-wrapper/docs/autocomplete/grouping.md

Kendo UI DropDowns wrapper for React

---
title: Grouping
page_title: Grouping - AutoComplete - Kendo UI Wrappers for React
description: "Group the data during input while using the Kendo UI AutoComplete wrapper for React."
slug: grouping_autocomplete
position: 4
---

# Grouping

Grouping allows you to display data items which are categorized by a specific model field.

For more information on the data source grouping functionality, refer to the article on the [`group`](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-group) configuration.

## Basic Configuration

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

To display grouped items in the AutoComplete, group the Data Source component by using its [`group`](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-group) option. Once defined, the component automatically displays the grouped suggestion items.

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

```jsx-preview
class AutoCompleteContainer extends React.Component {
    constructor(props) {
        super(props);
        this.fixedGroupedTemplate = "<strong>#:data# 111</strong>"
        this.dataSource = new kendo.data.DataSource({
            type: "odata",
            transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
            },
            group: { field: "Country" } //group the data by 'Country' field
        })
        this.dataTextField = "ContactName"
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-10 example-col">
                   <AutoComplete dataSource={this.dataSource}
                                dataTextField={this.dataTextField}
                                fixedGroupedTemplate={this.fixedGroupedTemplate}
                                autoWidth={true}/>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <AutoCompleteContainer />,
    document.querySelector('my-app')
);
```

## Customization

To configure the rendering of the group titles, use the [`groupTemplate`](http://docs.telerik.com/kendo-ui/api/javascript/ui/AutoComplete#configuration-groupTemplate) and [`fixedGroupedTemplate`](http://docs.telerik.com/kendo-ui/api/javascript/ui/AutoComplete#configuration-fixedGroupTemplate) templates of the component.

## Suggested Links

* [Kendo UI Data Source Component](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-group)
* [Kendo UI AutoComplete for jQuery](https://docs.telerik.com/kendo-ui/controls/editors/autocomplete/overview)
* [API Reference of the AutoComplete Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/autocomplete)