An even better 100% Kendo UI Grid Height

By | November 24, 2014

Two days ago I posted this article called “A better 100% Kendo UI Grid Height“, well I found an even better solution after playing around with it.  Now instead of relying with the id’s header and contents we totally removed that attachment so you can name your divs what ever you want or just plug this JavaScript in and it will work immediately.

Now how did I do that?

Well we just iterated to each parent elements from the root where your grid is then captured all that height and use that for calculation, on that loop we disregarded the current element as we don’t need it for calculation we only need the sibling elements.  Having done this all our requirement is just having a grid on your form and this will run without changing anything just name your grid uniformly .

Here is the final code, hopefully this is the final solution to this.

function resizeGrid() {
    //Check if grid is available
    if (!$("#grid").length) {
    //Initialize some variables
    var bottomPadding = 10;
    var minimumAcceptableGridHeight = 250;
    var combinedElementHeight = bottomPadding;
    var windowHeight = $(window).innerHeight();
    var grid = $("#grid");
    //Calcualte all Grid elements height except the content
    var otherGridElements = grid.children().not(".k-grid-content"); //This is anything other than the Grid iteslf like header, commands, etc
    otherGridElements.each(function () {
        combinedElementHeight += $(this).outerHeight(true);
    //Lets start from the Grid
    var currentElement = grid;
    //Lets loop until it reaches the topmost element the <Body>
    while (!"body")) {
        //The parent of the element
        var currentParentElement = currentElement.parent();
        //Get same level elements apart from the current element
        var currentElementSiblings = currentParentElement.children()
        //Combine all the heights of those elements
        currentElementSiblings.each(function () {
            combinedElementHeight += $(this).outerHeight(true);
        //Set the current element to the the Parent.
        currentElement = currentParentElement;
    //Calculate the final height
    combinedElementHeight = windowHeight - combinedElementHeight;
    var finalHeight = combinedElementHeight < minimumAcceptableGridHeight ? minimumAcceptableGridHeight : combinedElementHeight;
    //Apply the height for the content area
    var contentArea = grid.find(".k-grid-content");
$(window).resize(function () {

And here is the working jsfiddle –>

One thought on “An even better 100% Kendo UI Grid Height

  1. David

    Had a look at your code for this and it could work. To get it working I had to exclude the hidden components of the grid that were adding up to a massive combined height. After that change it worked quite well.

    The solution is more js heavy than I would like, but I’ll definitely keep it in mind for future use if the circumstances allow it.

    The fix for the hidden objects is to add a .not(“:hidden”) when getting the currentElementSiblings.



Leave a Reply