Dynamic page size in BlazorBootstrap Grid

Question

I want a page size based on available window height.
I'm able to get window height and calculate how many row can fit but I'm not able to change page size after initialization.

Here's a code

Page.razor

<Grid @ref="grid" TItem="Data.Connection" class="table table-hover table-bordered table-striped" DataProvider="DataProvider" AllowPaging="true" PageSize="@gridPageSize" AllowSorting="true" Responsive="true" >
    <GridColumn TItem="Data.Connection" TextNoWrap="true" HeaderText="Name" PropertyName="Name" SortString="Name" SortKeySelector="item => item.Name">
        @context.Name
    </GridColumn>
    <GridColumn TItem="Data.Connection" TextNoWrap="true" HeaderText="Source Type" PropertyName="SourceType" SortString="SourceType" SortKeySelector="item => item.SourceType">
        @context.SourceType
    </GridColumn>
    <GridColumn TItem="Data.Connection" TextNoWrap="true" HeaderText="Location" PropertyName="Location" SortString="Location" SortKeySelector="item => item.Location">
        @context.Location
    </GridColumn>
    <GridColumn TItem="Data.Connection" TextNoWrap="true" HeaderText="Status" PropertyName="Status" SortString="Status" SortKeySelector="item => item.Status">
        @context.Status
    </GridColumn>
    <GridColumn TItem="Data.Connection" TextNoWrap="true" HeaderText="Action" Sortable="false">
        <Button @onclick="()=>Edit(context.Id)" Class="btn btn-info oi oi-pencil" TooltipTitle="Edit" />
        <Button @onclick="()=>Delete(context.Id)" Class="btn btn-danger oi oi-trash" TooltipTitle="Delete" />
    </GridColumn>
</Grid>

Page.razor.cs

   public partial class Page
   {
        [Inject]
        ConnectionService service { get; set; }
        [Inject]
        IJSRuntime jsr { get; set; }
        BlazorBootstrap.Grid<Connection>? grid { get; set; }
        int gridPageSize { get; set; } = 10;
        protected override async Task OnInitializedAsync() 
        {
            OnWindowResize();
        }

        void OnWindowResize() // this will call when window height change
        {
            var winHeight = await jsr.InvokeAsync<int>("getHeight") - 20;
            gridPageSize = Convert.ToInt32(winHeight/47);
            //grid.PageSize = Convert.ToInt32(winHeight/47); // tried with ref obj but not worked 
        }
        private async Task<GridDataProviderResult<Connection>> DataProvider(GridDataProviderRequest<Connection> request)
        {
            //OnWindowResize() //can I also set it here?
            string sortString = "";
            SortDirection sortDirection = SortDirection.None;

            if (request.Sorting is not null && request.Sorting.Any())
            {
                sortString = request.Sorting.FirstOrDefault().SortString;
                sortDirection = request.Sorting.FirstOrDefault().SortDirection;
            }

            int totalCount = 0;
            data = await service.GetGridDataAsync(request.Filters, ref totalCount, request.PageNumber, request.PageSize, sortString, sortDirection);           
            return await Task.FromResult(new GridDataProviderResult<Connection> { Data = data, TotalCount = totalCount });
        }
   }

Here's a article I'm following..

Lib: https://getblazorbootstrap.com
Grid Tutorial: https://getblazorbootstrap.com/docs/components/grid#server-side-filtering-paging-and-sorting

Answer 1

Test.Razor

    @page "/Test"
    @inject IJSRuntime JsRuntime
    @*Use any 3rd party grid with height property*@
    <table class="table-bordered" height="@GridHeight">
    </table> 
@code{
    private string GridHeight = "500px";
    public class WindowDimension
    {
        public int Width { get; set; }
        public int Height { get; set; }
    }    
    protected override async Task OnInitializedAsync()
    {
        var dimension = await JsRuntime.InvokeAsync<WindowDimension>("getWindowDimensions");
        GridHeight = (dimension.Height-100).ToString() + "px";//calculate based on any header exists(100 is my header height) !!!  
    }
 }

Please try this solution.