Adding a RadButtonElement to a Tab

12 posts, 1 answers
  1. Adam
    Adam avatar
    89 posts
    Member since:
    Mar 2008

    Posted 05 Jan 2009 Link to this post

    We've had a request to add a close button to each tab in our MDI docking manager rather than use the TdiCloseButton on the far right of the tabstrip.  This is similar to Internet Explorer and Firefox's tabbed interface.  This is on Q2 2008 SP1.

    I've been able to get 99% of the way there but have one nagging little issue I hope you can help with.  Whenever I am creating a new MDI child, I am creating a new RadButtonElement via:

     

    private

     

    static Telerik.WinControls.UI.RadButtonElement NewButton()

     

    {

    Telerik.WinControls.UI.

     

    RadButtonElement ret = new Telerik.WinControls.UI.RadButtonElement();

     

    (ret.Children[

     

    0] as Telerik.WinControls.Primitives.FillPrimitive).BackColor = System.Drawing.Color.Transparent;

     

    (ret.Children[

     

    0] as Telerik.WinControls.Primitives.FillPrimitive).BackColor2 = System.Drawing.Color.Transparent;

     

    (ret.Children[

     

    0] as Telerik.WinControls.Primitives.FillPrimitive).BackColor3 = System.Drawing.Color.Transparent;

     

    (ret.Children[

     

    2] as Telerik.WinControls.Primitives.BorderPrimitive).Visibility = Telerik.WinControls.ElementVisibility.Collapsed;

     

    ret.MaxSize =

     

    new System.Drawing.Size(16,16);

     

    ret.Text =

     

    "X";

     

    ret.ForeColor = System.Drawing.

     

    Color.Red;

     

    ret.DisplayStyle = Telerik.WinControls.

     

    DisplayStyle.Text;

     

    ret.Alignment = System.Drawing.

     

    ContentAlignment.MiddleRight;

     

     

     

    return ret;

     

    }

     

     

    Then, I add a click handler and increase the ImageTextLayoutPanel's margin to make room for my button and finally add the buttonElement to the children:

     

    Telerik.WinControls.UI.

     

    TabItem tab = pane.DockableTab as Telerik.WinControls.UI.TabItem;

     

    Telerik.WinControls.Layouts.

     

    ImageAndTextLayoutPanel layout = tab.Children[2] as Telerik.WinControls.Layouts.ImageAndTextLayoutPanel;

     

    layout.Margin =

     

    new Padding(0, 0, 20, 0);

     

    Telerik.WinControls.UI.

     

    RadButtonElement button = NewButton();

     

    button.Tag = pane;

    button.Click +=

     

    new EventHandler(tab_Close);

     

    button.MouseEnter +=

     

    new EventHandler(closeButton_MouseEnter);

     

    button.MouseLeave +=

     

    new EventHandler(closeButton_MouseLeave);

     

    tab.Children.Add(button);

     

     

    What I am seeing whenever I add the button element to the tab is the border on the left of the tab is not painted.  I've played around with a lot of margin/padding and layout settings but can't seem to get the border to show up correctly.  Any suggestions?

    Thanks in advance!

  2. Answer
    Martin Vasilev
    Admin
    Martin Vasilev avatar
    1061 posts

    Posted 07 Jan 2009 Link to this post

    Hi Adam,

    Thank you for sharing your code with us.

    I have managed to reproduce described border issue. It can easily avoided if you change BorderPrimitive's ZIndex property to value greater than zero. In this way, you force to draw border over the FillPrimitive. I have prepared a small example that demonstrates this approach. You can find it as attachment.

    Do not hesitate to contact me again, if you have other questions.

    Regards,
    Martin Vasilev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Adam
    Adam avatar
    89 posts
    Member since:
    Mar 2008

    Posted 07 Jan 2009 Link to this post

    Perfect solution!  Thanks for your help, you guys rock!
  5. Kenneth Jackson
    Kenneth Jackson avatar
    60 posts
    Member since:
    Dec 2007

    Posted 01 Apr 2009 Link to this post

    We have had an identical request , I used the code provided by martin and it worked perfectly.... most of the time

    From time to time however , I or one of my team members clicks the close button and gets this error.

    Index was out of range. Must be non-negative and less than the size of the collection.
    Parameter name: index

    Standard IndexOutOfRangeException message. Due to the fact that it only rarely happened it took a bit of time
    to confirm that it wasn't the code provided here but something happening internally in the dock component.
    Basically the code in the TabButton_Click event works all the way through to the last line and on exiting that
    function , then the error happens. I don't refrence any of my dockpanels or forms in the dockingsite by index at all.

    First , my question to adam , have you never had this side effect from the code? And then my question
    to Telerik is there anything you could suggest ? I am using Q3 2008.

  6. Martin Vasilev
    Admin
    Martin Vasilev avatar
    1061 posts

    Posted 03 Apr 2009 Link to this post

    Hello Kenneth Jackson,

    Thank you for writing.

    Since we have made many fixes for the RadDock in the latest Q1 2009 version, I recommend you download it and give it a go. Hope, this will address the issue. Otherwise, please send me a small example that demonstrates the exception. It will help me to investigate your custom case and provide further assistance.

    I am looking forward to your reply.

    All the best,
    Martin Vasilev
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  7. Antony
    Antony avatar
    12 posts
    Member since:
    May 2009

    Posted 08 Jul 2009 Link to this post

    Hi guys,

    similar to another post I've made to with ribbons, I've been using this technique to add close buttons to my tabs and it's been working great. However updating to the Q2 2009 release it looks like FillPrimitive is no longer expanding behind the added button.

    So you have the tab outline which looks ok, it contians the X button and the title text but the tab's background colour is only behind the title text.

    I've tried various tweaks with paddings and ZIndex but haven't been able to fix the problem!

    I should also point out I am going to try and port my solution to use the new RadDock system but would like this to work so that I can fall back (without going back to Q1) if it doesn't behave like we want!

    As ever any help / suggestions are welcome :)

    -Antony
  8. Martin Vasilev
    Admin
    Martin Vasilev avatar
    1061 posts

    Posted 13 Jul 2009 Link to this post

    Hello Antony,

    Thank you for writing. Since in the new release Q2 2009 we implemented a complete redesigned and improved RadDock, the adding of close buttons to every tab method has slightly been changed. I have attached a new example that demonstrates the same results with the new RadDock. Actually, we will add build-in feature for the close buttons in tabs in some of the next releases.

    Do not hesitate to contact me again if you have other questions.

    Greetings,
    Martin Vasilev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  9. Antony
    Antony avatar
    12 posts
    Member since:
    May 2009

    Posted 14 Jul 2009 Link to this post

    Hi Martin,

    thanks for that, however it doesn't appear to solve the problem I'm having. At the moment I'm still using the old DockingManager (Telerik.WinControls.Docking namespace) but using the Q2 2009 dlls. I have tried the changes that you indclude however the Background Fill of the tab  still does not cover the area behind the button!

    Thanks very much for your help so far :)

    -Antony

    P.S. in case you're wondering why I'm not using RadDock, the behaviour I have created with the DockingManager is quite fine-tuned and so far I haven't been able to replicate it with RadDock, hopefully I should be able to move over at some future date however!
  10. Antony
    Antony avatar
    12 posts
    Member since:
    May 2009

    Posted 15 Jul 2009 Link to this post

    Hi Again,

    Actually I managed to solve this by changing the AutoSizeMode of the FillPrimitive of the tab to be FitToAvailableSize, I added the following lines bellow those concerning the "currentLayout".

     

    FillPrimitive fill = (FillPrimitive)tab.Children[0];

     

    fill.AutoSizeMode = Telerik.WinControls.

    RadAutoSizeMode.FitToAvailableSize;

    Cheers,

    -Antony

     

  11. Martin Vasilev
    Admin
    Martin Vasilev avatar
    1061 posts

    Posted 17 Jul 2009 Link to this post

    Hello Antony,

    Thank you for sharing your resolution with us. I confirm that it is right and resolves the tab's fill issue in the old DockingManager. Still, I recommend you to consider upgrading to new RadDock, because of the many improvements and further development. Write me back if you have any other questions.

     
    Regards,
    Martin Vasilev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  12. Vlasta Herudek
    Vlasta Herudek avatar
    1 posts
    Member since:
    Mar 2010

    Posted 04 Mar 2010 Link to this post

    Hi guys.

    I need help, please. I try you examle listed above (TabWithCloseButton2) and I found small defect in the code.
    When I attach button to tabItem, behavior of all items (docWins) are OK. But when I dock some docWin to another position, closed buttons on TabItem is lost. Because I haven't experiences with you compponent, please, can you help me? I need closed buttons located in the TabItem only and I can't use standards button :)).

    Thanks for yor willigness.
    Vlasta
  13. Martin Vasilev
    Admin
    Martin Vasilev avatar
    1061 posts

    Posted 09 Mar 2010 Link to this post

    Hello Vlasta Herudek,

    Thank you for contacting us. We have already implemented the in-build close buttons functionality in our RadDock control. For more details on how to enable it, please take a look in our documentation. Let me know if you have any other questions.

    Kind regards,
    Martin Vasilev
    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.
Back to Top
UI for WinForms is Visual Studio 2017 Ready