Close tab 'X' button

[Robert Kemp]

I am very impressed with the WinForms tabstrip!

If you are still open to feature ideas -- an optional close tab 'X' on each tab would be very useful. See Firefox 2.0 for a demo of this feature. ;-)

[Todd Anglin]

Robert (or is it Bob?),

Great idea! The moment I saw your thread title on the community page I had a "why didn't I think of that" moment. I think this would be a valid improvement for both the WinForms tabstrip and the ASP.NET tabstrip given the popularity tabs in Internet browsers. And with the impending release of IE7 in the next 7 days, soon the whole world (not just the early adopter/10% share FF users) will become accustomed to closable tabs.

I hope telerik gives this some serious thought. I'm going to repost the idea in the new product ideas forum to see what kind of response it garners from the rest of the community (since that will determine the likelihood that we see this feature).

Thanks for contributing the idea!

[Chris]

Hi Robert,
I'm glad that you like our WinForms TabStrip control and I hope you'll like it even more when I tell you that this behavior will be achievable in the official release (scheduled for Wednesday next week).
Here's some sample code which can do that:

 RadButtonElement button = new RadButtonElement("x");
 // Of course you can set some close image for you button element
 // instead of setting its text.
 button.Click += new EventHandler(button_Click);
 button.Alignment = ContentAlignment.TopRight;
 // Let's say that you want to place the close button in "tabItem1"
 this.tabItem1.Children[2].Margin = new Padding(0, 0, 15, 0);
 this.tabItem1.Children.Add(button);

 void button_Click(object sender, EventArgs e)
 {
    (sender as RadElement).Parent.Visibility = ElementVisibility.Collapsed;
 }

Have in mind that this code won't work quite well with the CTP build but you won't have any problems using it with the official build.
Todd is right that this is a great idea and I also would like to thank you for your contribution. I hope that soon we'll make a separate example which demonstrates this feature.

Best wishes,
Chris
the telerik team

www.telerik.com | dnn.telerik.com | www.sharepointcontrols.com | www.sitefinity.com | www.mcmscontrols.com

[DukeVideo]

Hi,

I was using the code above and it was working fine until I upgraded to 2007 Q2, now the button takes the whole of the tab - and the title "shines through", and not showing the 'x'. You say this is possible using the public release build. I am now running 2007 Q2 - how is this possible in this version?

I need a close button to the right of each tab.

Also, can the tabs go on two rows instead of just overflowing?

[Boyko Markov]

Hi DukeVideo,

Thank you for writing. I've just tested RadTabStrip using the following code:

private void InitializeCustomElements()
        {
            foreach (RadItem item in this.radTabStrip2.Items)
            {
                TabItem tabItem = item as TabItem;
                if (tabItem == null)
                    continue;

                RadButtonElement button = new RadButtonElement("x");
                button.StretchHorizontally = false;
                button.StretchVertically = false;
                // Of course you can set some close image for you button element
                // instead of setting its text.
                button.Click += new EventHandler(button_Click);
                button.Alignment = ContentAlignment.TopRight;
                // Let's say that you want to place the close button in "tabItem1"
                tabItem.Children[2].Margin = new Padding(0, 0, 15, 0);
                tabItem.Children.Add(button);
            }
        }

        void button_Click(object sender, EventArgs e)
        {
            RadElement buttonElement = sender as RadElement;
            buttonElement.Parent.Visibility = ElementVisibility.Collapsed;
        }

I invoke the InitializeCustomElements method in the application form's constructor, after the call of InitializeComponent. The code works fine with the present version of the RadTabStrip.

You could take a look at the Tab Items with Custom elements example in our Quick Start Framework, which you can find by expanding the RadTabStrip node and then click on the eighth node - Tab Items with custom elements.

Please let me know whether you experience any problems with this code. In case you are still experiencing issues, send me a simple project, which is reproducing the erroneous behavior.

Regarding your second question:

The RadTabStrip doesn't support the overflowling behavior, i.e. it is not possible to achieve this with the current version of the control. However, if this is important for you, we could consider adding support for it in the upcoming releases of RadControls for WinForms.

I'm looking forward to your reply.

Best wishes,
Boyko Markov
the Telerik team

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

[DukeVideo]

Hi,

Many thanks for your help. It seems the only code I was missing was the StretchVertically and StretchHorizontally flags.

Tabs overflowing on multiple rows is important to me, as I am finding me users are struggling using the overflow button. They prefer to see their tabs rather than "trusting" that they are hidden away. Also, due to the nature of the application I have developed, to accomplish the complete workflow, a number of tabs need to be opened, which often don't fit on the screen.

As an aside, I recently upgraded to 2007 Q2 by installing in addition to the Q1 controls. Whether this was wrong I am not sure. Either way, it trashed my project and I had to de-install both packages, reinstall 2, remove all references from the project and rebuild my code from scratch. Principally, the InitializeComponent() method seemed to be creating properties that were not supported. Probably my error, but possibly an idea ot mkae it clear for other users when upgrading.

[Boyko Markov]

Hi DukeVideo,

I'm deeply sorry for the inconvenience you've had while upgrading to the Q2 version of RadControls for WinForms.

