The height of Grid in the dialog is incorrect

[Nick]

I added a kendo grid in the kendo dialog, there were two rows in the grid, the grid's height didn't auto fill the dialog, its height would be correct if I click the header of a column. I attached the screenshot.Is there any one to tell me how to solve it? Thanks

 

 

[Eyup]

Hi Nick,

The grid is probably getting affected by the container (window) height. You can try to subscribe to the open event handler of the window:
https://docs.telerik.com/kendo-ui/api/javascript/ui/window/events/open

And refresh the grid or set its height manually:
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/refresh

You can give it a try and let me know if it works for you.

Regards,
Eyup
Progress Telerik

[Nick]

Hi Eyup, thanks for your reply, but it doesn't work. And I tried to refresh when initOpen for the dialog, still not work. I don't want to set its height manually when the dialog shows up.

[Eyup]

Hello Nick,

Could you modify the following dojo sample to demonstrate the specific window configuration and send it back to us?
This will enable us to reproduce the same issue locally and provide more precise and accurate suggestions.

Regards,
Eyup
Progress Telerik

[Eyup]

Hello Nick,

Sorry, here is the dojo link:
https://dojo.telerik.com/UyOgIfaf/4

Regards,
Eyup
Progress Telerik

[Nick]

Hi Eyup, I did some changes in the dojo page, same issue as I met.

[Nick]

Sorry for missing the new dojo link: https://dojo.telerik.com/UyOgIfaf/13

[Eyup]

Hi Nick,

Thanks for the sample. I am able to reproduce the issue and will get back to you with the solution today.

Regards,
Eyup
Progress Telerik

[Eyup]

Hello Nick,

Apparently, the container holding the items:

<div class="k-grid-content k-auto-scrollable">

 
is getting its height based on the height of its parent container, which is the div element representing the grid:

<div id="parametersGrid" data-role="grid" class="k-grid k-widget k-display-block k-editable" style="height: 400px;">

The issue is that initially the grid is not visible and thus the scrollable container lacks its height which would have been calculated depending on the grid's height.

To resolve the problem, you can set this height manually:

.k-grid > div.k-grid-content.k-auto-scrollable
{
  height: 328px;
}

Here is the modified version of the dojo sample:
https://dojo.telerik.com/UyOgIfaf/15

Alternatively, you can use this:

.k-grid > div.k-grid-content.k-auto-scrollable
{
  height: calc(100% - 72px);
}

That should do the trick. 

Regards,
Eyup
Progress Telerik