Dynamic Grid Height?

[Mono]

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!

[Dimo]

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

[Mono]

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]

I would also love a example of this.

[Dimo]

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

[Chad]

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]

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

[Mono]

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.

[Dimo]

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

[Uwe Bach]

Hello Dimo,

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

Regards

[Dimo]

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

[Long]

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]

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.

[Long]

To really get this working: http://blog.longle.net/2012/03/21/setting-teleriks-html5-kendoui-grids-height-to-100-when-binding-to-remote-data/

[Dimo]

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

 

 

[David]

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]

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

 

 

[David]

Cool. Thanks for the clarification and help!

[Milos]

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]

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

[Milos]

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]

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

[Milos]

Hello Stefan, 

Unfortunately none of the above suits me.

Thanks anyway.

[Stefan]

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

[Milos]

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]

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

[Milos]

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]

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]

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

[Miloš]

Hello all,
Did you have any progres of fixing that bug with variable row height? Scrolling is inposible on scroll bar when segments have variable row heigth. Empty white space is on the end of grid as well. Here is the link of example: https://stackblitz.com/edit/react-mel7dh-wbxgih?file=app%2Fmain.jsx

[Konstantin Dikov]

Hi Miloš,

This thread is for the Kendo UI for jQuery widgets, so please refer to the answer in the support ticket that you have opened for the same issue.