{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "grid-inline-editing",
  "framework": "javascript",
  "type": "registry:component",
  "component": "Grid",
  "variant": "inline-editing",
  "dependencies": [
    "@syncfusion/ej2-grids"
  ],
  "description": "Data grid with inline add and edit rows whose top/bottom position is selectable.",
  "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-inline-editing.md"
  },
  "files": [
    {
      "target": "src/components/grid-inline-editing/inline-editing.html",
      "content": "<div class=\"col-lg-9 control-section\">\n    <div class=\"content-wrapper\">\n        <div id=\"Grid\"></div>\n    </div>\n</div>\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                    <input type=\"text\" tabindex=\"0\" id='newRowPosition' />\n                </div>\n            </td>\n        </tr>\n    </table>\n</div>\n<!-- custom code start -->\n<style>\n    #typeddl {\n        min-width: 100px;\n    }\n</style>"
    },
    {
      "target": "src/components/grid-inline-editing/inline-editing.ts",
      "content": "import { Grid, Edit, Toolbar, Page, type NewRowPosition, Sort, Filter } from '@syncfusion/ej2-grids';\nimport { orderDataSource } from '../data-source';\nimport { DropDownList, type ChangeEventArgs } from '@syncfusion/ej2-dropdowns';\n\n/**\n * Normal Editing sample\n */\nGrid.Inject(Edit, Toolbar, Page, Sort, Filter);\n\n(window as any).default = (): void => {\n    let newRowPosition: { [key: string]: Object }[] = [\n        { id: 'Top', newRowPosition: 'Top' },\n        { id: 'Bottom', newRowPosition: 'Bottom' }\n    ];\n    let grid: Grid = new Grid(\n        {\n            dataSource: orderDataSource,\n            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal', showAddNewRow: true, newRowPosition: 'Top' },\n            allowPaging: true,\n            pageSettings: { pageCount: 5 },\n            allowSorting: true,\n            allowFiltering: true,\n            filterSettings: { type: 'Excel' },\n            toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],\n            actionBegin: actionBegin,\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, minLength: 5 }, width: 140\n                },\n                {\n                    field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit',\n                    width: 140, format: 'C2', validationRules: { required: true, min: 0 }\n                },\n                {\n                    field: 'OrderDate', headerText: 'Order Date', editType: 'datetimepickeredit',\n                    width: 160, format: { type: 'dateTime', format: 'M/d/y hh:mm a' },\n                },\n                {\n                    field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150,\n                    edit: { params: { popupHeight: '300px' } }\n                }],\n        });\n    grid.appendTo('#Grid');\n\n    function actionBegin(args: any): void {\n        if (args.requestType === 'save') {\n            if (grid.pageSettings.currentPage !== 1 && grid.editSettings.newRowPosition === 'Top') {\n                args.index = (grid.pageSettings.currentPage! * grid.pageSettings.pageSize!) - grid.pageSettings.pageSize!;\n            } else if (grid.editSettings.newRowPosition === 'Bottom') {\n                args.index = (grid.pageSettings.currentPage! * grid.pageSettings.pageSize!) - 1;\n            }\n        }\n    }\n\n    let dropDownType: DropDownList = new DropDownList({\n        dataSource: newRowPosition,\n        fields: { text: 'newRowPosition', value: 'id' },\n        value: 'Top',\n        change: (e: ChangeEventArgs) => {\n            let newRowPosition: string = e.value as string;\n            grid.editSettings.newRowPosition = newRowPosition as NewRowPosition;\n            grid.refresh();\n        }\n    });\n    dropDownType.appendTo('#newRowPosition');\n};"
    }
  ]
}