This is a migrated thread and some comments may be shown as answers.

create and delete tabs on serverside

1 Answer 141 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 1
Peter asked on 26 Aug 2008, 10:34 AM
Hi Telerik,

Our company is currently working on an advanced version of your tabstrip. we are trying to achieve the same effect as the IE or FF bar, so that we can add up to 10 tabs and delete them again.
Since we are using more controls to do this (radmenu as listbox in front of radtabstrip, statistics in the tabs themself), we need to have the delete of the tab on serverside, so we can make sure that everything about that tab is deleted.

we used a tabstrip template as found in your samples, and we replaced the delete image by an imagebutton with a command event. that event will be wired to our method that is going to delete all the tabvalues in all controls.

however, our issues:
- this serverclick on delete button is only working in FF, IE is just giving us a click on the tab (without postback)
- firefox is able to delete tabs, but not to add them anymore.. no errors occuring

code:

TEMPLATE
using System;  
using System.Collections.Generic;  
using System.Web;  
using System.Web.UI;  
using System.Web.UI.HtmlControls;  
using System.Web.UI.WebControls;  
using Telerik.Web.UI;  
 
public class TextBoxTemplate : System.Web.UI.ITemplate  
{  
    public event CommandEventHandler DeleteClick;  
   
    public TextBoxTemplate()  
    {}
    #region ITemplate Members  
    public void InstantiateIn(System.Web.UI.Control container)  
    {  
        Label label1 = new Label();  
        label1.ID = "ItemLabel";  
        label1.Text = "Text";  
        label1.Font.Size = 10;  
        label1.Font.Bold = true;  
        label1.DataBinding += new EventHandler(label1_DataBinding);  
 
        ImageButton image1 = new ImageButton();  
        image1.ID = "ItemImage";  
        image1.AlternateText = "Delete";  
        image1.ImageUrl = @"~\images\tabs\delete.png";  
        image1.DataBinding += new EventHandler(image1_DataBinding);  
        image1.Command += new CommandEventHandler(image1_Command);  
          
        container.Controls.Add(label1);  
        container.Controls.Add(image1);  
        //container.Controls.Add(ib);  
    }  
 
    void  image1_Command(object sender, CommandEventArgs e)  
    {  
        if (DeleteClick != null)  
            DeleteClick(this, e);  
    }  
 
    void image1_DataBinding(object sender, EventArgs e)  
    {  
        ImageButton target = (ImageButton)sender;  
        RadTab tab = (RadTab)target.BindingContainer;  
 
        string tabText = tab.Text;  
 
        if (tabText == "+")  
            target.CssClass = "btnHidden";  
        else 
        {  
            target.CssClass = "btnVisible";  
            target.CommandName = tab.Value;  
         }  
    }  
 
    private void label1_DataBinding(object sender, EventArgs e)  
    {  
        Label target = (Label)sender;  
        RadTab tab = (RadTab)target.BindingContainer;  
        string tabText = (string)DataBinder.Eval(tab, "Text");  
        target.Text = tabText;  
    }
    #endregion  
}  
 


