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

Roshan KM · Accepted Answer · 2023-02-16 08:37:13Z

0

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.

answered Feb 16, 2023 at 8:37

Roshan KM

11 bronze badge

Sign up to request clarification or add additional context in comments.

5 Comments

Roshan KM Over a year ago

_Host.cshtml <script> window.getWindowDimensions = function () { return { width: window.innerWidth, height: window.innerHeight }; }; </script> Add this script in ''_Host.cshtml'' to get dynamic width.

Ravi Makwana Over a year ago

var dimension = await JsRuntime.... this line will give me error as page is not render yet and sorry I don't want to use other library..

Roshan KM Over a year ago

You don't have to use any extra library, just use IJSRuntime. That's enough!! Please share the error details for better understanding.

Ravi Makwana Over a year ago

here this was an issue with this stackoverflow.com/questions/61438796/…

Roshan KM Over a year ago

Change render-mode="ServerPrerendered" to render-mode="Server"

Collectives™ on Stack Overflow

Dynamic page size in BlazorBootstrap Grid

Page.razor

Page.razor.cs

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Page.razor

Page.razor.cs

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related