{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "grid-grouping",
  "framework": "javascript",
  "type": "registry:component",
  "component": "Grid",
  "variant": "grouping",
  "dependencies": [
    "@syncfusion/ej2-grids"
  ],
  "description": "Data grid with drag-grouping, grouping-disabled dialog, and grouped ShipCountry summaries.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/javascript/llms.txt",
    "skillPack": "syncfusion/javascript-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/javascript/grid-grouping.md"
  },
  "files": [
    {
      "target": "src/components/grid-grouping/grouping.html",
      "content": "<!-- custom code start -->\n<style>\n    .datalink {\n        text-align: right;\n        padding-top: 25px;\n    }\n    @media screen and (max-width: 480px) {\n        .datalink {\n            padding-bottom: 0;\n            padding-top: 15px;\n        }\n    }\n    .e-bigger .control-section.dialog-container {\n        min-height: 250px;\n    }\n</style>\n<!--  custom code end-->\n<div class=\"control-section dialog-container\">\n    <div class=\"content-wrapper\">\n        <div id=\"Grid\"></div>\n        <div id= \"alertDialog\"></div>\n        <div class=\"datalink\">Source:\n            <a href=\"https://en.wikipedia.org/wiki/List_of_prolific_inventors \" \n            target=\"_blank\">Wikipedia: List of Prolific inventors</a>\n        </div>\n    </div>\n</div>"
    },
    {
      "target": "src/components/grid-grouping/grouping.ts",
      "content": "import { Grid, Sort, Page, Selection, Group, Edit, Toolbar, Filter } from '@syncfusion/ej2-grids';\nimport {  orderDataSource } from '../data-source';\nimport { Dialog } from '@syncfusion/ej2-popups';\n\nGrid.Inject(Sort, Page, Selection, Group, Edit, Toolbar, Filter);\n\n/**\n * Grouping sample\n */\n(window as any).default = (): void => {\n    let refresh: Boolean;\n    let alertDialogObj: Dialog = new Dialog({\n        header: 'Grouping',\n        content: 'Grouping is disabled for this column',\n        showCloseIcon: false,\n        target: '.control-section',\n        buttons: [{\n            click: alertDlgBtnClick, buttonModel: { content: 'OK', isPrimary: true }\n        }],\n        width: '300px',\n        visible: false,\n        animationSettings: { effect: 'None' }\n    });\n    alertDialogObj.appendTo('#alertDialog');\n    function alertDlgBtnClick(): void {\n        alertDialogObj.hide();\n    }\n    let grid: Grid = new Grid({\n        dataSource: orderDataSource,\n        editSettings: { allowEditing: true },\n        toolbar: ['Edit', 'Update', 'Cancel'],\n        allowPaging: true,\n        allowSorting: true,\n        allowFiltering: true,\n        filterSettings: { type: 'Excel' },\n        allowGrouping: true,\n        groupSettings: {columns: ['ShipCountry']},\n        height: 400,\n        columns: [\n            {\n                field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'Right',\n                validationRules: { required: true, number: true }, width: 140\n            },\n            {\n                field: 'CustomerID', headerText: 'Customer ID',\n                validationRules: { required: true }, width: 140\n            },\n            {\n                field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit',\n                width: 140, format: 'C2', validationRules: { required: true }\n            },\n            {\n                field: 'OrderDate', headerText: 'Order Date', editType: 'datetimepickeredit', format: { type: 'dateTime', format: 'M/d/y hh:mm a' },\n                width: 160, allowGrouping: false\n            },\n            {\n                field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150,\n                edit: { params: { popupHeight: '300px' } }\n            }\n        ],\n        pageSettings: { pageCount: 5 },\n        load: () => {\n            refresh = (grid as any).refreshing!;\n        },\n        dataBound: () => {\n            if (refresh) {\n                grid.groupColumn('ShipCountry');\n                refresh = false;\n            }\n        },\n        created: () => {\n            grid.on('columnDragStart', columnDragStart, this);\n        }\n    });\n    grid.appendTo('#Grid');\n    function columnDragStart(args: any): void {\n        if (args.column.field === 'OrderDate') {\n            alertDialogObj.show();\n       }\n    }\n};\n"
    }
  ]
}