Grid inside Dialog - Height:100% not working

[Michel Jost]

Hi,

i placed a grid in a dialog. The dialog has a specific height and width. The width and height of the grid is set to 100%. The grid has a search toolbar item.

So basically I expected the grid to have a vertical scrollbar if there are enough items. But there are two vertical scrollbars. The grid and dialog got one each.

The grid height is exceeding the 100% of the parent (dialog content) height. I suspect the grid toolbar to be the cause. The vertical scrollbar of the dialog allows to scroll exactly the height of the grid toolbar.

Can you please provide a workaround for this problem or a hotfix.

Thanks in advance

Michel

[Michel Jost]

I reproduced the problem with other parents. So the problem is not limited to parents of the type dialog.

The toolbar seems to exceed the height of 100% of the grid.

[Renjith Singh Rajendran]

Hi Michel, 

Greetings from Syncfusion support. 

We would like to inform you that we will be using the native browser scrollbar in our Syncfusion Blazor Grid. By default, DataGrid will adapt to its browser (or its parent) element’s width and height. To contain the Grid’s content inside its parent the browser scroll bars will be rendered.  

Grid will be rendered based on its parent element height and width. So we suggest you to set the height and width based on your requirement for the Grid’s parent div element. We have prepared a sample to make the Grid displayed based on Dialog content. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp-955448171 

 

 

<SfDialog Width="700" Height="500" IsModal="true"> 

    <DialogTemplates> 

        ... 

        <Content> 

            <div style="height:320px;width:650px"> 

                <SfGrid DataSource="@Orders" Height="100%" Width="100%" Toolbar="@(new List<string>() { "Search"})"> 

                    ... 

                </SfGrid> 

            </div> 

        </Content> 

    </DialogTemplates> 

</SfDialog> 

 

 

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

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran