Edit types in Vue Grid component

16 Mar 202324 minutes to read

Customize editors using params

The columns.editType is used to define the editor component for any particular column.You can set the columns.editType based on data type of the column.

  • NumericTextBox component for integers, double, and decimal data types.

  • TextBox component for string data type.

  • DropDownList component to show all unique values related to that field.

  • Checkbox component for boolean type.

  • DatePicker component for date type.

Also, you can customize model of the columns.editType component through the columns.edit.params.

The following table describes cell edit type component and their corresponding edit params of the column.

Component Example
NumericTextBox params: { decimals: 2, value: 5 }
TextBox -
DropDownList params: { value: ‘Germany’ }
DatePicker params: { value: new Date()}
Checkbox params: { checked: true}
<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' :edit='numericParams' width=120 format= 'C2'></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' editType= 'dropdownedit' :edit='ddParams' width=150></e-column>
                <e-column field='ShippedDate' headerText='Shipped Date' editType= 'datepickeredit' :edit='dpParams' width=150></e-column>
                <e-column field='Verified' headerText='Verified' editType= 'booleanedit' :edit='boolParams' 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 },
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
      numericParams: { params: { decimals: 2, value: 5 } },
      ddParams: { params: { value: 'Germany' } },
      dpParams: { params: {value: new Date() } },
      boolParams: { params: {checked: true } }
    };
  },
  provide: {
    grid: [Page, Edit, Toolbar]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

If edit type is not defined in the column, then it will be considered as the stringedit type (Textbox component).

Restrict to type decimal points in a NumericTextBox while editing the numeric column

By default, the number of decimal places will be restricted to two in the NumericTextBox while editing the numeric column. We can restrict to type the decimal points in a NumericTextBox by using the validateDecimalOnType and decimals properties of NumericTextBox.

In the below demo, while editing the row we have restricted to type the decimal point value in the NumericTextBox of Freight column.

<template>
    <div id="app">
        <ejs-grid :dataSource='data' :editSettings='editSettings' :toolbar='toolbar' height='265px' >
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' :isPrimaryKey='true' textAlign='Right' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='Freight' headerText='Freight' textAlign='Center' editType='numericedit' :edit='numericParams' width=80></e-column>
             <e-column field='ShipCity' headerText='Ship City' editType='dropdownedit'  width=120></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 },
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
      numericParams: { params: {
        validateDecimalOnType: true,
        decimals: 0,
        format: "N" }
      },
    };
  },
  provide: {
    grid: [Edit, Toolbar]
  }
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Provide custom data source and enabling filtering to DropDownList

You can provide data source to the DropDownList by using the columns.edit.params property.

While setting new data source using edit params, you must specify a new query property too for the DropDownList as follows,

countryParams: {
          params:   {
            allowFiltering: true,
            dataSource: country,
            fields: {text:"countryName",value:"countryName"},
            query: new Query(),
            actionComplete: () => false
            }
      };

You can also enable filtering for the DropDownList by passing the allowFiltering as true to the edit params.

In the below demo, DropDownList is rendered with custom Datasource for the ShipCountry column and enabled filtering to search DropDownList items.

