Responsive resizing of datagrid

Radzen.Blazor Components
1

Hi.
I have two RadzenCards on my page. Inside the second one I have a RadzenDataGrid.
The first RadzenCard has a fixed height.
Now I would like the second RadzenCard, including the RadzenDataGrid, to resize the height to fill up the rest of the page.
And I would like to have it responsively adjust the height when I resize the browser window.

image
image1681×980 119 KB

Any ideas on how to achieve this? One of the problems with this is that the RadzenDataGrid needs a height defined.
Thnx in advance and greetings
Henk

2

You can probably use a container with display: flex and flex-direction: column. Something like:

<div style="height: 100vh; display: flex; flex-direction: column">
   <RadzenCard style="height: 200px"></RadzenCard>
   <RadzenCard style="flex: 1">
      <RadzenDataGrid style="height: 100%"></RadzenDataGrid>
   </RadzenCard>
</div>
3

Hi Korchev
Thanx for the quick response.
Your solution works fine as long as the number of items in the datagrid are less than can be displayed.
But when there are more items, the grid goes of the screen:

image
image1688×973 118 KB

4

Try also setting height to 0 (it is required for the percentage height to work):

<RadzenCard style="flex: 1; height: 0">

Here is a complete page using the Northwind database.

<div style="height:100vh; display: flex; flex-direction: column">
<RadzenCard style="height: 200px">200px</RadzenCard>
<RadzenCard style="flex: 1; height: 0">
    <RadzenDataGrid Data="@orderDetails" TItem="OrderDetail" AllowPaging="true" Style="height:100%"
            PageSize="25" AllowFiltering="true" AllowSorting="true">
        <Columns>
            <RadzenDataGridColumn TItem="OrderDetail" Property="OrderID" Title="OrderID" />
            <RadzenDataGridColumn TItem="OrderDetail" Property="ProductID" Title="ProductID" />
            <RadzenDataGridColumn TItem="OrderDetail" Property="UnitPrice" Title="Unit Price">
                <Template Context="detail">
                    @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", detail.UnitPrice)
                </Template>
            </RadzenDataGridColumn>
            <RadzenDataGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" />
            <RadzenDataGridColumn TItem="OrderDetail" Property="Discount" Title="Discount">
                <Template Context="detail">
                    @String.Format("{0}%", detail.Discount * 100)
                </Template>
            </RadzenDataGridColumn>
        </Columns>
    </RadzenDataGrid>
</RadzenCard>
</div>
@code {
    IEnumerable<OrderDetail> orderDetails;

    protected override void OnInitialized()
    {
        base.OnInitialized();

        orderDetails = dbContext.OrderDetails;
    }
}

And here is how it behaves.
resize

5

Yes perfect. That's exactly what I needed.
Thank you Atanas :+1: