Virtualization vs. responsive height

[Szoke]

Dear Support!

Is there a way to make the height of the grid responsive, like here:

<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>
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
    </GridColumns>
</SfGrid>
</div>

but do we take advantage of virtualization as well?

[Monisha Saravanan]

Hi Szoke,

Greetings from Syncfusion support.

Query: “Is there a way to make the height of the grid responsive, but do we take advantage of virtualization as well?”

Yes, you can make the Grid height and width responsive to the browser along with the virtualization by setting the Grid Height and Width as 100%. So that the Grid will behave based on the immediate parent height and width. Please check the below code snippet for your reference

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

<SfGrid DataSource="@GridData" Height=100% Width="100%" EnableVirtualization="true">

</SfGrid>

</div>

 

Kindly get back to us if you have further queries.

Regards,

Monisha