How to "split" tab pages ?

Question

Hi. 
I need an advice – which control / technique to use. 
I have a form (child of an mdi form) where I would like to represent two views of the same information. Let’s say a visual view like a graph and a text view like a table of the graph data. 
I want the user to have 3 options: see the visual representation, see the textual representation or see them both, together on a split view. 
The first thing that came to my mind was the tab control, so I have two tab pages one for each presentation but I don’t want a third one for the “split” view – I’d wish there was an easy way to turn the pages to two controls with a splitter between them. Is there? 
I’ve read this knowledge link article (http://www.syncfusion.com/support/kb/tools/Default.aspx) but because my form is attached to another mdi form I couldn’t make it work. 

I’d appreciate any input. 
Attached a simple example for the tab control. 

Thanks 
Amit 
 
WindowsApplication34.zip

Vijayanand S · Answer

Hi Amit,

Thanks for using Essential Tools.

Currently it is not possible in our TabControlAdv to split the tab pages. However I have created two samples regarding your requirement using DockingManager:

Sample 1: 
1. There are three user controls, TabCotnrolAdv and DockingManager.
2. Each view placed in a separate usercontrol and the third user control is the common for the other two user controls.
3. The third user control has other two user controls docked by the DockingManager with the ShowCaption property set as false and DockToFill Mode is set as true(This shows a view like two controls separated by a splitter). 
4. This user control is added to the TabPage in Main form and the visibility of the child usercontrol is control by SetDockVisibility method of the DockingManager.
5. Please try to select the different options using Option menu.

Sample1

Sample 2:
1. There are two panels(views) , DockingManager.
2. The two panels are enabled for docking and they are docked as tabbed group with DockTabAlignment property to Top.
3. Views are selected by the ActiivateControl method of DockingManager. When both View option is selected, the two controls are removed from the tab group and dock to the main form to show them side by side.

Sample2

Please refer the samples and let me know if it helps.

Regards,
Vijay

Amit Weisman · Answer

Hi . 
I think I found that I need the docking manager. 
Here is a simple application – BUT is there a way to keep the proportions between the tabs when the container resizes ? I mean without listening to the resize event. I want to keep the same look – split panel and tabbed panel. 

Thanks 
Amit 
WindowsApplication38.zip

Amit Weisman · Answer

ooops . 
Only after posting my last reply I saw that you posted 2 samples for me. 
From first look sample 2 looks closer to what I have. I''ll take a closer look. 
Thanks Vijayanand. 

Amit

Amit Weisman · Answer

Hi Vijayanand . 
I get compile errors in both samples. 
sample 1 : 7 errors like this one - 
\WindowsApplication34\Form1.cs(73): ''Syncfusion.Windows.Forms.Tools.TabControlAdv'' does not contain a definition for ''NavigationControl''

sample 2 : 
\WindowsApplication34\Form1.cs(173): ''Syncfusion.Windows.Forms.Tools.DockingManager'' does not contain a definition for ''GetDockStyle''
\WindowsApplication34\Form1.cs(162): ''Syncfusion.Windows.Forms.Tools.DockingManager'' does not contain a definition for ''GetDockStyle''


Thanks 
Amit

Amit Weisman · Answer

I tried to walk around the errors in sample2 and still when resizing the container - the panels keep their size rather then fill the container - Please feel free to weigh on this issue too :-) 

Thanks 
Amit

Amit Weisman · Answer

Hi Vijayanand. 

I managed to compile the samples (I guess we’re not using the same version, I have 62). 
Using your code I wrote the attached example which looks good to my eyes. 
I have 2 minor issues: 
1. When we wish to determine the width of each view – half the client width – the right panel looks smaller then the left one. I’ve added the splitter width but still they don’t look even- Am I missing something (padding of some kind?) or my eyes are fooling me ? 
2. If I comment out the line in the form load event (line 176) I get a strange behavior – if I click the “both” menu item just after the form is loaded, I don’t see the split panel. Only after playing with other options this works. Can you explain to me why (I thing this is an issue that I’m missing in understanding what’s going on behind the scene).

Thanks very much for your help. 
Amit 
   
WindowsApplication400.zip

Vijayanand S · Answer

Hi Amit,
 
Thanks for the update and feedback. I was able to reproduce both issues. 

 When we wish to determine the width of each view – half the client width – the right panel looks smaller then the left one. I’ve added the splitter width but still they don’t look even- Am I missing something (padding of some kind?) or my eyes are fooling me ? 
 
If you want to set the equal size for the docked control, you have to reduce the SplitterWidth for each control from Client width. Here we are using two panels, so you have to calcualte the width using following code:

int width=(this.ClientSize.Width - this.dockingManager1.SplitterWidth * 2 ) /2;

 
 If I comment out the line in the form load event (line 176) I get a strange behavior – if I click the “both” menu item just after the form is loaded, I don’t see the split panel. Only after playing with other options this works. Can you explain to me why (I thing this is an issue that I’m missing in understanding what’s going on behind the scene).
 
There are some issues with the DockVisibility mode when the DockToFill mode is set to true. DockVisibility method does not change any thing when we set the same visible mode again. Thats why you could not see any difference when you set the visible mode as true. I will log a bug report and we will fix it soon.
 
As a workaround, please use the following code in the "Both" menuitem click event,

   this.dockingManager1.SetDockVisibility(this.panel1,true);
   this.dockingManager1.DockControl(this.panel2,this.panel1,Syncfusion.Windows.Forms.Tools.DockingStyle.Right,width);
   this.dockingManager1.SetControlSize(this.panel1,new Size(width,this.ClientSize.Height));
   this.dockingManager1.SetControlSize(this.panel2,new Size(width,this.ClientSize.Height));

 
Please take a look at the modified sample and let me know if you have any other questions.
 
Thanks,
Vijay

Modified Sample

Vijayanand S · Answer

Hi Amit,

I tried to walk around the errors in sample2 and still when resizing the container - the panels keep their size rather then fill the container - Please feel free to weigh on this issue too :-) 

I am afraid, I was not able to reproduce the issue. Could you please provide elaborate details regarding this issue? It will help us to resolve this issue accurately.

Thanks,
Vijay

Amit Weisman · Answer

Hi Vijay,
The issue you refer to in your last message is long gone when I “switched” to the solution inspired by your samples. 
I have one irritating issue which I think has something to do with the visibility not working properly under the docktofill state. 
I would like to start (load) the control in one state (chart one). But in my designer, I have both controls docked to the top and bottom of the container and this is was I get when I start my application although I try to set the textual control’s visibility to false in the ctor and in the load event. The only way to go around this that I found is by setting the hideonload property of the textual control (which I don’t want to show at the initial state) to true. This is not a perfect solution because I prefer the container could control it without the need of changing the control properties. 
Is there another way (I just want to start in the graph state)? 
Attached a sample of what I have now (with the hideonload change)   

Thanks for your help.  
Amit 
WindowsApplication410.zip

Varoon · Answer

Hi . 
I think I found that I need the docking manager. 
Here is a simple application – BUT is there a way to keep the proportions between the tabs when the container resizes ? I mean without listening to the resize event. I want to keep the same look – split panel and tabbed panel. 

Thanks 
Amit 
WindowsApplication38.zipHello thank you

Durga Rajan · Answer

Hi Varoon, 

If you need any technical assistance in DockingManager, let us know we will be happy to assist you. 
Regards, 
Durga S.