Add Column to display Sr.No. in Grid.

6 Replies
5 Participants

Created by
VI Vijay

Platform
Blazor

Platform
Blazor

Control
Grid

Created On
Jun 28, 2021 06:35 PM UTC

Last Activity On
Sep 9, 2024 12:29 PM UTC

Want to subscribe?
SIGN IN

I need to print Serial No : 1, Serial No : 2... etc.

but It Started with Serial No : 30

here is my code.

<div>Serial No : @RowCount </div>

RowCount++;

}

</Template>

</GridColumn>

</GridColumns>

</SfGrid>

@code {

private List<Ledger> ledgers { get; set; }

private int RowCount = 0;

protected override async Task OnInitializedAsync()

{

ledgers = await Http.GetFromJsonAsync<List<Ledger>>("api/Ledger/ledgers/1");

}

6 Replies

RN Rahul Narayanasamy Syncfusion Team June 29, 2021 12:53 PM UTC

Hi Vijay,

Greetings from Syncfusion.

Query: Add Column to display Sr.No. in Grid - I need to print Serial No : 1, Serial No : 2... etc. but It Started with Serial No : 30

We have validated your query and you want to display serial number in one of the Grid columns. Here, we have prepared a simple sample and checked the problem. We could not reproduce the problem. The serial number starts from 1. Find the below sample and screenshot for your reference.

<SfGrid DataSource="@Orders" AllowPaging="true">

<GridColumns>

<GridColumn HeaderText="Seerial Number" TextAlign="TextAlign.Center" Width="120">

<Template>

RowCountAI++;

<div>Serial No : @RowCountAI </div>

}

</Template>

</GridColumn>

. . .

</GridColumns>

</SfGrid>

@code{

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

public int RowCountAI = 0;

. . .

}

Sample: https://www.syncfusion.com/downloads/support/forum/166761/ze/SampleSN-1281974915

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

If you are still facing the problem, then could you please share the below details. Then only we can able to reproduce the problem and check the problem further.

When did you faced this problem? At initial rendering itself or while performing any other operations?
Reproduce the reported problem in the provided sample and revert back to us.
Share a simple reproduceable sample if possible.
Complete code snippets of the page.

Please let us know if you have any concerns.

Regards,

Rahul

IH Iram Hamdani May 8, 2024 04:47 AM UTC

No I am also facing the same problem by using above code . I Have Five records and Sno starts from 6 instead of 1

IH Iram Hamdani May 8, 2024 05:06 AM UTC

What I mean once all records will be displayed then the series will be generated . In your code it is working fine , In my case data is coming from modal from API

PS Prathap Senthil Syncfusion Team May 9, 2024 11:56 AM UTC

Hi Iram,

Before proceeding with the reporting of the problem, we require some additional clarification from your end. Please share the following details to proceed further on our end.

To analyze the reported issue, could you please share a simple and reproducible sample with duplicate data that demonstrates the problem? This will assist us in identifying the issue more efficiently and providing a resolution.
Could you please share us the what the NuGet version you have used?.

The details requested above will be very helpful in validating the reported query on our end and providing a solution as soon as possible. Thanks for your understanding.

Regards,
Prathap Senthil

MG Manuel García Alemany September 8, 2024 06:15 PM UTC

Here I send an example of the problem where the numbering of rows is not correlative.

<div>

<SfGrid DataSource="@datos" @ref="@GridInstance" Height="100%" EnableStickyHeader="true" EnableVirtualization="true" AllowFiltering="true" AllowSorting="true" RowHeight="18" GridLines="GridLine.Both"

AllowSelection="true" AllowResizing="true" EnableHover="true" AllowPaging="true" >

@* <GridEvents OnCellEdit="CellEditHandler" RowSelected="RowSelectedHandler" OnRecordDoubleClick="RecordDoubleClickHandler" OnRecordClick="RecordClickHandler" OnCellSave="OnCellSave" TValue="ListadoAnuncios"></GridEvents> *@

@* <GridFilterColumns>

</GridFilterColumns> *@

</GridFilterSettings>

RowCountAI++;

<div>@RowCountAI</div>

}

</Template>

</GridColumn>

</GridColumn>

}

</Template>

</GridColumn>

}

</Template>

</GridColumn>

