Cannot change Grid height dynamically.

[Tom Dimos]

Hello I have a problem while trying to change grid's height dynamically.Here is the code that reproduced the problem.I want the grid to has an initial height value and then by calling a javascript function that returns the screen resolution to change the height value.In the code below I don't use javascript but instead I am trying to set the height directly to make it more simple. I used the OnLoad event of the grid and changed the height value there but this doesn't work in all cases. Also Im fetching the data asynchronously in OnInitializedAsync() that's why I am waiting for a small amount of time there. I noticed that if the OnLoad event finishes first then it changes the value as expected but if OnInitializedAsync() finishes first and then the OnLoad, it doesn't work. In the code below I am waiting for 600ms that reproduces the second case I described previously  OnInitializedAsync() finishes first and then the OnLoad) and by changing this value to 1000 it shows the first case (OnLoad finishes first and then OnInitializedAsync()). Another solution I found that I don't want to use is to fetch my data in the OnLoad event but this makes the loading of the data much more slower that loading it in OnInitializedAsync(). Is there a way to fix this or somehow change the height using another way.

@page "/test"

@using Syncfusion.Blazor.Grids;

    <SfGrid DataSource="@Orders" AllowPaging="true" AllowFiltering = "true" AllowTextWrap="true" Height="@gridHeight">

        <GridEvents OnLoad="Onload" TValue="Order"></GridEvents>

        <GridColumns>

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

            <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" TextAlign="TextAlign.Center" Width="150"></GridColumn>

            <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Center" Width="130"></GridColumn>

            <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Center" Width="120"></GridColumn>

        </GridColumns>

    </SfGrid>

@code{

    private string gridHeight = "330";

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

    protected override async Task OnInitializedAsync()

    {

        Console.WriteLine("started1");

        await Task.Delay(600); //mimic asynchronous operation

        Orders = Enumerable.Range(1, 75).Select(x => new Order()

        {

            OrderID = 1000 + x,

            CustomerID = (new string[] { "ALFKI", "ANABOLNTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],

            Freight = 2.1 * x,

            OrderDate = (new DateTime[] { new DateTime(2010, 5, 1), new DateTime(2010, 5, 2), new DateTime(2010, 5, 3), })[new Random().Next(3)],

        }).ToList();

        Console.WriteLine("finished1");

    }

    private void Onload(){

        Console.WriteLine("started2");

        gridHeight = "630";

        StateHasChanged();

        Console.WriteLine("finished2");

    }

    public class Order

    {

        public int? OrderID { get; set; }

        public string CustomerID { get; set; }

        public DateTime? OrderDate { get; set; }

        public double? Freight { get; set; }

    }

}

[Jeevakanth Palaniappan]

Hi Tom, 

Greetings from Syncfusion support. 

We have analyzed your query and found that you need to set the grid height responsively based on the browser resolution. For this we suggest you to set the grid height as 100% and specify the grid’s parent element to have explicit height. Please find the below code snippet and the sample in which the grid will adjust according to the browser’s height. 

<div style="height: calc(100vw - 58rem);"> 

//Change the 58rem value based on your browser page layout 

    <SfGrid DataSource="@Orders" AllowPaging="true" AllowFiltering="true" AllowTextWrap="true" Height="100%"> 

        <GridEvents OnLoad="Onload" TValue="Order"></GridEvents> 

        <GridColumns> 

        .. 

        </GridColumns> 

    </SfGrid> 

</div> 

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

Documentation - https://blazor.syncfusion.com/documentation/datagrid/scrolling/#responsive-with-parent-container  

Regards, 

Jeevakanth SP. 

[Tom Dimos]

I have already tried this approach but I don't want to use it because for a brief moment the grid exceeds it's parent container and then fits into it causing this visual "anomaly". Is there a way to achieve it from code by modifying a predefined Height which fixes the issue mentioned above.

[Jeevakanth Palaniappan]

Hi Tom, 

We have checked the issue with time delay of both 600ms and 1000ms but the grid height is changing as expected. So we request you to provide the sample with your actual Javascript function which will be helpful for us to check the reported problem. Either you can share the issue reproducing sample or modify the previously provided sample with the javascript functions. 

We have attached the video demonstration for your reference which can be downloaded from the below link. 

Video - https://www.syncfusion.com/downloads/support/directtrac/general/ze/Video-1914041108  

Regards, 

Jeevakanth SP.