# grid-inline-editing

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

**Framework:** javascript  **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/javascript/grid-inline-editing.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-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/inline-editing.html

```html
<div class="col-lg-9 control-section">
    <div class="content-wrapper">
        <div id="Grid"></div>
    </div>
</div>
<div class="col-lg-3 property-section">
    <table id="property" title="Properties" 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'>
                    <input type="text" tabindex="0" id='newRowPosition' />
                </div>
            </td>
        </tr>
    </table>
</div>
<!-- custom code start -->
<style>
    #typeddl {
        min-width: 100px;
    }
</style>
```

### src/components/grid-inline-editing/inline-editing.ts

```typescript
import { Grid, Edit, Toolbar, Page, type NewRowPosition, Sort, Filter } from '@syncfusion/ej2-grids';
import { orderDataSource } from '../data-source';
import { DropDownList, type ChangeEventArgs } from '@syncfusion/ej2-dropdowns';

/**
 * Normal Editing sample
 */
Grid.Inject(Edit, Toolbar, Page, Sort, Filter);

(window as any).default = (): void => {
    let newRowPosition: { [key: string]: Object }[] = [
        { id: 'Top', newRowPosition: 'Top' },
        { id: 'Bottom', newRowPosition: 'Bottom' }
    ];
    let grid: Grid = new Grid(
        {
            dataSource: orderDataSource,
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal', showAddNewRow: true, newRowPosition: 'Top' },
            allowPaging: true,
            pageSettings: { pageCount: 5 },
            allowSorting: true,
            allowFiltering: true,
            filterSettings: { type: 'Excel' },
            toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
            actionBegin: actionBegin,
            columns: [
                {
                    field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'Right',
                    validationRules: { required: true, number: true }, width: 140
                },
                {
                    field: 'CustomerID', headerText: 'Customer ID',
                    validationRules: { required: true, minLength: 5 }, width: 140
                },
                {
                    field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit',
                    width: 140, format: 'C2', validationRules: { required: true, min: 0 }
                },
                {
                    field: 'OrderDate', headerText: 'Order Date', editType: 'datetimepickeredit',
                    width: 160, format: { type: 'dateTime', format: 'M/d/y hh:mm a' },
                },
                {
                    field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150,
                    edit: { params: { popupHeight: '300px' } }
                }],
        });
    grid.appendTo('#Grid');

    function actionBegin(args: any): void {
        if (args.requestType === 'save') {
            if (grid.pageSettings.currentPage !== 1 && grid.editSettings.newRowPosition === 'Top') {
                args.index = (grid.pageSettings.currentPage! * grid.pageSettings.pageSize!) - grid.pageSettings.pageSize!;
            } else if (grid.editSettings.newRowPosition === 'Bottom') {
                args.index = (grid.pageSettings.currentPage! * grid.pageSettings.pageSize!) - 1;
            }
        }
    }

    let dropDownType: DropDownList = new DropDownList({
        dataSource: newRowPosition,
        fields: { text: 'newRowPosition', value: 'id' },
        value: 'Top',
        change: (e: ChangeEventArgs) => {
            let newRowPosition: string = e.value as string;
            grid.editSettings.newRowPosition = newRowPosition as NewRowPosition;
            grid.refresh();
        }
    });
    dropDownType.appendTo('#newRowPosition');
};
```