MVC Grid Height

2 Answers 5940 Views
Grid
yuben
Top achievements
Rank 1
yuben asked on 03 Jul 2012, 12:19 AM
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.

2 Answers, 1 is accepted

Sort by
0
roger
Top achievements
Rank 1
answered on 12 Jul 2012, 11:40 AM
.HtmlAttributes(new { style = "height: 500px" })
yuben
Top achievements
Rank 1
commented on 12 Jul 2012, 09:37 PM

Thanks Roger.  I was missing the "style = ".
towpse
Top achievements
Rank 2
commented on 21 Jan 2013, 08:44 PM

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
0
Dimo
Telerik team
answered on 22 Jan 2013, 09:03 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
towpse
Top achievements
Rank 2
commented on 22 Jan 2013, 05:41 PM

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-height200px;
}

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 {
    height200px;
}

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

Dimo
Telerik team
commented on 23 Jan 2013, 07:43 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Informed Sources
Top achievements
Rank 1
commented on 15 Jan 2015, 12:32 PM

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
Telerik team
commented on 20 Jan 2015, 08:30 AM

Hello Adam,

Yes, the required approach is documented here:

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

Regards,
Dimo
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

IT Dept
Top achievements
Rank 1
commented on 14 Sep 2018, 12:33 PM

[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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 

[/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
Telerik team
commented on 17 Sep 2018, 07:10 AM

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
yuben
Top achievements
Rank 1
Answers by
roger
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or