Convert from Ajax toolkit tabs to Telerik Tabstrip

9 posts, 1 answers
  1. Phil
    Phil avatar
    273 posts
    Member since:
    Jul 2008

    Posted 01 Sep 2009 Link to this post

    Does a document exist on converting from Ajax toolkit tabs to RadTabStrip?
    Phil
  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 01 Sep 2009 Link to this post

    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.
  3. Phil
    Phil avatar
    273 posts
    Member since:
    Jul 2008

    Posted 01 Sep 2009 Link to this post

    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> 
     

  4. Phil
    Phil avatar
    273 posts
    Member since:
    Jul 2008

    Posted 03 Sep 2009 Link to this post

    Hi:
    How do I not had the line under the selected tab?
    Phil
  5. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 04 Sep 2009 Link to this post

    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.
  6. Phil
    Phil avatar
    273 posts
    Member since:
    Jul 2008

    Posted 05 Sep 2009 Link to this post

    Hi:
    Mine does not look like that in both IE8 and Firefox...
    Phil


  7. Answer
    Paul
    Admin
    Paul avatar
    4281 posts

    Posted 07 Sep 2009 Link to this post

    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.
  8. Phil
    Phil avatar
    273 posts
    Member since:
    Jul 2008

    Posted 12 Sep 2009 Link to this post

    The above is self contained.  I am using the Outlook skin in the multi-panel.
    Phil
  9. Phil
    Phil avatar
    273 posts
    Member since:
    Jul 2008

    Posted 06 Oct 2009 Link to this post

    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
Back to Top