Max height for Datagrid in Dialog

[Michael Salzlechner]

i have a  data grid inside a dialog. it expands in height until the dialog fills the screen then adds scrollbars

i would like the grid to expand to a maximum height. is that possible?

i tried a few things like wrapping the grid in a div with max-height but was not successful.

thanks

[Jeevakanth Palaniappan]

Hi Michael, 

Greetings from Syncfusion support. 

We have checked your query but we are quite unclear about your exact requirement. We suspect that the grid get expands and the scroll bar is rendered for your scenario(Component.razor) as like the below screenshot. 

 

But we suspect that you need to render the grid as like the below screenshot(Index.razor)? If so, we suggest you to use the below codes to achieve your scenario, 

<SfDialog Height="500" Width="900"> 

    <DialogTemplates> 

        <Header> 

            <div>Choose a Dialog Position</div> 

        </Header> 

        <Content> 

            <div style="height: 400px"> 

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

                    <GridColumns> 

                        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="140"></GridColumn> 

                        .. 

                    </GridColumns> 

                </SfGrid> 

            </div>             

        </Content> 

    </DialogTemplates> 

</SfDialog> 

 

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

If this is not your requirement then kindly share us the below details, 

1. Kindly share us more information on your requirement.
2. Share us the video demo demonstrating the reported problem.
3. Share us the issue reproducing sample or reproduce the issue in the provided sample.

The above requested details will be helpful for us to validate the issue and provide you with a better solution as early as possible. 

Regards, 

Jeevakanth SP. 

[Michael Salzlechner]

i would like the grid and the dialog to expand but only to a maximum height not to the full height of the browser screen

for example in your example instead of the dialog having a height of 500 i would like to have a max-height of 500 so it can expand up to 500

thanks

[Jeevakanth Palaniappan]

Hi Michael, 

Thanks for the information. You can set the MaxHeight for the dialog by using the below code. 

<SfDialog Width="900"> 

    <DialogEvents OnOpen="BeforeOpen"></DialogEvents> 

    <DialogTemplates> 

        .. 

    </DialogTemplates> 

</SfDialog> 

 

@code{ 

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

    public void BeforeOpen(BeforeOpenEventArgs args) 

    { 

        args.MaxHeight = "500px"; 

    } 

} 

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

API reference: 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.BeforeOpenEventArgs.html#Syncfusion_Blazor_Popups_BeforeOpenEventArgs_MaxHeight 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_OnOpen 

Get back to us if you have any other queries. 

Regards, 

Jeevakanth SP.