Hi Joel,
The problem in the provided example is that the Grid tries to initialize its layout while it is hidden. This generally does not work, as Javascript size calculations fail for hidden containers. As a result, the Grid is higher than expected and overflows.
When a Grid height is specified and the Grid is scrollable, the widget calculates the height of its scrollable data container (div.k-grid-content).
You have two options:
1. Remove the Grid height and define a height style for the div.k-grid-content element via an external CSS rule. In this way there will be no calculations.
2. Calculate the div.k-grid-content height manually in the PanelBar's activate event.
http://demos.kendoui.com/web/panelbar/events.html
http://docs.kendoui.com/api/web/panelbar#events-activate
Use parts of the code from this example:
http://docs.kendoui.com/getting-started/web/grid/walkthrough#making-the-grid-100%-high-and-auto-resizable
Your real-world scenario is probably somewhat different, as you said it works in some cases and not in others, but the cause of the problem and the possible resolution may be similar.
Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework -
download Kendo UI now!