MVC Grid Height

9 posts, 0 answers
  1. yuben
    yuben avatar
    2 posts
    Member since:
    May 2009

    Posted 02 Jul 2012 Link to this post

    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. roger
    roger avatar
    24 posts
    Member since:
    Jun 2009

    Posted 12 Jul 2012 Link to this post

    .HtmlAttributes(new { style = "height: 500px" })
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. yuben
    yuben avatar
    2 posts
    Member since:
    May 2009

    Posted 12 Jul 2012 Link to this post

    Thanks Roger.  I was missing the "style = ".
  5. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 21 Jan 2013 Link to this post

    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.


    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
  6. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 22 Jan 2013 Link to this post

    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!
  7. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 22 Jan 2013 Link to this post

    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;
  8. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 23 Jan 2013 Link to this post

    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!
  9. Adam
    Adam avatar
    17 posts
    Member since:
    Jan 2009

    Posted 15 Jan 2015 Link to this post

    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
  10. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 20 Jan 2015 Link to this post

    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.

Back to Top
UI for ASP.NET MVC is VS 2017 Ready