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

Kendo UI DropDowns wrapper for React

---
title: Grouping
page_title: Grouping - MultiSelect - Kendo UI Wrappers for React
description: "Group the data during input while using the Kendo UI MultiSelect wrapper for React."
slug: grouping_multiselect
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 [group configuration article](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-group).

## Basic Configuration

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

To display grouped items in the MultiSelect, 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 MultiSelectContainer 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"
        this.dataValueField = "CustomerID"
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                   <MultiSelect dataSource={this.dataSource}
                                dataTextField={this.dataTextField}
                                dataValueField={this.dataValueField}
                                fixedGroupedTemplate={this.fixedGroupedTemplate}
                                autoWidth={true} height={250}/>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <MultiSelectContainer />,
    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/multiselect#configuration-groupTemplate) and [`fixedGroupedTemplate`](http://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect#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 MultiSelect for jQuery](https://docs.telerik.com/kendo-ui/controls/editors/multiselect/overview)
* [API Reference of the MultiSelect Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect)