Grouping in Angular Grid component

17 Sep 202524 minutes to read

The grouping feature in the Syncfusion Angular Grid organizes data into a hierarchical structure for easier analysis and visualization. Data can be grouped by dragging and dropping column headers into the group drop area, or through API configuration. To enable grouping, set the allowGrouping property to true and optionally configure further behaviors using the groupSettings property.

To utilize grouping, inject GroupService in the provider section of your AppModule.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, GroupService } from '@syncfusion/ej2-angular-grids'



import { Component, OnInit } from '@angular/core';
import { data } from './datasource';

@Component({
imports: [
        
        GridModule
    ],

providers: [GroupService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowGrouping]='true' height='267px'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                        <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                        <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    ngOnInit(): void {
        this.data = data;
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

• Group and ungroup columns with the groupColumn and ungroupColumn methods.
• Disable grouping for a particular column by setting columns.allowGrouping to false.

Initial group

Enable initial grouping in the Grid by assigning an array of column names to the groupSettings.columns property. This is useful for large datasets, allowing organization and immediate analysis based on specific fields.

The following example demonstrates initial grouping of CustomerID and ShipCity columns using the groupSettings.columns property.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, GroupService } from '@syncfusion/ej2-angular-grids'



import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { GroupSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule
    ],

providers: [GroupService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowGrouping]='true' [groupSettings]='groupOptions' height='267px'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                        <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                        <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public groupOptions?: GroupSettingsModel;
    ngOnInit(): void {
        this.data = data;
        this.groupOptions = { columns: ['CustomerID', 'ShipCity'] };
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Multiple columns can be grouped by specifying an array of column names in groupSettings.columns.

Prevent grouping for particular column

To prevent grouping for a specific column, assign false to the allowGrouping property of that column configuration. This ensures only allowed fields participate in grouping.

The following example shows how to disable grouping for the CustomerID column.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, GroupService } from '@syncfusion/ej2-angular-grids'



import { Component, OnInit } from '@angular/core';
import { data } from './datasource';

@Component({
imports: [
        
        GridModule
    ],

providers: [GroupService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowGrouping]='true' height='267px'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' [allowGrouping]='false' width=100></e-column>
                        <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                        <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];

    ngOnInit(): void {
        this.data = data;
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Hide drop area

The group drop area, shown by default, facilitates column drag-and-drop for grouping. To hide it, set groupSettings.showDropArea to false. This is useful for restricting changes to grouped columns after configuration.

The following sample uses the EJ2 Toggle Switch Button to control the visibility of the drop area by toggling the groupSettings.showDropArea property in response to user actions.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, GroupService } from '@syncfusion/ej2-angular-grids'
import {
    ButtonModule,
    CheckBoxModule,
    RadioButtonModule,
    SwitchModule,
} from '@syncfusion/ej2-angular-buttons'



import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GroupSettingsModel, GridComponent } from '@syncfusion/ej2-angular-grids';
import { ChangeEventArgs } from '@syncfusion/ej2-angular-buttons';

@Component({
imports: [
        
        GridModule,
        ButtonModule,
        CheckBoxModule,
        RadioButtonModule,
        SwitchModule,
    ],

providers: [GroupService],
standalone: true,
    selector: 'app-root',
    template: `
    <div>
      <label style="padding: 10px 10px">
      Hide or show drop area
      </label>
      <ejs-switch id="switch" (change)="onSwitchChange($event)"></ejs-switch>
    </div>
    <ejs-grid #grid [dataSource]='data' [allowGrouping]='true' [groupSettings]='groupOptions' height='315px'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
            <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
            <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
        </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    @ViewChild('grid')
    public grid?: GridComponent;
    public groupOptions?: GroupSettingsModel;
    ngOnInit(): void {
        this.data = data;
        this.groupOptions = { showDropArea: false, columns: ['CustomerID', 'ShipCity'] };
    }

    onSwitchChange(args: ChangeEventArgs) {
        if (args.checked) {
          (this.grid as GridComponent).groupSettings.showDropArea = true;
        } else {
          (this.grid as GridComponent).groupSettings.showDropArea = false;
        }
      }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The drop area is displayed only if at least one column is available for grouping.

Show the grouped column

By default, grouped columns are hidden in the Grid view. To display them alongside grouped data, set groupSettings.showGroupedColumn to true.

In the following example, the EJ2 Toggle Switch Button component is added to hide or show the grouped columns. When the switch is toggled, the change event is triggered and the groupSettings.showGroupedColumn property of the grid is updated accordingly.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, GroupService,GroupSettingsModel, GridComponent } from '@syncfusion/ej2-angular-grids'
import { ButtonModule,CheckBoxModule,RadioButtonModule,SwitchModule,ChangeEventArgs } from '@syncfusion/ej2-angular-buttons'
import { Component, OnInit,ViewChild } from '@angular/core';
import { data } from './datasource';

@Component({
imports: [ GridModule,ButtonModule,CheckBoxModule,RadioButtonModule,SwitchModule],
providers: [GroupService],
standalone: true,
  selector: 'app-root',
  template: `
    <div>
      <label style="padding: 10px 10px">
      Hide or show grouped columns
      </label>
      <ejs-switch id="switch" (change)="onSwitchChange($event)"></ejs-switch>
    </div>
    <ejs-grid #grid style="padding: 10px 10px" [dataSource]='data' [allowGrouping]='true' [groupSettings]='groupOptions' height='315px'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
        <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
        <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
      </e-columns>
      </ejs-grid>`
})
export class AppComponent implements OnInit {

  public data?: object[];
  @ViewChild('grid')
  public grid?: GridComponent;
  public groupOptions?: GroupSettingsModel;

  ngOnInit(): void {
    this.data = data;
    this.groupOptions = { showGroupedColumn: true, columns: ['CustomerID', 'ShipCity'] };
  }

  onSwitchChange(args: ChangeEventArgs) {
    if (args.checked) {
      (this.grid as GridComponent).groupSettings.showGroupedColumn = false;
    } else {
      (this.grid as GridComponent).groupSettings.showGroupedColumn = true;
    }
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Reordering on grouped columns

Reorder grouped columns by dragging and dropping grouped header cells in the drag area. Changing the sequence updates the grouping hierarchy, and columns can be inserted at any group position. Enable this capability by setting groupSettings.allowReordering to true.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, GroupService } from '@syncfusion/ej2-angular-grids'


import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { GroupSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule
    ],

providers: [GroupService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' [allowGrouping]='true' [groupSettings]='groupSettings' height='260px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public groupSettings?: GroupSettingsModel = { columns: ['ShipCity'], allowReordering: true };
    ngOnInit(): void {
        this.data = data;
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Sort grouped columns in descending order during initial grouping

By default, grouped columns are sorted in ascending order. However, you can sort them in descending order during initial grouping by setting the field and direction in the sortSettings.columns property.

The following example demonstrates how to sort the CustomerID column by setting the sortSettings.columns property to Descending during the initial grouping of the grid.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, GroupService, SortService } from '@syncfusion/ej2-angular-grids'

import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { GroupSettingsModel,SortSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule
    ],

providers: [GroupService, SortService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' [allowGrouping]='true' [allowSorting]='true' [sortSettings]='sortOptions'  [groupSettings]='groupOptions' height='267px'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                        <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                        <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
                    </e-columns>
                </ejs-grid>`
})

export class AppComponent implements OnInit {

    public data?: object[];
    public groupOptions?: GroupSettingsModel;
    public sortOptions?: SortSettingsModel;
    
    ngOnInit(): void {
        this.data = data;
        this.groupOptions = { columns: ['CustomerID'] };
        this.sortOptions = { columns: [{ field: 'CustomerID', direction: 'Descending' }] };
    }

}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Group with paging

Grouping can be combined with paging to aggregate and summarize visible items on the current page. By default, group footers and caption footers reflect only current page aggregates. To aggregate across the entire dataset, set groupSettings.disablePageWiseAggregates to false.

With remote data, grouping requests may trigger additional queries for aggregates and item counts.

Group by format

Group numeric or datetime columns based on formatted values using the enableGroupByFormat property for the column. This organizes records by format patterns, such as currency or date formats.

Below is an example demonstrating formatted grouping with the OrderDate and Freight columns.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, GroupService } from '@syncfusion/ej2-angular-grids'



import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { GroupSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule
    ],

providers: [GroupService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowGrouping]='true' [groupSettings]='groupOptions' height='315px'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                        <e-column field='OrderDate' headerText='Order Date' format='yMMM' [enableGroupByFormat]='true' width=100></e-column>
                        <e-column field='Freight' headerText='Freight' format='C2' [enableGroupByFormat]='true' width=80></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public groupOptions?: GroupSettingsModel;
    ngOnInit(): void {
        this.data = data;
        this.groupOptions = { showDropArea: false, columns: ['OrderDate', 'Freight'] };
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Group numeric columns by formats such as currency or percentage, and date columns by specific format patterns.

Collapse all grouped rows at initial rendering

The Syncfusion Angular Grid allows you to expand or collapse grouped rows for summarized or detailed views. Collapse all grouped rows at initial render using the dataBound event in conjunction with the collapseAll or groupCollapseAll methods.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, GroupService } from '@syncfusion/ej2-angular-grids'



import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule
    ],

