Unable to size grid created from HTML table

[B Jones]

I have an HTML table that I'm creating a grid from, but I'm not able to change the height. The grid is within a splitter and the splitter pane has a div before the grid but I don't think this is causing the problem. Even without the splitter, I'm not able to size the grid to fill the window.

 

Example:

http://dojo.telerik.com/uzudOzEt/2

 

References:

Resize and Expand the Kendo UI Grid to 100% Height

Expand Grids to Match the Height of TabStrip Containers within Splitter Panes

[Marin Bratanov]

Hello,

Having an element with 100% height means that it must not have sibling nodes, as their total height goes above 100%.

With this in mind, it will be easier to let the splitter take care of resizing the container where the grid is, so you can avoid the extra math and just .resize() the grid.

It is also important to note that you need enough data in the grid for the container to get filled up.

That said, here are two examples:

• one with the approach where the grid is initialized from a table (but has sufficient data): https://dojo.telerik.com/@bratanov/oFItebOh
• one where the grid is initialized with a div and reads "actual" data from our demos: http://dojo.telerik.com/@bratanov/IqiDeMof

In both examples I intentionally left an extra div with yellow background that wraps the grid so you can know that if you see it, the grid is not 100% tall, and also - to showcase how all elements in the tree must have 100% height or pixel height (as the splitter pane) for this to work out. You can remove this div later, it is here to showcase and for testing.

Regards,
Marin Bratanov
Progress Telerik