In line editing in Vue Grid component

8 Mar 202424 minutes to read

In Normal edit mode, when you start editing the currently selected record is changed to edit state.You can change the cell values and save edited data to the data source. To enable Normal edit, set the editSettings.mode as Normal.

app.vue

<template>
    <div id="app">
        <ejs-grid :dataSource='data' :editSettings='editSettings' :toolbar='toolbar' height='273px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' :isPrimaryKey='true' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='Freight' headerText='Freight' textAlign= 'Right' editType= 'numericedit' width=120 format= 'C2'></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' editType= 'dropdownedit' width=150></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel']
    };
  },
  provide: {
    grid: [Page, Edit, Toolbar]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Normal edit mode is default mode of editing.

Automatically update the column based on another column edited value

You can update the column value based on another column edited value by using the Cell Edit Template feature.

In the below demo, we have update the TotalCost column value based on the UnitPrice and UnitInStock column value while editing.

app.vue

<template>
  <div id="app">
    <ejs-grid id="grid" :dataSource="data" :editSettings="editSettings" :toolbar="toolbar" height="273px">
      <e-columns>
        <e-column field="ProductID" headerText="Product ID" textAlign="Right" :isPrimaryKey="true" width="100"></e-column>
        <e-column field="ProductName" headerText="Product Name" width="120"></e-column>
        <e-column field="UnitPrice" headerText="Unit Price" editType="numericedit" :edit="priceParams"
          width="150" format="C2" textAlign="Right" ></e-column>
        <e-column field="UnitsInStock" headerText="Units In Stock" editType="numericedit"
          :edit="stockParams" width="150" textAlign="Right"></e-column>
        <e-column field="TotalCost" headerText="Total Cost" width="150" :allowEditing="false" format="C2" textAlign="Right" ></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { NumericTextBox } from "@syncfusion/ej2-inputs";
import { productData } from "./datasource.js";

let priceElem, stockElem, priceObj, stockObj;
Vue.use(GridPlugin);
export default {
  data: () => {
    return {
      data: productData,
      toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"],
      editSettings: {
        allowEditing: true,
        allowAdding: true,
        allowDeleting: true,
      },
      priceParams: {
        create: () => {
          priceElem = document.createElement("input");
          return priceElem;
        },
        read: () => {
          return priceObj.value;
        },
        destroy: () => {
          priceObj.destroy();
        },
        write: (args) => {
          priceObj = new NumericTextBox({
            value: args.rowData[args.column.field],
            change: function (args) {
              let formEle = document
                .getElementById("grid")
                .querySelector("form").ej2_instances[0];
              var totalCostFieldEle = formEle.getInputElement("TotalCost");
              totalCostFieldEle.value = priceObj.value * stockObj.value;
            },
          });
          priceObj.appendTo(priceElem);
        },
      },
      stockParams: {
        create: () => {
          stockElem = document.createElement("input");
          return stockElem;
        },
        read: () => {
          return stockObj.value;
        },
        destroy: () => {
          stockObj.destroy();
        },
        write: (args) => {
          stockObj = new NumericTextBox({
            value: args.rowData[args.column.field],
            change: function (args) {
              let formEle = document
                .getElementById("grid")
                .querySelector("form").ej2_instances[0];
              var totalCostFieldEle = formEle.getInputElement("TotalCost");
              totalCostFieldEle.value = priceObj.value * stockObj.value;
            },
          });
          stockObj.appendTo(stockElem);
        },
      },
    };
  },
  provide: {
    grid: [Edit, Toolbar],
  },
};
</script>

<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Cancel edit based on condition

You can prevent the CRUD operations of the Grid by using condition in the actionBegin event with requestType as beginEdit for editing, add for adding and delete for deleting actions.

In the below demo, we prevent the CRUD operation based on the Role column value. If the Role Column is Employee, we are unable to edit/delete that row.

app.vue

<template>
    <div id="app">
        <ejs-button v-on:click="btnClick">Grid is Addable</ejs-button>
        <ejs-grid :dataSource='data' :editSettings='editSettings' :toolbar='toolbar' :actionBegin="actionBegin" height='240px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' :isPrimaryKey='true' width=100></e-column>
                <e-column field='Role' headerText='Role' width=120></e-column>
                <e-column field='Freight' headerText='Freight' textAlign= 'Right' editType= 'numericedit' width=120 format= 'C2'></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' editType= 'dropdownedit' width=150></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
import { employeeData } from './datasource.js';

Vue.use(GridPlugin);
Vue.use(ButtonPlugin);

export default {
  data() {
    return {
      data: employeeData,
      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
      isAddable: true
    };
  },
  methods: {
    actionBegin: function (args) {
      if (args.requestType === "beginEdit") {
        if (args.rowData["Role"].toLowerCase() == "employee") {
          args.cancel = true;
        }
      }
      if (args.requestType === "delete") {
        if (args.data[0]["Role"].toLowerCase() === "employee") {
          args.cancel = true;
        }
      }
      if (args.requestType === "add") {
        if (!this.isAddable) {
          args.cancel = true;
        }
      }
    },
    btnClick: function (args) {
      args.target.innerText === "Grid is Addable" ? (args.target.innerText = "Grid is Not Addable") : (args.target.innerText = "Grid is Addable");
      this.isAddable = !this.isAddable;
    },
  },
  provide: {
    grid: [Page, Edit, Toolbar]
  }
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
 @import "../node_modules/@syncfusion/ej2-vue-buttons/styles/tailwind.css";
</style>

Perform CRUD action programmatically

Grid methods can be used to perform CRUD operations programmatically. The addRecord, deleteRecord, and startEdit methods are used to perform CRUD operations in the following demo.

• To add a new record to the Grid, use the addRecord method. In this method, you can pass the data parameter to add a new record to the Grid, and the index parameter to add a record at a specific index. If you call this method with no parameters, it will create an empty row in the Grid.

• To change the selected row to the edit state, use the startEdit method.

• If you need to update the row data in the Grid’s datasource, you can use the updateRow method. In this method, you need to pass the index value of the row to be updated along with the updated data.

• If you need to update the particular cell in the row, you can use the setCellValue method. In this method, you need to pass the primary key value of the data source, field name, and new value for the particular cell.

• To remove a selected row from the Grid, use the deleteRecord method. For both edit and delete operations, you must select a row first.

Note: In both normal and dialog editing modes, these methods can be used.

app.vue

<template>
    <div id="app">
       <button id="edit"  @click="clickEdit">Edit</button>
       <button id="add"  @click="clickAdd">Add</button>
       <button id="delete"  @click="clickDelete">Delete</button>
       <button id="updaterow"  @click="clickUpdateRow">Update Row</button>
       <button id="updatecell"  @click="clickUpdateCell">Update Cell</button>
      <br /><br />
        <ejs-grid ref="grid" :dataSource='data'  :editSettings='editSettings'  height='230px' id="Grid">
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120 :isPrimaryKey='true'></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Edit } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
    };
  },
  methods: {
    clickAdd: function () {
        this.$refs.grid.ej2Instances.addRecord({ "OrderID": "10248", "CustomerID": "RTER", "ShipCity": "America", "ShipName": "Hanari"  });
    },
    clickEdit: function () {
        this.$refs.grid.ej2Instances.startEdit();
    },
    clickDelete: function () {
        this.$refs.grid.ej2Instances.deleteRecord();
    },
    clickUpdateRow: function () {
        this.$refs.grid.ej2Instances.updateRow(0, { OrderID: 10248, CustomerID: 'RTER', ShipCity: 'America', ShipName: 'Hanari'  });
    },
    clickUpdateCell: function () {
        this.$refs.grid.ej2Instances.setCellValue((this.$refs.grid.ej2Instances.currentViewData[0] as any).OrderID,'CustomerID','Value Changed');
    }
  },
  provide: {
    grid: [Edit]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Confirmation dialog

The delete confirm dialog can be shown when deleting a record by defining the
showDeleteConfirmDialog as true

app.vue

<template>
    <div id="app">
        <ejs-grid :dataSource='data' :editSettings='editSettings' :toolbar='toolbar' height='273px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' :isPrimaryKey='true' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='Freight' headerText='Freight' textAlign= 'Right' editType= 'numericedit' width=120 format= 'C2'></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' editType= 'dropdownedit' width=150></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      editSettings: { showDeleteConfirmDialog: true, allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel']
    };
  },
  provide: {
    grid: [Page, Edit, Toolbar]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

The showDeleteConfirmDialog supports all type of edit modes.

Default column values on add new row

The grid provides an option to set the default value for the columns when adding a new record in it.To set a default value for the particular column by defining the columns.defaultValue.

app.vue

<template>
    <div id="app">
        <ejs-grid :dataSource='data' :editSettings='editSettings' :toolbar='toolbar' height='273px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' :isPrimaryKey='true' :validationRules='orderIDRules' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' defaultValue= 'HANAR' :validationRules='customerIDRules' width=120></e-column>
                <e-column field='Freight' headerText='Freight' textAlign= 'Right' editType= 'numericedit' width=120 format= 'C2'></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' editType= 'dropdownedit' width=150></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
      orderIDRules: { required: true },
      customerIDRules: { required: true, minLength: 3 }
    };
  },
  provide: {
    grid: [Page, Edit, Toolbar]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Adding a new row at the bottom of the Grid

By default, a new row will be added at the top of the grid. You can change it by setting editSettings.newRowPosition as Bottom.

app.vue

<template>
    <div id="app">
        <ejs-grid :dataSource='data' :editSettings='editSettings' height='270' :toolbar='toolbar'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' :isPrimaryKey='true' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='Freight' headerText='Freight' textAlign= 'Right' width=120 format= 'C2'></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' width=150></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, newRowPosition: 'Bottom' },
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel']
    };
  },
  provide: {
    grid: [Page, Edit, Toolbar]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Add newRowPostion is supported for Normal and Batch editing modes.

Show add new row always in grid

The Syncfusion Grid simplifies the addition of new records by consistently presenting a blank, “add new row” form within the grid. To enable this feature, you can set the showAddNewRow property within the editSettings configuration to true. This allows for continuous addition of new records. You can display the add a new row at either the top or bottom of the grid content, depending on the newRowPosition property of editSettings. By default, the add new row is displayed at the top row of the grid content.

The following sample demonstrates how to add a new record continuously using showAddNewRow property.

app.vue

<template>
    <div id="app">
        <ejs-grid :dataSource='data' :editSettings='editSettings' :toolbar='toolbar' height='315px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' :isPrimaryKey='true' width=100 :validationRules='orderidrules'></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120 :validationRules='customeridrules'></e-column>
                <e-column field='Freight' headerText='Freight' textAlign= 'Right' editType= 'numericedit' width=120 format= 'C2' :validationRules='freightrules'></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' editType= 'dropdownedit' width=150></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, newRowPosition: 'Top', showAddNewRow: true },
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
      orderidrules: {required: true, number: true},
      customeridrules: { required: true, minLength: 5 },
      freightrules: { required: true, min: 1 }
    };
  },
  provide: {
    grid: [Edit, Toolbar]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

To save the newly added records, you can either hit the Enter key or click on the Update button located on the toolbar after filling in the new add form.

Limitations

• This feature is supported only for Inline/Normal editing mode and is not compatible with other edit modes.
• The new blank add row form will always be displayed at the top, even if you have set the new row position as the bottom for Virtual Scrolling and Infinite Scrolling enabled grid.
• This feature is not compatible with the column virtualization feature.

Move the focus to a particular cell instead of first cell while editing a row

The recordDoubleClick event allows you to move the focus to the corresponding cell (the cell that you doubled-clicked to edit a row) instead of the first cell in edit form. With the help of this event, you can focus the double-clicked column in inline edit mode.

app.vue

<template>
  <div id="app">
    <ejs-grid ref="grid" :dataSource="data" :editSettings="editSettings" height="220" :actionComplete="actionComplete" :recordDoubleClick="recordDoubleClick">
        <e-columns>
            <e-column field="OrderID" headerText="Order ID" textAlign="Right" :isPrimaryKey="true" width="120" type="number">
            </e-column>
            <e-column field="CustomerID" headerText="Customer ID" width="140" type="string">
            </e-column>
            <e-column field="Freight" headerText="Freight" editType="numericedit" textAlign="Right" width="120" format="C2">
            </e-column>
            <e-column field="OrderDate" headerText="Order Date" textAlign="Right" width="140" editType="datetimepickeredit" format="yMMM">
            </e-column>
            <e-column field="ShipCountry" headerText="Ship Country" width="150" editType="dropdownedit" :edit="params">
            </e-column>
        </e-columns>
    </ejs-grid>
  </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Edit } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";

Vue.use(GridPlugin);
var fieldName;
export default {
    data() {
        return {
            data: data,
            editSettings: {
                allowEditing: true,
                allowAdding: true,
                allowDeleting: true,
                 mode: "Normal",
            },
            shipFormat: { type: "dateTime", format: "dd/MM/yyyy hh:mm a" },
            params: {
                params: {
                    popupHeight: "300px",
                }
            }
        };
    },
    methods: {
        actionComplete(e) {
            if (e.requestType === "beginEdit") {
                // focus the column
                e.form.elements[this.$refs.grid.ej2Instances.element.getAttribute("id") + fieldName].focus();
            }
        },
        recordDoubleClick(e) {
            var clickedColumnIndex = e.cell.getAttribute("data-colindex");
            fieldName = this.$refs.grid.ej2Instances.columnModel[parseInt(clickedColumnIndex, 10)].field;
        }
    },
    provide: {
        grid: [Page, Edit]
    }
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>