Data Grid: How to calculate max ItemsPerpage?

[DomenicoFormoso]

I would like my DataGrid to occupy full height and calculate in maximum number of rows to assign to Itemsperpage of Pagination.
How can I do it?

[vnbaaij]

I don't think that is possible to do. How would you handle different screen resolutions?

[DomenicoFormoso]

Thanks for the reply, an alternative way is the classic combox with different sizes of rows.

[hml-coder]

@vnbaaij @dvoituron I also needed the ability to automatically calculate the ItemsPerPage based on datagrid height. Any concerns witih the approach below -- it doesn't manipulate the DOM ;-)

Runs against the demo data and tested with several devices in dev tools and they behaved. Also browser zooming recalculates correctly as well as resizing the browser window.

@page "/datagrid-dynamic-items-per-page"

@inject DataSource Data
@inject IJSRuntime JSRuntime

<div id="datagrid-container">
    <FluentDataGrid Items="items.AsQueryable()"
    Pagination="@pagination"
    RowSize="@rowSize"
    Style="overflow-y:hidden">
        <PropertyColumn Property="@(c => c.Code)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Medals.Gold)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Medals.Silver)" Sortable="true"  />
        <PropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="true"  />
        <PropertyColumn Property="@(c => c.Medals.Total)" Sortable="true" />
    </FluentDataGrid>
</div>

<FluentPaginator State="@pagination" />

@code {

        DataGridRowSize rowSize = DataGridRowSize.Small;
        IQueryable<Country>? items;
        PaginationState pagination = new PaginationState { ItemsPerPage = 10 };

    protected override async Task OnInitializedAsync() =>
    items = (await Data.GetCountriesAsync()).AsQueryable();

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await UpdateItemsPerPageAsync();
            await JSRuntime.InvokeVoidAsync("addResizeEvent", DotNetObjectReference.Create(this));
        }
    }

    [JSInvokable]
    public async Task UpdateItemsPerPageAsync()
    {
        int visibleRows = await JSRuntime.InvokeAsync<int>("calculateVisibleRows", (int)rowSize);

        if (visibleRows < 2) visibleRows = 2;

        pagination.ItemsPerPage = visibleRows - 1; // subtract 1 for the table header
        StateHasChanged();
    }
}

<script>

    function calculateVisibleRows(rowHeight) {
        if (rowHeight <= 0) {
            return 0;
        }
        
        const tableElement = document.querySelector('#datagrid-container');
        
        if (!tableElement) {
            return 0;
        }

        const availableHeight = tableElement.clientHeight || window.innerHeight;
        const visibleRows = Math.max(Math.floor(availableHeight / rowHeight), 1);
        return visibleRows;
    }

    function addResizeEvent(dotNetObject) {
        window.addEventListener('resize', () => {
            dotNetObject.invokeMethodAsync('UpdateItemsPerPageAsync')
                .then(() => console.log("Updated ItemsPerPage via Blazor."))
                .catch(err => console.error("Error invoking Blazor method:", err));
        });
    }

</script>

<style>
    #datagrid-container {
        height: calc(100% - 2rem);
        overflow-x: auto;
        overflow-y: hidden;
    }

    th {
        display: table-cell!important;
    }

    .content {
        height: 100%!important;
    }
</style>

[vnbaaij]

Nice approach. Although it doesn't really work for me if I paste the code into the IssueTest.razor component from the demo site (running with Blazor Server version locally)

[hml-coder]

Thanks for the feedback. Some parent elements of the component needed height specified in IssueTest.razor (demo-section-content, fluent-tabs, fluent-tab-panel and demo-section-example) so I added them to the styles section of this sample.

Noticed that the resize event didn't handle browser restore/maximize actions so switched to ResizeObserver.

Added visualViewport.height detection for better accuracy on mobile browsers.

Maybe the datagrid should snap to size when hitting a smaller break point if possible. It appears as though it's animating to size but I'm thinking there might be a lot of layout recalculations happening. A debounce would fix it but not ideal.

@using FluentUI.Demo.Shared.Pages.DataGrid.Examples

@inject DataSource Data
@inject IJSRuntime JSRuntime

<div id="datagrid-container">
    <FluentDataGrid Items="items.AsQueryable()"
                    Pagination="@pagination"
                    RowSize="@rowSize"
                    Style="overflow-y:hidden;">
        <PropertyColumn Property="@(c => c.Code)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Medals.Gold)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Medals.Silver)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Medals.Total)" Sortable="true" />
    </FluentDataGrid>
</div>

<FluentPaginator State="@pagination" />

@code {

    DataGridRowSize rowSize = DataGridRowSize.Small;
    IQueryable<Country>? items;
    PaginationState pagination = new PaginationState { ItemsPerPage = 10 };

    protected override async Task OnInitializedAsync() =>
    items = (await Data.GetCountriesAsync()).AsQueryable();

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await UpdateItemsPerPageAsync();
            await JSRuntime.InvokeVoidAsync("addResizeEvent", DotNetObjectReference.Create(this));
        }
    }

    [JSInvokable]
    public async Task UpdateItemsPerPageAsync()
    {
        int visibleRows = await JSRuntime.InvokeAsync<int>("calculateVisibleRows", (int)rowSize);

        if (visibleRows < 2) visibleRows = 2;

        pagination.ItemsPerPage = visibleRows - 1; // subtract 1 for the table header

        await InvokeAsync(StateHasChanged);
    }
}

