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

Unable to show row index in "S no." column in edit mode

Hi Team,

I am facing an issue with showing the serial numbers in the first column(S.No) while row is in edit mode. It is vanishing the serial numbers in edit mode. Please help me to resolve this in inline editing.
Attached the sample code.


Cyril Ovely

3 Replies

VB Vinitha Balasubramanian Syncfusion Team November 8, 2022 08:31 AM

Hi Cyril,

Greetings from Syncfusion support.

Query : Unable to show row index in "S no." column in edit mode

We have validated the reported query from our side, in your case you have rendered the S.No column to Grid component which is not present in the dataSource. You have bound the value to the S.No column using Grid’s rowDataBound event. We want to convey that in EJ2 Grid, all the Grid actions like Editing, Filtering, Searching, Grouping, Sorting, etc., are performed with the Grid’s dataSource value based on its column field name and the column’s type.

Before we start providing solution to your query, please share the below details that will be helpful for us to provide better solution.

  • Please share if you want to perform edit action for the “S.No” column of the Grid component.
  • Please share whether you want to maintain the value of “S.No” column on performing Grid’s edit action.


Vinitha Balasubramanian

CO Cyril Ovely November 9, 2022 12:22 AM

Hi Vinitha Balasubramanian,

Thanks for your update. In this requirement we want to show row index in "Sno." column. So, we don't have any value for Sno. in DataSource.

  • No, I just need to show Index of the row
  • Yes, We need to set row index while row is in edit mode and view mode for the "Sno." column
Thanks & Regards,
Cyril Ovely

VB Vinitha Balasubramanian Syncfusion Team November 14, 2022 09:05 AM

We have achieved your requirement “to show row index in "S no." column in edit mode” using actionBegin and actionComplete event of Grid. Kindly refer the below code and sample for your reference.



actionBegin: function (args) {

      colValue = args.row.children[0].innerText;


    actionComplete: function (args) {

      args.form[0].value = colValue;


Sample : https://codesandbox.io/s/vue-template-forked-pij5wm

Note: The above customization is only for display purposes.

Documentation : https://ej2.syncfusion.com/vue/documentation/api/grid/#actionbegin


Live Chat Icon For mobile
Up arrow icon