HelpBot Assistant

How can I help you?

Grouping in Angular Grid Component

19 Mar 202624 minutes to read

The grouping feature in the Syncfusion® Angular Grid enables data to be organized into a hierarchical structure, allowing records to be expanded and collapsed for improved readability and analysis.

The group feature is enabled by injecting the GroupService to the providers array.

To enable grouping, set the allowGrouping property to true. When grouping is enabled, column headers can be dragged into the group drop area to organize data.

The groupSettings property provides options to customize grouping behavior, such as:

  • Showing or hiding the group drop area.
  • Controlling how grouped columns are displayed.
  • Defining custom caption templates for grouped rows.
import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { GridModule, GroupService } from '@syncfusion/ej2-angular-grids';

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

  • Columns can be grouped and ungrouped dynamically using the groupColumn and ungroupColumn methods.
  • To disable grouping for a specific column, set the allowGrouping property to false in column configuration.

Initial group

Initial grouping in the grid is configured by assigning an array of column field names to the groupSettings.columns property. This approach is effective for organizing large datasets based on predefined criteria.

The example below demonstrates grouping by “Customer ID” and “Ship City”, rendering the grid with data structured in a two-level hierarchy first by “Customer ID”, followed by “Ship City” within each group.

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { GridModule, GroupService, 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'] };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

To group multiple columns, specify an array of column names in the groupSettings.columns property.

Prevent grouping for particular column

Columns that contain unique identifiers or sensitive information may not be suitable for grouping. In such cases, grouping can be disabled by setting the allowGrouping property to false in the column configuration, preventing the column header from being placed in the group drop area.

The following example prevents grouping on the “Customer ID” column. While other columns can be grouped, “Customer ID” cannot be dragged to the group drop area.

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

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

Hide drop area

By default, the Grid shows a drop area container where column headers can be dragged to configure grouping or ungrouping. In scenarios where grouping through the drag-and-drop interface is not required, this drop area can be hidden.

To disable the group drop area container, set the groupSettings.showDropArea property to false. This hides the drop area from the UI, while still allowing grouping to be managed programmatically using the Grid groupColumn and ungroupColumn methods if needed.

In this example, the Syncfusion Angular® Switch Button component is used to dynamically show or hide the group drop area. When the switch is toggled, the change event updates the Grid’s groupSettings.showDropArea property to either display or hide the drop area.

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

@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='270px'>
        <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;
        }
      }
}
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, when a column is grouped in the Grid, that column is hidden from the display. This keeps the layout clean and makes grouped rows easier to read. To keep grouped columns visible, set the groupSettings.showGroupedColumn property to true.

In the example below, a Syncfusion Angular® Toggle Switch Button component is used to control this setting. When the switch is toggled, the change event updates the Grid’s groupSettings.showGroupedColumn property, showing or hiding the grouped columns as needed.

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

@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='250px'>
      <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;
    }
  }
}
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

By default, grouped columns follow the order in which they are added to the group drop area. Because grouping order determines the hierarchy of data organization, modifying this order can present different structural views. For example, grouping by “Region” before “Sales Person” produces a different arrangement than the reverse.

To allow reordering, set groupSettings.allowReordering to true. This enables drag-and-drop rearrangement of grouped column badges, and the grid dynamically updates the data hierarchy to reflect the new order.

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { GridModule, GroupService, 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;
    }
}
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

Grouped columns are sorted in ascending order by default (A–Z, 0–9, oldest to newest). To display grouped values in descending order such as showing the most recent dates or highest values first (Z–A, 9–0, newest to oldest), configure the sortSettings.columns property with the appropriate field and set its direction to Descending.

The following example demonstrates sorting the “Customer ID” column in descending order during the grid’s initial load.

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { GridModule, GroupService, GroupSettingsModel, SortService, 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' }] };
    }

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

Group with paging

The Grid component supports column grouping in combination with paging. When grouping is enabled, aggregated values and item counts are calculated based on the current page by default. As a result, group footers and caption summaries reflect only the visible page data. To include aggregate values and total item counts across all pages, set the groupSettings.disablePageWiseAggregates property to false.

When using remote data binding, enabling this option triggers two separate requests during grouping:

  • One to retrieve grouped data.
  • Another to fetch aggregate values and total item counts.

Group by format

By default, grouping is based on the raw data values of each row. For numeric or datetime columns, grouping can also be performed using a specified format for example, grouping dates by month or numbers by range. To enable this behavior, set the enableGroupByFormat property on the corresponding column. This allows the grid to group values based on their specific format.

