Dynamic Grid Height?

29 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
    8474 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. 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. 
  4. 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.
  5. Dimo
    Admin
    Dimo avatar
    8474 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!
  6. 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! 
  7. Dimo
    Admin
    Dimo avatar
    8474 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!
  8. 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.
  9. Dimo
    Admin
    Dimo avatar
    8474 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!
  10. 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


  11. Dimo
    Admin
    Dimo avatar
    8474 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!
  12. 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)
  13. 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.
  14. Dimo
    Admin
    Dimo avatar
    8474 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!
     
  15. 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?
  16. Dimo
    Admin
    Dimo avatar
    8474 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!
     
  17. 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!
  18. Milos
    Milos avatar
    5 posts
    Member since:
    Mar 2020

    Posted 19 Mar Link to this post

    Is this a bug that a blank space appears at the end of the grid with virtual scroll?  The attached image is from your docs: https://www.telerik.com/kendo-react-ui/components/grid/scroll-modes/virtual/

    Thanks.

  19. Stefan
    Admin
    Stefan avatar
    2915 posts

    Posted 20 Mar Link to this post

    Hello, Milos,

    This is currently expected as when grouping is used, the height of the group can vary and we cannot precisely calculate the entire height. This should occur only when the Grid is grouped.

    We are also researching options to optimize it.

    Also, if you have tree-type data, we recommend the TreeList component, which supports tree data and has virtualization as well:

    https://www.telerik.com/kendo-react-ui/components/treelist/virtualization/

    Regards,
    Stefan
    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.
  20. Milos
    Milos avatar
    5 posts
    Member since:
    Mar 2020

    Posted 20 Mar in reply to Stefan Link to this post

    Hello,
    Thank you for your prompt reply.

    I have same problem with "simple grid" (virtual and variable row height). Same issue is for small and big number of segments. Is there any way to solve this?








  21. Stefan
    Admin
    Stefan avatar
    2915 posts

    Posted 23 Mar Link to this post

    Hello, Milos,

    Currently, the possible options are connected to making the height of the rows consistent.

    For example, if the content is longer to make it with dots (...) at the end and on one line:

     td {
       white-space: nowrap;
     }

    A Tooltip can be added to the cell to show the content if it is larger:

    https://www.telerik.com/kendo-react-ui/knowledge-base/tooltip-in-grid/

    Another option is to make the column wider enough, so it always fits the content.

    Regards,
    Stefan
    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.
  22. Milos
    Milos avatar
    5 posts
    Member since:
    Mar 2020

    Posted 23 Mar in reply to Stefan Link to this post

    Hello Stefan, 

    Unfortunately none of the above suits me.

    Thanks anyway.







  23. Stefan
    Admin
    Stefan avatar
    2915 posts

    Posted 24 Mar Link to this post

    Hello, Milos,

    If sending a fully runnable example is possible, we will be happy to check it and inspect if we can offer other options for optimizing it.

    Regards,
    Stefan
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  24. Milos
    Milos avatar
    5 posts
    Member since:
    Mar 2020

    Posted 24 Mar Link to this post

    Hello, Stefan, 

    Here is a simple example with same problem: https://stackblitz.com/edit/react-mel7dh

    I always have to display all the contents of the grid cells, and sometimes content is large. That way I get a variable row height.

    Regards,
    Milos

  25. Stefan
    Admin
    Stefan avatar
    2915 posts

    Posted 27 Mar Link to this post

    Hello, Milos,

    Thank you for your example.

    Indeed with this setup, having space is expected, but it does not affect the Grid scrolling, then it is possible to use the Grid in this setup as there is no flickering and breaking of the content.

    I did check different some web applications with large data sets and the result was the same. Many Gridseven does not support dynamic height at all. I do understand that this is not ideal, but we are currently limited by the available options for this case.

    We have this in mind and we are ready to improve it as soon as there is an option to do it.

    Apologies that we have not been able to provide more options for this case.

    Regards,
    Stefan
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  26. Milos
    Milos avatar
    5 posts
    Member since:
    Mar 2020

    Posted 27 Mar in reply to Stefan Link to this post

    Hello, Stefan, 

    Thanks for trying to find a solution and have this in mind. I am sure you will solve this soon.

    Grid scrolling works great. 

    Regards,
    Milos

  27. durby
    durby avatar
    2 posts
    Member since:
    Jul 2019

    Posted 28 Mar in reply to Mono Link to this post

    Just put a kendoSplitter on the page.

    $("#vertical").kendoSplitter({
                orientation: "vertical",
                panes: [
                    { collapsible: false, size: "150px", resizable: false  },
                    { collapsible: false }
                ]
            });

     

    put the datagrid in the bottom pane

    <div id="bottom-pane" style="height:100%">
                <div class="AmsTablediv" style="height:100%; width:100%;" >
                    <div id="GridInvoiceLines" class="AmsTable" style="height:99%;"  ></div>
                </div>
            </div>

    When I run the code, the user cannot use the splitter.

    When I resize the screen, the bottom pane gets the space and the grid grows and shrinks as it should.

     

     

     

     

     

  28. Aleksandar
    Admin
    Aleksandar avatar
    188 posts

    Posted 01 Apr Link to this post

    Hello Durby,

    If you would like the Splitter to automatically adjust its size I would suggest reviewing this HowTo article: 

    https://docs.telerik.com/kendo-ui/controls/layout/splitter/how-to/expand-splitter-to-100-height#expand-to-100-height-and-auto-resize

    I would also suggest the section on Appearance for guidelines on automatic and manual resizing of the Splitter.

    Let me know if you have additional questions.

    Regards,
    Aleksandar
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top