Blazor and RowNumber in Grid
The data that comes from the backend does not, usually, provide a row number . So how to obtain this ? Create a class, will say any programmer …
public record DataWithNumber<T>(int number, T data) where T: class { }
And the usage
var data = HttpClient_WebApi.GetFromJsonAsAsyncEnumerable<Order_Details_Extended>(url); ArgumentNullException.ThrowIfNull(data); int i = 0; await foreach (var item in data) { if (item == null) continue; i++; dataArr.Add(new DataWithNumber<Order_Details_Extended>(i, item)); if ((i < 500 && i % 100 == 0) || (i > 500 && i % 1000 == 0)) { Console.WriteLine($"i={i}"); nrRecordsLoaded = i; await InvokeAsync(StateHasChanged); await Task.Delay(1000); } } nrRecordsLoaded = i;
And the grid:
<FluentDataGrid Items="@dataForQuery" Virtualize="true" GenerateHeader="GenerateHeaderOption.Sticky"> <PropertyColumn Property="@(p => p.number)" Sortable="true" /> <PropertyColumn Property="@(p => p.data.OrderID)" Sortable="true"> <ColumnOptions> <div class="search-box"> <FluentSearch type="search" Autofocus=true @bind-Value=nameOrderIdFilter @oninput="HandleOrderIdFilter" @bind-Value:after="HandleClearIdFilter" Placeholder="Order Id..." /> </div> </ColumnOptions> </PropertyColumn> <PropertyColumn Property="@(p => p.data.UnitPrice)" Sortable="true" /> <PropertyColumn Property="@(p => p.data.ExtendedPrice)" Sortable="true" /> <PropertyColumn Property="@(p => p.data.ProductID)" Sortable="true" /> <PropertyColumn Property="@(p => p.data.Quantity)" Sortable="true" /> <PropertyColumn Property="@(p => p.data.Discount)" Sortable="true" /> </FluentDataGrid>
Leave a Reply