{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "grid-inline-editing",
  "framework": "vue",
  "type": "registry:component",
  "component": "Grid",
  "variant": "inline-editing",
  "dependencies": [
    "@syncfusion/ej2-vue-dropdowns",
    "@syncfusion/ej2-vue-grids"
  ],
  "description": "Data grid edits records inline with a configurable new-row position dropdown.",
  "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-inline-editing.md"
  },
  "files": [
    {
      "target": "src/components/grid-inline-editing/Grid.vue",
      "content": "<template>\n<div class=\"control-section\">\n    <div class=\"col-lg-9 control-section\">\n        <ejs-grid ref='grid' id='grid' :dataSource=\"data\" :allowPaging='true' :pageSettings='pageSettings' :allowSorting='true' :allowFiltering='true' :filterSettings='filterSettings' :editSettings='editSettings' :toolbar='toolbar' :actionBegin='actionBegin'>\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' :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    </div>\n\n    <div class=\"col-lg-3 property-section\">\n        <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n            <tr>\n                <td style=\"width: 40%\">\n                    <div style=\"padding-top: 7px\">Add New Row Position</div>\n                </td>\n                <td style=\"width: 60%;padding-right: 10px\">\n                    <div id='typeddl'>\n                        <ejs-dropdownlist id='newRowPosition' :dataSource='newRowPositionDataSource' :fields='fields' :change='valueChange' :value='dropdownValue'></ejs-dropdownlist>\n                    </div>\n                </td>\n            </tr>\n        </table>\n    </div>    \n\n</div>\n</template>\n\n<script lang=\"ts\">\nimport { GridComponent, ColumnDirective, ColumnsDirective, Edit, Page, Toolbar, Sort, Filter } from \"@syncfusion/ej2-vue-grids\";\nimport { DropDownListComponent } from '@syncfusion/ej2-vue-dropdowns';\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-dropdownlist': DropDownListComponent\n  },\n  data: () => {\n    return {\n      newRowPositionDataSource: [{ value: 'Top', text: 'Top' }, { value: 'Bottom', text: 'Bottom' }],\n      fields: { text: 'text', value: 'value' },\n      dropdownValue: 'Top',\n      data: orderDataSource.slice(0),\n      filterSettings: { type: 'Excel' },\n      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, showAddNewRow: true, },\n      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],\n      orderidrules: { required: true, number: true },\n      customeridrules: { required: true, minLength: 5 },\n      formatoptions: { type: 'dateTime', format: 'M/d/y hh:mm a' },\n      freightrules:  { required: true, min: 0 },\n      editparams: { params: { popupHeight: '300px' }},\n      pageSettings: {pageCount: 5},\n    };\n  },\n  provide: {\n      grid: [Edit, Page, Toolbar, Sort, Filter]\n  },\n  methods: {\n    valueChange: function (args:any) {\n        (this as any).$refs.grid.ej2Instances.editSettings.newRowPosition = args.value;\n        (this as any).$refs.grid.ej2Instances.refresh();\n    },\n    actionBegin: function (args:any) {\n        if (args.requestType === 'save') {\n            if ((this as any).$refs.grid.ej2Instances.pageSettings.currentPage !== 1 && (this as any).$refs.grid.ej2Instances.editSettings.newRowPosition === 'Top') {\n                args.index = ((this as any).$refs.grid.ej2Instances.pageSettings.currentPage * (this as any).$refs.grid.ej2Instances.pageSettings.pageSize) - (this as any).$refs.grid.ej2Instances.pageSettings.pageSize;\n            } else if ((this as any).$refs.grid.ej2Instances.editSettings.newRowPosition === 'Bottom') {\n                args.index = ((this as any).$refs.grid.ej2Instances.pageSettings.currentPage * (this as any).$refs.grid.ej2Instances.pageSettings.pageSize) - 1;\n            }\n        }\n    }\n  }\n}\n</script>\n"
    },
    {
      "target": "src/components/grid-inline-editing/GridView.vue",
      "content": "<template>\n  <Grid />\n</template>\n\n<script setup>\nimport Grid from '../../components/Grid.vue'\n</script>"
    },
    {
      "target": "src/components/grid-inline-editing/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]);"
    }
  ]
}