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!
11 Answers, 1 is accepted
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.
Rank 2
Rank 1
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.
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.
Rank 1
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
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.
Rank 1
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!
Rank 1
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
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.
Rank 1
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
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.