# grid-inline-editing

> Data grid edits records inline with a configurable new-row position dropdown.

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

**Install Package(s)**

```bash
npm install @syncfusion/ej2-vue-dropdowns @syncfusion/ej2-vue-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/Grid.vue

```vue
<template>
<div class="control-section">
    <div class="col-lg-9 control-section">
        <ejs-grid ref='grid' id='grid' :dataSource="data" :allowPaging='true' :pageSettings='pageSettings' :allowSorting='true' :allowFiltering='true' :filterSettings='filterSettings' :editSettings='editSettings' :toolbar='toolbar' :actionBegin='actionBegin'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' :isPrimaryKey='true' :validationRules='orderidrules'></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width='120' :validationRules='customeridrules'></e-column>
                <e-column field='Freight' headerText='Freight' width='180' format='C2' textAlign='Right' editType='numericedit' :validationRules='freightrules'></e-column>
                <e-column field='OrderDate' headerText='Order Date' width='130' 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">
        <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'>
                        <ejs-dropdownlist id='newRowPosition' :dataSource='newRowPositionDataSource' :fields='fields' :change='valueChange' :value='dropdownValue'></ejs-dropdownlist>
                    </div>
                </td>
            </tr>
        </table>
    </div>    

</div>
</template>

<script lang="ts">
import { GridComponent, ColumnDirective, ColumnsDirective, Edit, Page, Toolbar, Sort, Filter } from "@syncfusion/ej2-vue-grids";
import { DropDownListComponent } from '@syncfusion/ej2-vue-dropdowns';

const orderDataSource = [
    { 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' },
    { 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' },
    { 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' },
    { 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' },
    { 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' }
];

export default {
  components: {
    'ejs-grid': GridComponent,
    'e-column': ColumnDirective,
    'e-columns': ColumnsDirective,
    'ejs-dropdownlist': DropDownListComponent
  },
  data: () => {
    return {
      newRowPositionDataSource: [{ value: 'Top', text: 'Top' }, { value: 'Bottom', text: 'Bottom' }],
      fields: { text: 'text', value: 'value' },
      dropdownValue: 'Top',
      data: orderDataSource.slice(0),
      filterSettings: { type: 'Excel' },
      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, showAddNewRow: true, },
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
      orderidrules: { required: true, number: true },
      customeridrules: { required: true, minLength: 5 },
      formatoptions: { type: 'dateTime', format: 'M/d/y hh:mm a' },
      freightrules:  { required: true, min: 0 },
      editparams: { params: { popupHeight: '300px' }},
      pageSettings: {pageCount: 5},
    };
  },
  provide: {
      grid: [Edit, Page, Toolbar, Sort, Filter]
  },
  methods: {
    valueChange: function (args:any) {
        (this as any).$refs.grid.ej2Instances.editSettings.newRowPosition = args.value;
        (this as any).$refs.grid.ej2Instances.refresh();
    },
    actionBegin: function (args:any) {
        if (args.requestType === 'save') {
            if ((this as any).$refs.grid.ej2Instances.pageSettings.currentPage !== 1 && (this as any).$refs.grid.ej2Instances.editSettings.newRowPosition === 'Top') {
                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;
            } else if ((this as any).$refs.grid.ej2Instances.editSettings.newRowPosition === 'Bottom') {
                args.index = ((this as any).$refs.grid.ej2Instances.pageSettings.currentPage * (this as any).$refs.grid.ej2Instances.pageSettings.pageSize) - 1;
            }
        }
    }
  }
}
</script>

```

### src/components/grid-inline-editing/GridView.vue

```vue
<template>
  <Grid />
</template>

<script setup>
import Grid from '../../components/Grid.vue'
</script>
```

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

```typescript
export const purchaseData = JSON.stringify([
    {
        "OrderID": 10248,
        "CustomerID": "VINET",
        "OrderDate": "1996-07-04T10:10:00.000Z",
        "ShippedDate": "1996-07-16T12:20:00.000Z",
        "Freight": 32.38,
        "ShipName": "Vins et alcools Chevalier",
        "ShipAddress": "59 rue de l\"Abbaye",
        "ShipCity": "Reims",
        "ShipRegion": null,
        "ShipCountry": "France"
    },
    {
        "OrderID": 10249,
        "CustomerID": "TOMSP",
        "OrderDate": "1996-07-05T12:20:00.000Z",
        "ShippedDate": "1996-07-10T13:20:00.000Z",
        "Freight": 11.61,
        "ShipName": "Toms Spezialitäten",
        "ShipAddress": "Luisenstr. 48",
        "ShipCity": "Münster",
        "ShipRegion": null,
        "ShipCountry": "Germany"
    },
    {
        "OrderID": 10250,
        "CustomerID": "HANAR",
        "OrderDate": "1996-07-08T08:40:00.000Z",
        "ShippedDate": "1996-07-12T07:50:00.000Z",
        "Freight": 65.83,
        "ShipName": "Hanari Carnes",
        "ShipAddress": "Rua do Paço, 67",
        "ShipCity": "Rio de Janeiro",
        "ShipRegion": "RJ",
        "ShipCountry": "Brazil"
    },
    {
        "OrderID": 10251,
        "CustomerID": "VICTE",
        "OrderDate": "1996-07-08T07:50:00.000Z",
        "ShippedDate": "1996-07-15T15:50:00.000Z",
        "Freight": 41.34,
        "ShipName": "Victuailles en stock",
        "ShipAddress": "2, rue du Commerce",
        "ShipCity": "Lyon",
        "ShipRegion": null,
        "ShipCountry": "France"
    },
    {
        "OrderID": 10252,
        "CustomerID": "SUPRD",
        "OrderDate": "1996-07-09T12:05:00.000Z",
        "ShippedDate": "1996-07-11T17:30:00.000Z",
        "Freight": 51.3,
        "ShipName": "Suprêmes délices",
        "ShipAddress": "Boulevard Tirou, 255",
        "ShipCity": "Charleroi",
        "ShipRegion": null,
        "ShipCountry": "Belgium"
    },
    {
        "OrderID": 10253,
        "CustomerID": "HANAR",
        "OrderDate": "1996-07-10T11:20:00.000Z",
        "ShippedDate": "1996-07-16T10:10:00.000Z",
        "Freight": 58.17,
        "ShipName": "Hanari Carnes",
        "ShipAddress": "Rua do Paço, 67",
        "ShipCity": "Rio de Janeiro",
        "ShipRegion": "RJ",
        "ShipCountry": "Brazil"
    },
    {
        "OrderID": 10254,
        "CustomerID": "CHOPS",
        "OrderDate": "1996-07-11T10:00.00.000Z",
        "ShippedDate": "1996-07-23T20:40:00.000Z",
        "Freight": 22.98,
        "ShipName": "Chop-suey Chinese",
        "ShipAddress": "Hauptstr. 31",
        "ShipCity": "Bern",
        "ShipRegion": null,
        "ShipCountry": "Switzerland"
    },
    {
        "OrderID": 10255,
        "CustomerID": "RICSU",
        "OrderDate": "1996-07-12T10:40:00.000Z",
        "ShippedDate": "1996-07-15T05:40:00.000Z",
        "Freight": 148.33,
        "ShipName": "Richter Supermarkt",
        "ShipAddress": "Starenweg 5",
        "ShipCity": "Genève",
        "ShipRegion": null,
        "ShipCountry": "Switzerland"
    }
]);
```