# grid-inline-editing

> Data grid with inline add and edit rows whose top/bottom position is selectable from a dropdown.

**Framework:** angular  **Component:** Grid  **Variant:** inline-editing

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/angular/grid-inline-editing.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-angular-grids
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/grid-inline-editing/normal-edit.component.ts

```typescript
import { Component, OnInit, ViewChild } from '@angular/core';
import { orderDataSource } from '../data';
import { EditService, ToolbarService, PageService, SortService, FilterService, NewRowPosition, GridModule } from '@syncfusion/ej2-angular-grids';
import { ChangeEventArgs, DropDownListComponent, DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';

@Component({
    selector: 'ej-gridnormaledit',
    templateUrl: 'normal-edit.html',
    providers: [ToolbarService, EditService, PageService, SortService, FilterService],
    standalone: true,
    imports: [GridModule, DropDownListModule]
})
export class NormalEditComponent implements OnInit {
    @ViewChild('ddsample')
    public dropDown!: DropDownListComponent;
    public data!: Object[];
    public editSettings!: Object;
    public filterSettings!: Object;
    public toolbar!: string[];
    public orderidrules!: Object;
    public customeridrules!: Object;
    public freightrules!: Object;
    public editparams!: Object;
    public pageSettings!: Object;
    public formatoptions!: Object;

    public ngOnInit(): void {
        this.data = orderDataSource;
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true , newRowPosition: 'Top', showAddNewRow: true };
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
        this.orderidrules = { required: true, number: true };
        this.customeridrules = { required: true, minLength: 5 };
        this.freightrules = { required: true, min: 0 };
        this.editparams = { params: { popupHeight: '300px' } };
        this.pageSettings = { pageCount: 5 };
        this.filterSettings = { type: 'Excel'};
        this.formatoptions = { type: 'dateTime', format: 'M/d/y hh:mm a' }
    }

    public newRowPosition: { [key: string]: Object }[] = [
        { id: 'Top', newRowPosition: 'Top' },
        { id: 'Bottom', newRowPosition: 'Bottom' }
    ];
    public localFields: Object = { text: 'newRowPosition', value: 'id' };

    public onChange(e: ChangeEventArgs): void {
        let gridInstance: any = (<any>document.getElementById('Normalgrid')).ej2_instances[0];
        (gridInstance.editSettings as any).newRowPosition = <NewRowPosition>this.dropDown.value;
        gridInstance.refresh();
    }

    actionBegin(args: any) :void {
        let gridInstance: any = (<any>document.getElementById('Normalgrid')).ej2_instances[0];
        if (args.requestType === 'save') {
            if (gridInstance.pageSettings.currentPage !== 1 && gridInstance.editSettings.newRowPosition === 'Top') {
                args.index = (gridInstance.pageSettings.currentPage * gridInstance.pageSettings.pageSize) - gridInstance.pageSettings.pageSize;
            } else if (gridInstance.editSettings.newRowPosition === 'Bottom') {
                args.index = (gridInstance.pageSettings.currentPage * gridInstance.pageSettings.pageSize) - 1;
            }
        }
    }
}

```

### src/components/grid-inline-editing/normal-edit.html

```html
<div class="control-section">
    <div class="col-lg-9">
        <ejs-grid #normalgrid id='Normalgrid' [dataSource]='data' allowPaging='true' [allowSorting]='true' [allowFiltering]='true' [filterSettings]='filterSettings' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' (actionBegin)='actionBegin($event)'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' width='140' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width='140' [validationRules]='customeridrules'></e-column>
                <e-column field='Freight' headerText='Freight' width='140' format='C2' textAlign='Right' editType='numericedit' [validationRules]='freightrules'></e-column>
                <e-column field='OrderDate' headerText='Order Date' width='120' editType='datetimepickeredit' [format]='formatoptions' textAlign='Right'></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams'></e-column>
            </e-columns>
        </ejs-grid>
    </div>

    <div class="col-lg-3 property-section">
        <div class="property-panel-section">
            <div class="property-panel-header">Properties</div>
            <div class="property-panel-content">
                <table id="property" title="Properties" class="property-panel-table" style="width: 100%">
                    <tr>
                        <td style="width: 40%">
                            <div style="padding-top: 7px">Add New Row Position</div>
                        </td>
                        <td style="width: 60%;padding-right: 10px">
                            <div id='typeddl'>
                                <ejs-dropdownlist id='newRowPosition' #ddsample [dataSource]='newRowPosition' index=0
                                    [fields]='localFields' (change)="onChange($event)">
                                </ejs-dropdownlist>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
<style>
        #typeddl {
            min-width: 100px;
        }
</style>

```