<template>
    <div id="app">
        <ejs-grid ref='grid' :dataSource='data' :editSettings='editSettings' :toolbar='toolbar' height='273px' >
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' :isPrimaryKey='true' textAlign='Right' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='ShipCountry' headerText='ShipCountry' editType='dropdownedit' :edit='countryParams' width=150></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { createElement } from '@syncfusion/ej2-base';
import { GridPlugin,Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { DropDownList } from "@syncfusion/ej2-dropdowns";
import { Query } from '@syncfusion/ej2-data';
import { cascadeData } from './datasource.js';

let country= [
        { countryName: 'United States', countryId: '1' },
        { countryName: 'Australia', countryId: '2' },
        { countryName: 'India', countryId: '3' }
    ];
Vue.use(GridPlugin);
export default {
    data: () => {
      return {
        data: cascadeData,
        toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
        editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
        countryParams: {
          params:   {
            allowFiltering: true,
            dataSource: country,
            fields: {text:"countryName",value:"countryName"},
            query: new Query(),
            actionComplete: () => false
            }
        }
      };
    },
    provide: {
      grid: [Edit, Toolbar]
    }
  }
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Custom editors using template

The cell edit template is used to add a custom component for a particular column by invoking the following functions:

  • create - It is used to create the element at the time of initialization.

  • write - It is used to create custom component or assign default value at the time of editing.

  • read - It is used to read the value from the component at the time of save.

  • destroy - It is used to destroy the component.

Render TimePicker component while editing

Use the cell edit template feature of the Grid to render the TimePicker component in the Grid edit form. In the below sample, we have rendered TimePicker component in the OrderDate column.

<template>
    <div id="app">
        <ejs-grid ref='grid' :dataSource='data' :allowPaging='true' :editSettings='editSettings' :pageSettings='pageSettings' :toolbar='toolbar' height='175px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' type='number' textAlign='Right' :isPrimaryKey='true' :validationRules='orderIDRules' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' type='string' width=120>
                </e-column>
                <e-column field='Freight' headerText='Freight' type='number' textAlign='Right' editType='numericedit' format='C2' width=120></e-column>
                <e-column field='OrderDate' headerText='Order Date' type='date' textAlign='Right' format="hh:mm" :edit='dpParams' width=120></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { TimePicker } from "@syncfusion/ej2-calendars";
import { enableRipple } from "@syncfusion/ej2-base";
import { purchaseData } from './datasource.js';

Vue.use(GridPlugin);

let ddElem;
let timeObject;

function createOrderDateFn() {
  ddElem = document.createElement('input');
  return ddElem;
}
function destroyOrderDateFn() {
  timeObject.destroy();
}
function readOrderDateFn() {
  return timeObject.value;
}
function writeOrderDateFn(args) {
  enableRipple(true);
  timeObject = new TimePicker({
    value: args.rowData[args.column.field],
    step: 60,
  });
  timeObject.appendTo(ddElem);
}

export default {
  data() {
    return {
      data: purchaseData,
      pageSettings: { pageSizes: true, pageSize: 5 },
      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
      dpParams: {
        create: createOrderDateFn,
        destroy: destroyOrderDateFn,
        read: readOrderDateFn,
        write: writeOrderDateFn,
      },
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
      orderIDRules: { required: true },
    };
  },

  provide: {
    grid: [Page, Edit, Toolbar],
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Render AutoComplete component while editing

Use the cell edit template feature of the Grid to render the AutoComplete component in the Grid edit form. In the below sample, we have rendered AutoComplete component in the CustomerID column.

<template>
    <div id="app">
        <ejs-grid ref='grid' :dataSource='data' :allowPaging='true' :editSettings='editSettings' :pageSettings='pageSettings' :toolbar='toolbar' height='175px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' type='number' textAlign='Right' :isPrimaryKey='true' :validationRules='orderIDRules' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' type='string' :edit='daParams' width=140></e-column>
                <e-column field='Freight' headerText='Freight' type='number' textAlign='Right' editType='numericedit' format='C2' width=120></e-column>
                <e-column field='OrderDate' headerText='Order Date' type='date' editType='datepickeredit' textAlign='Right' format='yMd' 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 { AutoComplete } from "@syncfusion/ej2-dropdowns";
import { purchaseData } from './datasource.js';

Vue.use(GridPlugin);

let inpuEle;
let autoCompleteIns;
let autoCompleteData = [
  { CustomerID: 'VINET', Id: '1' },
  { CustomerID: 'TOMSP', Id: '2' },
  { CustomerID: 'HANAR', Id: '3' },
  { CustomerID: 'VICTE', Id: '4' },
  { CustomerID: 'SUPRD', Id: '5' },
];

function createCustomerIDFn() {
  inpuEle = document.createElement('input');
  return inpuEle;
}
function destroyCustomerIDFn() {
  autoCompleteIns.destroy();
}
function readCustomerIDFn() {
  return autoCompleteIns.value;
}
function writeCustomerIDFn(args) {
  autoCompleteIns = new AutoComplete({
    allowCustom: true,
    value: args.rowData[args.column.field],
    dataSource: autoCompleteData,
    fields: { value: "CustomerID", text: "CustomerID" },
  });
  autoCompleteIns.appendTo(inpuEle);
}

export default {
  data() {
    return {
      data: purchaseData,
      pageSettings: { pageSizes: true, pageSize: 5 },
      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
      daParams: {
        create: createCustomerIDFn,
        destroy: destroyCustomerIDFn,
        read: readCustomerIDFn,
        write: writeCustomerIDFn,
      },
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
      orderIDRules: { required: true },
    };
  },

  provide: {
    grid: [Page, Edit, Toolbar],
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Render MultiSelect DropDown component while editing

Use the cell edit template feature of the Grid to render the MultiSelect DropDown component in the Grid edit form. In the below sample, we have rendered MultiSelect DropDown component in the ShipCity column.

<template>
    <div id="app">
        <ejs-grid ref='grid' :dataSource='data' :allowPaging='true' :editSettings='editSettings' :pageSettings='pageSettings' :toolbar='toolbar' height='175px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' type='number' textAlign='Right' :isPrimaryKey='true' :validationRules='orderIDRules' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' type='string' width=120>
                </e-column>
                <e-column field='Freight' headerText='Freight' type='number' textAlign='Right' editType='numericedit' format='C2' width=120></e-column>
                <e-column field='ShipCity' headerText='Ship City' type='string' :edit='dsParams' 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 { MultiSelect } from "@syncfusion/ej2-dropdowns";
import { purchaseData } from './datasource.js';

Vue.use(GridPlugin);

let ddElem;
let multiSelectObj;
let multiselectDatasource = [
  { ShipCity: 'Reims', Id: '1' },
  { ShipCity: 'Münster', Id: '2' },
  { ShipCity: 'Rio de Janeiro', Id: '3' },
  { ShipCity: 'Lyon', Id: '4' },
  { ShipCity: 'Charleroi', Id: '5' },
];

function createShipCityFn() {
  ddElem = document.createElement('input');
  return ddElem;
}
function readShipCityFn() {
  return multiSelectObj.value.join(",");
}
function destroyShipCityFn() {
  multiSelectObj.destroy();
}
function writeShipCityFn(args) {
  {
    let multiSelectVal = args.rowData[args.column.field]
      ? args.rowData[args.column.field].split(",")
      : [];
    multiSelectObj = new MultiSelect({
      value: multiSelectVal,
      dataSource: multiselectDatasource,
      fields: { value: "ShipCity", text: "ShipCity" },
      floatLabelType: "Never",
      mode: "Box",
    });
    multiSelectObj.appendTo(ddElem);
  }
}

export default {
  data() {
    return {
      data: purchaseData,
      pageSettings: { pageSizes: true, pageSize: 5 },
      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
      dsParams: {
        create: createShipCityFn,
        destroy: destroyShipCityFn,
        read: readShipCityFn,
        write: writeShipCityFn,
      },
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
      orderIDRules: { required: true },
    };
  },

  provide: {
    grid: [Page, Edit, Toolbar],
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Render MaskedTextBox component while editing

Use the cell edit template feature of the Grid to render the MaskedTextBox component in the Grid edit form. In the following sample, the MaskedTextBox component is rendered in the Mask column.

<template>
    <div id="app">
        <ejs-grid ref='grid' :dataSource='data' :allowPaging='true' :editSettings='editSettings'  :toolbar='toolbar'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' type='number' textAlign='Right' :isPrimaryKey='true' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' type='string' width=120>
                </e-column>
                <e-column field='ShipCountry' headerText='Ship Country' type='string' width=120>
                </e-column>
                <e-column field='Mask' headerText='Mask' :edit='params'  width=140>
                </e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { MaskedTextBox } from '@syncfusion/ej2-inputs';
import { employeeData } from './datasource.js';

Vue.use(GridPlugin);

let element;
let maskObj;

function create() {
  element = document.createElement('input');
  return element;
}
function destroy() {
  maskObj.destroy();
}
function read() {
  return maskObj.value;
}
function write(args) {
     maskObj = new MaskedTextBox({
         mask: "0-0-0-0",
        value: args.rowData.Mask
      });
      maskObj.appendTo(element);
}

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

Render RichTextEditor component while editing

Use the cell edit template feature of the Grid to render the RichTextEditor component in the Grid edit form. In the below sample, we have rendered RichTextEditor component in the ShipAddress column, so we use allowTextWrap property to true.

<template>
    <div id="app">
        <ejs-grid ref='grid' :dataSource='data' :allowPaging='true' :allowTextWrap='true' :editSettings='editSettings' :pageSettings='pageSettings' :toolbar='toolbar' height='175px' :created='created'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' type='number' textAlign='Right' :isPrimaryKey='true' :validationRules='orderIDRules' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' type='string' width=140>
                </e-column>
                <e-column field='Freight' headerText='Freight' type='number' textAlign='Right' editType='numericedit' format='C2' width=120></e-column>
                <e-column field='ShipAddress' headerText='Ship Address' type='string' :edit='ddParams' :valueAccessor='valueAccessor' :disableHtmlEncode='disableHtmlEncode' width=180>
                </e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { purchaseData } from './datasource.js';
import { GridPlugin, Page, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { RichTextEditor, Toolbar as RTEToolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-richtexteditor';

RichTextEditor.Inject(RTEToolbar, Link, Image, HtmlEditor, QuickToolbar);

Vue.use(GridPlugin);

let rteElem;
let richTextEditor;

function createShipAddressFn() {
  rteElem = document.createElement("textarea");
  return rteElem;
}
function destroyShipAddressFn() {
  richTextEditor.destroy();
}
function readShipAddressFn() {
  return richTextEditor.value;
}
function writeShipAddressFn(args) {
  richTextEditor = new RichTextEditor({
    value: args.rowData[args.column.field],
  });
  richTextEditor.appendTo(rteElem);
}

export default {
  data() {
    return {
      data: purchaseData,
      pageSettings: { pageSizes: true, pageSize: 5 },
      disableHtmlEncode: false,
      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
      ddParams: {
        create: createShipAddressFn,
        destroy: destroyShipAddressFn,
        read: readShipAddressFn,
        write: writeShipAddressFn,
      },
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
      orderIDRules: { required: true },
    };
  },
  methods: {
    created(args) {
      this.$refs.grid.ej2Instances.keyConfigs.enter = "";
    },
    valueAccessor: function (field, cdata, column) {
      var value = cdata[field];
      if (value !== undefined) {
        return value.split("\n").join("<br>");
      } else {
        return "";
      }
    },
  },

  provide: {
    grid: [Page, Edit, Toolbar],
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Render multiple columns in DropDownList component while editing

Use the cell edit template feature of the Grid to render the DropDownList component in the Grid edit form.

The DropDownList has been provided with several options to customize each list item, group title, selected value, header, and footer element. By default, list items can be rendered as a single column in the DropDownList component. Instead of this, multiple columns can be rendered. This can be achieved by using the headerTemplate and itemTemplate properties of the DropDownList component.

This is demonstrated in the following sample.

<template>
    <div id="app">
        <ejs-grid ref='grid' :dataSource='data' :allowPaging='true' :editSettings='editSettings'  :toolbar='toolbar'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' type='number' textAlign='Right' :isPrimaryKey='true' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' type='string' width=120>
                </e-column>
                <e-column field='ShipCountry' headerText='Ship Country' type='string' :edit='params'  width=300>
                </e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { Query } from '@syncfusion/ej2-data';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { data } from './datasource.js';

Vue.use(GridPlugin);

let element;
let dropdownobj;

function create() {
  element = document.createElement('input');
  return element;
}
function destroy() {
  dropdownobj.destroy();
}
function read() {
  return dropdownobj.value;
}
function write(args) {
     dropdownobj = new DropDownList({
         dataSource:data,
         value: args.rowData[args.column.field],
         query: new Query().select(['EmployeeID', 'ShipCountry']).take(10),
         fields: { text: 'ShipCountry', value: 'ShipCountry' },
         placeholder: 'Select a Country',
         headerTemplate: '<table><tr><th>EmployeeID</th><th>ShipCountry</th></tr></table>',
         itemTemplate: '<div class="e-grid"><table class="e-table"><tbody><tr><td class="e-rowcell">${EmployeeID}</td><td class="e-rowcell">${ShipCountry}</td></tr> </tbody></table></div>'
      });
      dropdownobj.appendTo(element);
}

export default {
  data() {
    return {
      data: data,
      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
      params: {
        create: create,
        destroy: destroy,
        read: read,
        write: write,
      },
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel']
    };
  },
  provide: {
    grid: [Page, Edit, Toolbar],
  },
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
    .content {
        margin: 0 auto;
        width: 550px;
    }
    table{
        width:100%;
        border-collapse: separate;
        table-layout: fixed;
    }
    th,td{  
        border-width: 1px 0 0 1px;
        border-color: #e0e0e0;
        text-align: left;
        border-style: solid;
        display: table-cell;
    }
    th{
        line-height: 36px;
        text-indent: 16px;
    }
    .e-ddl-header{
        padding-right: 17px;
        border-width: 1px 0px 1px 0px;
        border-color: #e0e0e0;
        border-style: solid;
    }
    .e-dropdownbase .e-list-item{
        padding-right:0px;
    }
</style>

Using template

The cell editor for a particular column can be specified using a Vue Component. The column.editTemplate property used to define the corresponding column editor.

<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='OrderDate' headerText='Order Date' type='date' format= 'yMd' width=150 :editTemplate='editTemplate'></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';
import { DatePickerPlugin } from "@syncfusion/ej2-vue-calendars";

Vue.use(GridPlugin);
Vue.use(DatePickerPlugin);

export default {
  data() {
    return {
      data: data,
      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel']
    };
  },
  methods: {
      editTemplate: function() {
          return {template: Vue.component('datePicker', {
              template: `<ejs-datepicker id="OrderDate" placeholder="Order Date" v-model="data.OrderDate" floatLabelType='Never'></ejs-datepicker>`,
              data() {
                  return {data:{}}
              }
          })}
      }
  },
  provide: {
    grid: [Page, Edit, Toolbar]
  }
}
</script>

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