providers: [GroupService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' [allowGrouping]='true' [groupSettings]='groupOptions'
                (dataBound)='dataBound()' height='267px'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                        <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                        <e-column field='ShipName' headerText='Ship Name' width=110></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public initial: boolean = true;
    public groupOptions?: object;
    @ViewChild('grid')
    public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data;
        this.groupOptions = { columns: ['ShipCity'] };
    }
    dataBound() {
        if (this.initial === true) {
            (this.grid as GridComponent).groupModule.collapseAll();
            this.initial = false;
        }
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You can also collapse all the grouped rows at the initial rendering using the groupCollapseAll method inside the dataBound event. This is demonstrated in the below code snippet,

    dataBound() {
        if (this.initial === true) {
            (this.grid as GridComponent).groupCollapseAll();
            this.initial = false;
        }
    }

The collapse all approach is suggested for a limited number of records since collapsing every grouped record takes some time. If you have a large dataset, it is recommended to use lazy-load grouping. This approach is also applicable for the groupExpandAll method.

Group or ungroup column externally

Columns can also be grouped or ungrouped programmatically via groupColumn and ungroupColumn methods. This allows for dynamic grouping via external UI elements.

The following demonstration uses a DropDownList for column selection and triggers group or ungroup actions with external buttons.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, GroupService } from '@syncfusion/ej2-angular-grids'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component, OnInit,ViewChild } from '@angular/core';
import { data } from './datasource';
import { GroupSettingsModel,GridComponent } from '@syncfusion/ej2-angular-grids';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';

