Using responsive height on grid disables scroll bar

[Luis Roberto]

Hi I have a Grid with  Height="70%" inside a div with height of 100% and the vertical vertical scroll appears disable, instead if I use a heigh in px for example Height=200px, the scroll works normal.

this is my code

.content {

    height: 100%;

}

<div class="content">

 <SfGrid DataSource="@VM.Clientes" AllowSorting="true" Height="70%">

            <GridColumns>

                <GridColumn Field=@nameof(ClienteDto.ClienteId) HeaderText="Num" Width="9" TextAlign="TextAlign.Left"></GridColumn>

                <GridColumn Field=@nameof(ClienteDto.Nombre) HeaderText="Nombre" Width="45" TextAlign="TextAlign.Left"></GridColumn>

                <GridColumn Field=@nameof(ClienteDto.SucursalNombre) HeaderText="Sucursal" Width="23" TextAlign="TextAlign.Left"></GridColumn>

            </GridColumns>

        </SfGrid>

</div>

Thank you

[Rahul Narayanasamy]

Hi Luis, 

Greetings from Syncfusion. 

Query: Using responsive height on grid disables scroll bar 

We have validated your query and we suspect that you are facing some complexities while rendering a responsive Grid. If you want to be the Grid height as responsive, then you can explicitly define the height for parent component of the Grid. You need to set the parent element height to be either some static height(in px) or like below code snippets. Find the below code snippets for your reference. 

<div> 

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

        @*Change the 7rem value based on your browser page layout*@ 

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

            <GridPageSettings PageSize="30"></GridPageSettings> 

            <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> 

            </GridColumns> 

        </SfGrid> 

    </div> 

</div> 

Sample: https://www.syncfusion.com/downloads/support/forum/164359/ze/BlazorGridResponsive-1386576550  

Reference: 

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

Please let us know if you have any concerns.  

Regards, 

Rahul 

[Luis Roberto]

Thank you very much Rahul, it worked great. :)  

Take care.

[Rahul Narayanasamy]

Hi Luis, 

Thanks for the update. 

We are happy to hear that the provided solution was helpful to achieve your requirement. 

Please get back to us if you need further assistance. 

Regards, 

Rahul 

[Bernd Parchmann]

Hello,

I have problem with the height, too!

At first a question for the responsive height calculation: 

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

        @*Change the 7rem value based on your browser page layout*@ 

Where/What is this value on my page layout?

Second "issue" I have: I have a checkbox to enable the filtering feature of the datagrid. It seems that the size of filter bar is added under the datagrid and not extending the datagrid itself. So the result is, when I check the filtering feature to true, the vertical scrollbar is shown because the size is not enough! If I increase the rem value, then the size with filtering is okay, but if I disable the filtering feature I have a space under my datagrid!

Someone has a solution?

Greetings,

Bernd

[Rahul Narayanasamy]

Hi Bernd, 

Greetings from Syncfusion. 

Query: At first a question for the responsive height calculation: <div style="height: calc(100vh - 7rem);"> @*Change the 7rem value based on your browser page layout*@ Where/What is this value on my page layout? 

You need to set the 7rem(or increase) value based on your browser/screen resolution manually. For setting the Height to 100% requires the datagrid parent element to have explicit height or you can use calc function to set explicit height based on the browser layout. 

Reference: 

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

Query: So the result is, when I check the filtering feature to true, the vertical scrollbar is shown because the size is not enough! If I increase the rem value, then the size with filtering is okay, but if I disable the filtering feature I have a space under my datagrid! 

We suspect that when you enable the Filtering dynamically, the browser vertical scrollbar. If yes, we suggest you to set the parent element style dynamically like below code snippets. Find the below code and sample for your reference. 

 

<SfCheckBox Label="Enable Filtering" @onchange="onChange" @bind-Checked="isChecked"></SfCheckBox> 

<div> 

    <div style="height: @heightValue"> 

        @*Change the 7rem value based on your browser page layout*@ 

        <SfGrid @ref="Grid" DataSource="@Orders" AllowFiltering="@isChecked" AllowPaging="true" Height="100%"> 

            <GridPageSettings PageSize="30"></GridPageSettings> 

            <GridColumns> 

                .. .  

            </GridColumns> 

        </SfGrid> 

    </div> 

</div> 

 

 

 

@code{ 

    SfGrid<Order> Grid; 

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

    private bool isChecked = false; 

    string heightValue { get; set;} = "calc(100vh - 7rem)"; 

 

    private void onChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) 

    { 

        if(args.Value.ToString() == "True") 

        { 

            heightValue = "calc(100vh - 9rem)"; 

        } else 

        { 

            heightValue = "calc(100vh - 7rem)"; 

        } 

    } 

 

    .. .  

} 

Sample: https://www.syncfusion.com/downloads/support/forum/164359/ze/Sample-224575998  

Please let us know if you have any concerns. 

Regards, 

Rahul