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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to auto-increment primary key of grid

Thread ID:

Created:

Updated:

Platform:

Replies:

142805 Feb 20,2019 12:52 PM UTC Feb 26,2019 12:19 PM UTC Vue 5
loading
Tags: Data Grid
Stefan Tmusic
Asked On February 20, 2019 12:53 PM UTC

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.

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


Stefan Tmusic
Replied On 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' },

Pavithra Subramaniyam [Syncfusion]
Replied On 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.   


Stefan Tmusic
Replied On February 22, 2019 03:09 PM UTC

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 [Syncfusion]
Replied On 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. 


CONFIRMATION

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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon