KendoGrid inside DojoxExpandoPane

[Owen]

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?

[Dimo]

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