Search results

Grouping

The Grid has options to group records by dragging and dropping the column header to the group drop area. When grouping is applied, grid records are organized into a hierarchical structure to facilitate easier expansion and collapse of records.

To enable grouping in the grid, set the allowGrouping as true. Grouping options can be configured through the groupSettings.

To Group, inject Group module in the grid.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GridComponent, Inject, ColumnsDirective, ColumnDirective, Group } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';

class App extends React.Component<{}, {}>{
    render(){
        return <GridComponent  dataSource={data} allowGrouping={true} height={267}>
                  <ColumnsDirective>
                    <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right"></ColumnDirective>
                    <ColumnDirective field='CustomerID' headerText='Customer ID' width='150'></ColumnDirective>
                    <ColumnDirective field='ShipCity' headerText='Ship City' width='150'></ColumnDirective>
                    <ColumnDirective field='ShipName' headerText='Ship Name' width='150'></ColumnDirective>
                </ColumnsDirective>
                <Inject services={[Group]}/>
            </GridComponent >
        }
};
ReactDOM.render(<App />, document.getElementById('grid'));

Initial group

To apply group at initial rendering, set the column field name in the groupSettings.columns.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GridComponent, Inject, ColumnsDirective, ColumnDirective, Group, GroupSettingsModel } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';

class App extends React.Component<{}, {}>{

    public groupOptions : GroupSettingsModel = { columns: ['CustomerID', 'ShipCity'] };

    render(){
        return <GridComponent  dataSource={data} allowGrouping={true} groupSettings={this.groupOptions} height={267}>
                  <ColumnsDirective>
                    <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right"></ColumnDirective>
                    <ColumnDirective field='CustomerID' headerText='Customer ID' width='150'></ColumnDirective>
                    <ColumnDirective field='ShipCity' headerText='Ship City' width='150'></ColumnDirective>
                    <ColumnDirective field='ShipName' headerText='Ship Name' width='150'></ColumnDirective>
                </ColumnsDirective>
                <Inject services={[Group]}/>
            </GridComponent >
        }
};
ReactDOM.render(<App />, document.getElementById('grid'));

Hide drop area

To avoid ungrouping or further grouping of a column after initial column grouping, define the groupSettings.showDropArea as false.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GridComponent, Inject, ColumnsDirective, ColumnDirective, Group, GroupSettingsModel } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';

class App extends React.Component<{}, {}>{

    public groupOptions : GroupSettingsModel = { showDropArea: false, columns: ['CustomerID', 'ShipCity'] };

    render(){
        return <GridComponent  dataSource={data} allowGrouping={true} groupSettings={this.groupOptions} height={315}>
                  <ColumnsDirective>
                    <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right"></ColumnDirective>
                    <ColumnDirective field='CustomerID' headerText='Customer ID' width='150'></ColumnDirective>
                    <ColumnDirective field='ShipCity' headerText='Ship City' width='150'></ColumnDirective>
                    <ColumnDirective field='ShipName' headerText='Ship Name' width='150'></ColumnDirective>
                </ColumnsDirective>
                <Inject services={[Group]}/>
            </GridComponent >
        }
};
ReactDOM.render(<App />, document.getElementById('grid'));

Group with Paging

On grouping columns with paging feature, the aggregated information and total items are displayed based on the current page. The grid does not consider aggregated information and total items from other pages. To get additional details (aggregated information and total items) from other pages, set the groupSettings.disablePageWiseAggregates to false.

If remote data is bound to grid dataSource, two requests will be sent when performing grouping action; one for getting the grouped data and another for getting aggregate details and total items count.

Group by format

By default, columns will be grouped by the data or value present for the particular row. To group numeric or datetime column based on the mentioned format, you have to enable the enableGroupByFormat property of the corresponding grid columns.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GridComponent, Inject, ColumnsDirective, ColumnDirective, Group, GroupSettingsModel } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';

class App extends React.Component<{}, {}>{

    public groupOptions : GroupSettingsModel = { showDropArea: false, columns: ['OrderDate', 'Freight'] };