@Component({
imports: [
        
        GridModule,
        ButtonModule,
        DropDownListAllModule
    ],

providers: [GroupService],
standalone: true,
    selector: 'app-root',
    template: `
    <div style="display: flex">
      <label style="padding: 30px 20px 0 0"> Column name :</label>
      <ejs-dropdownlist
        #dropdown
        style="padding: 26px 0 0 0"
        index="0"
        width="120"
        [dataSource]="columns"
        [fields]="field"
      ></ejs-dropdownlist>
    </div>
    <button
      style="margin-top: 10px "
      ejs-button
      id="button"
      cssClass="e-outline"
      (click)="groupColumn()"
    >
      Group column
    </button>
    <button
      style="margin-top: 10px "
      ejs-button
      id="button"
      cssClass="e-outline"
      (click)="unGroupColumn()"
    >
      UnGroup column
    </button>
    <ejs-grid #grid style="padding: 10px 10px" [dataSource]='data' [allowGrouping]='true' [groupSettings]='groupOptions' height='315px'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
            <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
            <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
        </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public groupOptions?: GroupSettingsModel;
    @ViewChild('grid')
    public grid?: GridComponent;
    @ViewChild('dropdown') public dropDown?: DropDownListComponent;
    ngOnInit(): void {
        this.data = data;
        this.groupOptions = { showDropArea: false, columns: ['CustomerID', 'ShipCity'] };
    }

    public columns?: object[] = [
        { text: 'CustomerID', value: 'CustomerID' },
        { text: 'OrderID', value: 'OrderID' },
        { text: 'Ship City', value: 'ShipCity' },
        { text: 'Ship Name', value: 'ShipName' },
      ];
      public field?: object = { text: 'text', value: 'value' };
  
      groupColumn() {
        (this.grid as GridComponent).groupColumn((this.dropDown as DropDownListComponent).value as string);
      }
    
      unGroupColumn() {
        (this.grid as GridComponent).ungroupColumn((this.dropDown as DropDownListComponent).value as string);
      }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Expand or collapse externally

Control over group expansion and collapse can be achieved externally through the Grid’s API.

Expand or collapse all grouped rows

Grid provides an ability to expand or collapse grouped rows using groupExpandAll and groupCollapseAll methods respectively.

In the following example, the EJ2 Toggle Switch Button component is added to expand or collapse grouped rows. When the switch is toggled, the change event is triggered and the groupExpandAll and groupCollapseAll methods are called to expand or collapse grouped rows.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, GroupService } from '@syncfusion/ej2-angular-grids'
import {
    ButtonModule,
    CheckBoxModule,
    RadioButtonModule,
    SwitchModule,
} from '@syncfusion/ej2-angular-buttons'



import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GroupSettingsModel, GridComponent } from '@syncfusion/ej2-angular-grids';
import { ChangeEventArgs } from '@syncfusion/ej2-angular-buttons';

@Component({
imports: [
        
        GridModule,
        ButtonModule,
        CheckBoxModule,
        RadioButtonModule,
        SwitchModule,
    ],

providers: [GroupService],
standalone: true,
    selector: 'app-root',
    template: `
    <div>
        <label style="padding: 10px 10px">
        Expand or collapse rows 
        </label>
        <ejs-switch id="switch" (change)="onSwitchChange($event)"></ejs-switch>
    </div>
    <ejs-grid #grid style="padding: 10px 10px" [dataSource]='data' [allowGrouping]='true' [groupSettings]='groupOptions' height='315px'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
            <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
            <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
        </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public groupOptions?: GroupSettingsModel;
    @ViewChild('grid')
    public grid?: GridComponent;
    ngOnInit(): void {
        this.data = data;
        this.groupOptions = { showDropArea: false, columns: ['CustomerID', 'ShipCity'] };
    }

    onSwitchChange(args: ChangeEventArgs) {
        if (args.checked) {
            (this.grid as GridComponent).groupCollapseAll();
        } else {
            (this.grid as GridComponent).groupExpandAll();
        }
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Expand or collapse selected grouped row

Expanding or collapsing selected grouped rows in a Syncfusion Angular Grid involves implementing the functionality to expand or collapse grouped records programatically.

To enable the expand and collapse functionality for grouped rows in a grid, you can utilize the expandCollapseRows method. This method is designed to handle two scenarios such as expanding collapsed grouped records and collapsing expanded grouped records.

To implement this functionality, follow these steps:

1. Include an input element to capture the grouped row index.
2. Add a button element with a click event binding to trigger the onExpandCollapseButtonClick method. This method retrieve the grouped rows from the grid’s content table using the querySelectorAll method.
3. Check if there are any grouped rows available.
4. If grouped rows exist, locate the group caption element based on the entered row index.
5. Call the expandCollapseRows method of the grid’s group module, passing the group caption element to toggle its expand/collapse state.

The following example demonstrates the function that collapses the selected row using an external button click.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, GroupService } from '@syncfusion/ej2-angular-grids'
import { FormsModule } from '@angular/forms'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GroupSettingsModel, GridComponent } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule,
        FormsModule,
        ButtonModule
    ],

