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

Error in deleting dynamically generated tabs

6 Answers 204 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Babu Puchakayala
Top achievements
Rank 1
Babu Puchakayala asked on 26 May 2010, 07:13 PM
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> 

6 Answers, 1 is accepted

Sort by
0
Babu Puchakayala
Top achievements
Rank 1
answered on 27 May 2010, 04:09 AM
I found solution. thanks
0
smith spd
Top achievements
Rank 1
answered on 21 Jun 2010, 07:55 PM
Hello babu

Can you post your corrected solution to delete tabs?

Thanks
0
Babu Puchakayala
Top achievements
Rank 1
answered on 21 Jun 2010, 09:08 PM
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> 
 

0
smith spd
Top achievements
Rank 1
answered on 21 Jun 2010, 11:32 PM
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.


0
Babu Puchakayala
Top achievements
Rank 1
answered on 22 Jun 2010, 02:42 PM
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; 
} 



0
smith spd
Top achievements
Rank 1
answered on 22 Jun 2010, 09:42 PM
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.
Tags
TabStrip
Asked by
Babu Puchakayala
Top achievements
Rank 1
Answers by
Babu Puchakayala
Top achievements
Rank 1
smith spd
Top achievements
Rank 1
Share this question
or