We are planning to implement a Project Migration tool which will automatically update the references of your projects to the new ones. We still don't have a specific time-frame when it will be ready to be released.

If you have any additional questions or suggestions please do not hesitate to contact us.

Best wishes,
Boyko Markov
the Telerik team

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

[Iftekhar Ivaan]

Hi,
I need the same functionality in the asp.NET TAB. Can I do this too. I must have this functionality. What to do? Please help.

Thanks

[Paul]

Hi Iftekhar,

As already answered in the other forum post you have opened on the matter, this has been discussed previously in the forums. Please take a look at the code snippet below.

<form id="form1" runat="server">
        <div>
            <radTS:RadTabStrip runat="server" ID="RadTabStrip1" SelectedIndex="0" MultiPageID="RadMultiPage1">
                <Tabs>
                    <radTS:Tab Text="One">
                    </radTS:Tab>
                    <radTS:Tab Text="Two">
                    </radTS:Tab>
                    <radTS:Tab Text="Three">
                    </radTS:Tab>
                    <radTS:Tab Text="Four">
                    </radTS:Tab>
                </Tabs>
            </radTS:RadTabStrip>
            <radTS:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0">
                <radTS:PageView runat="server">
                    Page 1
                </radTS:PageView>
                <radTS:PageView runat="server">
                    Page 2
                </radTS:PageView>
                <radTS:PageView runat="server">
                    Page 3
                </radTS:PageView>
                <radTS:PageView runat="server">
                    Page 4
                </radTS:PageView>
            </radTS:RadMultiPage>

            <script type="text/javascript">
            function CreateCloseImage(closeImageUrl)
            {
                var closeImage = document.createElement("img");
                closeImage.src = closeImageUrl;
                closeImage.style.marginTop = "2px";
                closeImage.style.position = "relative";
                closeImage.style.right = "-10px";
                closeImage.alt = "Close this tab";
                return closeImage;
            }

            function PreviousVisibleTab(currentTab)
            {
                for (var i = currentTab.Index - 1; i > -1; i--)
                {
                    var tab = currentTab.Parent.Tabs[i];

                    if (tab && tab.DomElement.style.display != "none")
                    {
                        return tab;
                    }
                }
                return null;
            }

            function NextVisibleTab(currentTab)
            {
                for (var i = currentTab.Index + 1; i < currentTab.Parent.Tabs.length; i++)
                {
                    var tab = currentTab.Parent.Tabs[i];

                    if (tab && tab.DomElement.style.display != "none")
                    {
                        return tab;
                    }
                }
                return null;
            }

            function SwitchTab(currentTab)
            {
                var multiPage = <%= RadMultiPage1.ClientID %>;

                if (currentTab.Selected)
                {
                    var previousTab = PreviousVisibleTab(currentTab);
                    //Try to select the previous visible tab
                    if (previousTab)
                    {
                        previousTab.Select();
                    }
                    else
                    {
                        //Try to select the next visible tab
                        var nextTab = NextVisibleTab(currentTab);
                        if (nextTab)
                        {
                            nextTab.Select();
                        }
                        else
                        {
                            multiPage.SelectPageByIndex(-1);
                        }
                    }
                }
            }
            function AttachCloseImages(closeImageUrl)
            {
                //tabstrip client-side object
                var tabStrip = <%= RadTabStrip1.ClientID %>;

                for (var i = 0; i < tabStrip.AllTabs.length; i++)
                {
                    var tab = tabStrip.AllTabs[i];

                    var closeImage = CreateCloseImage(closeImageUrl);
                    closeImage.AssociatedTab = tab;
                    closeImage.onclick = function(e)
                    {
                        if (!e) e = event;

                        SwitchTab(this.AssociatedTab);

                        //Hide the tab
                        this.AssociatedTab.DomElement.style.display = "none";

                        //Prevent DOM event bubbling
                        e.cancelBubble = true;
                        if (e.stopPropagation)
                        {
                           e.stopPropagation();
                        }
                    }
                    //Float the tab text (for presentation purposes)
                    tab.DomElement.firstChild.firstChild.innerHTML = "<span style='float:left'>" + tab.Text + "</span>";
                    //Append the image after the text (inside the "innerWrap" span)
                    tab.DomElement.firstChild.firstChild.appendChild(closeImage);
                }
            }

            AttachCloseImages("close.gif");
            </script>

        </div>
    </form>

All the best,
Paul
the Telerik team

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

[kdev]

Hi all,

after closing a TabItem, is there a way to get the last selected TabItem ?
I have 3 Tab A, B , C
I select the Tab A
I close the Tab B
By default the Tabstrip will show Tab C
I want to show Tab A

How can I do that ?
I'm using Q2 SP1 for Winform
Thanks

[Nikolay]

Hello kdev,

If this is your scenario, where you close Tab B and don't select it before that, Tab A stays selected. You can refer to our QSF for this behavior.

However, we suppose that you want to first select tab B before closing it and as a final result you want to get the previous selected Tab A shown. If this is your case, please take a look at the sample application we made for you.

If you have additional questions, do not hesitate to contact us.

 
Kind regards,
Nikolay
the Telerik team

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