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

RadTab - template with close button

9 Answers 234 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
JH
Top achievements
Rank 1
JH asked on 23 Aug 2010, 05:16 PM
Hi,

I'm trying to extend RadTab in order to create a tab with a close button. (looking somewhat like this http://demos.telerik.com/aspnet-ajax/tabstrip/examples/applicationscenarios/deletetabs/defaultcs.aspx)

My first attempts have not been very successful at all, and I hoped that you could point me in the right direction. I have looked around the forums but haven't found anything.

class ClosableRadTab : RadTab
{
    public ClosableRadTab()
    {
        this.Template = new ClosableRadTabTemplate(this);
    }
    private class ClosableRadTabTemplate : ITemplate
    {
        private RadTab _tab;

        public ClosableRadTabTemplate(RadTab tab)
        {            
            _tab = tab;
        }

        public void InstantiateIn(Control container)
        {
            Table table = new Table();           
            TableRow row = new TableRow();
            table.Rows.Add(row);
            TableCell cellLabel = new TableCell();
            row.Cells.Add(cellLabel);                       
            Label lbl = new Label() { Text = _tab.Text };
            cellLabel.Controls.Add(lbl);
            TableCell cellCloseButton = new TableCell();
            row.Cells.Add(cellCloseButton);
            ImageButton btnClose = new ImageButton()
            {
                SkinID = "btnDeleteSmall",
                CommandArgument = _tab.Value
            };
            //btnClose.Click += new EventHandler(btnCloseProject_Click);
            cellCloseButton.Controls.Add(btnClose);

            container.Controls.Clear();
            container.Controls.Add(table);
        }
    }
}

Thank you!

9 Answers, 1 is accepted

Sort by
0
Cori
Top achievements
Rank 2
answered on 23 Aug 2010, 06:44 PM
How are you setting the Template in your page? Are you setting the Template of your RadTabStrip in the Page_Init event?
0
JH
Top achievements
Rank 1
answered on 23 Aug 2010, 07:23 PM
Hi,

I do not set the template in any specific page-event. I you look at the piece of code I posted, you can see that I have tried to extend the RadTab instead.

The RadTab sub-class is instantiated in the PageLoad-event though.

I've found this link: http://www.telerik.com/help/aspnet-ajax/tab_add-templates-runtime.html
But I want to set the template in the control itself.

How should I proceed?

Thank you :)
0
Veronica
Telerik team
answered on 26 Aug 2010, 01:52 PM
Hello JH,

Please take a look at this help topic. It describes a simpler way to create closable tabs instead of using Templates.

Hope this helps.

Regards,
Veronica Milcheva
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
JH
Top achievements
Rank 1
answered on 27 Aug 2010, 08:14 AM
Hi Veronica,

Thank you for the answer, but I do not find this solution simpler, nor better software design wise.
We also need to add the closable tabs on postbacks and post when closing them.
To extend RadTab and create a template must be the most elegant way to solve this? Any tips? :)
0
Veronica
Telerik team
answered on 02 Sep 2010, 12:09 PM
Hello JH,

Please take a look at the project I created to fit your scenario. Find it in the attached .zip file.

Please let me know if you have more questions.

Regards,
Veronica Milcheva
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
JH
Top achievements
Rank 1
answered on 06 Sep 2010, 07:57 PM
Hi,

Thank you for the piece of code. It does the job somewhat, but some problems still remains.

1. The navigateURL of the Tab does not work as expected when your template is used. I could create a HyperLink instead of a label in the template, but this would only make the link itself clickable, not the entire tab.

2. I am not able to position controls as I want to. I would like to add padding and such so that the label in the template looks like the default RadTabs and to position the close button to the upper-right corner of the tab. I've tried to accomplish this by using a table inside of the template, but this causes really strange behavior (due to css I presume) and the tabs become rendered deformed.

Can you explain these and suggest any solutions?
Thank you very much :)
0
Veronica
Telerik team
answered on 10 Sep 2010, 10:01 AM
Hi JH,

1. Yes, NavigateUrl will not work with templates. Instead you can subscribe to the OnTabClick event and use the following in the handler:

protected void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e)
   {
       Response.Redirect(e.Tab.Value);
   }

In my code I save the urls in the Value of each tab.

2. You can use Css Classes to the Label and images:

public void InstantiateIn(Control container)
        {
            Label lbl = new Label();
            lbl.CssClass = "textWrapper";
            lbl.DataBinding += new EventHandler(lbl_DataBinding);
            ImageButton btnClose = new ImageButton()
            {
                ImageUrl = "delete.gif",
                CssClass = "image"
            };
            btnClose.Click += new ImageClickEventHandler(btnClose_Click);
            container.Controls.Add(lbl);
            container.Controls.Add(btnClose);
        }

Css:

.textWrapper
        {
            display: inline;
        }
        .image
        {
            vertical-align: middle;
            width: 14px;
            height: 14px;
            margin-left: 10px;
        }

I am sending you the edited code again.

Hope this helps.

All the best,
Veronica Milcheva
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Jason Heine
Top achievements
Rank 1
answered on 11 Oct 2010, 04:42 PM
Hi There,

Do you have an example to do this via the Client side API?

Thanks,

Jason
0
Veronica
Telerik team
answered on 14 Oct 2010, 04:55 PM
Hello Jason Heine,

Please take a look at this help topic which creates "X" buttons client-side.

This demo too is using client-side code.

Hope this helps.

Best wishes,
Veronica Milcheva
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
TabStrip
Asked by
JH
Top achievements
Rank 1
Answers by
Cori
Top achievements
Rank 2
JH
Top achievements
Rank 1
Veronica
Telerik team
Jason Heine
Top achievements
Rank 1
Share this question
or