add tab clientside

2 posts, 1 answers
  1. Sigma
    Sigma avatar
    87 posts
    Member since:
    Apr 2012

    Posted 01 Jul 2012 Link to this post

    Hi.

    How can i add new tab to a radTabstrip and then associate it with a PageView in the client side?
  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 02 Jul 2012 Link to this post

    Hi Sigma,

    Try the following code snippet to achieve your scenario.

    ASPX:
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1">
      <Tabs>
         <telerik:RadTab runat="server" Text="Root Tab 1" PageViewID="PageView1" />
         <telerik:RadTab runat="server" Text="Root Tab 2" PageViewID="PageView2" />
         <telerik:RadTab runat="server" Text="Root Tab 3" PageViewID="PageView3" />
      </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="RadMultiPage1" runat="server">
       <telerik:RadPageView ID="PageView1" runat="server">PageView 1</telerik:RadPageView>
       <telerik:RadPageView ID="PageView2" runat="server">PageView 2</telerik:RadPageView>
       <telerik:RadPageView ID="PageView3" runat="server">PageView 3</telerik:RadPageView>
       <telerik:RadPageView ID="PageView4" runat="server">PageView 4</telerik:RadPageView>
    </telerik:RadMultiPage>
    <input type="button" runat="server" onclick="AddSampleTab()" value="Add New Tab" />

    JS:
    <script type="text/javascript">
        function AddSampleTab() {
            var tabstrip = $find('<%=RadTabStrip1.ClientID%>');
            var tab = new Telerik.Web.UI.RadTab();
            tab.set_text("Root Tab 4");
            tabstrip.trackChanges();
            tabstrip.get_tabs().add(tab);
            tabstrip.commitChanges();
            var multiPage = $find('<%=RadMultiPage1.ClientID%>');
            var fourthPageView = multiPage.get_pageViews().getPageView(3)
            tab.PageViewId = "PageView4";
            tab.PageViewClientID = fourthPageView.ClientID;
            tabstrip.set_selectedIndex(3);
        
    </script>

    Hope this helps.

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top