Search results

Collapse all grouped rows at initial render

You can collapse all the grouped rows at initial rendering by using dataBound event with collapseAll method of the grid.

In the below demo, all the grouped rows are collapsed at initial rendering.

import { ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { Grid, Group, GroupSettingsModel } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';

export default class App extends React.Component<{}, {}> {
  public initial = true;
  public groupOptions : GroupSettingsModel = { columns: ['ShipCity'] };
  public gridObj: Grid | null;

  public dataBound():void {
    if (this.gridObj && this.initial === true) {
      this.initial = false;

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