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

Convert from Ajax toolkit tabs to Telerik Tabstrip

8 Answers 193 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Phil
Top achievements
Rank 2
Phil asked on 01 Sep 2009, 12:46 PM
Does a document exist on converting from Ajax toolkit tabs to RadTabStrip?
Phil

8 Answers, 1 is accepted

Sort by
0
Paul
Telerik team
answered on 01 Sep 2009, 02:04 PM
Hi Phil,

Unfortunately, there's no such document. Please refer to the control's documentation and examples for useful tips to get you started.

Regards,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Phil
Top achievements
Rank 2
answered on 02 Sep 2009, 01:58 AM
Hi:
This is more or less from the sample ajax site:
<%@ Page Language="C#" MasterPageFile="~/DefaultMaster.master" 
    Title="Tabs Sample" Theme="SampleSiteTheme" %> 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> 
<script runat="server"
    protected void Page_Load(object sender, EventArgs e) 
    { 
        CurrentTab.Text = Tabs.ActiveTab.HeaderText; 
    } 
    public void SaveProfile(object sender, EventArgs e) 
    { 
    } 
</script> 
<asp:Content ContentPlaceHolderID="SampleContent" runat="Server"
    <ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" /> 
    <div class="demoarea"
        <div class="demoheading">Tabs Demonstration</div> 
        <ajaxToolkit:TabContainer runat="server" ID="Tabs" Height="138px" OnClientActiveTabChanged="ActiveTabChanged" ActiveTabIndex="0" Width="402px"
            <ajaxToolkit:TabPanel runat="server" ID="Panel1" HeaderText="Signature and Bio"
                <ContentTemplate> 
                    <asp:UpdatePanel ID="updatePanel1" runat="server"
                        <ContentTemplate> 
                            <table> 
                                <tr> 
                                    <td> 
                                        Signature:</td> 
                                    <td> 
                                        <asp:TextBox ID="signatureText" runat="server" /></td
                                </tr> 
                                <tr> 
                                    <td> 
                                        Bio:</td> 
                                    <td> 
                                        <asp:TextBox ID="bioText" runat="server" /></td
                                </tr> 
                            </table> 
                            <asp:Button ID="Button3" runat="Server" Text="Save" OnClick="SaveProfile" /> 
                            <br /><br /> 
                            Hit Save to cause a postback from an update panel inside the tab panel.<br /> 
                        </ContentTemplate> 
                    </asp:UpdatePanel> 
                </ContentTemplate> 
            </ajaxToolkit:TabPanel> 
            <ajaxToolkit:TabPanel runat="server" ID="Panel3" HeaderText="Email" > 
                <ContentTemplate> 
                    Email: <asp:TextBox ID="emailText" runat="server" /> 
                    <br /><br /> 
                    <asp:Button ID="Button1" runat="server" Text="Save" OnClick="SaveProfile" /> 
                    <br /><br /> 
                    Hit Save to cause a full postback. 
                </ContentTemplate> 
            </ajaxToolkit:TabPanel> 
            <ajaxToolkit:TabPanel runat="server" ID="Panel2" HeaderText="Controls"
                <ContentTemplate> 
                    <div>Controls authored by Toolkit User (read-only - demo purposes):</div> 
                    <ul> 
                        <li>Calendar</li> 
                        <li>MaskedEdit</li> 
                        <li>Accordion</li> 
                        <li>Calendar</li> 
                        <li>Calendar</li> 
                    </ul> 
                    <br /> 
                </ContentTemplate> 
            </ajaxToolkit:TabPanel> 
        </ajaxToolkit:TabContainer> 
        Current Tab: 
        <asp:Label runat="server" ID="CurrentTab" /><br /> 
        <br /> 
    </div> 
    <script type="text/javascript"
        function ActiveTabChanged(sender, e) { 
            var CurrentTab = $get('<%=CurrentTab.ClientID%>'); 
            CurrentTab.innerHTML = sender.get_activeTab().get_headerText(); 
        } 
    </script> 
</asp:Content> 
 

This my translation to RadTabStrip:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<script runat="server"
    protected void Page_Load(object sender, EventArgs e) 
    { 
        CurrentTab.Text = RadTabStrip1.SelectedTab.Text; 
    } 
    public void SaveProfile(object sender, EventArgs e) 
    { 
    } 
</script> 
<html xmlns="http://www.w3.org/1999/xhtml"
<head runat="server"
    <title>&raquo; Rad Tab Strip &raquo;</title> 
