Dynamic Grid Height?

18 posts, 0 answers
  1. Mono
    Mono avatar
    7 posts
    Member since:
    Nov 2011

    Posted 06 Dec 2011 Link to this post

    Hello,

    I have a basic web application that I would like to use Kendo UI on. This application has a basic banner whose content is dynamically sized. Below this banner, I would like to use a Kendo UI Grid control. This Grid needs to fill the remaining available space. My question is, how you make a Grid dynamically grow to fill the available height? All of the demos I see use absolute heights.

    Thank you!
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 06 Dec 2011 Link to this post

    Hello Mono,

    Currently supported HTML/CSS web standards do not provide means to achieve the desired behavior without some Javascript coding. You need to calculate the new Grid height (i.e. the available horizontal space) and set it to the Grid wrapper:

    <div class="k-widget k-grid" style="height: .... ">

    Afterwards, you should also set new height to the data area container:
    <div class="k-grid-content" style="height: .... ">

    A simpler option in your case would be to remove the height style of the outer element and control the Grid height only via the data area's height style.

    All the best,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Mono
    Mono avatar
    7 posts
    Member since:
    Nov 2011

    Posted 06 Dec 2011 Link to this post

    Hello Dimo,

    Thank you for your response. I did not entirely follow your response. I see two different divs referenced in your code below. Is there anyway a sample could be posted on jsfiddle or something? This just seems like such a common problem. I can't believe I'm the only dev that has run into this. 
  5. Anders
    Anders avatar
    10 posts
    Member since:
    Aug 2012

    Posted 13 Dec 2011 Link to this post

    I would also love a example of this.
  6. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 13 Dec 2011 Link to this post

    Hello,

    Normally, the Kendo Grid has two height styles applied

    - one to its wrapper div ( <div class="k-widget k-grid" style="height: .... "> )
    - one to its scrollable data area div ( <div class="k-grid-content" style="height: .... "> )

    The above can be observed in the following demo:

    http://demos.kendoui.com/web/grid/index.html

    In case you need further assistance, please specify which of the following steps is not clear how to implement:

    0. Let us assume that the Grid wrapper height is "A" and the data height is "B"

    1. Get the inner height of the Grid's parent - "C"
    2. Set "C" - 2 to the Grid wrapper (2px corresponds to the 1px top and bottom borders)
    3. Set "C" - 2 - ("A" - "B") to the Grid data area

    All of the above can be done with the jQuery API or standard DOM operations.

    Best wishes,
    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. Chad
    Chad avatar
    3 posts
    Member since:
    Nov 2011

    Posted 14 Dec 2011 Link to this post

    Hello Dimo,

    Thank you for your response. However, the link that you provided does not show what you are referring to. When I click the "Code" tab, I do not see a sample of the wrapper div and the scrollable div area. 

    In your instructions, its also unclear as to what "C" is. You clearly defined "A" and "B". However, I'm still unsure what "C" represents. Could you please post a sample at http://jsfiddle.net/?

    Thank you! 
  8. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 15 Dec 2011 Link to this post

    Hello Chad,

    "When I click the "Code" tab, I do not see a sample of the wrapper div and the scrollable div area."

    Well, yes, these are generated on the client, so you can see them by inspecting the resulting HTML output in Firebug.

    "C" is the available vertical space that the Grid should fill up. In other words, it's the Grid parent's height.

    Best wishes,
    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. Mono
    Mono avatar
    7 posts
    Member since:
    Nov 2011

    Posted 15 Dec 2011 Link to this post

    Personally, I want to see a real-world example. I believe that is a reasonable request to see an example of a Grid that fills a space. All of the demos on the Kendo site use absolute heights. I need a Grid that can fill the remaining space on a screen. This is a showstopper item for me.  

    When I use the approach detailed by Dimo previously, it doesn't work. In addition, when I set the nested grid class property to k-grid-content, the headers are out-of-line with the data in the grid. I have the following::
    <div id="contentArea">
      <div id="gridWidget" class="k-widget k-grid">
        <div id="gridContent" class="k-grid-content"></div>
      </div>
    </div>

    Nothing fancy. I would just like a sample posted on either the Kendo site or JSFiddle.net that demonstrates how to resolve this problem.
    Thank you.
  10. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 15 Dec 2011 Link to this post

    Hello,

    Here is your demo:

    http://jsfiddle.net/dimodi/4eNu4/2/

    It can be simplified if you leave the Grid wrapper's height to be always 100% and not reset it, but in this case you will have to remove the Grid wrapper's borders, otherwise overflowing will occur.

    Greetings,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Uwe Bach
    Uwe Bach avatar
    8 posts
    Member since:
    Nov 2008

    Posted 19 Feb 2012 Link to this post

    Hello Dimo,

    Resizing of grid, like your example does not work since last update!!!
    Please fix it. Code should be always compatible!

    Regards


  12. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 20 Feb 2012 Link to this post

    Hi Stefan,

    Judging by the updates of my jsFiddle demo, somebody has updated it with resources from localhost and a non-public port. Is that you?

    I included resources from the public CDN and now the demo works as expected with the latest version.

    http://jsfiddle.net/dimodi/4eNu4/33/

    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!
  13. Long
    Long avatar
    1 posts
    Member since:
    Feb 2012

    Posted 27 Feb 2012 Link to this post

    This all breaks when paging is turned on, when paging to subsequent pages, the grid keeps getting longer (in length) every time I page, please advise.. (I've attatched a couple of screenshots)
  14. David
    David avatar
    27 posts
    Member since:
    Jun 2014

    Posted 25 Sep 2014 Link to this post

    Sure would be nice if Kendo guys would add a gridHeight API method. I wouldn't be banging my head against a wall right now if that existed.

    Half empty grid data areas look ugly without rows to fill them.
  15. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 29 Sep 2014 Link to this post

    Hello David,

    A height API cannot be a "universal painkiller", because the developer will still need to be aware how the Grid height and layout work, and do his/her part of the job, especially when dynamic resizing is used.

    There is a documentation section on the discussed behavior available at:

    http://docs.telerik.com/kendo-ui/web/grid/appearance#making-the-grid-100-high-and-auto-resizable

    Let me know if there is anything unclear, so that we can make the necessary improvements to the explanation.

    In addition, you seem to want the Grid to NOT expand if it has fewer rows, which is a completely different scenario. Instead of having a static 100% height applied to the Grid, you should check if the Grid becomes taller than needed (in the window.resize event handler), and if so, apply a height:auto style to its .k-grid <div> (widget wrapper) and the .k-grid-content <div> (data area wrapper).

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  16. David
    David avatar
    27 posts
    Member since:
    Jun 2014

    Posted 07 Oct 2014 in reply to Dimo Link to this post

    Thank you for this tip. Can I just check the data for a certain length and if it is under, then change the height to auto on those two selectors?
  17. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 08 Oct 2014 Link to this post

    Hi David,

    Yes, you can

    (1) count the number of data items

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#fields-dataSource

    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-view

    or 

    (2) measure the height of the Grid data table

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#fields-table


    However, the easiest, better and simpler way to achieve what you want, is to apply a min-height and/or max-height style to the .k-grid-content element.


    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  18. David
    David avatar
    27 posts
    Member since:
    Jun 2014

    Posted 08 Oct 2014 in reply to Dimo Link to this post

    Cool. Thanks for the clarification and help!
Back to Top
Kendo UI is VS 2017 Ready