Grid Component Set Maximum Height

[joselitogatchalianalonzo]

How can I set the maximum height of the Grid? Please note that I set AllowPaging="false". I'm using Grid on my Dashboard together with other items. However, it is taking the full height of the screen leaving no space for other items. How can I set the maximum height of the Grid without paging i.e. AllowPaging="false"?

[gvreddy04]

@joselitogatchalianalonzo You can use the below custom CSS appraoch.

Keep the grid inside a div and give a CSS class name. In the blow example, CSS class name is employees.

<div class="employees">
    <Grid @ref="grid"
          TItem="Employee4"
          Class="table table-hover table-bordered table-striped"
          DataProvider="EmployeesDataProvider"
          AllowFiltering="true"
          Responsive="true">

          ....

    </Grid>
</div>

Add the below CSS in the .css file

div.employees > div.table-responsive {
    height: 200px !important;
}

Screenshot:

[gvreddy04]

@joselitogatchalianalonzo In the future version, we will add Height paramter to the Blazor Grid component

[joselitogatchalianalonzo]

Thanks @gvreddy04. I will try your sample code.