{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "grid-grouping",
  "framework": "vue",
  "type": "registry:component",
  "component": "Grid",
  "variant": "grouping",
  "dependencies": [
    "@syncfusion/ej2-vue-grids",
    "@syncfusion/ej2-vue-popups"
  ],
  "description": "Data grid organizes records into expandable grouped sections with column drag.",
  "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/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/grid-grouping.md"
  },
  "files": [
    {
      "target": "src/components/grid-grouping/Grid.vue",
      "content": "<template>\n<div class=\"col-lg-12\">\n    <div class=\"control-section\">\n        <ejs-grid ref=\"grid\" :dataSource=\"data\" id='GridGrouping' :allowGrouping='true' :allowPaging='true' :allowSorting='true' :allowFiltering='true' :filterSettings='filterSettings' :groupSettings='groupOptions' :editSettings='editSettings' :toolbar='toolbar' :pageSettings='pageOptions' :created='created' height=320>\n            <e-columns>\n                <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' :isPrimaryKey='true' :validationRules='orderidrules'></e-column>\n                <e-column field='CustomerID' headerText='Customer ID' width='120' :validationRules='customeridrules'></e-column>\n                <e-column field='Freight' headerText='Freight' width='180' format='C2' textAlign='Right' editType='numericedit' :validationRules='freightrules'></e-column>\n                <e-column field='OrderDate' headerText='Order Date' width='130' editType='datetimepickeredit' :allowGrouping='false' :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 :buttons='alertDlgButtons' ref=\"alertDialog\" v-bind:visible=\"false\" :header='alertHeader' :animationSettings='animationSettings' :content='alertContent' :showCloseIcon='showCloseIcon' :target='target'\n            :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\n\n</div>\n</template>\n<script lang=\"ts\">\nimport { GridComponent, ColumnDirective, ColumnsDirective, Group, Page, Sort, Edit, Toolbar, Filter } from \"@syncfusion/ej2-vue-grids\";\nimport { DialogComponent } from '@syncfusion/ej2-vue-popups';\n\nconst orderDataSource = [\n    { OrderID: 10248, CustomerID: 'VINET',  OrderDate: new Date(1996, 6,  4, 10, 10), ShippedDate: new Date(1996, 6, 16, 12, 20), Freight: 32.38, ShipName: 'Vins et alcools Chevalier',  ShipAddress: '59 rue de l\\'Abbaye',            ShipCity: 'Reims',          ShipRegion: null,    ShipCountry: 'France' },\n    { OrderID: 10249, CustomerID: 'TOMSP',  OrderDate: new Date(1996, 6,  5, 12, 20), ShippedDate: new Date(1996, 6, 10, 13, 20), Freight: 11.61, ShipName: 'Toms Spezialit�ten',          ShipAddress: 'Luisenstr. 48',                  ShipCity: 'M�nster',        ShipRegion: null,    ShipCountry: 'Germany' },\n    { OrderID: 10250, CustomerID: 'HANAR',  OrderDate: new Date(1996, 6,  8,  8, 40), ShippedDate: new Date(1996, 6, 12,  7, 50), Freight: 65.83, ShipName: 'Hanari Carnes',               ShipAddress: 'Rua do Pa�o, 67',                ShipCity: 'Rio de Janeiro', ShipRegion: 'RJ',  ShipCountry: 'Brazil' },\n    { OrderID: 10251, CustomerID: 'VICTE',  OrderDate: new Date(1996, 6,  8,  7, 50), ShippedDate: new Date(1996, 6, 15, 15, 50), Freight: 41.34, ShipName: 'Victuailles en stock',        ShipAddress: '2, rue du Commerce',             ShipCity: 'Lyon',           ShipRegion: null,    ShipCountry: 'France' },\n    { OrderID: 10252, CustomerID: 'SUPRD',  OrderDate: new Date(1996, 6,  9, 12,  5), ShippedDate: new Date(1996, 6, 11, 17, 30), Freight: 51.30, ShipName: 'Supr�mes d�lices',            ShipAddress: 'Boulevard Tirou, 255',           ShipCity: 'Charleroi',      ShipRegion: null,    ShipCountry: 'Belgium' }\n];\n\nexport default {\n  components: {\n    'ejs-grid': GridComponent,\n    'e-column': ColumnDirective,\n    'e-columns': ColumnsDirective,\n    'ejs-dialog': DialogComponent\n  },\n  data: function() {\n    return {\n      alertHeader: 'Grouping',\n      alertContent: 'Grouping is disabled for this column',\n      showCloseIcon: false,\n      target: '#GridGrouping',  \n      alertWidth: '300px',\n      animationSettings: { effect: 'None' },\n      alertDlgButtons: [{ click: ((<any>this).alertDlgBtnClick as any), buttonModel: { content: 'OK', isPrimary: true } }],\n      data: orderDataSource,\n      editSettings: { allowEditing: true },\n      toolbar: ['Edit', 'Update', 'Cancel'],\n      orderidrules: { required: true, number: true },\n      customeridrules: { required: true },\n      formatoptions: { type: 'dateTime', format: 'M/d/y hh:mm a' },\n      freightrules:  { required: true },\n      editparams: { params: { popupHeight: '300px' }},\n      pageOptions: { pageCount: 5 },\n      groupOptions: { columns: [\"ShipCountry\"] },\n      filterSettings: { type: 'Excel' },\n    };\n  },\n  methods: {\n    created: function() {\n        ((<any>this).$refs.grid.ej2Instances as any).on(\"columnDragStart\", this.columnDragStart, this);\n    },\n    columnDragStart: function(args: any) {\n        if(args.column.field === \"OrderDate\"){\n             ((this as any).$refs.alertDialog).show();\n        }\n    },\n    alertDlgBtnClick: function() {\n        ((<any>this).$refs.alertDialog as any).hide();\n    },\n  },\n  provide: {\n    grid: [Group, Page, Sort, Edit, Toolbar, Filter]\n  }\n}\n</script>\n"
    },
    {
      "target": "src/components/grid-grouping/GridView.vue",
      "content": "<template>\n  <Grid />\n</template>\n\n<script setup>\nimport Grid from '../../components/Grid.vue'\n</script>"
    },
    {
      "target": "src/components/grid-grouping/datasource.ts",
      "content": "export const purchaseData = JSON.stringify([\n    {\n        \"OrderID\": 10248,\n        \"CustomerID\": \"VINET\",\n        \"OrderDate\": \"1996-07-04T10:10:00.000Z\",\n        \"ShippedDate\": \"1996-07-16T12:20:00.000Z\",\n        \"Freight\": 32.38,\n        \"ShipName\": \"Vins et alcools Chevalier\",\n        \"ShipAddress\": \"59 rue de l\\\"Abbaye\",\n        \"ShipCity\": \"Reims\",\n        \"ShipRegion\": null,\n        \"ShipCountry\": \"France\"\n    },\n    {\n        \"OrderID\": 10249,\n        \"CustomerID\": \"TOMSP\",\n        \"OrderDate\": \"1996-07-05T12:20:00.000Z\",\n        \"ShippedDate\": \"1996-07-10T13:20:00.000Z\",\n        \"Freight\": 11.61,\n        \"ShipName\": \"Toms Spezialitäten\",\n        \"ShipAddress\": \"Luisenstr. 48\",\n        \"ShipCity\": \"Münster\",\n        \"ShipRegion\": null,\n        \"ShipCountry\": \"Germany\"\n    },\n    {\n        \"OrderID\": 10250,\n        \"CustomerID\": \"HANAR\",\n        \"OrderDate\": \"1996-07-08T08:40:00.000Z\",\n        \"ShippedDate\": \"1996-07-12T07:50:00.000Z\",\n        \"Freight\": 65.83,\n        \"ShipName\": \"Hanari Carnes\",\n        \"ShipAddress\": \"Rua do Paço, 67\",\n        \"ShipCity\": \"Rio de Janeiro\",\n        \"ShipRegion\": \"RJ\",\n        \"ShipCountry\": \"Brazil\"\n    },\n    {\n        \"OrderID\": 10251,\n        \"CustomerID\": \"VICTE\",\n        \"OrderDate\": \"1996-07-08T07:50:00.000Z\",\n        \"ShippedDate\": \"1996-07-15T15:50:00.000Z\",\n        \"Freight\": 41.34,\n        \"ShipName\": \"Victuailles en stock\",\n        \"ShipAddress\": \"2, rue du Commerce\",\n        \"ShipCity\": \"Lyon\",\n        \"ShipRegion\": null,\n        \"ShipCountry\": \"France\"\n    },\n    {\n        \"OrderID\": 10252,\n        \"CustomerID\": \"SUPRD\",\n        \"OrderDate\": \"1996-07-09T12:05:00.000Z\",\n        \"ShippedDate\": \"1996-07-11T17:30:00.000Z\",\n        \"Freight\": 51.3,\n        \"ShipName\": \"Suprêmes délices\",\n        \"ShipAddress\": \"Boulevard Tirou, 255\",\n        \"ShipCity\": \"Charleroi\",\n        \"ShipRegion\": null,\n        \"ShipCountry\": \"Belgium\"\n    },\n    {\n        \"OrderID\": 10253,\n        \"CustomerID\": \"HANAR\",\n        \"OrderDate\": \"1996-07-10T11:20:00.000Z\",\n        \"ShippedDate\": \"1996-07-16T10:10:00.000Z\",\n        \"Freight\": 58.17,\n        \"ShipName\": \"Hanari Carnes\",\n        \"ShipAddress\": \"Rua do Paço, 67\",\n        \"ShipCity\": \"Rio de Janeiro\",\n        \"ShipRegion\": \"RJ\",\n        \"ShipCountry\": \"Brazil\"\n    },\n    {\n        \"OrderID\": 10254,\n        \"CustomerID\": \"CHOPS\",\n        \"OrderDate\": \"1996-07-11T10:00.00.000Z\",\n        \"ShippedDate\": \"1996-07-23T20:40:00.000Z\",\n        \"Freight\": 22.98,\n        \"ShipName\": \"Chop-suey Chinese\",\n        \"ShipAddress\": \"Hauptstr. 31\",\n        \"ShipCity\": \"Bern\",\n        \"ShipRegion\": null,\n        \"ShipCountry\": \"Switzerland\"\n    },\n    {\n        \"OrderID\": 10255,\n        \"CustomerID\": \"RICSU\",\n        \"OrderDate\": \"1996-07-12T10:40:00.000Z\",\n        \"ShippedDate\": \"1996-07-15T05:40:00.000Z\",\n        \"Freight\": 148.33,\n        \"ShipName\": \"Richter Supermarkt\",\n        \"ShipAddress\": \"Starenweg 5\",\n        \"ShipCity\": \"Genève\",\n        \"ShipRegion\": null,\n        \"ShipCountry\": \"Switzerland\"\n    }\n]);"
    }
  ]
}