{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "grid-inline-editing",
  "framework": "angular",
  "type": "registry:component",
  "component": "Grid",
  "variant": "inline-editing",
  "dependencies": [
    "@syncfusion/ej2-angular-grids"
  ],
  "description": "Data grid with inline add and edit rows whose top/bottom position is selectable from a 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/angular/llms.txt",
    "skillPack": "syncfusion/angular-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/angular/grid-inline-editing.md"
  },
  "files": [
    {
      "target": "src/components/grid-inline-editing/normal-edit.component.ts",
      "content": "import { Component, OnInit, ViewChild } from '@angular/core';\nimport { orderDataSource } from '../data';\nimport { EditService, ToolbarService, PageService, SortService, FilterService, NewRowPosition, GridModule } from '@syncfusion/ej2-angular-grids';\nimport { ChangeEventArgs, DropDownListComponent, DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';\n\n@Component({\n    selector: 'ej-gridnormaledit',\n    templateUrl: 'normal-edit.html',\n    providers: [ToolbarService, EditService, PageService, SortService, FilterService],\n    standalone: true,\n    imports: [GridModule, DropDownListModule]\n})\nexport class NormalEditComponent implements OnInit {\n    @ViewChild('ddsample')\n    public dropDown!: DropDownListComponent;\n    public data!: Object[];\n    public editSettings!: Object;\n    public filterSettings!: Object;\n    public toolbar!: string[];\n    public orderidrules!: Object;\n    public customeridrules!: Object;\n    public freightrules!: Object;\n    public editparams!: Object;\n    public pageSettings!: Object;\n    public formatoptions!: Object;\n\n    public ngOnInit(): void {\n        this.data = orderDataSource;\n        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true , newRowPosition: 'Top', showAddNewRow: true };\n        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];\n        this.orderidrules = { required: true, number: true };\n        this.customeridrules = { required: true, minLength: 5 };\n        this.freightrules = { required: true, min: 0 };\n        this.editparams = { params: { popupHeight: '300px' } };\n        this.pageSettings = { pageCount: 5 };\n        this.filterSettings = { type: 'Excel'};\n        this.formatoptions = { type: 'dateTime', format: 'M/d/y hh:mm a' }\n    }\n\n    public newRowPosition: { [key: string]: Object }[] = [\n        { id: 'Top', newRowPosition: 'Top' },\n        { id: 'Bottom', newRowPosition: 'Bottom' }\n    ];\n    public localFields: Object = { text: 'newRowPosition', value: 'id' };\n\n    public onChange(e: ChangeEventArgs): void {\n        let gridInstance: any = (<any>document.getElementById('Normalgrid')).ej2_instances[0];\n        (gridInstance.editSettings as any).newRowPosition = <NewRowPosition>this.dropDown.value;\n        gridInstance.refresh();\n    }\n\n    actionBegin(args: any) :void {\n        let gridInstance: any = (<any>document.getElementById('Normalgrid')).ej2_instances[0];\n        if (args.requestType === 'save') {\n            if (gridInstance.pageSettings.currentPage !== 1 && gridInstance.editSettings.newRowPosition === 'Top') {\n                args.index = (gridInstance.pageSettings.currentPage * gridInstance.pageSettings.pageSize) - gridInstance.pageSettings.pageSize;\n            } else if (gridInstance.editSettings.newRowPosition === 'Bottom') {\n                args.index = (gridInstance.pageSettings.currentPage * gridInstance.pageSettings.pageSize) - 1;\n            }\n        }\n    }\n}\n"
    },
    {
      "target": "src/components/grid-inline-editing/normal-edit.html",
      "content": "<div class=\"control-section\">\n    <div class=\"col-lg-9\">\n        <ejs-grid #normalgrid id='Normalgrid' [dataSource]='data' allowPaging='true' [allowSorting]='true' [allowFiltering]='true' [filterSettings]='filterSettings' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' (actionBegin)='actionBegin($event)'>\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' 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    </div>\n\n\n    <div class=\"col-lg-3 property-section\">\n        <div class=\"property-panel-section\">\n            <div class=\"property-panel-header\">Properties</div>\n            <div class=\"property-panel-content\">\n                <table id=\"property\" title=\"Properties\" class=\"property-panel-table\" 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' #ddsample [dataSource]='newRowPosition' index=0\n                                    [fields]='localFields' (change)=\"onChange($event)\">\n                                </ejs-dropdownlist>\n                            </div>\n                        </td>\n                    </tr>\n                </table>\n            </div>\n        </div>\n    </div>\n</div>\n<style>\n        #typeddl {\n            min-width: 100px;\n        }\n</style>\n"
    }
  ]
}