Dynamically calculating the number of rows to appear depending on browser windows height

[DoomerDGR8]

I have set the rows to 18 on a paged grid on a 1080p screen to have a comfortable space for a thin footer. However, on a 2K or 4K screen, 45% to 70% of the screen is blank (bottom half). Is there a way to calculate this?

[Renjith Singh Rajendran]

Hi Hassan, 

Greetings from Syncfusion support. 

We could achieve this requirement, by using the window resize event of JavaScript. We have prepared a sample to change the total records in a page when resize the browser window. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SynfusionTest2137881550 

In the below code, we have bound the JavaScript resize event to the window object. This event will be triggered during each browser resize. In its handler, we have done the calculations based on the browser window size, and assign the final resultant value to the pageSize property of Grid pager. The total records for the page in Grid will be displayed based on the value assigned to pageSize property.  

We have used the Created and DataBound events of Grid to call the JavaScript functions on initial load of Grid.  

Please refer the code below, 

[resizescript.js] 

 

function ResizeScript() {    window.addEventListener('resize', sf.base.debounce(ResizeComplete, 500));}function ResizeComplete() {    //This will be triggered when browser window resize completes.    var gridObj = document.getElementById("GridResize").ej2_instances[0];  //Get the instance of Syncfusion Grid    var rowHeight = gridObj.getRowHeight();                                 //Get the Grid row height    var winHeight = gridObj.getContent();    var gridHeight = window.innerHeight - 100;                     //here you can set a height for the grid according your need(if any other elements are present in that page).    var pageSize = gridObj.pageSettings.pageSize + 10;    var pageResize = (gridHeight - (pageSize * rowHeight)) / rowHeight;    gridObj.pageSettings.pageSize = pageSize + Math.round(pageResize);     //Assign the calculated value based on your window for the "pageSize" property}

 

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

    <GridEvents Created="Created" DataBound="DataBound" TValue="Order"></GridEvents> 

    ... 

</SfGrid> 

 

@code{ 

    ... 

    public bool InitialRender = false; 

    public void Created() 

    { 

        InitialRender = true; 

        JsRuntime.InvokeAsync<object>("ResizeScript"); 

    } 

    public void DataBound() 

    { 

        if (InitialRender)                   //check for initial render and call the JS method

        { 

            InitialRender = false; 

            JsRuntime.InvokeAsync<object>("ResizeComplete"); 

        } 

    } 

    ... 

} 

Note : The calculations done in resize handler function(ResizeComplete) in JS file need to be done based on your requirement. The final value assigned to pageSize property will decide the records displayed in Grid. 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Nicola]

Hi,

this method doesn't work anymore in ver. 18.4.x

Where can I found the JS to use getRowHeight ?

Thanks in advance

[DoomerDGR8]

Hi,

this method doesn't work anymore in ver. 18.4.x

Where can I found the JS to use getRowHeight ?

Thanks in advance

Which means I'll soon be getting a feedback assigned to me as I upgraded packages last week on production.

[Renjith Singh Rajendran]

Hi Nicola/Hassan, 

In our latest release versions, we have made some major changes in our Grid component. As a result of that JavaScript instance was modified. Now, we have adjusted Grid PageSize based on browser window using DataBound event instead of Created event.  

In the sample from previous update, we have provided solution to achieve this requirement by calling a JavaScript function alone. But now we have changed the solution to change Grid PageSize using a C# method ChangePageSize by invoking it from JavaScript function which helps to calculate the window height and rowheight.  

Please download the modified sample prepared in our latest version 18.4.0.33 for your reference. 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SynfusionTest-904576305 

Refer the below code example.  

 

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

    <GridEvents DataBound="Data" TValue="Order"></GridEvents> 

    <GridPageSettings PageSize="@pager"></GridPageSettings> 

. ..   

</SfGrid> 

 

