HOW TO: Resize Grid to 100% in a TabStrip in a Splitter when Splitter Pane re-sizes

[Gary]

After some research and combining of two forum posts, I managed to get this working. I know there are others working on this.

first, implement a resize handler when the splitter is resized.

$("#workSplitter").kendoSplitter({

    orientation: "horizontal",

    panes: [

        { collapsible: false, size: "20%" },

        { collapsible: false, size: "80%" }

    ],

    resize: function () {

        window.setTimeout(function () {

            if (tabExists("Transactions")) {

                resizeGrid("#mainGrid");

            }

            resizeGrid("#activityGrid");

        }, 1);

    }

});

...Is where I call resizeGrid. He's the code from another post with added parameter for re-use:

function resizeGrid(gridSelector) {

    var element = $(gridSelector),

        dataArea = element.find('.k-grid-content'),

        elementHeight = element.innerHeight(),

        otherElements = element.children().not('.k-grid-content'),

        otherElementsHeight = 0;

    otherElements.each(function () {

        otherElementsHeight += $(this).outerHeight();

    });

    dataArea.height(elementHeight - otherElementsHeight);

}

But, as the grid is in a TabStrip, it will only resize to the size of the Tab it's on. If you want the Grid to re-sizeto 100% of the Splitter Pane,
the TabStrip must re-size to 100% of the Pane width/height.

This I did with CSS (stolen from another post but changed slightly):

#workTabs {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    width: auto;

    height: auto;

}

 

#workTabs > .k-content {

    position: absolute;

    top: 34px;

    bottom: 0;

    left: 0;

    right: 0;

}

Originally the second set of settings were applied to classes .k-tabstrip and .k-content. This caused big issues with an embedded TabStrip in the detail Template that I did not want resized. So the change to "#workTabs > .k-content" was enough to limit this to the first children only. Setting attributes on class .k-tabstrip  did not seem to be needed.

Hope this helps

Original Post for making TabStrip 100% of Splitter pane.
http://www.kendoui.com/forums/ui/tabstrip/forcing-tabstrip-to-take-up-100-of-it-s-parent-container.aspx#2398868

Original post for making grid 100% of Splitter pane, allowing for other elements
http://www.kendoui.com/forums/mvc/grid/grid-100-height.aspx

[Mike]

Your post was VERY helpful !!  thanks !!

I was playing around with the grid sizing and applied the same strategy you used for the tabs.  Just wanted to present this as an alternative.

So with the tabs, you used the style to set the tab body to take up the parent space minus a hard coded value for the tab header.  You can take the same approach for the grid and remove the splitter resize event handler.

Makes me wonder if CSS could reference the the size of the other element somehow to remove the hard coded "top" value, replacing it with "size of the header element"?

#mainTopTabStrip > .k-content {
    position: absolute;
    top: 42px;
    bottom: 0;
    left: 0;
    right: 0;
}

#mainTopTabStrip {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: auto;
}

#gridPane {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: auto;
}

#grid {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: auto;
}

#grid > .k-grid-content {
    position: absolute;
    top: 35px;
    bottom: 0;
    left: 0;
    right: 0;
}