Add a column with the row number

[Amrutha]

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

[Renjith Singh Rajendran]

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 

[Amrutha]

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.

[Renjith Singh Rajendran]

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.  

Documentation : https://blazor.syncfusion.com/documentation/datagrid/columns/#column-template 

Online demo : https://blazor.syncfusion.com/demos/datagrid/column-template?theme=bootstrap4 

 

We have also prepared a sample based on your scenario. Please download the sample form the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerSample546924190 

 

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 

[Amrutha]

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

[Renjith Singh Rajendran]

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, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerSample1175123718 

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 

[Amrutha]

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

[Renjith Singh Rajendran]

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, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerSample-475790858 

 

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