MVC Grid Height

[yuben]

When rendering a grid using the HTML helper, the grid (k-grid-content) has a style height attribute of 200px. This only seems to occur when the grid is scrollable and or when grouping is allowed. How do I set the height to a custom value? I have tried adding a custom.css with the class k-grid-content set to a custom height, but this does is overridden by the inline style. I cannot find where this style is being set. The container div for the grid is set to 500 px.

[roger]

.HtmlAttributes(new { style = "height: 500px" })


[yuben]

Thanks Roger.  I was missing the "style = ".

[towpse]

Hey there,

I'm trying to have the grid honour a max height and adjust itself accordingly based on its row contents until it reaches the max height.

I tried adding .HtmlAttributes(new { style = "max-height: 200px;" })
But I'm always get the height style on the grid content div as 200 by default.

<div id="main-items-grid" class="k-widget k-grid" style="max-height: 200px;" data-role="grid">

           <div class="k-grid-header" style="padding-right: 17px;">

           <div class="k-grid-content" style="height:200px">

200px is too tall for a grid with say 2 rows, so I was hoping by default it adjusts to its content until it hits 200px....


word

[Dimo]

Hi Matt,

You should remove the max-height style set via HtmlAttributes() and set a max-height style to the div.k-grid-content element in order to achieve the desired behavior. Since this div is not declaratively configurable, add a separate CSS rule.

Regards,
Dimo
the Telerik team

[towpse]

thanks for the suggestion, DIno,
so i removed the code that added the .Html max height attribute.

i've added the max-height css property #my-grid div.k-grid-content 

{

    max-height: 200px;

}

But how do I avoid the default height setting of 200px that the OP mentioned on the div.k-grid-content element?

I always get this style applied without having specified it anywhere.
I'd like the grid content div to auto size up until 200px based on the row contents...
so that the div is wrapped tightly around the rows if I only have a minimum number of rows.....

that default height style is applied when i use the kendo grid helper. the client side grid is good.

element.style {

    height: 200px;

}

i can get around it for now by trumping that style in my css
    height:auto !important;

[Dimo]

Hi Matt,

Indeed, there is a default height, which the Kendo UI MVC Grid applies to ensure better backwards compatibility with the old MVC Grid extension. Sorry about not mentioning that. You can remove this style with

Html.Kendo().Grid()
    .Scrollable(s => s.Height("auto"))

Regards,
Dimo
the Telerik team

[Informed Sources]

Is there a way to match the height of the screen?
I'm trying to get the grid to fill the whole panel and resize when the browser resizes

[Dimo]

Hello Adam,

Yes, the required approach is documented here:

http://docs.telerik.com/kendo-ui/web/grid/appearance#height

Regards,
Dimo
Telerik

[IT Dept]

[quote]Dimo said:Hi Matt,

Indeed, there is a default height, which the Kendo UI MVC Grid applies to ensure better backwards compatibility with the old MVC Grid extension. Sorry about not mentioning that. You can remove this style with

Html.Kendo().Grid()
    .Scrollable(s => s.Height("auto"))

Regards,
Dimo
the Telerik team

 

 

[/quote]

This only seems to let the grid automatically set it's height on first load, but if you toggle a filter to load more results the grid will not expand.

[Dimo]

Hi Eric,

When Height("auto") is used, the Grid should expand and shrink, depending on the number of rendered data items. If it doesn't happen, this indicates that there is something else, which influences the Grid dimensions. Please verify the following:

+ There is no Grid height set in the component declaration via HtmlAttributes().
+ There is no height style applied to the Grid wrapper <div> (div.k-grid) or the Grid's scrollable container (div.k-grid-content).
+ There is no custom JavaScript code, which applies a height style to some of the mentioned Grid's HTML elements.

If nothing rings a bell and you need further assistance, please send us a runnable sample or a live URL, so that we can check what is going on.

Regards,
Dimo
Progress Telerik