Add a column with the row number

[steve]

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

I have followed the suggestions in a similar thread here.

https://www.syncfusion.com/forums/154326/add-a-column-with-the-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'.

I am using the approach of having work arounds to get an acceptable result.

Using work arounds, I have found that 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 (any) 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.

The issue is, when I click on a cell in 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, and then the number that was there disappears.

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

Or fix the bug that when the column has template data, an event is generated when a cell in the column is clicked.

Investigation: When I remove the Template data that displays the row number, to display the field data, it works ok.

(An event is generated "OnRecordClick")

Thanks steve

Attachment: row_issue_7886a106.jpg

[Guhanathan Ramanathan]

Hi steve ,

Greetings from Syncfusion,

 

We are unable to reproduce the reported issue when testing in latest version. For your reference, we have shared a simple sample. To proceed with investigating the reported problem, we would need some additional clarification from your end. Please share the below details to proceed further at our end.

 

· To analyze the reported issue, could you please share a simple and reproducible sample that demonstrates the problem? This will assist us in identifying the issue more efficiently and providing a resolution

· Kindly share your attempt to replicate the issue using the attached simple sample

·  Share a video demonstration of the issue with a detailed explanation. This will greatly assist us in understanding the problem

 

Above-requested details will be very helpful in validating the reported query at our end and providing a solution as early as possible. Thanks for your understanding.

 

Sample:https://blazorplayground.syncfusion.com/embed/BDryitViUssxgkCa?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

 

Regards,

Guhanathan   

[steve]

Hi Guhanathan,

Thanks for your reply!

I tested with the sample above, and now when I click on the cell that has the template data, I can see that I now get an event.

However, I changed the the code slightly to reflect what I am trying to achieve. (See below)

If you now try with my code changes to get a simple row number, I have the following questions.

1. Even though there are two items, it appears it iterate 4 times.
   1. Is this to be expected?
2. I noticed when I expand the record for Nancy and then I randomly click and down click the sub records that row number values change strangely.
3. I want the row numbers for the sub records to all start at zero. They don't.
4. if you show sub records for two people Nancy and Andrew and then Maximise and minimise either Nancy or Andrew, it affects the other maximise one.

Anyway, if you do my suggested changes, and try for yourself,  you will see the issues.

Maybe my code is not good enough...

Regards,

Steve

 <GridEvents OnRecordClick="RecordClickHandler" OnLoad="OL" TValue="OrderData"></GridEvents>

                <GridColumns>

                    <GridColumn HeaderText="No" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Width="120">

                        <Template Context="orderContext">

                            @{

                               

                                RecordCount++;

                            }

                           <span>@RecordCount</span>

                        </Template>

                    </GridColumn>

