How to adjust size of grid within a splitter

2 posts, 0 answers
  1. Galen Giebler
    Galen Giebler avatar
    13 posts
    Member since:
    Nov 2004

    Posted 24 May 2013 Link to this post

     I am using the ASP.NET MVC server side wrappers to create a page with a splitter control with 3 horizontal panes.  Each pane includes a single <div> with header text, and a Kendo Grid.

    How do I get the grid to resize appropriately within each pane?
    I have tried the following, but the splitterPane.scrollHeight value does not seem correct when the pane gets smaller.  For example, when the page starts all panes report a scrollHeight of 278, but if I move the top splitter up, the scrollheight of the top pane goes to up to 280 instead of being reduced..
    I have tried to find another property/method other than scrollHeight and have been unsuccessful..
    Any help is greatly appreciated!!!
    function LayoutChange() {
        UpdateGridSize("#PendingVessels", 0);
        UpdateGridSize("#DueToSellVessels", 1);
        UpdateGridSize("#DueToShiftVessele", 2);
    function UpdateGridSize(gridName, indexPane) {
        var splitter = $("#Main");
        var splitterPane = splitter.find(".k-pane")[indexPane];
        var splitterHeight = splitterPane.scrollHeight;
        var gridElement = $(gridName),
            dataArea = gridElement.find(".k-grid-content"),
            //gridHeight = gridElement.innerHeight(),
            otherElements = gridElement.children().not(".k-grid-content"),
            otherElementsHeight = 0;
        otherElements.each(function () {
            otherElementsHeight += $(this).outerHeight();
        gridElement.height(splitterHeight - 25);  //-25 for the header item
        dataArea.height(gridElement.innerHeight() - otherElementsHeight);
  2. Dimo
    Dimo avatar
    8475 posts

    Posted 27 May 2013 Link to this post

    Hi Galen,

    If you want the Grids to resize in such a way, so that the Splitter panes are not scrollable, then you should measure offsetHeight instead of scrollHeight.

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