</head> 
<body> 
    <form id="form1" runat="server"
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
    </telerik:RadScriptManager> 
    <div> 
        <telerik:RadTabStrip ID="RadTabStrip1" runat="server"  
            MultiPageID="RadMultiPage1" Skin="Outlook" SelectedIndex="0"  OnClientTabSelected="ActiveTabChanged" > 
            <Tabs> 
                <telerik:RadTab runat="server" PageViewID="PageView1" Text="Signature and Bio"
                </telerik:RadTab> 
                <telerik:RadTab runat="server" PageViewID="PageView2" Text="Email"
                </telerik:RadTab> 
                <telerik:RadTab runat="server" PageViewID="PageView3" Text="Controls"
                </telerik:RadTab> 
            </Tabs> 
        </telerik:RadTabStrip> 
        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0"  
            Style="border: 1px solid #898c95; margin-top: -1px;" Height="200"
            <telerik:RadPageView ID="PageView1" runat="server"
                <table> 
                    <tr> 
                        <td>Signature:</td> 
                        <td><asp:TextBox ID="signatureText" runat="server" /></td
                    </tr> 
                    <tr> 
                        <td>Bio:</td> 
                        <td><asp:TextBox ID="bioText" runat="server" /></td
                    </tr> 
                </table> 
                <asp:Button ID="Button3" runat="Server" Text="Save" OnClick="SaveProfile" /> 
                <br /><br /> 
                Hit Save to cause a postback from an update panel inside the tab panel.<br /> 
            </telerik:RadPageView> 
            <telerik:RadPageView ID="PageView2" runat="server"
                Email: <asp:TextBox ID="emailText" runat="server" /> 
                <br /><br /> 
                <asp:Button ID="Button1" runat="server" Text="Save" OnClick="SaveProfile" /> 
                <br /><br /> 
                Hit Save to cause a full postback. 
            </telerik:RadPageView> 
            <telerik:RadPageView ID="Page3View" runat="server"
                <div>Controls authored by Toolkit User (read-only - demo purposes):</div> 
                <ul> 
                    <li>Calendar</li> 
                    <li>MaskedEdit</li> 
                    <li>Accordion</li> 
                    <li>Calendar</li> 
                    <li>Calendar</li> 
                </ul> 
                <br /> 
            </telerik:RadPageView> 
        </telerik:RadMultiPage> 
        Current Tab: 
        <asp:Label runat="server" ID="CurrentTab" /><br /> 
        <br /> 
    </div> 
    </form> 
    <script type="text/javascript"
        function ActiveTabChanged(sender, args) { 
            var CurrentTab = $get('<%=CurrentTab.ClientID%>'); 
            CurrentTab.innerHTML = args.get_tab().get_text(); 
        } 
    </script> 
</body> 
</html> 
 

0
Phil
Top achievements
Rank 2
answered on 04 Sep 2009, 01:32 AM
Hi:
How do I not had the line under the selected tab?
Phil
0
Paul
Telerik team
answered on 04 Sep 2009, 08:38 AM
Hi Phil,

You code snippet works just fine with the latest version of the control (see attached screenshots). Let us know if we are missing something.

Sincerely yours,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Phil
Top achievements
Rank 2
answered on 05 Sep 2009, 10:30 PM
Hi:
Mine does not look like that in both IE8 and Firefox...
Phil


0
Accepted
Paul
Telerik team
answered on 07 Sep 2009, 05:46 AM
Hi Phil,

I think it will be best if you can open a support ticket and send us a simple running project (incl. your custom skin, CSS, images, DB backup if needed and so on) demonstrating the problem (and step-by-step instructions on doing so). In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.

Greetings,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Phil
Top achievements
Rank 2
answered on 13 Sep 2009, 12:02 AM
The above is self contained.  I am using the Outlook skin in the multi-panel.
Phil
0
Phil
Top achievements
Rank 2
answered on 06 Oct 2009, 10:42 PM
They added the following style
    <style type="text/css"
        .mpStyle 
        { 
            border: 1px solid #898c95; 
            margin-top: -1px; 
        } 
        .tsStyle 
        { 
            position: relative; 
        } 
    </style>  
 
the mpStype is for the multi-panal and the tsStype is for the tabstrip.  Also, the line can appear because of IE 7 zoom was set to 125%.
Phil
Tags
TabStrip
Asked by
Phil
Top achievements
Rank 2
Answers by
Paul
Telerik team
Phil
Top achievements
Rank 2
Share this question
or