Page.aspx.cs
 
 
    protected void Page_Init(object sender, EventArgs e)  
    {  
        WebChartViewer.OnPageInit(Page);  
 
        TextBoxTemplate template = new TextBoxTemplate();  
        template.DeleteClick += new CommandEventHandler(template_DeleteClick);  
        RadTabStrip1.TabTemplate = template;  
        RadTabStrip1.Skin = "Outlook";  
        //base.OnInit(e);  
    }  
 
    void template_DeleteClick(object sender, CommandEventArgs e)  
    {  
        RadTab r = RadTabStrip1.FindTabByValue(e.CommandName);  
        RadTabStrip1.Tabs.Remove(r);  
 
    }  
 
    protected void Page_Load(object sender, EventArgs e)  
    {  
        if (!Page.IsPostBack)  
        {  
            // clear tabs: (when user hits refresh, to prevent the viewstate to keep the tabs)  
            RadTabStrip1.Tabs.Clear();  
 
            // add tabs  
            RadTab tabAdd = new RadTab("+");  
            RadTab tab1 = new RadTab("Tab 1");  
            //tab1.PageViewID = "1";  
            tab1.Value = "1";  
            tab1.PostBack = true;  
            //tabAdd.PageViewID = "0";  
            tabAdd.Value = "2";  
            //tabAdd.Value = "0";  
 
            RadTabStrip1.Tabs.Add(tab1);  
            RadTabStrip1.Tabs.Add(tabAdd);  
            RadTabStrip1.SelectedIndex = 0;  
 
            ShowInitialTextOnPanel(1);  
            //ShowTab(1);  
 
            dictionaryStatistics = new Dictionary<int, StatDetail>();  
 
            //clear tablist items  
            rmiTabList.Items.Clear();  
 
            // add a tablistItem for first tab  
            RadMenuItem rmi = new RadMenuItem("Tab 1");  
            rmi.Value = "1";  
            // value is used for locating the tab and selecting it on the click of the listItem  
            rmiTabList.Items.Add(rmi);  
        }  
        else 
        {  
            dictionaryStatistics = (Dictionary<int, StatDetail>)ViewState["Statistics"];  
        }  
        RadTabStrip1.DataBind();  
    }  
 
    private string GetFirstFreePanel()  
    {  
        int expected = 1;      
 
        foreach (RadTab rt in RadTabStrip1.Tabs)  
        {  
            if (expected != Convert.ToInt32(rt.Value))  
            {  
                return expected.ToString();  
            }  
            else 
                expected++;  
        }  
        return RadTabStrip1.Tabs.Count.ToString();  
    }  
 
   protected void RadTabStrip1_TabClick(object sender, Telerik.Web.UI.RadTabStripEventArgs e)  
    {  
        string tabSelected = e.Tab.Text;  
 
        //string[] tabOverview;  
                            
 
        if (tabSelected == "+" && RadTabStrip1.Tabs.Count < 11)  
        {  
            RadTab tb = RadTabStrip1.SelectedTab;  
            tb.Text = "Tab " + RadTabStrip1.Tabs.Count.ToString();  
            tb.PostBack = true;  
            //tb.PageViewID = RadTabStrip1.Tabs.Count.ToString();  
            tb.Value = RadTabStrip1.Tabs.Count.ToString();  
 
            string firstFreePanel = GetFirstFreePanel();  
 
 
            //add a new listItem to the tablist  
            string cnt = RadTabStrip1.Tabs.Count.ToString();  
            RadMenuItem rmi = new RadMenuItem();  
            rmi.Text = "Tab" + cnt;  
            rmi.Value = cnt;  
            rmiTabList.Items.Add(rmi);  
 
 
            if (RadTabStrip1.Tabs.Count < 10)  
            {  
                RadTab tab = new RadTab("+");  
                //tab.PageViewID = "0";             
 
                int next = RadTabStrip1.Tabs.Count + 1;  
                tab.Value = next.ToString();                  
 
                RadTabStrip1.Tabs.Add(tab);  
                updpTabstrip.Update();  
            }  
 
            //RadTabStrip1.SelectedIndex = Convert.ToInt32(tb.PageViewID) - 1;  
            RadTabStrip1.SelectedIndex = Convert.ToInt32(tb.Value)-1;  
 
            //Add initial text to panel  
            //ShowInitialTextOnPanel(Convert.ToInt32(tb.PageViewID));  
            ShowInitialTextOnPanel(Convert.ToInt32(tb.Value));  
 
            RadTabStrip1.DataBind();  
        }  
        else 
        {  
            // fire event  
            if (TabClick != null)  
            {  
                TabClick(sender, new Telerik.Web.UI.RadTabStripEventArgs(RadTabStrip1.SelectedTab));  
            }  
        }  
    } 


Page.aspx
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">  
    <script type="text/javascript">      
    //when selecting a tab          
    function onTabSelecting(sender, args)  
    {      
         //var tab = args.get_tab().get_index();             
         var tab = args.get_tab().get_value();           
         tab--;  
                          
         for (var x=0; x<10; x++)  
         {  
            var pnl = document.getElementById("pnl" + (x+1));                
              
            if (x == tab)  
            {  
                pnl.style.visibility = "visible";      
                pnl.style.display = "inline";            
            }  
            else  
            {  
                pnl.style.visibility = "hidden";  
                pnl.style.display = "none";  
            }  
         }  
    }    
    // when selecting a tab in the tablist  
     function onTabListItemSelecting(e)  
     {  
        for(var x=1; x<=10; x++)  
        {  
            var pnl = document.getElementById("pnl" + (x));  
              
            if (x == e)  
            {  
                pnl.style.visibility = "visible";      
                pnl.style.display = "inline";     
            }  
            else  
            {  
                pnl.style.visibility = "hidden";  
                pnl.style.display = "none";     
            }  
        }  
     }       
    function SetScrollPosition()              
    {      
        var tabStrip = $find("<%=RadTabStrip1.ClientID %>");  
        tabStrip.get_selectedTab().scrollIntoView();  
    }  
</script></telerik:RadCodeBlock> 
 
 
 
    <asp:UpdatePanel ID="updpTabstrip" runat="server" UpdateMode="Conditional"><ContentTemplate> 
        <%-- tablist --%> 
        <telerik:RadMenu runat="server" ID="rcmTabList" ClickToOpen="true" OnItemClick="rcmTabList_Click" CssClass="RadMenu">  
            <Items> 
                <telerik:RadMenuItem ImageUrl="~/Images/Tabs/ListArrow.png" ToolTip="Tablijst" ID="rmiTabList" BackColor="White" Height="20px" Width="17" PostBack="false">  
                    <Items> 
                    <%-- filled in dynamically --%>                  
                    </Items> 
                </telerik:RadMenuItem> 
            </Items> 
        </telerik:RadMenu> 
        <%-- tabstrip --%> 
          
        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" 
            ontabclick="RadTabStrip1_TabClick" ScrollChildren="True"   
            ScrollButtonsPosition="Middle" onclienttabselecting="onTabSelecting" OnClientLoad="SetScrollPosition">              
              
        </telerik:RadTabStrip> 
    </ContentTemplate></asp:UpdatePanel> 
 
 
 

1 Answer, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 26 Aug 2008, 11:28 AM
Hi Peter,

The problem occurs due to DOM event bubbling. When the user clicks the image button the click event propagates to the tabstrip itself which then triggers a TabClick event. To avoid this I have patched an internal method of the tabstrip client-side object. Please find attached a working example. We will try to resolve this problem with DOM event propagation in a future release of RadControls for ASP.NET Ajax.

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
TabStrip
Asked by
Peter
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Share this question
or