Trying to Add Tabs Dynamically

3 posts, 0 answers
  1. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 16 Jan 2015 Link to this post

    I have been looking at the TabStrip - Add/Remove Tabs demo and trying to modify to work with RadMenu and a Radspliter. I have condensed all the code into 1 single simple file. Any help would be great. When i click the RadMenu to add a new it adds a new tab but the corresponding pageview doesnt display. Then if i click over to the third tab, and back to the second tab, the second tab now shows the contents from the third tab. 

    Thanks, any advise or help would be great!!

    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Register Src="WebUserControl.ascx" TagPrefix="uc1" TagName="NewMessage" %>
    <!DOCTYPE html>
     
    <script runat="server">
     
        protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)  {
            DataTable dt = new DataTable();
            dt.Columns.Add("EmployeeID");
            dt.Columns.Add("LastName");
            dt.Columns.Add("FirstName");
            dt.Columns.Add("Title");
            dt.Columns.Add("ReportsTo");
     
            dt.Rows.Add(new object[] { 1, "Davalio", "Nancy", "Sales Representative", 2 });
            dt.Rows.Add(new object[] { 2, "Fuller", "Andrew", "Vice President, Sales", null });
            dt.Rows.Add(new object[] { 3, "Leverling", "Janet", "Sales Representative", 2 });
            dt.Rows.Add(new object[] { 4, "Peacock", "Margaret", "Sales Representative", 2 });
            (sender as RadGrid).DataSource = dt;
        }
     
        protected void RadMenu1_ItemClick(object sender, Telerik.Web.UI.RadMenuEventArgs e) {
            if (e.Item.Text == "Add Tab")
            {
                AddPageView(true, ID.ToString());
                AddTab("New Message");
            }
        }
     
        private void AddTab(string title)
        {
            RadTab tab = new RadTab() { Text = title };
            RadTabStrip1.Tabs.Insert((RadTabStrip1.Tabs.Count - 1), tab);
            RadTabStrip1.DataBind();
            RadTabStrip1.SelectedIndex = tab.Index;
        }
     
        private void AddPageView(bool isNew, string pvId)
        {
            RadPageView pageView = new RadPageView();
            pageView.ID = "NewMessage" + pvId;
       
            RadMultiPage1.PageViews.Add(pageView);
            RadMultiPage1.SelectedIndex = pageView.Index;
        }
     
        protected void RadMultiPage1_PageViewCreated(object sender, RadMultiPageEventArgs e)
        {
            if (e.PageView.ID.Contains("NewMessage"))
            {
                RadButton b = new RadButton();
                b.Text = "NEW TAB!!";
                e.PageView.Controls.Add(b);
            }
        }
         
    </script>
     
    <head runat="server">
        <title></title>
        <style>
            html,
            body,
            form {
                height: 100%;
                margin: 0px;
                padding: 0px;
            }
             
            .header {
                height: 20px;
                background: blue;
                color: white;
            }
     
           .menu {
                height: 40px;
                background: black;
                color: white;
            }
     
            .footer {
                height: 20px;
                background: blue;
                color: white;
            }
     
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
          <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableTheming="True">
          </telerik:RadScriptManager>
         
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                function onClientTabSelecting(sender, args) {
                    var tab = args.get_tab();
                    if (tab.get_pageView()) {
                        tab.set_postBack(false);
                    }
                }
            </script>
        </telerik:RadCodeBlock>
     
     
       <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default"></telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadMultiPage1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
     
     
            <div class="header">Footer</div>
            <div class="menu">
                 <telerik:RadMenu ID="RadMenu1" runat="server" EnableScreenBoundaryDetection="false" ClickToOpen="false"
                      onitemclick="RadMenu1_ItemClick" EnableOverlay="true" EnableRoundedCorners="true" EnableShadows="true" Flow="Horizontal">
                            <Items>
                                <telerik:RadMenuItem runat="server" Text="Menu" GroupSettings-ExpandDirection="Down" OffsetX="5">
                                    <Items>
                                        <telerik:RadMenuItem runat="server" Text="Add Tab"/>
                                    </Items>
                                </telerik:RadMenuItem>
                             
                            </Items>
                 </telerik:RadMenu>
            </div>
        
           <telerik:RadSplitter runat="server" id="InnerSplitter" Orientation="Vertical" VisibleDuringInit="false" Height="800px" Width="100%" Skin="Vista" >
     
                  <telerik:RadPane ID="LeftMenuPane" runat="server" Scrolling="None" Height="100%" Width="27%" ShowContentDuringLoad="false" >
                  
                  <telerik:RadTabStrip ID="RadTabStrip2" ShowBaseLine="True" runat="server" MultiPageID="RadMultiPage2" Skin="Office2007" SelectedIndex="0" OnClientTabSelecting="onClientTabSelecting">
                      <Tabs>
                          <telerik:RadTab runat="server" Text="Tab1" PageViewID="PageView6" Font-Bold="true" >
                          </telerik:RadTab>
                      </Tabs>
                  </telerik:RadTabStrip>
     
                   <telerik:RadMultiPage ID="RadMultiPage2" runat="server" SelectedIndex="0"  Width="100%">
     
                     <telerik:RadPageView ID="RadPageView6" runat="server" width="100%" Height="760px"  >  
                            <%-- >>RADGRID--%>
                            <telerik:RadGrid ID="RadGrid1" Height="100%" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource"
                                AllowSorting="true">
                                <MasterTableView Width="100%" TableLayout="Fixed" AutoGenerateColumns="false">
                                    <Columns>
                                        <telerik:GridBoundColumn DataField="EmployeeID" HeaderText="EmployeeID"></telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="LastName" HeaderText="LastName"></telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="FirstName" HeaderText="FirstName"></telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="Title" HeaderText="Title"></telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="ReportsTo" HeaderText="ReportsTo"></telerik:GridBoundColumn>
                                    </Columns>
                                </MasterTableView>
                                <ClientSettings>
                                    <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                                </ClientSettings>
                            </telerik:RadGrid>
                            <%-- <<RADGRID--%>
                     </telerik:RadPageView>
     
                   </telerik:RadMultiPage>
                  </telerik:RadPane>
     
           <telerik:RadSplitBar runat="server" id="RadSplitBar4" Height="700px" />
                <telerik:RadPane ID="RightMenuPane" runat="server" Scrolling="None" Height="100%" ShowContentDuringLoad="true" >      
     
    <telerik:RadTabStrip ID="RadTabStrip1" SelectedIndex="0" runat="server" MultiPageID="RadMultiPage1">
     <Tabs>
       <telerik:RadTab runat="server" Text="Root RadTab1" PageViewID="PageView1">
       </telerik:RadTab>
       <telerik:RadTab runat="server" Text="Root RadTab3" PageViewID="PageView3">
       </telerik:RadTab>
     </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage id="RadMultiPage1" runat="server" SelectedIndex="0" Width="400">
      <telerik:RadPageView id="PageView1" runat="server">
           TAB
      </telerik:RadPageView>
      <telerik:RadPageView id="PageView3" runat="server" ContentUrl="http://www.telerik.com">
      </telerik:RadPageView>
    </telerik:RadMultiPage>
        
               </telerik:RadPane>
     
           </telerik:RadSplitter>
     
            <div class="menu">Footer</div>
        </form>
    </body>
    </html>

  2. Jason Bourdette
    Jason Bourdette avatar
    77 posts
    Member since:
    Jan 2010

    Posted 16 Jan 2015 in reply to Jason Bourdette Link to this post

    just realized i had a small bug. i forgot to add OnPageViewCreated="RadMultiPage1_PageViewCreated" to the radmultipage1 control. Once i added that the event fires properly and the second tab contains a button. 

    HOWEVER, if i tab over to tab3 and then back to tab2 the contents of tab2 (my button) is gone and replaced with the contents from tab3? Is there a way to fix that?

    thanks
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    837 posts

    Posted 20 Jan 2015 Link to this post

    Hello,

    The problem with your code is that the newly created tab does not associate itself correctly with the corresponding PageView. After dynamically creating a new PageView you have to then provide its ID to the 
    new RadTab. So you have to store it and then set it as a value of the PageViewID property of the tab. In the following code snippet I don't have it stored in a variable but I am directly adding it to the tab's PageViewID property in your AddTab method.

    private void AddTab(string title)
    {
        RadTab tab = new RadTab() { Text = title, PageViewID = "NewMessage__Page"};
        RadTabStrip1.Tabs.Insert((RadTabStrip1.Tabs.Count - 1), tab);
        RadTabStrip1.DataBind();   
        RadTabStrip1.SelectedIndex = tab.Index;   
    }


    Regards,
    Ivan Danchev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top