RadTab - template with close button

[JH]

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!

[Cori]

How are you setting the Template in your page? Are you setting the Template of your RadTabStrip in the Page_Init event?

[JH]

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 :)

[Veronica]

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

[JH]

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? :)

[Veronica]

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

[JH]

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 :)

[Veronica]

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

[Jason Heine]

Hi There,

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

Thanks,

Jason

[Veronica]

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