How to show Index column and set it uneditable

Question

Hi Team,I want add a column dynamically to show index of the grid. I don't want to add new variable in grid's dataSource variable. How to achieve it ? Regards,Sandeep G

Balaji Sekar · Answer

Hi Sandeep, 
 
Greetings from the Syncfusion support. 
 
Based on your query we have achieved the Serial Number generating the grid column using rowDataBound event. In below code example, we have bound the Serial number to respective cells using rowDataBound event. 
  
In the below sample we have set the serial number based on the row index, current page and page size. 
 




    rowDataBound: function (args) {        
      var gridObj = document.getElementsByClassName("e-grid")[0] 
        .ej2_instances[0]; 
      args.row.children[0].innerText = 
        parseInt(args.row.getAttribute("aria-rowindex")) + 
        (gridObj.pageSettings.currentPage - 1) * gridObj.pageSettings.pageSize; 
    }, 
 
Sample link: https://codesandbox.io/s/vue-template-forked-81z41 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Balaji Sekar.