RadControls version |
Any AJAX version |
.NET version |
2.0+ |
Visual Studio version |
2005 or later |
programming language |
C# & JavaScript |
browser support |
all browsers supported by RadControls
|
PROJECT DESCRIPTION
This demo shows you how to arrange to have child groups scroll in a PanelBar if the number of items in that group means that the group height is greater than that available.
The 2nd of the 2 methods shown suggests setting the PanelBar's ExpandMode attribute to "FullExpandedItem". Sadly, this will only work if you have set your PanelBar's height to an absolute value. If you want your PanelBar to, for example, automatically occupy 100% of the container height you need to do something else.
Happily, the solution is simple; all you need to do is get the PanelBar's height to be reset when the container size changes.
In this example, I'm using a RadSplitter as the container ('cos that's what I was using in my live project when I discovered this).
The RadSplitter is set to occupy 100% Height and Width of the browser window and a simple Javascript function is called when the Splitter is initially loaded and after each resize.
The javaScript routine is listed below ...
1 |
function SetNavHeight(sender, args) { |
2 |
var navPane = sender.getPaneById("NavPane"); |
3 |
var containerHeight = navPane.get_height(); |
4 |
var panelBar = $find("<%=PanelBar.ClientID %>"); |
5 |
panelBar.get_element().style.height = containerHeight + "px"; |
6 |
panelBar.repaint(); |
7 |
} |
The function should be fairly self-explanatory with the possible exception of line 6.
Try running the project with line 6 commented out. You'll see that each call to the function causes the PanelBar to be rendered at the height of the container
before the container size changed. Line 6 forces the PanelBar to be redrawn with the
current settings.
Thanks need to go to Nick@
telerik towers for the essential line 6.
--
Stuart