This is a migrated thread and some comments may be shown as answers.

Grid 100% height

18 Answers 1578 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Simon831
Top achievements
Rank 1
Simon831 asked on 20 Aug 2012, 03:23 PM
I can get a Grid to be 100% high by setting parent containers to be 100% as well.

But inside an MVC splitter pane this does not work and the grid seems to expand to 100% of the browser rather than the DIV of the splitter pane it is in.

What methods are people using to get 100% height in all situations and browser resizes?

18 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 20 Aug 2012, 03:55 PM
Hello Simon,

Please take a look at the following demo. It uses pure Kendo UI widgets, but the logic with MVC wrappers is the same.

http://jsfiddle.net/dimodi/MjKmJ/

When the browser window is resized, the Splitter resize event is fired, so it is used to resize the Grid.

If you need further assistance, please open a support ticket and send a runnable demo which shows your implementation.

Kind 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!
0
Paul Seabury
Top achievements
Rank 1
answered on 24 Oct 2012, 03:10 PM
The Fiddle you posted was great for when a Grid was directly parented by a Splitter Pane, but what if we add a TabStrip to the equation?  I'd like the Grid to always fill whatever available space is in the Tabs of the bottom Splitter Pane in the JSFiddle example here.  Is this possible?  Any guidance is appreciated.

Paul
0
Dimo
Telerik team
answered on 24 Oct 2012, 04:01 PM
Hello Paul,

The rule of thumb is quite straight-forward:

An element with a percentage height requires its parent to have an explicit height.

http://www.w3.org/TR/CSS21/visudet.html#the-height-property

This means that if the parent height is also set in percent, the rule applies recursively until an element with a pixel height is reached, or until the <html> element is reached.

In your case the Grid and its parent have no height and cannot expand to fill the TabStrip wrapper.

In addition, 100% high elements should not have siblings, borders, margins and paddings, otherwise content overflow will occur, or you will have unnecessary scrollbars. In your case the TabStrip's active content container (which is the Grid's parent) has a sibling - the tabs <ul> wrapper, which means you can't simply set a 100% height for it, but have to calculate and set a pixel height, e.g. in the Splitter's resize event.

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!
0
Paul Seabury
Top achievements
Rank 1
answered on 24 Oct 2012, 09:21 PM
Is there a way that you would construct this series of controls/containers differently to simplify it or otherwise make it better?  I'm simply using the Kendo demo code to mockup a container heirarchy that I want to have, namely:

Splitter
+Top
++TopLeft
++TopRight
+Bottom
++Tabs
+++Tab1
++++Grid1
+++Tab2
++++Grid2
+++TabN
++++GridN

Where the grid fills the entire tab area no matter how many items it may have in it.  I'm certainly no expert yet at html/css, but it seems there must be an easier way than manually computing the size of one or more elements when the splitter is resized.
0
Dimo
Telerik team
answered on 25 Oct 2012, 08:35 AM
Hello Paul,

Unfortunately there is no easier way, because current web standards do not provide means to define a

"take up 100% height minus the height of all sibligns"

height style. You need Javasctript to achieve this.

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!
0
Gary
Top achievements
Rank 1
answered on 02 Dec 2012, 09:55 PM
Scrub this request. was a proxy issue

Dimo,

Would like to see the re-size logic of re-sizing the grid on splitter resize but jsfiddle link is not functioning.

can you re-post?

Thanks
0
Dimo
Telerik team
answered on 03 Dec 2012, 01:55 PM
Hello Gary,

In case you are talking about this fiddle, it works:

http://jsfiddle.net/dimodi/MjKmJ/

function resizeGrid() {
    var gridElement = $("#grid"),
        dataArea = gridElement.find(".k-grid-content"),
        gridHeight = gridElement.innerHeight(),
        otherElements = gridElement.children().not(".k-grid-content"),
        otherElementsHeight = 0;
    otherElements.each(function(){
        otherElementsHeight += $(this).outerHeight();
    });
    dataArea.height(gridHeight - otherElementsHeight);
}
 
$("#splitter").kendoSplitter({
    resize: function() {window.setTimeout(function(){resizeGrid();}, 1);}
});


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!
0
Gary
Top achievements
Rank 1
answered on 03 Dec 2012, 05:20 PM
Yes, it does! Sorry, proxy issue stopped the page loading.

I have been trying to generalise the function for non-grid elements but TabStrips are proving tricky.

Like Paul I have a TabStrip within a Pane, with a Grid on it. Emulating an MDI application.

Do you have any examples of resizing so that the Tabs and Grid are always 100% of the Pane Height?

I will struggle on while I wait for your reply.

Gary
0
Dimo
Telerik team
answered on 04 Dec 2012, 08:09 AM
Hi Gary,

This is an old example, I suppose it will throw enough light on the mattter.

http://jsfiddle.net/dimodi/8etzB/

The trickiness of the TabStrip resizing lies in the fact that this widget includes two sibling elements - the tab container and the content container. This prevents you from being able to set 100% height to the content <div>s, so you need to calculate their height and set it in pixels. Currently supported web standards and CSS do not provide the ability to define an "occupy all remaining vertical space" style.

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!
0
Nathan
Top achievements
Rank 2
answered on 18 Apr 2013, 05:55 PM
Hi,

I'm so close to having this same issue sorted out but am missing something. I've sorted through some of the other posts on this topic and this one seems closest to mine. Sorry for the long winded post!

Here's my scenario:
Splitter with 2 panes (left and right)
Left pane has a grid
Right pane has a tab control with each tab having a grid.

