create and delete tabs on serverside

[Peter]

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>

[Atanas Korchev]

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.