How to auto-increment primary key of grid

[Stefan Tmusic]

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.

[Pavithra Subramaniyam]

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, 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/F1428051943210510.zip 

 

Refer the below link to know about AutoFill feature and cellSelected event of the Grid, 

 

https://ej2.syncfusion.com/vue/documentation/grid/clipboard/#autofill 

 

https://ej2.syncfusion.com/documentation/api/grid/#cellselected 

 

If we misunderstood your query, please share the more details about your requirement for further assistance. 

 

Regards, 

Pavithra S. 

[Stefan Tmusic]

Thanks for your help.

Would you do this in the following case?

   selectionOption: { checkboxMode: 'ResetOnRowClick', mode:'Both', type: 'Multiple', cellSelectionMode: 'Box' },

[Pavithra Subramaniyam]

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, 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/F1428051291088299.zip 

 

If we misunderstood your query, please share the more details about your requirement for further assistance. 

 

Regards,  

Pavithra S.   

[Stefan Tmusic]

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.

[Pavithra Subramaniyam]

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.