How to set full page height for grid with paging enabled

Question

Before version 18.2 if grid has paging enabled, setting page size for gird to get full page height was in OnAfterRenderAsync method.

We setting full size height like this.

We are using Javascript interop to fetch client screen height and to adjust page size

protected override async Task OnAfterRenderAsync(bool firstRender)

{

if (firstRender)

{

var dimension = await bService.GetDimensions();

var visina = dimension.Height - 230;

(this.gridRacuna.PageSettings as GridPageSettings).PageSize = visina / 37;

}

Now looks like setting page size is possible only in Load event which triggers before first reneder.

Any idea how we can set page size to get full height of grid?

Rahul Narayanasamy · Accepted Answer

Hi Admir,

Greetings from Syncfusion.

Query: Before version 18.2 if grid has paging enabled, setting page size for gird to get full page height was in OnAfterRenderAsync method. We setting full size height like this. We are using Javascript interop to fetch client screen height and to adjust page size

We have validated your query and you want to get the browser window height using Javascript interop. And based on the window height you want to calculate the PageSize and set the PageSize for the Grid in latest version. Here, we have prepared a sample based on your requirement in latest version(18.2.0.44) and set the PageSize to the Grid in OnAfterRenderAsync method. Find the below code snippets and sample for your reference.

In this sample, the PageSize is calculated based on the window height and set to the GridPageSetttings in OnAfterRenderAsync method .

@inject BrowserService Service

<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowPaging="true">

<GridPageSettings PageSize="5"></GridPageSettings>

<GridColumns>

<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>

. . .

</GridColumns>

</SfGrid>

@code{

SfGrid<Order> Grid;

. . .

protected override async Task OnAfterRenderAsync(bool firstRender)

{

if (firstRender)

{

#pragma warning disable BL0005

var dimension = await Service.GetDimensions();

var visina = dimension.Height - 170;

(this.Grid.PageSettings as GridPageSettings).PageSize = visina / 37;

Grid.Refresh(); //refreshing the Grid

#pragma warning restore BL0005

}

[interop.js] – in wwwroot folderwindow.getDimensions = function () { return { width: window.innerWidth, height: window.innerHeight };};

[_Host.cshtml]<head> . . . <link rel='nofollow' href="https://cdn.syncfusion.com/blazor/18.2.44/styles/fabric.css" rel="stylesheet" /> <script src="~/interop.js"></script></head>

[Startup.cs]public void ConfigureServices(IServiceCollection services) { services.AddRazorPages(); services.AddServerSideBlazor(); services.AddSingleton<WeatherForecastService>(); services.AddScoped<BrowserService>(); // scoped service services.AddSyncfusionBlazor(); }

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorAppPageSize-1787032367

Please get back to us if you need further assistance.

Regards,

Rahul