Having both left and right aligned tabs?

7 posts, 0 answers
  1. dstj
    dstj avatar
    82 posts
    Member since:
    Oct 2006

    Posted 17 Dec 2008 Link to this post

    Hi,

    Is there a way to have both left and right-aligned tabs in the same tabstrip ? For example, I'd like to something like this :

    Tab1, Tab2, Tab3 [SPACE] Tools, Help

    Is there a way to do that?

    Thanks a lot,

    Dominic

    Tabstrip v2008.3.1204.35
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 22 Dec 2008 Link to this post

    Hello Dominic,

    To create a gap between tabs in a RadTabStrip, you can set a separator tab with a specific width and empty text as shown below:
    aspx:
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" AutoPostBack ="true" > 
                <Tabs> 
                    <telerik:RadTab Text="Tab1"></telerik:RadTab> 
                    <telerik:RadTab Text="Tab2"></telerik:RadTab> 
                    <telerik:RadTab Text="Tab3"></telerik:RadTab> 
                    <telerik:RadTab Text="" Width="200px" IsSeparator="true"></telerik:RadTab> 
                    <telerik:RadTab Text="Tools"></telerik:RadTab> 
                    <telerik:RadTab Text="Help"></telerik:RadTab> 
                 </Tabs> 
    </telerik:RadTabStrip> 

    For more information on seperators, you can go through this link.
    Thanks
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. dstj
    dstj avatar
    82 posts
    Member since:
    Oct 2006

    Posted 22 Dec 2008 Link to this post

    Thanks Princy for your reply,

    This allows to set a fixed-width space, but doesn't seem to permit to have the two right tabs right-aligned.

    What I really want is :
    Tab1, Tab2, Tab3 [<===== right align =====>] Tools, Help

    I'll set my TabStrip's width to 100% and the number of left-aligned tabs depend on the user settings. So to use your suggestion, I'll need to programmatically calculate : space = totalWidth - leftTabWidth. Is they a way to do that?

    Thanks for your help,

    dstj.
  5. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 22 Dec 2008 Link to this post

    Hello dstj,

    In general, it would be much easier to use two tabstrip controls.

    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title>Untitled Page</title> 
        <style type="text/css">  
        .rtsLevel  
        {  
            width: auto !important  
        }  
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
            </telerik:RadScriptManager> 
            <div style="width: 100%; border: solid 1px red; overflow: hidden">  
                <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Style="float: left" Skin="Outlook">  
                    <Tabs> 
                        <telerik:RadTab runat="server" Text="Root RadTab1">  
                        </telerik:RadTab> 
                        <telerik:RadTab runat="server" Text="Root RadTab2">  
                        </telerik:RadTab> 
                        <telerik:RadTab runat="server" Text="Root RadTab3">  
                        </telerik:RadTab> 
                    </Tabs> 
                </telerik:RadTabStrip> 
                <telerik:RadTabStrip ID="RadTabStrip2" runat="server" Style="float: right" Skin="Outlook">  
                    <Tabs> 
                        <telerik:RadTab runat="server" Text="Tools">  
                        </telerik:RadTab> 
                        <telerik:RadTab runat="server" Text="Help">  
                        </telerik:RadTab> 
                    </Tabs> 
                </telerik:RadTabStrip> 
            </div> 
        </form> 
    </body> 
    </html> 


    All the best,
    Paul
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. dstj
    dstj avatar
    82 posts
    Member since:
    Oct 2006

    Posted 29 Dec 2008 Link to this post

    Hi, thanks for the reply.

    Using two separate tabstrips renders unusable many of the cool features of the tabstrip. For example, I'll have to manually ensure that only one tab among the two tabstrips is selected...

    Multipage, ClientAPI, etc will also be hard to use...

    dstj.
  7. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 30 Dec 2008 Link to this post

    Hello dstj,

    You can achieve your goal by using custom JS only. Here's a sample code snippet.

    <body onresize="pageLoad()">  
        <form id="form1" runat="server">  
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
            </telerik:RadScriptManager> 
     
            <script type="text/javascript">  
            function pageLoad()  
            {  
                var tabstrip = $find('<%= RadTabStrip1.ClientID %>');  
                var mySeparator = tabstrip.findTabByValue("sep1");  
                var separatorIndex = mySeparator.get_index();  
                var tabstripItems = tabstrip.get_tabs();  
                  
                var targetWidth = tabstrip.get_element().offsetWidth;  
                  
                for (var i = 0; i < separatorIndex; i++) {  
                    targetWidth -tabstripItems.getItem(i).get_element().offsetWidth;  
                }  
                  
                for (var i = separatorIndex + 1, len = tabstripItems.get_count(); i < len; i++) {  
                    targetWidth -tabstripItems.getItem(i).get_element().offsetWidth;  
                }  
                  
                mySeparator.get_element().style.width = targetWidth + 'px';  
            }  
            </script> 
     
            <telerik:RadTabStrip Skin="Outlook" ID="RadTabStrip1" runat="server" Width="100%">  
                <Tabs> 
                    <telerik:RadTab Text="Tab1 tab1">  
                    </telerik:RadTab> 
                    <telerik:RadTab Text="Tab2">  
                    </telerik:RadTab> 
                    <telerik:RadTab Text="Tab3 Tab3 Tab3">  
                    </telerik:RadTab> 
                    <telerik:RadTab Text="&nbsp;" IsSeparator="true" Value="sep1">  
                    </telerik:RadTab> 
                    <telerik:RadTab Text="Tools">  
                    </telerik:RadTab> 
                    <telerik:RadTab Text="Help">  
                    </telerik:RadTab> 
                </Tabs> 
            </telerik:RadTabStrip> 
        </form> 
    </body> 


    Regards,
    Paul
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8. dstj
    dstj avatar
    82 posts
    Member since:
    Oct 2006

    Posted 30 Dec 2008 Link to this post

    Thanks for this. This will probably work just fine...

    I only added a Width="100%" attribute to make it work in Firefox, Opera, Safari and Chrome too.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017