Getting a PanelBar with Scrolling groups when it occupies 100% of the container height

Thread is closed for posting
1 posts, 0 answers
  1. BECC20D8-61B7-4AC4-9F21-DED55C9E64A9
    BECC20D8-61B7-4AC4-9F21-DED55C9E64A9 avatar
    739 posts
    Member since:
    Mar 2009

    Posted 08 May 2008 Link to this post

    Requirements

    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


Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.