<script>

    function calculateVisibleRows(rowHeight) {
        if (rowHeight <= 0) {
            return 0;
        }

        const tableElement = document.querySelector('#datagrid-container');

        if (!tableElement) {
            return 0;
        }

        const availableHeight = tableElement?.clientHeight || window.visualViewport?.height || window.innerHeight;

        const visibleRows = Math.max(Math.floor(availableHeight / rowHeight), 1);
        return visibleRows;
    }

    function addResizeEvent(dotNetObject) {
        const observer = new ResizeObserver(() => {
            dotNetObject.invokeMethodAsync('UpdateItemsPerPageAsync')
                .then(() => console.log("Updated ItemsPerPage via Blazor."))
                .catch(err => console.error("Error invoking Blazor method:", err));
        });

        const targetElement = document.querySelector('#datagrid-container');
        if (targetElement) {
            observer.observe(targetElement);
        }
    }

</script>

<style>

    #datagrid-container {
        height: calc(100% - 3rem);
        min-height: 8rem;
        overflow-x: auto;   
        overflow-y: hidden;
    }

    article {
        min-height: 32rem;
    }

    .demo-section-content {
        height: calc(100% - 10rem);
    }

    .demo-section-example {
        height: 100%;
    }

    fluent-tabs {
        height:100%;
    }
     
    #tab-example-testbedforissuesrepo-panel {
        height: 100%!important;
        max-height: calc(100% - 2rem)!important;
    }

    th {
        display: table-cell !important;
    }

</style>

[vnbaaij]

I'm looking at integrating this into the library. Any reason why you are not calling the calculate function from the addResizeEvent?

I've changed it to below and it seems to work fine/the same. Also added a simple check to update the current page in the paginator to keep it in line with the resized situation :

@using FluentUI.Demo.Shared.Pages.DataGrid.Examples

@inject DataSource Data
@inject IJSRuntime JSRuntime

<div id="datagrid-container">
    <FluentDataGrid Id="grid1" Items="items.AsQueryable()"
    Pagination="@pagination"
    RowSize="@rowSize"
    Style="overflow-y:hidden;">
        <PropertyColumn Property="@(c => c.Code)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Medals.Gold)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Medals.Silver)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="true" />
        <PropertyColumn Property="@(c => c.Medals.Total)" Sortable="true" />
    </FluentDataGrid>
</div>

<FluentPaginator State="@pagination" />

@code {

    DataGridRowSize rowSize = DataGridRowSize.Small;
    IQueryable<Country>? items;
    PaginationState pagination = new PaginationState { ItemsPerPage = 10 };

    protected override async Task OnInitializedAsync() =>
    items = (await Data.GetCountriesAsync()).AsQueryable();

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("addResizeEvent", DotNetObjectReference.Create(this), (int)rowSize);
        }
    }

    [JSInvokable]
    public async Task UpdateItemsPerPageAsync(int visibleRows)
    {
        if (visibleRows < 2) visibleRows = 2;

        pagination.ItemsPerPage = visibleRows - 1; // subtract 1 for the table header

        if (pagination.CurrentPageIndex > pagination.LastPageIndex && pagination.LastPageIndex.HasValue && pagination.LastPageIndex.Value > 0)
        {
            await pagination.SetCurrentPageIndexAsync(pagination.LastPageIndex.Value);
        }

        await InvokeAsync(StateHasChanged);
    }
}

<script>

    function calculateVisibleRows(rowHeight) {
        if (rowHeight <= 0) {
            return 0;
        }

        const gridContainer = document.querySelector('#datagrid-container');

        if (!gridContainer) {
            return 0;
        }

        const availableHeight = gridContainer?.clientHeight || window.visualViewport?.height || window.innerHeight;

        const visibleRows = Math.max(Math.floor(availableHeight / rowHeight), 1);
        return visibleRows;
    }

    function addResizeEvent(dotNetObject, rowSize) {
        const observer = new ResizeObserver(() => {
            const visibleRows = calculateVisibleRows(rowSize)
            dotNetObject.invokeMethodAsync('UpdateItemsPerPageAsync', visibleRows)
                .catch(err => console.error("Error invoking Blazor method:", err));
        });

        const targetElement = document.querySelector('#datagrid-container');
        if (targetElement) {
            observer.observe(targetElement);
        }
    }

</script>

<style>

    #datagrid-container {
        height: calc(100% - 3rem);
        min-height: 8rem;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .demo-section-content {
        height: calc(100% - 10rem);
    }

    .demo-section-example {
        height: 100%;
    }

    fluent-tabs {
        height:100%;
    }

    #tab-example-testbedforissuesrepo-panel {
        height: 100%!important;
        max-height: calc(100% - 2rem)!important;
    }


</style>

[rpodevns]

I prefer your updated code. It's more efficient since it reduces the number of JavaScript-to-Blazor interop calls.

[vnbaaij]

@rpodevns I managed to get this integrated into the library. Had to do some tricks to make the PaginationState, Paginator component and DataGrid to work together well but (fortunately) the code to do this was mostly already in place (for other functionality).

Would you be so kind to take a look at PR #3220 and do a sanity check on the code? Thanks!

[rpodevns]

@vnbaaij Looks good to me. Is it okay to use a setTimeout in this instance? I initially tried debouncing with a resize offset but that did not work well if the window was resized too quickly. The datagrid samples are much easier to find with the menu changes.