providers: [GroupService],
standalone: true,
    selector: 'app-root',
    template: `
    <div style="display:flex">
    <input
      type="number"
      [(ngModel)]="groupedRowIndex"
      placeholder="Enter Grouped Row Index"
    />
    <button ejs-button (click)="onExpandCollapseButtonClick()">
      Collapse or Expand Row
    </button>
    </div>
    <div style="padding-top:5px">
      <p style="color:red; ">{{ message }}</p>
    </div>
  
  <ejs-grid #grid style="padding-top: 5px" [dataSource]='data' [allowGrouping]='true' [groupSettings]='groupSettings' height='240px'>
    <e-columns>
      <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90 [allowGrouping]='false'></e-column>
      <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
      <e-column field='ShipCity' headerText='Ship City' width=100 [allowGrouping]='false'></e-column>
      <e-column field='ShipName' headerText='Ship Name' width=120 [allowGrouping]='false'></e-column>
    </e-columns>
  </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public groupSettings?: GroupSettingsModel;
    public groupedRowIndex?: number;
    public message?:string
    @ViewChild('grid')
    public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data;
        this.groupSettings = { columns: ['CustomerID'] };
    }

   onExpandCollapseButtonClick() {
      const groupedRows = Array.from(
      (this.grid as GridComponent)
        .getContentTable()
        .querySelectorAll('.e-recordplusexpand, .e-recordpluscollapse')
    );

    if (groupedRows.length >= 0 && (this.groupedRowIndex as number) < groupedRows.length) {
      this.message = '';
      const groupCaptionElement = groupedRows[this.groupedRowIndex as number];
      (this.grid as GridComponent).groupModule.expandCollapseRows(groupCaptionElement);
    } else {
      (this.message as string) =
        'The entered index exceeds the total number of grouped rows. Please enter a valid grouped index.';
    }
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Clear grouping

Remove all grouped columns with the clearGrouping method. This provides a straightforward way to reset grouping and return to a standard view.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, GroupService } from '@syncfusion/ej2-angular-grids'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component, OnInit,ViewChild } from '@angular/core';
import { data } from './datasource';
import { GroupSettingsModel, GridComponent } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule,
        ButtonModule
    ],

providers: [GroupService],
standalone: true,
    selector: 'app-root',
    template: `
    <button ejs-button id="button" cssClass="e-outline" (click)="onExternalGroup()"> Clear Grouping </button>
    <ejs-grid #grid style="padding: 10px 10px" [dataSource]='data' [allowGrouping]='true' [groupSettings]='groupOptions' height='315px'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
            <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
            <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
        </e-columns>
    </ejs-grid>`,
})
export class AppComponent implements OnInit {

    public data?: object[];
    public groupOptions?: GroupSettingsModel;
    @ViewChild('grid')
    public grid?: GridComponent;
    ngOnInit(): void {
        this.data = data;
        this.groupOptions = { columns: ['CustomerID', 'ShipCity'] };
    }

    onExternalGroup(){
        (this.grid as GridComponent).clearGrouping();
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Grouping Events

The Syncfusion Angular Grid triggers events during grouping actions, including actionBegin and actionComplete. Use actionBegin to hook into the start of a group action (e.g., to cancel or modify the action), and actionComplete to run logic after completion (e.g., displaying messages or updating state).

1. actionBegin event: Triggered before a group action starts. Provides grid state, current group field, requestType, and more.
2. actionComplete event: Triggered after a group action completes. Includes grouped data and configuration in the event args.

Below, the actionBegin event cancels grouping for the OrderID column, while actionComplete displays a status message.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, GroupService } from '@syncfusion/ej2-angular-grids'

import { Component, OnInit, } from '@angular/core';
import { data } from './datasource';
import { GroupEventArgs, GroupSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [
        
        GridModule
    ],

providers: [GroupService],
standalone: true,
    selector: 'app-root',
    template: `
    <div style="margin-left:100px;"><p style="color:red;" id="message">{{message}}</p></div>
    <ejs-grid [dataSource]='data' [allowGrouping]='true' [groupSettings]='groupSettings' (actionComplete)='actionComplete($event)' (actionBegin)='actionBegin($event)' height='260px'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
            <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
            <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
        </e-columns>        
    </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public groupSettings?: GroupSettingsModel;
    public message?: string
    ngOnInit(): void {
        this.data = data;
    }

    actionBegin(args: GroupEventArgs) {
        if (args.requestType === 'grouping' && args.columnName === 'OrderID') {
            args.cancel = true
            this.message = args.requestType + ' action is cancelled for ' + args.columnName + ' column';
        }
    }

    actionComplete(args: GroupEventArgs) {
        if (args.requestType === 'grouping') {
            this.message = args.requestType + ' action completed for ' + args.columnName + ' column';
        }
        else {
            this.message = ''
        }
    }

}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The args.requestType property represents the name of the current action being performed. For instance, during grouping, the args.requestType value will be grouping.

Limitations

• Grouping is not compatible with Autofill functionality.

See also

• Exporting grouped records
• How to enable lazy load grouping in Grid
• How can I do client side grouping by async pipe in Angular Grid
• How to perform initial grouping by using the async pipe in Angular Grid