Dynamic Grid Height?

5 Answers 4241 Views
Grid
Mono
Top achievements
Rank 1
Mono asked on 06 Dec 2011, 02:39 PM
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!

5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 06 Dec 2011, 03:19 PM
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!
Mono
Top achievements
Rank 1
commented on 06 Dec 2011, 03:57 PM

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. 
Anders
Top achievements
Rank 1
commented on 13 Dec 2011, 10:35 AM

I would also love a example of this.
0
Dimo
Telerik team
answered on 13 Dec 2011, 12:28 PM
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!
Chad
Top achievements
Rank 1
commented on 14 Dec 2011, 07:57 PM

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! 
Dimo
Telerik team
commented on 15 Dec 2011, 09:42 AM

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!
Mono
Top achievements
Rank 1
commented on 15 Dec 2011, 03:35 PM

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.
0
Dimo
Telerik team
answered on 15 Dec 2011, 05:06 PM
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!
Uwe Bach
Top achievements
Rank 1
commented on 19 Feb 2012, 11:13 AM

Hello Dimo,

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

Regards


Dimo
Telerik team
commented on 20 Feb 2012, 10:38 AM

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!
Long
Top achievements
Rank 1
commented on 27 Feb 2012, 08:09 PM

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)
David
Top achievements
Rank 2
commented on 25 Sep 2014, 02:36 PM

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.
0
Long
Top achievements
Rank 1
answered on 22 Mar 2012, 12:33 AM
0
Dimo
Telerik team
answered on 29 Sep 2014, 02:58 PM
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!
 
David
Top achievements
Rank 2
commented on 07 Oct 2014, 10:46 PM

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?
Dimo
Telerik team
commented on 08 Oct 2014, 11:46 AM

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!
 
David
Top achievements
Rank 2
commented on 08 Oct 2014, 04:09 PM

Cool. Thanks for the clarification and help!
Milos
Top achievements
Rank 1
commented on 19 Mar 2020, 02:47 PM

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.

Stefan
Telerik team
commented on 20 Mar 2020, 06:00 AM

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.
Milos
Top achievements
Rank 1
commented on 20 Mar 2020, 08:26 AM

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?








Stefan
Telerik team
commented on 23 Mar 2020, 07:20 AM

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.
Milos
Top achievements
Rank 1
commented on 23 Mar 2020, 12:50 PM

Hello Stefan, 

Unfortunately none of the above suits me.

Thanks anyway.







Stefan
Telerik team
commented on 24 Mar 2020, 08:23 AM

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.
Milos
Top achievements
Rank 1
commented on 24 Mar 2020, 01:39 PM

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

Stefan
Telerik team
commented on 27 Mar 2020, 09:46 AM

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.
Milos
Top achievements
Rank 1
commented on 27 Mar 2020, 10:44 AM

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

durby
Top achievements
Rank 1
commented on 28 Mar 2020, 09:09 PM

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.

 

 

 

 

 

Aleksandar
Telerik team
commented on 01 Apr 2020, 04:09 PM

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.
Tags
Grid
Asked by
Mono
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Long
Top achievements
Rank 1
Share this question
or