KendoGrid inside DojoxExpandoPane

2 posts, 0 answers
  1. Owen
    Owen avatar
    2 posts
    Member since:
    Oct 2014

    Posted 14 May 2015 Link to this post

    I am using a grid that is inside a content pane for a single page application website.  My problem is that once I put the grid inside the Dojo ExpandoPane with splitter:true for resizing capability, I lose the sticky column headers when I scroll down.  

    Here's the HTML I'm using for the grid inside the ExpandoPane... (grid-container is inside a BorderContainer)

    <div id="grid-container" dojotype="dojox.layout.ExpandoPane" data-dojo-props="region:'bottom',splitter:true" class="resultsContainer">
        <div id="grid" class="k-content"></div>
    </div>

    And the css...

    #grid-container {
        padding: 0;
        height: 40%;
    }

    #grid {
        height: auto;
        width: 100%;
        display: inline-table;
    }

    And populating the grid...

                    $("#grid").kendoGrid({
                        columns: columns,
                        navigatable: true,
                        dataSource: results
                    });

     

    I can get a grid that works as intended if I fix the grid height to 100% as shown below, but I lose the nice resize capability of the ExpandoPane, plus you have to scroll all the way to the right of the grid for the vertical scrollbar.  

    #grid {
        height: 100%;
        width: 100%;
        display: inline-table;
    }

     So is there any way I can have the resize functionality while retaining the sticky column headers?

  2. Dimo
    Admin
    Dimo avatar
    8478 posts

    Posted 18 May 2015 Link to this post

    Hello Owen,

    We are not aware of the Dojo ExpandoPane's behavior and requirements, but based on the provided information, I can suggest the following:

    - Grid scrolling should be enabled
    - the Grid should be 100% high
    - the Grid should be placed in a non-scrollable container
    - once the page layout changes (e.g. the ExpandoPane is resized), the resize() method of the Grid should be executed

    http://docs.telerik.com/kendo-ui/using-kendo-in-responsive-web-pages#individual-widget-resizing

    http://docs.telerik.com/kendo-ui/web/grid/appearance#make-the-grid-100-high-and-auto-resizable

    I suspect that currently you have nested scrollable containers (i.e. a scrollable Grid is placed inside another scrollable container), which is not very convenient for the users.

    Regards,
    Dimo
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top