What I've done:
In splitter resize events, I call a resizeGrid method which resizes the tab panes first and then the grids using "borrowed" code from the other posts I've found.
This "almost" works, but one extra row shows below the line of the grid. See the image1 attachment for an example. The odd thing is that if I check one of the boxes (which fires a save to the server and update to the grid data source) then it suddenly fixes itself. See image2 to see the updated UI. Note that I call the same resize function in the dataBound event. Anyone know what's going on here? Seems like it may be an issue with order of events and/or the fact that I'm calling this resize function from a lot of places...

Any help would be appreciated!

Here's the resize function:
function resizeGrid() {
    expandContentDivs(tabStripElement.children(".k-content"));
 
    var gridElement = $("#facilitygrid");
    var dataArea = gridElement.find(".k-grid-content");
    var newHeight = gridElement.parent().innerHeight() - 10;
    var diff = gridElement.innerHeight() - dataArea.innerHeight();
 
    var otherElements = gridElement.children().not(".k-grid-content");
    var otherElementsHeight = 0;
    otherElements.each(function () {
        otherElementsHeight += $(this).outerHeight();
    });
 
    gridElement.height(newHeight);
    dataArea.height(newHeight - diff - otherElementsHeight);
 
    gridElement = $("#departmentsgrid");
    dataArea = gridElement.find(".k-grid-content");
    newHeight = gridElement.parent().innerHeight() - 10;
    diff = gridElement.innerHeight() - dataArea.innerHeight();
     
    otherElements = gridElement.children().not(".k-grid-content");
    otherElementsHeight = 0;
    otherElements.each(function () {
        otherElementsHeight += $(this).outerHeight();
    });
    // end test
    gridElement.height(newHeight);
    dataArea.height(newHeight - diff - otherElementsHeight);
 
    gridElement = $("#deptgroupsgrid");
    dataArea = gridElement.find(".k-grid-content");
    newHeight = gridElement.parent().innerHeight() - 10;
    diff = gridElement.innerHeight() - dataArea.innerHeight();
     
    otherElements = gridElement.children().not(".k-grid-content");
    otherElementsHeight = 0;
    otherElements.each(function () {
        otherElementsHeight += $(this).outerHeight();
    });
     
    gridElement.height(newHeight);
    dataArea.height(newHeight - diff - otherElementsHeight);
 
}

And for completeness here's the code for the tab strip resize:
    var tabStripElement = $("#tabstrip").kendoTabStrip(),
tabStrip = tabStripElement.data("kendoTabStrip");
    var expandContentDivs = function (divs) {
        divs.height(tabStripElement.innerHeight() - tabStripElement.children(".k-tabstrip-items").outerHeight() - 16);
    }

0
Dimo
Telerik team
answered on 19 Apr 2013, 07:15 AM
Hi Nathan,

The problem shown on image1.png occurs when the Grid is initialized (dataBound) while it is hidden. In such cases Javascript size calculations don't work. Please adjust the Grid height only while the widget is visible (i.e. in an active TabStrip tab or in a Splitter, which has already been intiialized and with an adjusted layout).

The events that you can use are:

Splitter layoutChange

TabStrip activate

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!
0
Nathan
Top achievements
Rank 2
answered on 19 Apr 2013, 01:53 PM
Thanks for the response Dimo, but unfortunately I'm already calling the resize function from tabstrip activate too.  Is there a possibility that I need to stop resizing under certain conditions? My fear is that I'm calling this resize function too much now. Here are all the places I call that resize function:
Splitter.contentLoad
Splitter.resize
Grid.dataBound
TabStrip.activate

Thanks!

Nathan
0
Dimo
Telerik team
answered on 19 Apr 2013, 03:05 PM
Hello Nathan,

Please use Splitter.layoutChange instead of Splitter.resize. layoutChange is called at a later stage and is better to be used.

You don't need to adjust the Grid height in Grid.dataBound.

It is important to note that you should only resize the Grids, which are currently visible.


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!
0
Nathan
Top achievements
Rank 2
answered on 19 Apr 2013, 06:05 PM
Ok thanks I'm getting much closer using layout changed. I still have one problem which is that I can't seem to get the activate event (or any event in fact) to fire on the TabStrip.
Here's a simple fiddle showing the behavior. I've tried doing this a few different ways and feel very stupid right now that I can't get this to work... what am I missing?

http://jsfiddle.net/XjYc8/

Thanks!

Nathan
0
Dimo
Telerik team
answered on 22 Apr 2013, 08:04 AM
Hi Nathan,

The Kendo UI version and the jQuery version in the provided example are not compatible. As a result, the event handler is not executed. In addition, the CSS and JS files are from different Kendo UI versions.

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!
0
Nathan
Top achievements
Rank 2
answered on 22 Apr 2013, 02:12 PM
Sorry for the bad fiddle example - I am new to that tool. However, my actual project has all of the latest references for CSS, jQuery, and Kendo. I have updated the fiddle to match my project (2013 Q1) and I'm still having problems with the event.

http://jsfiddle.net/XjYc8/3/

Can you look a bit closer?

Thanks
0
Dimo
Telerik team
answered on 22 Apr 2013, 02:46 PM
Hello Nathan,

 
In my previous reply I forgot to mention that the TabStrip is missing its content <div>s. I suppose you are not using it like this in your real application? Please check our online demos.

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!
0
Nathan
Top achievements
Rank 2
answered on 22 Apr 2013, 03:06 PM
Yes in my production application I have a div for the tab and then another div within that for the grid on each tab. Adding those placeholders to my fiddle fixes it yet I still cant' seem to get this event to fire in my production app. I have verified all css and script references - anything else I can look at?

In any event I'll just keep bashing away at it - I'm sure it's just something stupid. Thanks for all of your help!

Nathan
Tags
Grid
Asked by
Simon831
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Paul Seabury
Top achievements
Rank 1
Gary
Top achievements
Rank 1
Nathan
Top achievements
Rank 2
Share this question
or