# grid-grouping

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

**Framework:** javascript  **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/javascript/grid-grouping.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-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.html

```html
<!-- custom code start -->
<style>
    .datalink {
        text-align: right;
        padding-top: 25px;
    }
    @media screen and (max-width: 480px) {
        .datalink {
            padding-bottom: 0;
            padding-top: 15px;
        }
    }
    .e-bigger .control-section.dialog-container {
        min-height: 250px;
    }
</style>
<!--  custom code end-->
<div class="control-section dialog-container">
    <div class="content-wrapper">
        <div id="Grid"></div>
        <div id= "alertDialog"></div>
        <div class="datalink">Source:
            <a href="https://en.wikipedia.org/wiki/List_of_prolific_inventors " 
            target="_blank">Wikipedia: List of Prolific inventors</a>
        </div>
    </div>
</div>
```

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

```typescript
import { Grid, Sort, Page, Selection, Group, Edit, Toolbar, Filter } from '@syncfusion/ej2-grids';
import {  orderDataSource } from '../data-source';
import { Dialog } from '@syncfusion/ej2-popups';

Grid.Inject(Sort, Page, Selection, Group, Edit, Toolbar, Filter);

/**
 * Grouping sample
 */
(window as any).default = (): void => {
    let refresh: Boolean;
    let alertDialogObj: Dialog = new Dialog({
        header: 'Grouping',
        content: 'Grouping is disabled for this column',
        showCloseIcon: false,
        target: '.control-section',
        buttons: [{
            click: alertDlgBtnClick, buttonModel: { content: 'OK', isPrimary: true }
        }],
        width: '300px',
        visible: false,
        animationSettings: { effect: 'None' }
    });
    alertDialogObj.appendTo('#alertDialog');
    function alertDlgBtnClick(): void {
        alertDialogObj.hide();
    }
    let grid: Grid = new Grid({
        dataSource: orderDataSource,
        editSettings: { allowEditing: true },
        toolbar: ['Edit', 'Update', 'Cancel'],
        allowPaging: true,
        allowSorting: true,
        allowFiltering: true,
        filterSettings: { type: 'Excel' },
        allowGrouping: true,
        groupSettings: {columns: ['ShipCountry']},
        height: 400,
        columns: [
            {
                field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'Right',
                validationRules: { required: true, number: true }, width: 140
            },
            {
                field: 'CustomerID', headerText: 'Customer ID',
                validationRules: { required: true }, width: 140
            },
            {
                field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit',
                width: 140, format: 'C2', validationRules: { required: true }
            },
            {
                field: 'OrderDate', headerText: 'Order Date', editType: 'datetimepickeredit', format: { type: 'dateTime', format: 'M/d/y hh:mm a' },
                width: 160, allowGrouping: false
            },
            {
                field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150,
                edit: { params: { popupHeight: '300px' } }
            }
        ],
        pageSettings: { pageCount: 5 },
        load: () => {
            refresh = (grid as any).refreshing!;
        },
        dataBound: () => {
            if (refresh) {
                grid.groupColumn('ShipCountry');
                refresh = false;
            }
        },
        created: () => {
            grid.on('columnDragStart', columnDragStart, this);
        }
    });
    grid.appendTo('#Grid');
    function columnDragStart(args: any): void {
        if (args.column.field === 'OrderDate') {
            alertDialogObj.show();
       }
    }
};

```