@code {

    public int RecordCount;

 public void RecordClickHandler(Syncfusion.Blazor.Grids.RecordClickEventArgs<OrderData> args)

    {

        // Here, you can customize your code.

        RecordCount=0;

       

    }

    public void OL()

    {

        RecordCount=0;

       

    }

[Guhanathan Ramanathan]

Hi steve ,

The issue occurs because a shared RecordCount variable is used across multiple detail grids, causing inconsistent row numbering and unexpected behavior during expand/collapse or record clicks. Calculate the row index locally in each detail grid using IndexOf(orderContext) to start numbering at zero per employee, avoid global state conflicts, and preserve correct behavior when multiple detail views are expanded or interacted with simultaneously. Please refer to the attached code snippet and sample for reference.

<SfGrid DataSource="@Employees" Height="400px">

    <GridTemplates>

        <DetailTemplate>

            @{

                var employee = (context as EmployeeData);

            }

            <div style="padding: 0; margin: 0;">

                <SfGrid DataSource="@GetOrdersByEmployee(employee.EmployeeID)" RowHeight="40">

                    <GridEvents OnRecordClick="RecordClickHandler" TValue="OrderData"></GridEvents>

                    <GridColumns>

                        <GridColumn HeaderText="No" TextAlign="TextAlign.Center" Width="80">

                            <Template Context="orderContext">

                                @{

                                    var index = GetOrdersByEmployee(employee.EmployeeID).IndexOf(orderContext) ;

                                }

                                <span>@index</span>

                            </Template>

                        </GridColumn>

                        <GridColumn Field="@nameof(OrderData.CustomerID)" HeaderText="Customer ID" Width="110" />

                        <GridColumn Field="@nameof(OrderData.ShipCity)" HeaderText="Ship City" Width="110" />

                        <GridColumn Field="@nameof(OrderData.ShipName)" HeaderText="Ship Name" Width="150" />

                    </GridColumns>

                </SfGrid>

            </div>

        </DetailTemplate>

    </GridTemplates>

    <GridColumns>

        <GridColumn Field="@nameof(EmployeeData.EmployeeID)" HeaderText="Employee ID" TextAlign="TextAlign.Right" Width="110" />

        <GridColumn Field="@nameof(EmployeeData.FirstName)" HeaderText="First Name" Width="110" />

        <GridColumn Field="@nameof(EmployeeData.LastName)" HeaderText="Last Name" Width="110" />

        <GridColumn Field="@nameof(EmployeeData.Country)" HeaderText="Country" Width="110" />

    </GridColumns>

</SfGrid>

@code {

    public List<EmployeeData> Employees { get; set; }

    public List<OrderData> Orders { get; set; }

    protected override void OnInitialized()

    {

        Employees = EmployeeData.GetAllRecords();

        Orders = OrderData.GetAllRecords();

    }

    public List<OrderData> GetOrdersByEmployee(int employeeId)

    {

        return Orders.Where(order => order.EmployeeID == employeeId).ToList();

    }

    public void RecordClickHandler(RecordClickEventArgs<OrderData> args)

    {

        // Custom logic on record click

    }

    

}

 

Sample:https://blazorplayground.syncfusion.com/embed/htVIWNLBgpfGmzqk?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

 

Regards,

Guhanathan   

[steve]

Hi Guhanathan,

Once again thanks fore your reply.

This piece of code is almost perfect.

The only issue is, I have sorting  and filtering on the grid.

if I then click either sorting or Filtering, the row numbers are then not correct.

Aim is to display the ACTUAL row numbers so that the user can see how many items there are.

As my items are pallet numbers and I have a column for Pallet number, but I need another column that displays the row number so the user can see if there is a different between number of rows and the last pallet number.

A difference means that a pallet is missing, and this can be detected by the user.

So, what I also need is after a sort operation, the row numbers start from Zero again and correctly count up.

But, when I add sorting and filtering. it does not work.

EG

 <SfGrid DataSource="@GetOrdersByEmployee(employee.EmployeeID)" AllowSorting="true" RowHeight="40">

The row numbers go with the new sort sequence rather than starting from zero and counting up.

Do you have a suggestion how to fix?

Thanks for your help so far!

[steve]

Hi Guhanathan,

Any update?

Steve

[Naveen Palanivel]

Hi steve,

Based on your query, we understand that you want to regenerate or recreate the number based on the sort or filtered records. We have achieved this requirement using the GetCurrentViewRecordsAsync method. Please refer to the code snippet and sample provided below for your reference

Sample : https://blazorplayground.syncfusion.com/BjhyWjrbeMmLTILg

                <SfGrid DataSource="@GetOrdersByEmployee(employee.EmployeeID)" @ref=Grid[(int)employee.EmployeeID] AllowSorting=true AllowFiltering=true RowHeight="40">

                    <GridEvents OnRecordClick="RecordClickHandler" TValue="OrderData"></GridEvents>

                    <GridColumns>

                        <GridColumn HeaderText="No" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Width="80">

                            <Template Context="orderContext">

                                @{

                                    List<OrderData> data = Grid[(int)employee.EmployeeID].GetCurrentViewRecordsAsync().Result.ToList();

 

                                    var index = data.IndexOf(orderContext);

                                }

                                <span>@index</span>

                            </Template>

                        </GridColumn>

                        <GridColumn Field="@nameof(OrderData.CustomerID)" HeaderText="Customer ID" Width="110" />

                        <GridColumn Field="@nameof(OrderData.ShipCity)" HeaderText="Ship City" Width="110" />

                        <GridColumn Field="@nameof(OrderData.ShipName)" HeaderText="Ship Name" Width="150" />

                    </GridColumns>

                </SfGrid>

            </div>

        </DetailTemplate>

    </GridTemplates>

    <GridColumns>

        <

</SfGrid>

 

 

 

@code {

    public List<EmployeeData> Employees { get; set; }

    public List<OrderData> Orders { get; set; }

    Dictionary<int?, SfGrid<OrderData>> Grid = new Di

Please let us know if you have any concerns.

Regards,

Naveen .