How to auto-increment primary key of grid
I am gonna develop the function like excel sheet feature in the vue grid .(auto increment if I drag and drop that value to the column down)
| id | name | gender | ||
| 1 | ||||
| 2 | ||||
| 3 | ||||
| 4 | ||||
Let me know how to implement.
Regards.
Regards.
SIGN IN To post a reply.
5 Replies
PS
Pavithra Subramaniyam
Syncfusion Team
February 21, 2019 11:53 AM UTC
Hi Michal,
Thanks for contacting Syncfusion support.
From your query, we found that you want add auto incremented value to the next cells while drag the particular cell in Grid column(like an excel feature). We suggest to use AutoFill feature of the Grid with following work around to achieve this requirement,
|
<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> |
In this code, we have used cellSelected event with AutoFill feature to achieved this requirement. Also, we have prepared the sample with this requirement and that can be download from the below link,
Refer the below link to know about AutoFill feature and cellSelected event of the Grid,
If we misunderstood your query, please share the more details about your requirement for further assistance.
Regards,
Pavithra S.
ST
Stefan Tmusic
February 21, 2019 12:24 PM UTC
Thanks for your help.
Would you do this in the following case?
selectionOption: { checkboxMode: 'ResetOnRowClick', mode:'Both', type: 'Multiple', cellSelectionMode: 'Box' },
PS
Pavithra Subramaniyam
Syncfusion Team
February 22, 2019 12:55 PM UTC
Hi Michal,
From your query, we suspect that you need to use this AutoFill with auto increment workaround in row and column. So you can achieve this requirement like as following code snippet,
|
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);
}
}
}
} |
Also, we have modified the sample with this requirement and that can be download from the below link,
If we misunderstood your query, please share the more details about your requirement for further assistance.
Regards,
Pavithra S.
ST
Stefan Tmusic
February 22, 2019 03:09 PM UTC
Thanks..
The code that you sent run well in the case of "mode: Cell".
The code that you sent run well in the case of "mode: Cell".
But I need in the case of "mode: both"
selectionOption: { checkboxMode: 'ResetOnRowClick', mode:'Both', type: 'Multiple', cellSelectionMode: 'Box' },
Let me know.
PS
Pavithra Subramaniyam
Syncfusion Team
February 26, 2019 12:19 PM UTC
Hi Michal,
From your query, we found that you want to use the AutoFill feature with the selection mode as “both” (i.e Row and cell). But we have provided the AutoFill feature like an Microsoft excel behavior. So by default we have restricted this selection mode in this feature and we can only use cell selection with this feature. So we are unable to use this “both” selection mode with the AutoFill.
Regards,
Pavithra S.
SIGN IN To post a reply.
