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

How to add close icon to a tab

11 Answers 281 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Jason Lee
Top achievements
Rank 1
Jason Lee asked on 30 May 2008, 08:10 AM
Dear Sir,

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

11 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 30 May 2008, 11:05 AM
Hi Jason,

Check out the following online demos.

Delete Tabs
Text With Icons

Thanks
Princy.

0
Jason Lee
Top achievements
Rank 1
answered on 30 May 2008, 11:12 AM
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~
0
Accepted
Paul
Telerik team
answered on 30 May 2008, 01:56 PM
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
0
Rich
Top achievements
Rank 1
answered on 24 Jul 2008, 04:33 PM
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?
0
Paul
Telerik team
answered on 25 Jul 2008, 12:48 PM
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.
0
Robert Smith
Top achievements
Rank 1
answered on 19 Aug 2009, 06:30 PM
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.
0
Hiren
Top achievements
Rank 1
answered on 01 Jun 2011, 01:35 PM
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.
0
Dimitar Terziev
Telerik team
answered on 06 Jun 2011, 10:04 AM
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

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Hiren
Top achievements
Rank 1
answered on 06 Jun 2011, 11:09 AM
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;
        }
    }
0
Dimitar Terziev
Telerik team
answered on 08 Jun 2011, 05:35 PM
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

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Hiren
Top achievements
Rank 1
answered on 09 Jun 2011, 06:37 AM
Hi Dimitar,
Thanks for your reply.
i already got the solution
Tags
TabStrip
Asked by
Jason Lee
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Jason Lee
Top achievements
Rank 1
Paul
Telerik team
Rich
Top achievements
Rank 1
Robert Smith
Top achievements
Rank 1
Hiren
Top achievements
Rank 1
Dimitar Terziev
Telerik team
Share this question
or