[HxGrid] Virtualization with Infinite Scroll doesn't work when Responsive="true"

[AlexGallego7]

The data provider method gets called twice when initializing the component, the first one with the correct page size

and the second one with the total count as the page size

which makes the virtualization stop working.

I've found out that removing the Responsive="true" or setting it to false in the HxGrid component solves the issue but curious why is happening when set to be responsive.

Wondering if this is something that could have been introduced by #795 as it has stopped working when updating the package to a newer version.

Thanks for your work! It's amazing!

[hakenr]

@AlexGallego7 Can you please provide us with code that reproduces the issue? We use InfiniteScroll and Responsive daily and have not encountered any such issues (yet).

Virtualization and responsiveness are tricky to make work together, especially regarding the necessary CSS setup. Can you please check our demos to ensure you meet the requirements for Virtualize? Also see https://learn.microsoft.com/en-us/aspnet/core/blazor/components/virtualization?view=aspnetcore-8.0#advanced-styles-and-scroll-detection

[AlexGallego7]

I've been able to reproduce it in a plain solution. Again, disabling responsiveness solves the issue.

<style>
    .virtualized-table-container {
        height: 300px;
        overflow-y: auto;
    }
</style>

<div class="virtualized-table-container">
    <Havit.Blazor.Components.Web.Bootstrap.HxGrid @ref="_gridRef"
            ContentNavigationMode="GridContentNavigationMode.InfiniteScroll"
            PageSize="5"
            Responsive="true"
            TItem="EntityDto"
            DataProvider="GetGridData"
            Hover="false"
            SelectionEnabled="false"
            Striped="true"
            ItemRowHeight="41">
        <Columns>
            <Havit.Blazor.Components.Web.Bootstrap.HxGridColumn HeaderText="Id" ItemTextSelector="@(entity => entity.Id.ToString())" />
            <Havit.Blazor.Components.Web.Bootstrap.HxGridColumn HeaderText="Name" ItemTextSelector="entity => entity.Name" />
        </Columns>
    </Havit.Blazor.Components.Web.Bootstrap.HxGrid>
</div>

    private async Task<GridDataProviderResult<EntityDto>> GetGridData(GridDataProviderRequest<EntityDto> request)
    {
        return new GridDataProviderResult<EntityDto>()
            {
                Data = EntityDto.EntityList.Skip(request.StartIndex).Take(request.Count ?? int.MaxValue),
                TotalCount = EntityDto.entityDtos.Count
            };
    }

Also, when debugging the solution request.Count is always 15 even though I've set the PageSize="5" in the HxGrid component. Not sure if that is an issue as well.

[crdo]

@AlexGallego7 virtualized-table-container class has to be via the TableContainerCssClass parameter on HxGrid. The PageSize parameter doesn't play role in this case as the HxGrid automatically calculates the number of needed rows based on the size of the container + OverscanCount settings.