This is a migrated thread and some comments may be shown as answers.

Having both left and right aligned tabs?

6 Answers 132 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
dstj
Top achievements
Rank 1
dstj asked on 18 Dec 2008, 05:16 AM
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

6 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 22 Dec 2008, 10:29 AM
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.
0
dstj
Top achievements
Rank 1
answered on 22 Dec 2008, 02:13 PM
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.
0
Paul
Telerik team
answered on 22 Dec 2008, 02:51 PM
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.
0
dstj
Top achievements
Rank 1
answered on 29 Dec 2008, 03:17 PM
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.
0
Paul
Telerik team
answered on 30 Dec 2008, 09:09 AM
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.
0
dstj
Top achievements
Rank 1
answered on 30 Dec 2008, 03:28 PM
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.
Tags
TabStrip
Asked by
dstj
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
dstj
Top achievements
Rank 1
Paul
Telerik team
Share this question
or