Resizing KendoUI Splitter To Fill Screen Vertically

I dropped the jQuery.Layout plugin in favor of KendoUI’s Splitter control yesterday. Kendo’s Splitter is just so much easier to use and more flexible. It was a no-brainer for me, really.

But I ran in to a problem: how to resize the splitter so that the “main” content of my app would resize vertically, while keeping the header and footer at a set, specific size? Fortunately, Burke Holland came to my rescue! And, as I expected, it’s a simple solution.

Resize The Splitter On Window Resize

$("#vertical").kendoSplitter({
    orientation: "vertical",
        panes: [
            { collapsible: false, resizable: false, size: "100px" },
            { collapsible: false },
            { collapsible: false, resizable: false, size: "100px" }
        ]
    });

$("#horizontal").kendoSplitter({
    panes: [
        { collapsible: true },
        { collapsible: false },
        { collapsible: true }
    ]
});

$(window).resize(function() {
    resizeSplitter()
});

var resizeSplitter = function() {
    var topHeight = 100;
    var bottomHeight = 100;
    var centerHeight = $(window).height() - (topHeight + bottomHeight);

    var splitter = $("#vertical").data("kendoSplitter");
 
    splitter.size("#topPane", topHeight + "px");
    splitter.size("#middlePane", centerHeight + "px");
    splitter.size("#bottomPane", bottomHeight + "px");
    
    splitter.trigger("resize")
};

Simple enough, right? Just pay attention to the $(window).resize event, calculate the size of the main content area, and call resize on the splitter.

The Live Demo

Here’s the JSFiddle Burke created for me, in all it’s awesomeness:

To actually see this working, you’ll want to visit the fiddle directly and then resize your window.

I did make a few small changes to the resize method from the original JSFiddle that I’m showing, in my gist above. In order to keep the top and bottom panes the same size all the time, I added a resize on them in the function. Otherwise, when you shrink the screen really small and then make it really large again, the top and bottom sections tend to be hidden. I also cleaned up a few global var leaks and fixed an error triggering the reset event for the version of Kendo I’m using.


Post Footer automatically generated by Add Post Footer Plugin for wordpress.

About Derick Bailey

Derick Bailey is an entrepreneur, problem solver (and creator? :P ), software developer, screecaster, writer, blogger, speaker and technology leader in central Texas (north of Austin). He runs SignalLeaf.com - the amazingly awesome podcast audio hosting service that everyone should be using, and WatchMeCode.net where he throws down the JavaScript gauntlets to get you up to speed. He has been a professional software developer since the late 90's, and has been writing code since the late 80's. Find me on twitter: @derickbailey, @mutedsolutions, @backbonejsclass Find me on the web: SignalLeaf, WatchMeCode, Kendo UI blog, MarionetteJS, My Github profile, On Google+.
This entry was posted in Javascript, JQuery, JSFiddle, KendoUI. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • Chrisfwillis

    Very nice – what I was looking for!  Could you do a JSFiddle with your revised code – copying into his doesn’t seem to work properly.

  • bees

    hey bro,, how to change layout header transition in kendo ui ? thx,,