How to add close icon to a tab

[Jason Lee]

Dear Sir,

How to add close icon to a tab.  When a user clicks close icon, the tab will be closed (disappear)

[Princy]

Hi Jason,

Check out the following online demos.

Delete Tabs
Text With Icons

Thanks
Princy.

[Jason Lee]

Dear Princy,

Thank you for your reply...
I am looking for behavior like IE7.0 Tab or firefox Tab...
Both of browers support close tab function...

Your suggestion probably still couldn't make it...
Thank you~

[Paul]

Hello Jason,

I think Princy already pointed you in the right direction. The Delete Tabs online example shows the needed functionality in action. In the code tabs below the example you can fin d the code used.

Kind regards,
Paul
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Rich]

I am trying to use this same functionality.  My situation is a bit different than the sample though.  I am adding tabs and pageviews dynamically according items that a user clicks on.  When a tab is deleted with this method, it goes away just as you would expect.  However, when there is a postback to the page, such as a new tab being added, the deleted tab reappears.

Is there anyfix to this or are there any samples around on how to delete a tab serverside using an image button on the tab to delete it?

[Paul]

Hi Rich,

By default, changes made in client-side code do not persist over a post-back to the server. To preserve changes, you must use the trackChanges and commitChanges methods:

Example:

function addNewTab()
{
    var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
    var tab = new Telerik.Web.UI.RadTab();
    tab.set_text("New Tab");
    tabStrip.trackChanges();
    tabStrip.get_tabs().add(tab);
    tabStrip.commitChanges();
}

All the best,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Robert Smith]

Is there an example of doing this all on the client side? Adding html to the tab's text property properly shows the image and fires the click event, but when you click on another tab a generic javascript error is thrown.

[Hiren]

i had created tab dynamically, and want to add close button for tab, written this class and called to bind the image button
in main class where i am creating tabs dynamically

protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
                BindUsers();
            BindTabStripCloseButton();
        }

private void BindTabStripCloseButton()

{


 TabTemplate template = new TabTemplate();

 foreach (RadTab tab in RadTabStrip1.GetAllTabs())

 {

 template.InstantiateIn(tab);

 }

 RadTabStrip1.DataBind();

 }

class file

class TabTemplate : ITemplate

    {

        public void InstantiateIn(Control container)

        {

            Label lbl = new Label();

            lbl.DataBinding += new EventHandler(lbl_DataBinding);

            ImageButton btnClose = new ImageButton()

            {

                ImageUrl = "../../Images/delete1.gif",

                CssClass = "image"

            };

            btnClose.Click += new ImageClickEventHandler(btnClose_Click);

            btnClose.Attributes.Add("onclick", "return confirm('Do you want to close this tab.');");

            container.Controls.Add(lbl);

            container.Controls.Add(btnClose);

        }

 

        void btnClose_Click(object sender, ImageClickEventArgs e)

        {

            ImageButton target = sender as ImageButton;

            RadTab tab = target.BindingContainer as RadTab;

            RadTabStrip tabStrip = tab.Parent as RadTabStrip;

            tabStrip.Tabs.Remove(tab);

        }

 

        private void lbl_DataBinding(object sender, EventArgs e)

        {

            Label target = (Label)sender;

            RadTab tab = (RadTab)target.BindingContainer;

            string tabText = (string)DataBinder.Eval(tab, "Text");

            target.Text = tabText;

        }

    }

it is creating the image button to tab but only to existing tabs its creating close button, mean i click on create tab button it creates tab without close image button and 2nd time if i click on create tab button it creates another tab without close button but it create close button which is already created.

[Dimitar Terziev]

Hello Giri,

Could you provide us with the part of the code, where you create these tab dynamically.

From the code snippet provided it seems that you are adding delete button as template to an existing tabs of the RadTabStrip. In case you are adding your tabs on the client-side and you want such delete button to be added for these items then you should make post-back.

Best wishes,
Dimitar Terziev
the Telerik team

[Hiren]

this is the code which i used to create tabs dynamically and delete button.

public  partial class Demopage : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                BindUsers();
                DashboardSurface1.DataBind();
            }
            BindTabStripCloseButton();
        }

        private void BindTabStripCloseButton()
        {
            TextBoxTemplate template = new TextBoxTemplate();
            foreach (RadTab tab in RadTabStrip1.GetAllTabs())
            {
                template.InstantiateIn(tab);
            }
            RadTabStrip1.DataBind();
        }

protected void lstUsers_SelectedIndexChanged(object sender, EventArgs e)
        {
            string selectedTab = lstUsers.SelectedItem.Text;

            if (RadTabStrip1.Tabs.Count > 0 && RadTabStrip1.FindTabByText(selectedTab) != null)
            {
                RadTabStrip1.Tabs.FindTabByText(selectedTab).Selected = true;
            }
            else
            {
                RadTab tab1 = new RadTab(lstUsers.SelectedItem.Text, lstUsers.SelectedItem.Value);
                RadTabStrip1.Tabs.Add(tab1);
                RadTabStrip1.Tabs.FindTabByText(selectedTab).Selected = true;
            }
        }
}

class TextBoxTemplate : ITemplate
    {
        public void InstantiateIn(Control container)
        {
            Label lbl = new Label();
            lbl.DataBinding += new EventHandler(lbl_DataBinding);
            ImageButton btnClose = new ImageButton()
            {
                ImageUrl = "../../Images/delete1.gif",
                CssClass = "image"
            };
            btnClose.Click += new ImageClickEventHandler(btnClose_Click);
            btnClose.Attributes.Add("onclick", "return confirm('Do you want to close this tab.');");
            container.Controls.Add(lbl);
            container.Controls.Add(btnClose);
        }

        void btnClose_Click(object sender, ImageClickEventArgs e)
        {
            ImageButton target = sender as ImageButton;
            RadTab tab = target.BindingContainer as RadTab;
            RadTabStrip tabStrip = tab.Parent as RadTabStrip;
            tabStrip.Tabs.Remove(tab);
        }

        private void lbl_DataBinding(object sender, EventArgs e)
        {
            Label target = (Label)sender;
            RadTab tab = (RadTab)target.BindingContainer;
            string tabText = (string)DataBinder.Eval(tab, "Text");
            target.Text = tabText;
        }
    }

[Dimitar Terziev]

Hello Giri,

The reason for the experienced behavior is due to the fact that you are not adding the template for the dynamically created tab in the SelectedIndexChange event handler function of the RadListbox.

You should change your code to the following in order to have a templated image:

protected void lstUsers_SelectedIndexChanged(object sender, EventArgs e)
      {
          string selectedTab = lstUsers.SelectedItem.Text;

          if (RadTabStrip1.Tabs.Count > 0 && RadTabStrip1.FindTabByText(selectedTab) != null)
          {
              RadTabStrip1.Tabs.FindTabByText(selectedTab).Selected = true;
          }
          else
          {
              RadTab tab1 = new RadTab(lstUsers.SelectedItem.Text, lstUsers.SelectedItem.Value);
              TextBoxTemplate template = new TextBoxTemplate();
              RadTabStrip1.Tabs.Add(tab1);
              template.InstantiateIn(RadTabStrip1.Tabs.FindTabByText(selectedTab).Selected);
              RadTabStrip1.Tabs.FindTabByText(selectedTab).Selected = true;
          }
      }

I hope this would help you out.

Greetings,
Dimitar Terziev
the Telerik team

[Hiren]

Hi Dimitar,
Thanks for your reply.
i already got the solution