This is a migrated thread and some comments may be shown as answers.

The height of Grid in the dialog is incorrect

8 Answers 48 Views
Dialog
This is a migrated thread and some comments may be shown as answers.
Nick
Top achievements
Rank 1
Nick asked on 01 Nov 2018, 08:39 AM

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

 

 

8 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 01 Nov 2018, 12:07 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Nick
Top achievements
Rank 1
answered on 02 Nov 2018, 03:21 AM
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.
0
Eyup
Telerik team
answered on 05 Nov 2018, 03:02 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Eyup
Telerik team
answered on 05 Nov 2018, 03:03 PM
Hello Nick,

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

Regards,
Eyup
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Nick
Top achievements
Rank 1
answered on 07 Nov 2018, 09:58 AM
Hi Eyup, I did some changes in the dojo page, same issue as I met.
0
Nick
Top achievements
Rank 1
answered on 07 Nov 2018, 10:00 AM
Sorry for missing the new dojo link: https://dojo.telerik.com/UyOgIfaf/13
0
Eyup
Telerik team
answered on 09 Nov 2018, 09:02 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Eyup
Telerik team
answered on 09 Nov 2018, 12:34 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Dialog
Asked by
Nick
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Nick
Top achievements
Rank 1
Share this question
or