    render(){
        return <GridComponent  dataSource={data} allowGrouping={true} groupSettings={this.groupOptions} height={315}>
                  <ColumnsDirective>
                    <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right"></ColumnDirective>
                    <ColumnDirective field='CustomerID' headerText='Customer ID' width='150'></ColumnDirective>
                    <ColumnDirective field='OrderDate' headerText='Order Date' format='yMMM' enableGroupByFormat={true} width='150'></ColumnDirective>
                    <ColumnDirective field='Freight' headerText='Freight' format='C2' enableGroupByFormat={true} width='150'></ColumnDirective>
                </ColumnsDirective>
                <Inject services={[Group]}/>
            </GridComponent >
        }
};
ReactDOM.render(<App />, document.getElementById('grid'));

Grouping events

During the group action, the grid component triggers two events. The actionBegin event triggers before the group action starts and the actionComplete event triggers after the group action is completed. Using these events you can perform any action.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GridComponent, Inject, ColumnsDirective, ColumnDirective, Group, GroupSettingsModel } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';

class App extends React.Component<{}, {}>{

    public groupOptions : GroupSettingsModel = { columns: ['CustomerID'] };
    public actionHandler (args: ActionEventArgs) {
        alert(args.requestType + ' ' + args.type); //Custom Action
    }

    render(){
        return (<div>
                <GridComponent  dataSource={data} allowGrouping={true} groupSettings={this.groupOptions} actionBegin={this.actionHandler.bind(this)}
                actionComplete={this.actionHandler.bind(this)} height={280}>
                  <ColumnsDirective>
                    <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right"></ColumnDirective>
                    <ColumnDirective field='CustomerID' headerText='Customer ID' width='150'></ColumnDirective>
                    <ColumnDirective field='ShipCity' headerText='Ship City' width='150'></ColumnDirective>
                    <ColumnDirective field='ShipName' headerText='Ship Name' width='150'></ColumnDirective>
                </ColumnsDirective>
                <Inject services={[Group]}/>
            </GridComponent ></div>)
        }
};
ReactDOM.render(<App />, document.getElementById('grid'));

args.requestType is current action name. For example in grouping, the args.requestType value is ‘grouping’.

Collapse By External Button

You can collapse the selected group from an external button by invoking expandCollapseRows method.

Source
Preview
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GridComponent, Inject, ColumnsDirective, ColumnDirective, Group, GroupSettingsModel } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

class App extends React.Component<{}, {}>{
    private grid: GridComponent;
    public groupOptions : GroupSettingsModel = { columns: ['CustomerID'] };
    public collapse() {
        if (this.grid.getSelectedRowIndexes().length) {
            let currentTr: HTMLElement = this.grid.getRows()[this.grid.getSelectedRowIndexes()[0]];
            while (currentTr.classList && currentTr.classList.length){
                currentTr = currentTr.previousSibling;
            }
            let collapseElement = currentTr.querySelector('.e-recordplusexpand');
            this.grid.groupModule.expandCollapseRows(collapseElement); //Pass the collapse row element.
        }
    }

    render(){
        return (<div>
                <ButtonComponent value='collapse' className= {'e-flat'} onClick= { this.collapse.bind(this)}>Collapse</ButtonComponent>
                <GridComponent  dataSource={data} allowGrouping={true} groupSettings={this.groupOptions} height={240} ref={g=> this.grid = g}>
                  <ColumnsDirective>
                    <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right"></ColumnDirective>
                    <ColumnDirective field='CustomerID' headerText='Customer ID' width='150'></ColumnDirective>
                    <ColumnDirective field='ShipCity' headerText='Ship City' width='150'></ColumnDirective>
                    <ColumnDirective field='ShipName' headerText='Ship Name' width='150'></ColumnDirective>
                </ColumnsDirective>
                <Inject services={[Group]}/>
            </GridComponent ></div>)
        }
};
ReactDOM.render(<App />, document.getElementById('grid'));

See Also