1. Home
  2. Forum
  3. Blazor
  4. How to set height in grid dynamically based on screen resolution to work Virtualization

How to set height in grid dynamically based on screen resolution to work Virtualization

I have an sfgrid control.I have set "EnableVirtualization=true" and "height = 400".The feature of virtualization working fine when I set height in sfgrid.I would like to know how to set height in sfgrid dynamically based on screen resolution 

Code:-

<SfGrid @ref="gridRef" AllowSelection="true" AllowFiltering="false" Height="400" AllowPaging="false" AllowTextWrap="true" DataSource="@materialHeaderSetups" Toolbar=@Tool EnableVirtualization=true>

                <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>

<SfGrid>


3 Replies
MS Monisha Saravanan Syncfusion Team September 14, 2022 03:23 PM UTC

Hi Kins,


Greetings from Syncfusion support.


Query: “I would like to know how to set height in sfgrid dynamically based on screen resolution ”


We have checked your query and we suspect that you need to set height to DataGrid in responsive to screen size. We have already documented an topic related to your requirement in our below UG section. By defining  Grid height as 100% will make the Grid responsive to the parent container. We can calculate and set the height to the parent container. So that the Grid will behave with mentioned height in the parent div. Kindly refer the below UG for additional information.


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


If the reported issue still persist then kindly share the below details to validate further at our end.


  1. Share us the video demonstration of the issue with explanation.
  2. Share us entire Grid rendering code snippet along with model class.
  3. If possible share us an simple issue reproduceable sample.


The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.


Regards,

Monisha



AA Adnan Ali June 30, 2023 10:48 AM UTC

Did you find out the solution, if so please share here as well


MS Monisha Saravanan Syncfusion Team July 3, 2023 10:43 AM UTC

Hi Adnan,


Greetings from Syncfusion.


We suspect that your requirement is to render Grid in responsive to the browser layout. If so we suggest you to use the below highlighted solution at your end.


 

<div style="width:calc(100vw - 20rem); height:calc(100vh - 7rem);">

@*Change the rem values based on your browser page layout*@

<SfGrid DataSource="@Orders" Height="100%" Width="100%">

    <GridColumns>

..

    </GridColumns>

</SfGrid>

</div>

 



We have documented the same in the below UG section. Kindly refer this for additional information


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


If you still face difficulties or your requirement is different then kindly share the below details to validate further at our end.


  1. Share us the video demonstration of the issue with explanation.
  2. Share us entire Grid rendering code snippet along with model class.
  3. If possible share us an simple issue reproduceable sample.


The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.


Regards,

Monisha


Loader.
Up arrow icon