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

4 posts, 0 answers
  1. Tim R
    Tim R avatar
    133 posts
    Member since:
    Feb 2006

    Posted 28 Jun 2013 Link to this post

    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.
  2. Dimo
    Dimo avatar
    8482 posts

    Posted 01 Jul 2013 Link to this post

    Hello Tim,

    The Orders table from Northwind has 830 records.

    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.

    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.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Joel
    Joel avatar
    7 posts
    Member since:
    Nov 2012

    Posted 23 Dec 2013 Link to this post

    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.

    Happens only when you set the height property of the grid.
  4. Dimo
    Dimo avatar
    8482 posts

    Posted 24 Dec 2013 Link to this post

    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.

    Use parts of the code from this example: 

    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.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top