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...

[vnbaaij]

Ok, I spent a considerate amount of time looking at this but was not able to solve the issue. I even added a standard QuickGrid to test the same code, but the issue does not present itself there.

It has to do with the way we create the HTML for the DataGrid that leads to the JS part of Virtualize not being called if the grid is horizontally scrolled for a certain part.

We could just the wisdom of the crowd to solve this!

If you want to help, please checkout the users/vnbaaij/datagrid-issue branch, run the Fluent.Demo.Server project and navigate to the /issue-tester page. Scrolling vertically while the horizontal scroll is at the left margin works as it should. Scrolling vertically while the horizontal scroll is at the right margin leads to a blank grid. If the horizontal scrollbar is moved to the left sufficiently, the data re-appears...

[MarvinKlein1508]

@vnbaaij did you consider using tr for virtualized content as well? If I remember correctly Virtualize will create a div by default. The Blazor team has added a way to change that behaviour I think in .NET 8. As the div can lead to some errors when being used within a table.

[vnbaaij]

Yes, saw that too. Tested with that locally but did not help 😕.

But will use that for next version anyway.

[AdyGeo]

I don't know if this is related or if it helps: but the scroll bar jumps all over the place on vertical scrolling (vigorously) . It does not seem to indicate the corect position related to the virtualized data collection.
...when scrolling positioned on the left margin of the table.