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 …
1 2 3 4 | public record DataWithNumber<T>( int number, T data) where T: class { } |
And the usage
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 | 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:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 | < 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 > |