We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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 namegender

1



2



3



4










Let me know how to implement.
Regards.

5 Replies

PS Pavithra Subramaniyam Syncfusion Team February 21, 2019 03:53 AM

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 04:24 AM

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 04:55 AM

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 07:09 AM

Thanks..
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 04:19 AM

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon