full window layout

[Piyush Bhatt]

In RAD ASP controls there was a demo for full-browser window layout using Rad Splitter and panels etc. The nice thing about that demo was while resizing the browser, it allowed to automatically resize all panels within it.

We need similar type of feature in Kendo UI - how do we achieve that? For example,  I need such feature using TabStrip so that the Tab Panel resizes according to the browser size and other items like menu and call remain fix size.

[Dimo]

Hi Piyush,

Please inspect the following example:

http://jsfiddle.net/dimodi/QZcH7/

In short, you need to make calculations and resize the TabStrip content wrappers manually on window resize, and on initial load. This is because the TabStrip widget consist of two sibling elements (the tabs wrapper and the content wrappers) and currently supported web standards do not allow script-less resizing in such a scenario.

Best wishes,
Dimo
the Telerik team

[Piyush Bhatt]

Thanks for pointing me to this example. I am using Chrome Browser. and kpane.innerHeight() is returning NULL. following function is copied from the site suggested above (http://jsfiddle.net/dimodi/QZcH7/). function resizeTabs() {

var paneHeight = $("#tabStrip").closest(".k-pane").innerHeight();

var kpane = $("#tabStrip").closest(".k-pane");

alert(kpane); alert(kpane.innerHeight());

var tabsHeight = $("#tabStrip > .k-tabstrip-items").outerHeight();

$("#tabStrip > div").height(paneHeight - tabsHeight - 18);

}

[Dimo]

Hi Piyush,

My demo works as expected in Chrome, so please compare the code with your implementation to see what's wrong.

All the best,
Dimo
the Telerik team

[Piyush Bhatt]

Dimo,

Thank you for your great support. I figured this out. I am not wrapping the tabs within splitter - that was the issue. 

Corrected the javascript to not use '.k-pane' and now it works. 

For benefit of otheres -- 

$(window).resize(function() {
resizeTabs();
});


function resizeTabs() {
   var parentHeight = $("#tabStrip").innerHeight();
   var tabTop = $("#tabStrip").position().top;
var tabsHeight = $("#tabStrip > .k-tabstrip-items").outerHeight();
//alert(parentHeight);
$("#tabStrip > div").height(parentHeight - tabsHeight - 18 - tabTop);
    }

Thanks,
Piyush Bhatt

[Eric]

Dimo,

On your example solution, it appears that the resize event is happening before the window actually gets resized.  So, the value of the $("#tabstrip").closest(".k-pane").innerHeight() is actually the value BEFORE the resize occurs.

Try moving the top horizontal splitter a large amount, then a small amount, and then a large amount again.  You will notice the resizes are stale (one move previous).

Do you have a way to get resize events AFTER the user resize has been performed?

Thanks

[Alex Gyoshev]

Hello Eric,

The layoutChange event is what you are looking for.

All the best,
Alex Gyoshev
the Telerik team