Error in deleting dynamically generated tabs

7 posts, 0 answers
  1. Babu Puchakayala
    Babu Puchakayala avatar
    79 posts
    Member since:
    May 2010

    Posted 26 May 2010 Link to this post

    Hi,

    I have created application where tabs are generating dynamically.  When I am trying to delete those tabs with cross bar I am getting error like undefined tabs. Can any one solve this issue. I am getting error in javascript code. I can delete tabs with button click event. But I am unable to delete the code with crossbar. The Issue is in
            <%# DataBinder.Eval(Container, "Text") %> 

    the text value is not binding there. How to bind the dynamically generating text value.
     protected void Page_Load(object sender, EventArgs e) 
        { 
            if (!Page.IsPostBack) 
            { 
                RadTab tab = new RadTab(); 
                tab.Text = string.Format("New Page {0}", 1); 
                RadTabStrip1.Tabs.Add(tab); 
     
                RadPageView pageView = new RadPageView(); 
                pageView.Height = new Unit("50px"); 
                pageView.Width = new Unit("1300px"); 
                RadMultiPage1.PageViews.Add(pageView); 
     
                BuildPageViewContents(pageView, RadTabStrip1.Tabs.Count); 
                RadTabStrip1.SelectedIndex = 0
     
            } 
        } 
     
        private void BuildPageViewContents(RadPageView pageView, int index) 
        { 
            pageView.ID = "Page " + index.ToString(); 
            pageView.Controls.Add(new LiteralControl(" <B>New page</B>" + (index).ToString())); 
        } 
     
        protected void Button1_Click(object sender, EventArgs e) 
        { 
     
            RadTab tab = new RadTab(); 
            tab.Text = string.Format("New Page {0}", RadTabStrip1.Tabs.Count + 1); 
            RadTabStrip1.ID = "Tab " + RadTabStrip1.Tabs.Count;  
            RadTabStrip1.Tabs.Add(tab); 
     
            RadPageView pageView = new RadPageView(); 
            pageView.ID = "Page " + pageView.Index.ToString(); 
            RadMultiPage1.ID = "page" + pageView.Index.ToString(); 
            RadMultiPage1.PageViews.Add(pageView); 
     
            BuildPageViewContents(pageView, RadTabStrip1.Tabs.Count); 
            RadTabStrip1RadTabStrip1.SelectedIndex = RadTabStrip1.SelectedIndex + 1; 
            RadMultiPage1.SelectedIndex = RadTabStrip1.SelectedIndex; 
     
        } 
     
     
    .aspx 
     
     
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadTab.aspx.cs" Inherits="Default" %> 
     
    <%@ Register Assembly="Telerik.Web.UI"  Namespace="Telerik.Web.UI" TagPrefix="telerik"  %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
        <title></title
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" /> 
    </head> 
    <body> 
        <form id="form1" runat="server"
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
            <Scripts> 
                <%--Needed for JavaScript IntelliSense in VS2010--%> 
                <%--For VS2008 replace RadScriptManager with ScriptManager--%> 
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> 
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> 
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" /> 
            </Scripts> 
        </telerik:RadScriptManager> 
        <script type="text/javascript"
                /* <![CDATA[ */
                function deleteTab(tabText)
                {
                    var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
                    var multiPage = $find("<%= RadMultiPage1.ClientID %>");
                    var tab = tabStrip.findTabByText(tab.toString());
                    
    //                if (tab != null) 
    //                  {
    //                    alert(tab.toString());
    //                  }
    //                else alert(" TAB IS NULL ");
                    
                    var pageView = tab.get_pageView();
                    
                    var tabToSelect = tab.get_nextTab();
                    if (!tabToSelect)
                        tabToSelect = tab.get_previousTab();
                        
                    tabStrip.get_tabs().remove(tab);
                    multiPage.get_pageViews().remove(pageView);
                    
                    if (tabToSelect)
                        tabToSelect.set_selected(true);
                }
                /* ]]> */ 
        </script> 
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
        </telerik:RadAjaxManager> 
        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Height="50px" SelectedIndex="0" Width="1300px" MultiPageID="RadMultiPage1"
          <TabTemplate> 
            <%# DataBinder.Eval(Container, "Text") %> 
            <img style="margin-left: 50px" src="delete.gif" alt="delete" onclick="deleteTab('<%# DataBinder.Eval(Container, "Text") %>')" /> 
          </TabTemplate> 
        </telerik:RadTabStrip> 
        <div> 
             <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Add Tab" /> 
             <asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Delete Tab" /> 
        </div> 
        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0"  
                              Height="320px" Width="700px" BorderStyle="Solid" OnPageViewItemCreated="RadMultiPage1_PageViewItemCreated1"
        </telerik:RadMultiPage> 
        </form> 
    </body> 
    </html> 
  2. Babu Puchakayala
    Babu Puchakayala avatar
    79 posts
    Member since:
    May 2010

    Posted 26 May 2010 Link to this post

    I found solution. thanks
  3. smith spd
    smith spd avatar
    89 posts
    Member since:
    May 2010

    Posted 21 Jun 2010 Link to this post

    Hello babu

    Can you post your corrected solution to delete tabs?

    Thanks
  4. Babu Puchakayala
    Babu Puchakayala avatar
    79 posts
    Member since:
    May 2010

    Posted 21 Jun 2010 Link to this post

    Hi Smith, Here is my code.

    .cs file
    using System; 
    using System.Web; 
    using System.Web.UI; 
    using System.Web.UI.WebControls; 
    using System.Data; 
    using System.Configuration; 
    using System.Web.Security; 
    using System.Web.UI.WebControls.WebParts; 
    using System.Web.UI.HtmlControls; 
    using Telerik.Web.UI; 
    using System.Collections.Generic; 
    using System.Linq; 
    using Telerik; 
     
    public partial class Default : System.Web.UI.Page 
        protected System.Web.UI.WebControls.Label PageContent; 
        protected System.Web.UI.WebControls.Repeater BuildingSummary; 
     
        protected void Page_Load(object sender, EventArgs e) 
        { 
            if (!Page.IsPostBack) 
            { 
                RadTab tab = new RadTab(); 
                tab.Text = "Tab"
                RadTabStrip1.Tabs.Add(tab); 
                RadPageView pageView = new RadPageView(); 
                RadMultiPage1.PageViews.Add(pageView); 
                BuildPageViewContents(pageView, RadTabStrip1.Tabs.Count); 
                RadTabStrip1.SelectedIndex = 0
                RadTabStrip1.MultiPageID = RadMultiPage1.ID; 
                RadTabStrip1.DataBind();  
     
            } 
        } 
     
        private void BuildPageViewContents(RadPageView pageView, int index) 
        { 
            pageView.ID = "Page" + index.ToString(); 
            pageView.Controls.Add(new LiteralControl(" <B>Page</B>" + (index).ToString())); 
        } 
     
        protected void Button1_Click(object sender, EventArgs e) 
        { 
     
            RadTab tab = new RadTab(); 
            tab.Text = string.Format("Page{0}", RadTabStrip1.Tabs.Count + 1); 
            //RadTabStrip1.ID = "Tab" + RadTabStrip1.Tabs.Count;  
            RadTabStrip1.Tabs.Add(tab); 
     
            RadPageView pageView = new RadPageView(); 
            pageView.ID = "Page" + pageView.Index.ToString(); 
            RadTabStrip1.MultiPageID = RadMultiPage1.ID; 
            //RadMultiPage1.ID = "page" + pageView.Index.ToString(); 
            RadMultiPage1.PageViews.Add(pageView); 
     
            BuildPageViewContents(pageView, RadTabStrip1.Tabs.Count); 
            RadTabStrip1RadTabStrip1.SelectedIndex = RadTabStrip1.SelectedIndex + 1; 
            RadMultiPage1.SelectedIndex = RadTabStrip1.SelectedIndex; 
            RadTabStrip1.DataBind(); 
     
        } 
     
        protected void Button2_Click(object sender, EventArgs e) 
        { 
            RadTab currentTab = RadTabStrip1.InnermostSelectedTab; 
     
            if (currentTab != null) 
            { 
                IRadTabContainer owner = currentTab.Owner; 
                owner.Tabs.Remove(currentTab); 
                RadMultiPage1.PageViews.RemoveAt(RadMultiPage1.SelectedIndex); 
                if (owner.Tabs.Count > 0) 
                { 
                    owner.SelectedIndex = 0
                } 
            } 
        } 
     
        protected void RadMultiPage1_PageViewItemCreated1(RadPageView view, int viewIndex) 
        { 
            BuildPageViewContents(view, viewIndex + 1); 
        } 
     
     
     


    .aspx file


    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadTab.aspx.cs" Inherits="Default" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
        <title></title
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" /> 
        <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body> 
        <form id="form1" runat="server"
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
            <Scripts> 
                <%--Needed for JavaScript IntelliSense in VS2010--%> 
                <%--For VS2008 replace RadScriptManager with ScriptManager--%> 
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> 
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> 
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" /> 
            </Scripts> 
        </telerik:RadScriptManager> 
     
        <script type="text/javascript"
            /* <![CDATA[ */
            function deleteTab(tabText) {
                var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
                var multiPage = $find("<%= RadMultiPage1.ClientID %>");
                var tab = tabStrip.findTabByText(tabText);
                var pageView = tab.get_pageView();
                var tabToSelect = tab.get_nextTab();
                if (!tabToSelect)
                    tabToSelect = tab.get_previousTab();
                tabStrip.get_tabs().remove(tab);
                multiPage.get_pageViews().remove(pageView);
                if (tabToSelect)
                    tabToSelect.set_selected(true);
            }
            /* ]]> */   
        </script> 
     
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
        </telerik:RadAjaxManager> 
        <telerik:RadTabStrip runat="server" ID="RadTabStrip1" Orientation="HorizontalTop" Height="50px" SelectedIndex="0" Width="1300px" 
                             Skin="WebBlue" MultiPageID="RadMultiPage1"
            <TabTemplate> 
                <div class="textWrapper"
                    <%# DataBinder.Eval(Container, "Text") %> 
                </div> 
                <span class="ie6shim"></span> 
                <img style="margin-left: 50px" src="delete.gif" alt="delete" onclick="deleteTab('<%# DataBinder.Eval(Container, "Text") %>')" /> 
            </TabTemplate> 
        </telerik:RadTabStrip> 
        <div> 
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Add Tab" /> 
            <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Delete Tab" /> 
        </div> 
        <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" Height="320px" Width="700px" CssClass="multiPage" 
                              BorderStyle="Solid" OnPageViewItemCreated="RadMultiPage1_PageViewItemCreated1"
        </telerik:RadMultiPage> 
     
        </form> 
    </body> 
    </html> 
     

  5. smith spd
    smith spd avatar
    89 posts
    Member since:
    May 2010

    Posted 21 Jun 2010 Link to this post

    Thank you so much.
    Lastly, I am not able to get css applied to the tabs. In case, I put a close button would result in hidden tab text.
    I have my aspx something like this :
            <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Orientation="HorizontalTop" Skin="Telerik" Width="100%" SelectedIndex="0" Style="position: absolute;" MultiPageID="RadMultiPage1">  
            <TabTemplate> 
                        <asp:ImageButton ID="ImageButton1" runat="server" Height="10px" Width="10px" OnClick="ImageButton1_Click" ImageUrl="~//close.gif"/>  
                </TabTemplate> 
            </telerik:RadTabStrip> 
             <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" Height="100%" Width="100%" Style="position: relative;">                  
             </telerik:RadMultiPage> 
    Can you post the css applicable to telerik tabstrip.


  6. Babu Puchakayala
    Babu Puchakayala avatar
    79 posts
    Member since:
    May 2010

    Posted 22 Jun 2010 Link to this post

    Hi Smith,

    This is the stylesheet that i have.

    .exampleWrapper 
        position:relative; 
        height:250px; 
    .tabStrip 
        position:absolute; 
        top:0; 
     
    .multiPage 
        position:absolute; 
        top:100px; 
    .multiPage ul 
        position:absolute; 
        left: 170px; 
        top: 20px; 
        list-style:none; 
    .multiPage ul li 
        background: transparent url(images/arrow.gif) no-repeat left top; 
        color:#34555b; 
        padding-left: 24px; 
        margin-top: 15px; 
     
    .corporatePageView 
        background: transparent url(images/corporate.jpg) no-repeat top left; 
        height:218px; 
     
    .productsPageView 
        background: transparent url(images/products.jpg) no-repeat top left; 
        height:218px; 
     
    .servicesPageView 
        background: transparent url(images/services.jpg) no-repeat top left; 
        height:218px; 
     
    .rtsIn img 
        vertical-align:middle; 
        width: 14px; 
        height: 14px; 
        margin-left: 10px; 
     
    .rtsIn .textWrapper 
        display: inline; 
     
    /* IE6 fixes for line-height bug */ 
    * html .rtsIn img 
        margin-bottom: 10px; 
     
    * html .rtsIn .textWrapper 
        float: left; 
        height: 26px; 
     
    * html .rtsIn .ie6shim 
        height: 26px; 
        display: inline-block; 



  7. smith spd
    smith spd avatar
    89 posts
    Member since:
    May 2010

    Posted 22 Jun 2010 Link to this post

    Hello Babu,

    I saw that there is a small bug in your code. When I create a 2 tabs, delete second tab, then the content in the first tab vanishes and similarly if I have 4 tabs, and i delete 1st tab, the content in the last tab is shared among all the other tabs.
    Did u get similar error?
    I am deploying UserControls in each of the tabs.
Back to Top