@* <GridColumn Field=@nameof(Anuncio.strTipoDeVenta) HeaderText="Competition*" Type="ColumnType.String" TextAlign="TextAlign.Right"></GridColumn> *@

@* <GridColumn Field=@nameof(Anuncio.strTipoDeVenta) HeaderText="Competition1*" Type="ColumnType.String" EditType="EditType.DropDownEdit" TextAlign="TextAlign.Right" AllowEditing="true">

</SfDropDownList>

</EditTemplate>

</GridColumn> *@

@* <GridColumn Field=@nameof(Anuncio.Turbo) HeaderText="Turbo*" Type="ColumnType.String" TextAlign="TextAlign.Right"></GridColumn> *@

</GridColumns>

</SfGrid>

</div>

<BackOffice_V3.Client.Shared.Componentes.Ventana @ref="Ventana"></BackOffice_V3.Client.Shared.Componentes.Ventana>

@* <BackOffice_V3.Client.Shared.Componentes.VentanaDialog @ref="VentanaDialog" DialogOkCancel="DialogOkCancel" ></BackOffice_V3.Client.Shared.Componentes.VentanaDialog> *@

<style>

.fondoamarillo {

background-color: yellow;

}

.fuenterojo {

color: red !important;

}

</style>

@code {

BackOffice_V3.Shared.ListadoAnuncios Anuncio = new BackOffice_V3.Shared.ListadoAnuncios();

List<BackOffice_V3.Shared.ListadoAnuncios> listadoanuncios = new List<BackOffice_V3.Shared.ListadoAnuncios>();

List<BackOffice_V3.Shared.ListadoAnuncios> datos = new List<BackOffice_V3.Shared.ListadoAnuncios>();

BackOffice_V3.Client.Shared.Componentes.Ventana Ventana = new BackOffice_V3.Client.Shared.Componentes.Ventana();

//BackOffice_V3.Client.Shared.Componentes.VentanaDialog VentanaDialog = new BackOffice_V3.Client.Shared.Componentes.VentanaDialog();

//public int DialogResuelto { get; set; } = 0;

SfGrid<ListadoAnuncios> GridInstance { get; set; }

List<TiposVentas> listadotiposventas = new List<TiposVentas>();

[Parameter]

public EventCallback<long> EditarRegistro { get; set; } /* Refrescar grid */

public int RowCountAI = 0;

PS Prathap Senthil Syncfusion Team September 9, 2024 12:29 PM UTC

Based on your requirements, when using the virtualization feature, it operates on an on-demand basis. Data is loaded as needed, which is why you encountered issues with the previous suggested approach. To address this, we recommend utilizing the GetRowIndexByPrimaryKeyAsync public method. This method retrieves the row index based on the primary key value and then displays it using a template feature within a GridColumn. Please refer to the code snippet and sample below for your reference:

<SfGrid DataSource="@datos" @ref="@GridInstance" Height="100%" EnableStickyHeader="true" EnableVirtualization="true" AllowFiltering="true" AllowSorting="true" RowHeight="18" GridLines="Syncfusion.Blazor.Grids.GridLine.Both"

var data = context as Anuncio;

var index = GridInstance.GetRowIndexByPrimaryKeyAsync(data.Id_Tbl_Entradas).Result;

<span>Rowindex:@index</span>

}

</Template>

</GridColumn>

</SfGrid>

</div>

@code {

SfGrid<Anuncio> GridInstance { get; set; }

}

Sample: https://blazorplayground.syncfusion.com/embed/VtBzDEjarHQYSLhn?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5
Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetRowIndexByPrimaryKeyAsync_System_Object_

Additionally ,We would like to inform you that it is generally recommended to use either virtualization or paging when rendering a large number of records in your application. We have observed that you have used both pagination and virtualization in the Grid code you shared. It is not recommended to use both paging and virtualization features in the same grid.

Paging works by displaying a specific set of data per page, while virtualization ensures that data is fetched only when needed, with a new block of data loaded each time you scroll. Both approaches can significantly enhance the responsiveness of your application. Therefore, please use only one of these features. Thank you for your understanding.

Need More Help?

Get personalized assistance from our support team.

Contact Support

6 Replies
5 Participants
Want to subscribe?
SIGN IN
Created by
VI Vijay
Platform
Blazor
Control
Grid
Created On
Jun 28, 2021 06:35 PM UTC
Last Activity On
Sep 9, 2024 12:29 PM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support