Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
142805 | Feb 20,2019 12:52 PM UTC | Feb 26,2019 12:19 PM UTC | Vue | 5 |
![]() |
Tags: Data Grid |
id | name | gender | ||
1 | ||||
2 | ||||
3 | ||||
4 | ||||
<template>
<div id="app">
<ejs-grid ref='grid' id='grid' :dataSource="data" :allowPaging='true' :cellSelected='cellSelected' :pageSettings='pageSettings' :enableAutoFill="true" :selectionSettings='selectionOptions' :editSettings='editSettings' :toolbar='toolbar'>
<e-columns>
<e-column field='AutoIncrement' headerText='AutoIncrement' , type='number' , width='120'></e-column>
<e-column field='EmployeeID' headerText='Employee ID' isPrimaryKey='true' , width='120'></e-column>
<e-column field='LastName' headerText='Last Name' width='120'></e-column>
<e-column field='FirstName' headerText='First Name' width='120'></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Toolbar, Page, Edit } from "@syncfusion/ej2-vue-grids";
import { employeeData } from './datasource.js';
Vue.use(GridPlugin);
export default {
data() {
return {
data: employeeData,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' },
toolbar: ['Add', 'Update', 'Cancel'],
selectionOptions: { type: 'Multiple', mode: 'Cell', cellSelectionMode: 'Box' },
pageSettings: {pageCount: 5}
};
},
methods: {
cellSelected: function (args){
if (args.selectedRowCellIndex.length > 1 && this.$refs.grid.ej2Instances.editModule.getBatchChanges().changedRecords.length) {
var value;
for (var i = 0; i < args.selectedRowCellIndex.length; i++) {
var cell = this.$refs.grid.ej2Instances.getRowByIndex(args.selectedRowCellIndex[i].rowIndex).cells[args.selectedRowCellIndex[i].cellIndexes[0]];
if (i == 0) {
value = parseInt(cell.innerHTML);
continue;
}
value = value + 1;
debugger
this.$refs.grid.ej2Instances.editModule.getBatchChanges().changedRecords[i].AutoIncrement = value;
cell.innerHTML = value.toString();
}
}
}
},
provide: {
grid: [Toolbar, Edit, Page]
}
}
</script> |
cellSelected: function (args) {
if (args.selectedRowCellIndex.length > 1 && this.$refs.grid.ej2Instances.editModule.getBatchChanges().changedRecords.length) { // Column autoincrement
var value;
for (var i = 0; i < args.selectedRowCellIndex.length; i++) {
var cell = this.$refs.grid.ej2Instances.getRowByIndex(args.selectedRowCellIndex[i].rowIndex).cells[args.selectedRowCellIndex[i].cellIndexes[0]];
if (i == 0) {
value = parseInt(cell.innerHTML);
continue;
}
value = value + 1;
var field = this.$refs.grid.ej2Instances.getColumnByIndex(cell.cellIndex).field;
this.$refs.grid.ej2Instances.editModule.getBatchChanges().changedRecords[i][field] = value;
cell.innerHTML = value.toString();
}
}
if (args.selectedRowCellIndex.length == 1) { // Row autoincrement
var value;
for (var i = 0; i < args.selectedRowCellIndex.length; i++) {
var cells = args.selectedRowCellIndex[i].cellIndexes;
for (var j = 0; j < cells.length; j++) {
var cell = this.$refs.grid.ej2Instances.getRowByIndex(args.selectedRowCellIndex[i].rowIndex).cells[args.selectedRowCellIndex[0].cellIndexes[j]];
if (j == 0) {
value = parseInt(cell.innerHTML);
continue;
}
value = value + 1;
var field = this.$refs.grid.ej2Instances.getColumnByIndex(cell.cellIndex).field;
var rowIndex = args.selectedRowCellIndex[0].rowIndex;
this.$refs.grid.ej2Instances.editModule.updateCell(rowIndex, field, value);
}
}
}
} |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.