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) { return; } //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 (!currentElement.is("body")) { //The parent of the element var currentParentElement = currentElement.parent(); //Get same level elements apart from the current element var currentElementSiblings = currentParentElement.children() .not(currentElement) .not("script"); //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"); contentArea.height(finalHeight); } $(window).resize(function () { resizeGrid(); });
And here is the working jsfiddle –> http://jsfiddle.net/rsmacaalay/5rrfta82/
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.
Thanks.