1. Home
  2. Forum
  3. Blazor
  4. Add a column with the row number

Add a column with the row number

How do I add a column with the current row number? 

9 Replies
RS Renjith Singh Rajendran Syncfusion Team May 18, 2020 11:35 AM UTC

Hi Amrutha, 

Greetings from Syncfusion support. 

We are not clear about your exact requirement. We suspect that, you would like to get the current selected row index, and use that as a value for a column in Grid when adding a new record to Grid. If so, then we suggest you to use the GetSelectedRowIndexes method of Grid. With this method you can get the current selected row index, and use that value for the particular Grid column when adding a new row in Grid. Please refer the code below, 

 
<SfButton OnClick="Click">Selected Row Index</SfButton> 
 
<SfGrid @ref="GridInstance" ... AllowPaging="true" Height="200"...> 
    ... 
</SfGrid> 
    public SfGrid<Account> GridInstance; 
    ... 
    public async Task Click() 
    { 
        var CurrentSelectedRowIndex = await GridInstance.GetSelectedRowIndexes(); 
    } 


If we have misunderstood your requirement, then we need more details to further proceed on this and provide you a solution as early as possible. 
  1. Share with us a detailed explanation of your complete requirement.
  2. Share with us a pictorial representation demonstrating your requirement.
  3. Share with us a video demo showing your requirement.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 
Renjith Singh Rajendran 


AM Amrutha May 18, 2020 02:36 PM UTC

I am trying to list some Names in my UI, and I want it to be numbered. So, I was thinking of adding a GridColumn in my SfGrid with value as the Row Number.  I have shown here a pictorial representation with my primary Key ID. But Ideally, I want the row number, Just for viewing in the UI.



RS Renjith Singh Rajendran Syncfusion Team May 19, 2020 07:33 AM UTC

Hi Amrutha, 

Thanks for your update. 

Based on your requirement, we suggest you to use the “Column Template” feature of Grid. With this you can display your own customized text/value in the Grid column.  
 
We have also prepared a sample based on your scenario. Please download the sample form the link below, 
 
Please refer the code below, 

 
        <GridColumn Field="@nameof(Account.AccountId)" IsPrimaryKey="true"> 
            <Template> 
                @{  
                    var a = (context as Account); 
                    <div>Serial No : @RowCountAI ; Value : @a.AccountId </div> 
                    RowCountAI++; 
                } 
            </Template> 
        </GridColumn> 
        <GridColumn Field="@nameof(Account.AccountName)" HeaderText="Account Name" TextAlign="TextAlign.Left"> 
            <Template> 
                @{ 
                    var a = (context as Account); 
                    <div>Serial No : @RowCountAN ; Value : @a.AccountName </div > 
                    RowCountAN++; 
                } 
            </Template> 
        </GridColumn> 
 
@code{ 
    ... 
    public int RowCountAI = 0; 
    public int RowCountAN = 0; 
    ... 
} 


Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


AM Amrutha May 20, 2020 06:49 AM UTC

Hi Renjith,

Thank you for the prompt response. 

I tried using the Column template and Iterating Serial number as shown in your application, However as shown below, the iteration repeats on the Toolbar or GridCommandColumn actions like Add, Edit, Cancel, Delete or Save/Update ('Serial No: 10' instead of 0, in 3rd image). I tried resetting the Serial number on GridEvent OnActionBegin/OnActionComplete. but for a split second the Iterated value is shown first,  and then only the reset Serial number is updated. Is there any other workaround? In my grid, I have to perform actions Add/Edit/Delete. After Add, the serial number should be 1 for the added value. Also, on Delete, the Serial number should be updated.






Regards,
Amrutha




RS Renjith Singh Rajendran Syncfusion Team May 21, 2020 09:48 AM UTC

Hi Amrutha, 

Thanks for your update. 

We suggest you to use the OnActionComplete event of Grid. Based on the RequestType, we suggest you to reset the values for RowCountAI, RowCountAN variables. We have modified the sample based on this scenario. Please download the sample from the link below, 

Please use as like the below code, 

<GridEvents OnActionComplete="OnActionComplete" TValue="Account"></GridEvents>
public void OnActionComplete(ActionEventArgs<Account> args) 
{ 
    if (args.RequestType.ToString() == "Add" || args.RequestType.ToString() == "Delete" || args.RequestType.ToString() == "BeginEdit" || args.RequestType.ToString() == "Save") 
    { 
        RowCountAI = 0; 
        RowCountAN = 0; 
    } 
} 


Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


AM Amrutha May 21, 2020 10:52 AM UTC

Hi Renjith,

As I had mentioned in my previous reply, I did try resetting OnActionComplete,  but because I have loads of data to display, for a split second newly iterated row Numer is shown before resetting the Row Number.

I have attached a video to demonstrate the same.

Is there any other way to display row numbers other than Iterating through the data count?

Attachment: SfTimeError_32b71d51.zip

RS Renjith Singh Rajendran Syncfusion Team May 22, 2020 09:19 AM UTC

Hi Amrutha, 

Thanks for your update. 

Based on this scenario, we suggest you to maintain a flag variable and based on that flag render the template content. Prevent the template content rendering by enabling the flag in OnActionBegin handler as like the below code, so that the template with wrong row values will not be displayed. We have also modified the sample from our previous update. Please download the modified sample form the link below, 
 
Please refer the codes below,  

 
                <Template> 
                    @{ 
                        var a = (context as Account); 
                        @if (!flag) 
                        { 
                            <div>Serial No : @RowCountAI ; Value : @a.AccountId </div> 
                            RowCountAI++; 
                        } 
                    } 
                </Template> 
 
public bool flag = false;...public void OnActionComplete(ActionEventArgs<Account> args){    if (args.RequestType.ToString() == "Add" || args.RequestType.ToString() == "Delete" ...)    {        RowCountAI = 0;        RowCountAN = 0;        flag = false;    }}public void OnActionBegin(ActionEventArgs<Account> args){    if (args.RequestType.ToString() == "Add" || args.RequestType.ToString() == "Delete" ...)    {        flag = true;    }}

Please try the above suggestion and get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


ST steve replied to Renjith Singh Rajendran October 17, 2025 09:46 AM UTC

Hi, I have the same requirement to have a column that displays a row number.

But, following these suggestions I am unable to get a satisfactory result.

I have a a situation that I am struggling to over come.


For my situation, I am using a Grid with a sub grid that has 'checkbox selection.

Using the approach of having work arounds to get an acceptable result.


Using work arounds, I have to update the row number column just about all the time.

  1. Update the row number for initial render
  2. Update the row number when a column is Filtered
  3. Update the row number when a selection checkbox is selected.
  4. Update the row number when a record is selected.
All of these can be overcome by work arounds.

However, there is one that I cannot solve.

Issue is when I click on the column of the row number, I do not get an event, and therefore for I cannot update the row numbers.
Currently, when I click on a cell in the row number column the row number disappears.

Please refer to attached screen capture that I have uploaded

In screen capture, I clicked on highlighted cell.

Can you please help with this issue, or develop some sort of enhancement that simplifies adding row numbers, without work arounds.

Thanks steve



Attachment: row_issue_18a2a570.jpg

PS Prathap Senthil Syncfusion Team October 21, 2025 01:44 PM UTC

Hi steve ,

We seems that you have already created the same query in another thread. For further follow-up, please continue on that forum link

Add a column with the row number | Blazor Forums | Syncfusion®


Regards,
Prathap S


Loader.
Up arrow icon