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 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/
Thank you for a nice example…
however, there’s at least two issues with this piece of code:
(1) Absolute positioned elements height will be counted as well
(2) You are counting grid’s header two times: one when declaring “var headerHeight = hasHeader ? header.outerHeight(true) : 0” and secondly when selecting var “grid.children().not(“.k-grid-content”)”
Thanks for sharing. The article was very helpful.