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

2 posts, 0 answers
  1. Gary
    Gary avatar
    28 posts
    Member since:
    Apr 2011

    Posted 03 Dec 2012 Link to this post

    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










  2. Mike
    Mike avatar
    8 posts
    Member since:
    Jun 2012

    Posted 08 Jun 2013 Link to this post

    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;  
    }
  3. Kendo UI is VS 2017 Ready
Back to Top