# grid-grouping

> Data grid with column drag-grouping, grouping-disabled dialog, and grouped ShipCountry summaries.

**Framework:** angular  **Component:** Grid  **Variant:** grouping

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/angular/grid-grouping.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-angular-grids
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/grid-grouping/grouping.component.ts

```typescript
import { Component, OnInit, ViewChild } from '@angular/core';
import { orderDataSource } from '../data';
import { GroupService, SortService, GridComponent, EditService, ToolbarService, GridModule, PageService, FilterService } from '@syncfusion/ej2-angular-grids';
import { DialogComponent, DialogModule } from '@syncfusion/ej2-angular-popups';

@Component({
    selector: 'ej-gridgroup',
    templateUrl: 'grouping.html',
    providers: [GroupService, ToolbarService, SortService, EditService, PageService, FilterService],
    standalone: true,
    imports: [GridModule, DialogModule]
})
export class GroupComponent implements OnInit {
    public data!: Object[];
    public groupOptions!: Object;
    public pageSettings!: Object;
    public filterSettings!: Object;
    public editSettings!: Object;
    public toolbar!: string[];
    public orderidrules!: Object;
    public customeridrules!: Object;
    public freightrules!: Object;
    public editparams!: Object;
    public formatoptions!: Object;
    public refresh!: Boolean;
    @ViewChild('grid')
    public grid!: GridComponent;
    @ViewChild('alertDialog')
    public alertDialog!: DialogComponent;
    public alertHeader: string = 'Grouping';
    public hidden: Boolean = false;
    public target: string = '.control-section';
    public alertWidth: string = '300px';
    public alertContent: string = 'Grouping is disabled for this column';
    public showCloseIcon: Boolean = false;
    public animationSettings: Object = { effect: 'None' };
    public alertDlgBtnClick = () => {
        this.alertDialog.hide();
    }
    public alertDlgButtons: Object[] = [{ click: this.alertDlgBtnClick.bind(this), buttonModel: { content: 'OK', isPrimary: true } }];
    ngOnInit(): void {
        this.data = orderDataSource;
        this.groupOptions = { showGroupedColumn: false, columns: ['ShipCountry'] };
        this.pageSettings = { pageCount: 5 };
        this.filterSettings = { type: 'Excel'};
        this.editSettings = { allowEditing: true };
        this.toolbar = ['Edit', 'Update', 'Cancel'];
        this.orderidrules = { required: true, number: true };
        this.customeridrules = { required: true };
        this.freightrules = { required: true };
        this.editparams = { params: { popupHeight: '300px' } };
        this.formatoptions = { type: 'dateTime', format: 'M/d/y hh:mm a' }
    }
    dataBound() {
        if(this.refresh){
            this.grid.groupColumn('ShipCountry');
            this.refresh =false;
        }
    }
    load() {
        this.refresh = (<any>this.grid).refreshing;
    }
    created() {
        this.grid.on("columnDragStart", this.columnDragStart, this);
    }
    public columnDragStart(args: any) {
        if(args.column.field === "OrderDate"){
            this.alertDialog.show();
       }
    }
}
```

### src/components/grid-grouping/grouping.html

```html

<div class="control-section">
       <ejs-grid #grid [dataSource]='data' allowPaging='true' [allowSorting]='true' [allowFiltering]='true' [filterSettings]='filterSettings' [allowGrouping]="true" [editSettings]='editSettings' [groupSettings]="groupOptions" [toolbar]='toolbar' [pageSettings]='pageSettings'
        height="320" (dataBound)='dataBound()' (created)='created()' (load)='load()'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' width='140' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width='140' [validationRules]='customeridrules'></e-column>
            <e-column field='Freight' headerText='Freight' width='140' format='C2' textAlign='Right' editType='numericedit' [validationRules]='freightrules'></e-column>
            <e-column field='OrderDate' [allowGrouping]="false" headerText='Order Date' width='120' editType='datetimepickeredit' [format]='formatoptions' textAlign='Right'></e-column>
            <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams'></e-column>
        </e-columns>
    </ejs-grid>
    <ejs-dialog #alertDialog [buttons]='alertDlgButtons' [visible]='hidden' [header]='alertHeader' [animationSettings]='animationSettings' [content]='alertContent' [showCloseIcon]='showCloseIcon' [target]='target' [width]='alertWidth'>
    </ejs-dialog>
    <div style="margin-top: 10px; text-align: right">Source:
        <a href="https://en.wikipedia.org/wiki/List_of_prolific_inventors" target='_blank'>Wikipedia: List of Prolific inventors</a>
    </div>
</div>

```