The following example demonstrates grouping the “Order Date” and “Freight” columns using formatted values.

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { GridModule, GroupService, 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'] };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Numeric columns can be grouped based on formats such as currency or percentage, while datetime columns can be grouped based on specific date or time formats.

Show grouped rows based on page size

In the Syncfusion® Angular Grid, controlling the number of grouped rows per page is useful when working with grouped data and a fixed page size.

By default, the pageSize setting applies to individual grid rows, not grouped rows. To show grouped column rows based on the pageSize, a custom implementation can be used.

This can be achieved by customizing the generateQuery method of the “Data prototype”, allowing the query logic to be modified for grouped row pagination.

Collapse all grouped rows at initial rendering

The Syncfusion® Angular Grid provides the ability to expand or collapse grouped rows, enabling better control over data visibility. This is especially useful for large datasets where an initial summarized view is preferred.

To collapse all grouped rows on initial render, use the dataBound event in combination with the collapseAll method. This is shown in the example below.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent, GridModule, GroupService } 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;
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

All grouped rows can also be collapsed at the initial rendering using the groupCollapseAll method within the dataBound event. The following code snippet demonstrates this approach:

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

The collapse all approach is recommended for a limited number of records since collapsing every grouped record requires time. For large datasets, lazy-load grouping is recommended to optimize performance. This approach is also applicable to the groupExpandAll method.

Group or ungroup column externally

The Syncfusion® Angular Grid supports both interactive and programmatic approaches to column grouping. Columns can be grouped manually via drag-and-drop or programmatically using the groupColumn and ungroupColumn methods.

The following example demonstrates implementing programmatic grouping and ungrouping using the DropDownList component for column selection. When the corresponding button is activated, the selected column is grouped or ungrouped using the appropriate API method.

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

@Component({
  imports: [ GridModule,ButtonModule, DropDownListAllModule ],
  providers: [GroupService],
  standalone: true,
    selector: 'app-root',
    template: `
    <div style="display: flex">
      <label style="padding: 5px 5px 0 0"> Column name :</label>
      <ejs-dropdownlist
        #dropdown
        index="0"
        width="120"
        [dataSource]="columns"
        [fields]="field"
      ></ejs-dropdownlist>
    </div>
    <button
      style="margin-top: 5px "
      ejs-button
      id="button"
      cssClass="e-outline"
      (click)="groupColumn()"
    >
      Group column
    </button>
    <button
      style="margin-top: 5px "
      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='250px'>
        <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);
      }
}
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

The Syncfusion® Angular Grid supports external control of grouped row visibility through programmatic expand and collapse. This functionality can be integrated using the grid’s methods to manage grouped data display dynamically.

Expand or collapse all grouped rows

The Syncfusion® Angular Grid enables programmatic expand and collapse of all grouped rows using the groupExpandAll and groupCollapseAll methods.

In the example below, the EJ2 Toggle Switch Button component is used to control the visibility of grouped rows. When toggled, the change event triggers the appropriate method to expand or collapse all groups accordingly.

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

@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='295px'>
        <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();
        }
    }
}
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

The Syncfusion® Angular Grid allows programmatic expand or collapse of specific grouped rows through the expandCollapseRows method, which toggles the state of a targeted group caption row based on its current visibility.

To implement this functionality, follow these steps:

  • Capture the grouped row index via an input field.
  • Use a button to trigger a method.
  • Retrieve grouped rows using querySelectorAll method.
  • Identify the target group caption element by index.
  • Call expandCollapseRows to toggle its state.

The example below demonstrates collapsing a selected grouped row using an external button.

import { GridModule, GroupService,GroupSettingsModel, GridComponent } 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';

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

Clear grouping

The Syncfusion® Angular Grid provides a clearGrouping method to remove all grouped columns programmatically. This is useful for resetting the grid to an ungrouped state.

The following example demonstrates executing clearGrouping through an external button click.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { GridComponent, GridModule, GroupService, GroupSettingsModel } 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: 5px 5px" [dataSource]='data' [allowGrouping]='true' [groupSettings]='groupOptions' height='245px'>
        <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();
    }
}
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 provides two key events for handling grouping operations. These events enable the integration of custom logic before and after a grouping action:

  • actionBegin: Triggered before a grouping action starts. It provides details such as the group field name and requestType, allowing conditional logic or cancellation.
  • actionComplete: Triggered after a grouping action completes. It exposes the updated grid state for post-processing tasks like UI updates or data handling.

The following example demonstrates canceling grouping for the “Order ID” column using actionBegin and displaying a status message via actionComplete.

import { Component, OnInit, } from '@angular/core';
import { data } from './datasource';
import { GridModule, GroupService,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 = ''
        }
    }

}
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 feature.

See also