Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Trying to Add Tabs Dynamically

2 Answers 241 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Jason Bourdette
Top achievements
Rank 1
Jason Bourdette asked on 17 Jan 2015, 03:23 AM
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 Answers, 1 is accepted

Sort by
0
Jason Bourdette
Top achievements
Rank 1
answered on 17 Jan 2015, 03:41 AM
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
0
Ivan Danchev
Telerik team
answered on 20 Jan 2015, 03:53 PM
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.

 
Tags
TabStrip
Asked by
Jason Bourdette
Top achievements
Rank 1
Answers by
Jason Bourdette
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or