@code{ 

    SfGrid<Order> Grid { get; set; } 

    public int pager { get; set; } 

    public bool firstrender { get; set; } = true; 

    public List<Order> Orders { get; set; } 

    protected override async Task OnAfterRenderAsync(bool firstrender) 

    { 

        if (firstrender) 

        { 

            await Task.Delay(1000); 

            await Runtime.InvokeAsync<object>("ResizeScriptContacts");  

        } 

    } 

    public async Task Data() 

    { 

        if (firstrender) 

        { 

            await Task.Delay(1000); 

            var dotNetReference = DotNetObjectReference.Create(this); 

            await Runtime.InvokeAsync<string>("scroll", Grid.ID, dotNetReference); 

            firstrender = false; 

        } 

    } 

JavaScript functions to be called during the initial rendering and once the data is bound to Grid. 

var gridId, dotnetInstance; function scroll(id, dotnet) {    gridId = id; //Grid id    dotnetInstance = dotnet; // dotnet instance to invoke C# method from here     setTimeout(function () {         ResizeCompleteContacts();            }, 500);}function ResizeScriptContacts() {    window.addEventListener('resize', sf.base.debounce(ResizeCompleteContacts, 100)); // to call function when resize complete}function ResizeCompleteContacts(){    var gridObj = document.getElementById(gridId).blazor__instance; // Grid instance    var gridObj2 = gridObj.getContent();    var rowHeight = gridObj.getRowHeight();    //Get the Grid row height    var gridHeight = window.innerHeight - 100; // get     dotnetInstance.invokeMethodAsync('ChangePageGrid', gridHeight, rowHeight); // call C# method from javascript function}

Now based in the window and rowheight calculated from above JavaScript function, we have invoked the method in razor file to change the Grid page size. 

      [JSInvokable("ChangePageGrid")]    public async void ChangeGridPage(int gridHeight, int rowHeight)    {        var pageSize = Grid.PageSettings.PageSize;        double pageResize = (gridHeight - (pageSize * rowHeight)) / rowHeight;        pager = pageSize + (int)Math.Round(pageResize);        StateHasChanged();    }

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[Patrick]

Great example, but I have a few comments and also wanted to ask a question:

1. In the javascript, you set gridObj2 but then never use it.
2. gridHeight uses the window height, then minus 100.  I assume that 100 is for various headers (such as toolbar, group drop area, etc and elements, but it wasn't enough for me.  I had to use a value around 360.  Is there a better way calculate that value?  Perhaps basing it off the start position of the div that is the parent of the grid?
   
3. Is it possible to update the value that is displayed in the PageSizes dropdrown after the new value is calculated?

Thanks!

[Renjith Singh Rajendran]

Hi Patrick, 

 

Greetings from Syncfusion support. 

Query 1 : In the javascript, you set gridObj2 but then never use it. 

Sorry for the inconvenience caused. This code is not needed in our latest provided solution. You can ignore it. 

Query 2 : gridHeight uses the window height, then minus 100.  Is there a better way calculate that value? 

The gridHeight calculation need to be calculated based on your application layout. If the page contains any other elements along with grid then the calculation need to be done based on the elements which are available in that page. You need to set a height for the grid according your need, based on elements are present in that page along with grid. 

Query 3 : Is it possible to update the value that is displayed in the PageSizes dropdrown after the new value is calculated? 

The pager dropdown will display only the PageSize value available in the PageSizes property. So based on your scenario we suggest you to assign the PageSizes property with all the possible PageSize value to achieve this requirement. Please refer the codes below, 

 

<GridPageSettings PageSize="@pager" PageSizes="@PageSizesValue"></GridPageSettings>

 

public List<Order> Orders { get; set; } 

public List<int> PageSizesValue = new List<int>(); 

... 

protected override void OnInitialized() 

{ 

    ... 

    for(var i= 1;i <= Orders.Count(); i++){ 

        PageSizesValue.Add(i); 

    } 

} 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SynfusionTest960722072 

Please get back to us if you need further assistance. 

Regards, 

Renjith R