A better 100% Kendo UI Grid Height

I know Kendo UI is a love and hate relationship, if things work it works it works wonderfully and if not you just sometimes want to smash your screen.  I’ve been using Kendo for quite sometime now and I love it because of their Grid which is really useful specially in my scenario, other controls for me is just a bonus.

If you’ve have been using this grid in your development I guess you have your own story of love and hate but isn’t it satisfying when you make things work as you wanted.

One of the main issues with Kendo Grid is setting it to 100% height.  You can not just add a CSS class and set its height to 100% that will never work.  The only thing to assign a 100% height properly is by calculating the value of everything that affects your form like the window size and all the  elements in your form.  Once you have that value all you need is to assign that to the height of the grid content and not the whole grid.  Grid content meaning the one highlighted below.

Sounds easy, well lets see.

Most of the solution you see online will work but only if there’s nothing in your form apart from the grid.  If you now put all other elements then you can’t use them anymore as the grid heights calculation gets off.

For our code today I will demonstrate a common solution for this problem.

If you notice most of the sites have div sections separated for header, contents and sometimes footer like the one below.  You need to take this into consideration and calculate their heights accordingly against the full window height.

So lets do some coding, lets first create a simple page with the following elements needed for it to work.

Lets have some header where you usually add your menu and a content section where you add all contents like your title, grid and some other random contents.

<div id="header-content">This is a header, place where you usually add your menu</div>
<div id="main-content">
    <h1>Top Section</h1>
    <div id="grid">.......</div>
    <p>Any Contents you want here.</p>
</div>

You don’t even need a CSS for this one.

Now lets create the JavaScript that would perform the calculations.

<script type="text/javascript">
    function resizeGrid() {
        //Define Elements Needed
        var header = $("#header-content");
        var content = $("#main-content");
        var grid = $("#grid");
 
        //Other variables
        var minimumAcceptableGridHeight = 250; //This is roughly 5 rows 
        var otherElementsHeight = 0;
 
        //Get Window Height 
        var windowHeight = $(window).innerHeight();
 
        //Get Header Height if its existing
        var hasHeader = header.length;
        var headerHeight = hasHeader ? header.outerHeight(true) : 0;
 
        //Get the Grid Element and Areas Inside It
        var contentArea = grid.find(".k-grid-content");  //This is the content Where Grid is located
        var otherGridElements = grid.children().not(".k-grid-content"); //This is anything ather than the Grid iteslf like header, commands, etc
        console.debug(otherGridElements);
 
        //Calcualte all Grid elements height
        otherGridElements.each(function () {
            otherElementsHeight += $(this).outerHeight(true);
        });
 
        //Get other elements same level as Grid
        var parentDiv = grid.parent("div");
 
        var hasMainContent = parentDiv.length;
        if (hasMainContent) {
            var otherSiblingElements = content.children()
                    .not("#grid")
                    .not("script");
 
            //Calculate all Sibling element height
            otherSiblingElements.each(function () {
                otherElementsHeight += $(this).outerHeight(true);
            });
        }
 
        //Padding you want to apply below your page
        var bottomPadding = 10;
 
        //Check if Calculated height is below threshold
        var calculatedHeight = windowHeight - headerHeight - otherElementsHeight - bottomPadding;
        var finalHeight = calculatedHeight < minimumAcceptableGridHeight ? minimumAcceptableGridHeight : calculatedHeight;
 
        //Apply the height for the content area
        contentArea.height(finalHeight);
    }
 
    $(window).resize(function () {
        resizeGrid();
    });
</script>

Now I commented everything in the script so you can easily understand them.

And to give you a visualization on where it all hangs together I have mapped each element to the codes via arrows below.

And here is the mapping on the output.

Simple? You can see this live at http://jsfiddle.net/rsmacaalay/zx1pr5po/