fix: DataGrid issue with Virtualize=true

[AdyGeo]

DataGridOnHomePage.zip

🐛 Bug Report

DataGrid issue with large number of columns (36 columns) when Virtualize="true"

🤔 Expected Behavior

to scroll and see data :-)))

😯 Current Behavior

When you are positioned to the left of the table (first columns visible) and you scroll vertically data loads and everything is fine.
When you scroll horizontally to the right (last columns visible) and then you scroll vertically data does not load or it loads ony in the beginning and the it stops loading...

[vnbaaij]

No title, no details, no reproduction code... No help.

Please try again with a real issue report. If not, we will close this one in 3 days.

[AdyGeo]

Just try you datagrid in with 30+ columns with Virtualize=true.
Scroll vertically when last columns are in view... (I get data only when I'm positioned on the first columns)

[vnbaaij]

No, that is not how we run this open source project...

You do not ask us to go create/craft/come up with code so we can try to get the same thing you are seeing.
You give us reproduction code that is ready to run and shows us the issue. You need to help us to help you.

[AdyGeo]

@page "/datafromcsvfluent"
@rendermode InteractiveServer
@using BlazorPetProfileApp.Models
@using System.Reflection
@using CsvHelper.Configuration
@using Microsoft.EntityFrameworkCore;
@using CsvHelper;
@using System.Globalization;
@using System.Linq.Expressions
@using System.Net.Http.Json
@using Microsoft.FluentUI.AspNetCore.Components
@inject ILogger<DataFromCSVFluent> Logger


<PageTitle>DataGrid</PageTitle>

<h1>TEST Data From CSV</h1>
<div style="width: 1000px; overflow-x:auto;">
<FluentDataGrid @ref="grid" Items=@records Virtualize="true" ItemSize="54" AutoFit="true" GenerateHeader="@GenerateHeaderOption.Sticky" style="height:600px;">
    <ChildContent>
        <PropertyColumn Property="@(c => c.ReportDate)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Id)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Description)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Category)" Sortable="true" />
        <PropertyColumn Property="@(c => c.ProductType)" Sortable="true" />
        <PropertyColumn Property="@(c => c.CostRON)" Sortable="true" />
        <PropertyColumn Property="@(c => c.SalesPrice)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Currency)" Sortable="true" />
        <PropertyColumn Property="@(c => c.DateIn)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Supplier)" Sortable="true" />
        <PropertyColumn Property="@(c => c.CodFu)" Sortable="true" />
        <PropertyColumn Property="@(c => c.WebsiteCode)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Weight)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Metal)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Color)" Sortable="true" />
        <PropertyColumn Property="@(c => c.RingSize)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Length)" Sortable="true" />
        <PropertyColumn Property="@(c => c.image)" Sortable="true" />
        <PropertyColumn Property="@(c => c.style)" Sortable="true" />
        <PropertyColumn Property="@(c => c.stone_category)" Sortable="true" />
        <PropertyColumn Property="@(c => c.TEILORCODE)" Sortable="true" />
        <PropertyColumn Property="@(c => c.maturity)" Sortable="true" />
        <PropertyColumn Property="@(c => c.marcaANPC)" Sortable="true" />
        <PropertyColumn Property="@(c => c.marcaTeilor)" Sortable="true" />
        <PropertyColumn Property="@(c => c.audientaTinta)" Sortable="true" />
        <PropertyColumn Property="@(c => c.consignment)" Sortable="true" />
        <PropertyColumn Property="@(c => c.SplitDiamondsDetails)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Tennis_bracelet_setting)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Nivel_design)" Sortable="true" />
        <PropertyColumn Property="@(c => c.PROMODISC)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Width)" Sortable="true" />
        <PropertyColumn Property="@(c => c.WeightNET)" Sortable="true" />
        <PropertyColumn Property="@(c => c.FormaPandant)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Solitaire)" Sortable="true" />
        <PropertyColumn Property="@(c => c.TEILOR2DAAR)" Sortable="true" />
    </ChildContent>
    <LoadingContent>
        <FluentStack Orientation="Orientation.Vertical" HorizontalAlignment="HorizontalAlignment.Center">
            Loading...<br />
            <FluentProgress Width="240px" />
        </FluentStack>
    </LoadingContent>
</FluentDataGrid>
</div>




@code {

    FluentDataGrid<Product>? grid;
    IQueryable<Product>? records = Enumerable.Empty<Product>().AsQueryable();
    PropertyInfo[] props = typeof(Product).GetProperties();



    protected override Task OnInitializedAsync()
    {
        grid?.SetLoadingState(true);
        GetGridData();
        grid?.SetLoadingState(false);
        return base.OnInitializedAsync();
    }

    private void GetGridData()
    {

        var config = new CsvConfiguration(CultureInfo.InvariantCulture)
            {
                HasHeaderRecord = true,
            };

        using var reader = new StreamReader("temp products.csv");
        using var csv = new CsvReader(reader, config);

        {

            csv.Context.RegisterClassMap<ProductMap>();
            var data = csv.GetRecords<Product>().ToList<Product>();
            data = data[0..10_000];
            records = data.AsQueryable<Product>();
            Logger.LogInformation(records.Count().ToString());

        }
    }

}

[vnbaaij]

This is not ready to run code, is it?

[AdyGeo]

Look :-))) You misunderstood me.
I am bored, I usually work with a lot of data and I decided to try a lot of datagrids that can handle a lot of data (React, Angular and some Blazor datagrids).
Out of blazor ones MudBlazor handled virtualized well....
FluentUi looks waay better but I found this issue.
If you think it's worthwhile to look into it then look into it... otherwise close the ticket.

[vnbaaij]

We look into every issue that gets reported as long as our template is followed and ready to run reproduction code in the form of something we can copy and paste, has a zipped project or a link to a repo we can clone is provided.

We appreciate you look into using the library (and think it looks good) but we simply do not have capacity to act on half working code that we need to investigate and examine, need to install dependencies for, etc. I don't think that that is to much to ask for if you want us to help you.

[AdyGeo]

You are right:
DataGridOnHomePage.zip

It's the example from the FluentUI page (virtualized section). I just added more columns.
Scroll horizontally to the right and then scroll vertically: Data stops coming or the UI stops updating...