grid rendering issue when located on panelBar bottom panel (initially inactive / collapsed)

[Tim R]

I want to put together a jsBin project to demonstrate a problem I'm having with the kendo grid on a panelBar, but the problem only manifests itself when the grid contains a large amount of data, i.e. a thousand rows or more.    Is there a Northwind or other URL that returns a large dataset I can use?

Here's the scenario, in the meantime.  

Top panel (active panel) contains a Google map.  
Bottom panel (collapsed) contains kendo grid.

User clicks on the map,  and the latitude/longitude is used to fetch data from our database via AJAX.
Kendo grid is populated with the data while the bottom panel is still collapsed.
User clicks on the bottom panel to expand it and see the query results.

This works perfectly  -- but only on the first query. 

When the user re-opens  the top map panel to click on a different location, I destroy() the existing grid, reconfigure the grid, and repopulate the grid's dataSource with the new data from the second query.  Although the dataSource data object contains the full dataset from the XHR, the grid renders only the first row, and the height of the grid is truncated from 600px to 100px.

[Dimo]

Hello Tim,

The Orders table from Northwind has 830 records.

http://demos.kendoui.com/web/grid/remote-data.html


If you need more than that, you can use the approach in the Local data virtualization demo to be able to reproduce the problem in a simple example.

http://demos.kendoui.com/web/grid/virtualization-local-data.html


The provided information does not lead to a conclusive opinion what might be the problem, but generally, I suggest you to remove the old Grid's HTML markup from the page and initialize a new widget instance from a new empty element.

Regards,
Dimo
Telerik

[Joel]

I've created a jsFiddle and can reproduce the issue. Happens regardless of whether or not the grid is in the first or second panelBar.

http://jsfiddle.net/joelpenner/7Eehd/1/

Happens only when you set the height property of the grid.

[Dimo]

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.

#dtl .k-grid-content
{
    height: 280px;
}

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