Combination of Tab Strip and Panel Bar Question

6 posts, 0 answers
  1. James
    James avatar
    13 posts
    Member since:
    Sep 2008

    Posted 16 Jun 2009 Link to this post

    Hi

    I am trying to get the functionality of a combined tab strip and panel bar, where I have a horizontal row of tab, but when they are click they act like a panel bar row, opening a layer vertically, so that more than one layer can be seen on the screen at the same time.

    The full functionality I desire is shown here: http://www.talkfreelance.com/z_test/CS2/Images/layer_show_hide_with_tabs.gif

    Can you advise if this is possible?

    Thanks

    James
  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 18 Jun 2009 Link to this post

    Hello James,

    Unfortunately, the requested layout cannot be achieved with RadTabStrip or RadPanelBar control.

    Regards,
    Paul
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Alex Lawson
    Alex Lawson avatar
    43 posts
    Member since:
    May 2008

    Posted 18 Jun 2009 Link to this post

    Wow that would be a useful layout.

    Perhaps it could be achieved by having several tabstrips with div elements inbetween?  I cannot see any easy way of creating a hidden tab which maintains the same width so you may have to dynamically position the tabstrip and margins in javascript.

    <left margin><tabstrip>
    <div display>
    <left margin><tabstrip>
    <div display>
    <left margin><tabstrip>
    <div display>
    etc

    If you wanted an animation of the sections collapsing\expanding you could use a panel bar with one panel instead of a div.  Anyway if you are stuck I may have some time next week to play about with a demo.
  4. James
    James avatar
    13 posts
    Member since:
    Sep 2008

    Posted 19 Jun 2009 Link to this post

    I've had a look everywhere and can't find any scripts that would accomplish it. Would the people at TELERIK consider making it if it gets enough support?

    I came up with the idea as I am creating a screen with about 7 different layer and, when using the screen a user may want to see numerous different layers at the same time as they interact. I'm currently using the Panel Bar - but this takes up the space of 7 horizontal rows when collapsed - with my method you would only take up one horizontal row when full collapsed.

    Thanks
  5. Alex Lawson
    Alex Lawson avatar
    43 posts
    Member since:
    May 2008

    Posted 19 Jun 2009 Link to this post

    Well heres a sample I put together using tabstrip and divs, not to elegant but seems to work :-)

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        </telerik:RadScriptManager> 
          
        <div id="menu1" runat="server">  
            <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Width="100px" Skin="Outlook" OnClientTabSelected="TabSelected">  
                <Tabs> 
                    <telerik:RadTab runat="server" Selected="false" Text="Tab1" Width="100px">  
                    </telerik:RadTab> 
                </Tabs> 
            </telerik:RadTabStrip> 
        </div> 
          
        <div id="content1" runat="server" style="height:0px;visibility:hidden;BORDER-RIGHT: rgb(145,155,156) 1px solid; BORDER-TOP: rgb(145,155,156) 1px solid; MARGIN-TOP: -2px; BORDER-LEFT: rgb(145,155,156) 1px solid; BORDER-BOTTOM: rgb(145,155,156) 1px solid">  
          
        Pane 1<br /> 
          
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi dapibus. Donec vitae pede a nisl ultricies viverra. Integer bibendum. Fusce ipsum quam, accumsan a, ornare at, consectetuer sit amet, diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque consectetuer, libero eu porttitor facilisis, lacus leo aliquet mauris, sed tincidunt elit ante et ante. Mauris fringilla, augue id posuere varius, urna ante vulputate purus, sit amet malesuada erat nibh eget urna. Nullam tincidunt. Morbi mauris. Maecenas elit ipsum, porttitor in, gravida vitae, cursus et, sem. Nunc neque. Vivamus mi. Praesent nisl risus, ultrices ac, tincidunt sit amet, suscipit ut, erat. Nullam lobortis orci eget turpis. Proin tincidunt mauris. Quisque aliquam, pede ut aliquam iaculis, lectus quam cursus mauris, nec rhoncus metus eros vitae nibh.  
          
        </div> 
          
        <div id="menu2" runat="server" style="position:relative;left:100px;top:-25px;height:0px">  
            <telerik:RadTabStrip ID="RadTabStrip2" runat="server" SelectedIndex="0" Width="100px" Skin="Outlook">  
                <Tabs> 
                    <telerik:RadTab runat="server" Selected="True" Text="Tab2" Width="100px">  
                    </telerik:RadTab> 
                </Tabs> 
            </telerik:RadTabStrip> 
        </div> 
          
        <div id="content2" runat="server" style="BORDER-RIGHT: rgb(145,155,156) 1px solid; BORDER-TOP: rgb(145,155,156) 1px solid; MARGIN-TOP: -2px; BORDER-LEFT: rgb(145,155,156) 1px solid; BORDER-BOTTOM: rgb(145,155,156) 1px solid" > 
          
        Pane 2<br /> 
          
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi dapibus. Donec vitae pede a nisl ultricies viverra. Integer bibendum. Fusce ipsum quam, accumsan a, ornare at, consectetuer sit amet, diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque consectetuer, libero eu porttitor facilisis, lacus leo aliquet mauris, sed tincidunt elit ante et ante. Mauris fringilla, augue id posuere varius, urna ante vulputate purus, sit amet malesuada erat nibh eget urna. Nullam tincidunt. Morbi mauris. Maecenas elit ipsum, porttitor in, gravida vitae, cursus et, sem. Nunc neque. Vivamus mi. Praesent nisl risus, ultrices ac, tincidunt sit amet, suscipit ut, erat. Nullam lobortis orci eget turpis. Proin tincidunt mauris. Quisque aliquam, pede ut aliquam iaculis, lectus quam cursus mauris, nec rhoncus metus eros vitae nibh.  
          
        </div> 
          
        <script type="text/javascript" > 
          
        function TabSelected(sender, args)  
        {  
            document.getElementById('content1').style.visibility = "visible";  
            document.getElementById('content1').style.height = "";  
            document.getElementById('menu2').style.height = "";  
            document.getElementById('menu2').style.top = "0px";  
        }  
          
        </script> 
  6. James
    James avatar
    13 posts
    Member since:
    Sep 2008

    Posted 19 Jun 2009 Link to this post

    Cool - thats great - hopefully the TELERIK guys will add this as an official release.
Back to Top