When I edit the cell I don't change its value, but it is changed as the prev cell value.
<template>
<div id="app">
<ejs-grid ref='grid' :load = 'load' :cellEdit="getCellEdit" gridLines='Both' :allowRowDragAndDrop="true" :toolbar='toolbar' :dataSource="data" :allowReordering='true' :dataBound='dataBound' :showColumnMenu='true' :allowResizing= 'true' :selectionSettings="selection" :filterSettings='filterSettings' :allowPaging="true" :allowSorting='true' :allowFiltering='true' :pageSettings='pageSettings' :editSettings='editSettings' >
<e-columns>
<e-column field='OrderID' headerText='Order ID' :isPrimaryKey='true' textAlign='Center' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' textAlign='Center' width=120></e-column>
<e-column field='Freight' headerText='Freight' textAlign='Center' editType= 'numericedit' width=120></e-column>
<e-column field='ShipCountry' headerText='Ship Country' textAlign='Center' editType= 'dropdownedit' width=150></e-column>
<e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" editType= 'datepickeredit' type="date" textAlign='Center'></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin,Selection,Toolbar , ColumnMenu, Reorder, Resize, RowDD, Page, Sort, Filter, Group, Aggregate ,Edit } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
import $ from 'jquery';
Vue.use(GridPlugin);
let elem;
export default {
data() {
return {
data:data,
selection: { type: 'Multiple' },
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch'},
pageSettings: { pageSizes:[5, 10, 20, 50], pageSize: 10 },
toolbar: ["Search"],
filterSettings: { type: 'Menu' },
footerSum: function () {
return { template : Vue.component('sumTemplate', {
template: `<span>Sum: {{data.Sum}}</span>`,
data () {return { data: {data: {}}};}
})
}
}
};
},
provide: {
grid: [Page, Selection, ColumnMenu, Toolbar, RowDD,Resize, Sort, Edit ,Filter, Group,Reorder, Aggregate]
},
methods: {
load(args) {
this.$refs.grid.$el.addEventListener('keydown', this.keyDownHandler);
},
keyDownHandler(e) {
if(e.keyCode) {
let gridIns = this.$refs.grid.ej2Instances;
gridIns.addRecord();
}
},
dataBound: function() {
this.$refs.grid.ej2Instances.columns[0].isPrimaryKey = true;
},
getCellEdit: function () {
// getSelectedRecords
console.log(this.$refs.grid.ej2Instances.getSelectedRecords())
},
// columnMenuClick: function(args) {
// if(args.item.id === 'gridclearsorting'){
// this.$refs.grid.clearSorting();
// }
// }
}
}
</script>
<style lang="scss">
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
