{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "grid-grouping",
  "framework": "angular",
  "type": "registry:component",
  "component": "Grid",
  "variant": "grouping",
  "dependencies": [
    "@syncfusion/ej2-angular-grids"
  ],
  "description": "Data grid with column 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/angular/llms.txt",
    "skillPack": "syncfusion/angular-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/angular/grid-grouping.md"
  },
  "files": [
    {
      "target": "src/components/grid-grouping/grouping.component.ts",
      "content": "import { Component, OnInit, ViewChild } from '@angular/core';\nimport { orderDataSource } from '../data';\nimport { GroupService, SortService, GridComponent, EditService, ToolbarService, GridModule, PageService, FilterService } from '@syncfusion/ej2-angular-grids';\nimport { DialogComponent, DialogModule } from '@syncfusion/ej2-angular-popups';\n\n\n@Component({\n    selector: 'ej-gridgroup',\n    templateUrl: 'grouping.html',\n    providers: [GroupService, ToolbarService, SortService, EditService, PageService, FilterService],\n    standalone: true,\n    imports: [GridModule, DialogModule]\n})\nexport class GroupComponent implements OnInit {\n    public data!: Object[];\n    public groupOptions!: Object;\n    public pageSettings!: Object;\n    public filterSettings!: Object;\n    public editSettings!: Object;\n    public toolbar!: string[];\n    public orderidrules!: Object;\n    public customeridrules!: Object;\n    public freightrules!: Object;\n    public editparams!: Object;\n    public formatoptions!: Object;\n    public refresh!: Boolean;\n    @ViewChild('grid')\n    public grid!: GridComponent;\n    @ViewChild('alertDialog')\n    public alertDialog!: DialogComponent;\n    public alertHeader: string = 'Grouping';\n    public hidden: Boolean = false;\n    public target: string = '.control-section';\n    public alertWidth: string = '300px';\n    public alertContent: string = 'Grouping is disabled for this column';\n    public showCloseIcon: Boolean = false;\n    public animationSettings: Object = { effect: 'None' };\n    public alertDlgBtnClick = () => {\n        this.alertDialog.hide();\n    }\n    public alertDlgButtons: Object[] = [{ click: this.alertDlgBtnClick.bind(this), buttonModel: { content: 'OK', isPrimary: true } }];\n    ngOnInit(): void {\n        this.data = orderDataSource;\n        this.groupOptions = { showGroupedColumn: false, columns: ['ShipCountry'] };\n        this.pageSettings = { pageCount: 5 };\n        this.filterSettings = { type: 'Excel'};\n        this.editSettings = { allowEditing: true };\n        this.toolbar = ['Edit', 'Update', 'Cancel'];\n        this.orderidrules = { required: true, number: true };\n        this.customeridrules = { required: true };\n        this.freightrules = { required: true };\n        this.editparams = { params: { popupHeight: '300px' } };\n        this.formatoptions = { type: 'dateTime', format: 'M/d/y hh:mm a' }\n    }\n    dataBound() {\n        if(this.refresh){\n            this.grid.groupColumn('ShipCountry');\n            this.refresh =false;\n        }\n    }\n    load() {\n        this.refresh = (<any>this.grid).refreshing;\n    }\n    created() {\n        this.grid.on(\"columnDragStart\", this.columnDragStart, this);\n    }\n    public columnDragStart(args: any) {\n        if(args.column.field === \"OrderDate\"){\n            this.alertDialog.show();\n       }\n    }\n}"
    },
    {
      "target": "src/components/grid-grouping/grouping.html",
      "content": "\n<div class=\"control-section\">\n       <ejs-grid #grid [dataSource]='data' allowPaging='true' [allowSorting]='true' [allowFiltering]='true' [filterSettings]='filterSettings' [allowGrouping]=\"true\" [editSettings]='editSettings' [groupSettings]=\"groupOptions\" [toolbar]='toolbar' [pageSettings]='pageSettings'\n        height=\"320\" (dataBound)='dataBound()' (created)='created()' (load)='load()'>\n        <e-columns>\n            <e-column field='OrderID' headerText='Order ID' width='140' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column>\n            <e-column field='CustomerID' headerText='Customer ID' width='140' [validationRules]='customeridrules'></e-column>\n            <e-column field='Freight' headerText='Freight' width='140' format='C2' textAlign='Right' editType='numericedit' [validationRules]='freightrules'></e-column>\n            <e-column field='OrderDate' [allowGrouping]=\"false\" headerText='Order Date' width='120' editType='datetimepickeredit' [format]='formatoptions' textAlign='Right'></e-column>\n            <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams'></e-column>\n        </e-columns>\n    </ejs-grid>\n    <ejs-dialog #alertDialog [buttons]='alertDlgButtons' [visible]='hidden' [header]='alertHeader' [animationSettings]='animationSettings' [content]='alertContent' [showCloseIcon]='showCloseIcon' [target]='target' [width]='alertWidth'>\n    </ejs-dialog>\n    <div style=\"margin-top: 10px; text-align: right\">Source:\n        <a href=\"https://en.wikipedia.org/wiki/List_of_prolific_inventors\" target='_blank'>Wikipedia: List of Prolific inventors</a>\n    </div>\n</div>\n"
    }
  ]
}