Auto height 100% and master pages

[Matias]

Hi,

I'm trying to use a grid with resizable height so it uses 100% no matter the resolution used, and so far I could replicate the examples given by the Telerik support when working on a HTML single page, but when trying to use the same approach in a MVC master layout + view,I can't make it work.

These are the examples I followed:
http://docs.telerik.com/kendo-ui/controls/layout/splitter/how-to/expand-splitter-to-100-height
http://jsfiddle.net/dimodi/4eNu4/33/ (from a forum question)

Also, I'm trying to make the grid in razor style, not via script like the examples, but somehow I'm not able to do it.

I'm linking for download (the MVC projects weights too much to attach) the 2 working standalone projects I made for testing purposes, the one in HTML works fine and the one with MVC pattern doesn't when resizing the browser window.

https://drive.google.com/open?id=0B4xs_h7M8cSXT016d3JPRV9LR1k (HTML)
https://drive.google.com/open?id=0B4xs_h7M8cSXcUZwTE94MWw0MW8 (MVC)

Could you help me please? 

Thanks in advance.

[Matias]

Update: I'm trying to make this work in a stand alone project I've downloaded from your git repository. If you could help me with this using the      

[Matias]

I'm sorry, hit the wrong button.

Anyways, if you could help me using the Kendo Grid Ajax Binding demo project, I'd be really grateful.
This is the demo: https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/ajax-binding

Thanks again.

[Konstantin Dikov]

Hi Matias,

When you work with percentage value for the Grid height, you need to ensure that the parent elements are expanding as well and that there is at least one element with fixed height. You can find detailed information on this matter in the following forum thread:

• http://www.telerik.com/forums/grid-100-height#9AlrQ3unI0a08VEY9RfrxQ

In the context of the Kendo UI Grid for ASP.NET MVC you should set the height as shown below:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.Order>()
    .Name("Grid")
    .HtmlAttributes(new { style = "height: 100%" })
....

As for the example with the splitter, you should use the same approach in MVC.


Regards,
Konstantin Dikov
Telerik by Progress