Close tab 'X' button

11 posts, 0 answers
  1. Robert Kemp
    Robert Kemp avatar
    8 posts
    Member since:
    Sep 2004

    Posted 26 Oct 2006 Link to this post

    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. ;-)
  2. Todd Anglin
    Todd Anglin avatar
    2040 posts
    Member since:
    Aug 2005

    Posted 26 Oct 2006 Link to this post

    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!
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Chris
    Admin
    Chris avatar
    221 posts

    Posted 27 Oct 2006 Link to this post

    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
  5. DukeVideo
    DukeVideo avatar
    48 posts
    Member since:
    Jun 2006

    Posted 29 Oct 2007 Link to this post

    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?
  6. Boyko Markov
    Admin
    Boyko Markov avatar
    610 posts

    Posted 29 Oct 2007 Link to this post

    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
  7. DukeVideo
    DukeVideo avatar
    48 posts
    Member since:
    Jun 2006

    Posted 30 Oct 2007 Link to this post

    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.
  8. Boyko Markov
    Admin
    Boyko Markov avatar
    610 posts

    Posted 30 Oct 2007 Link to this post

    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
  9. Iftekhar Ivaan
    Iftekhar Ivaan avatar
    17 posts
    Member since:
    Apr 2006

    Posted 07 Nov 2007 Link to this post

    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
  10. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 08 Nov 2007 Link to this post

    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
  11. kdev
    kdev avatar
    16 posts
    Member since:
    Apr 2007

    Posted 08 Nov 2007 Link to this post

    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
  12. Nikolay
    Admin
    Nikolay avatar
    1804 posts

    Posted 08 Nov 2007 Link to this post

    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
Back to Top
UI for WinForms is Visual Studio 2017 Ready