To create a user interface which has nested WebSplitter™ Panes, you will have to create a parent WebSplitter that will have another WebSplitter within one of its content templates.
Assumptions for the following steps:
You have already created a new ASP.NET AJAX-Enabled Web Site with a blank WebForm.
You have an ASP.NET Ajax ScriptManager instance on the WebForm.
You have enabled the Infragistics Application Styling for this application and you are using the Default Style
When you finish reading, you will be able to create nested WebSplitter panes in a running sample.
In the Visual Studio Toolbox, locate the WebSplitter control and double click it. This will place an instance on your WebForm.
Click the WebSplitter control and in the Property Window, locate the Height property and set it to 600px.
Locate the Width property and set it to 800px.
Locate the Panes property and click the ellipse (…) button to launch the SplitterPane collection editor.
Click the Add button twice in order to add two separate SplitterPanes .
Click on the first SplitterPane and in the Property Window, locate the ContentUrl property and set its value to http://www.infragistics.com
Click the OK button to close the SplitterPane collection editor.
Next we will add a single line to our HTML Markup. On Default.aspx, click the Source button to show the markup view.
Locate the WebSplitter element and then locate the Panes element. This will contain the two SplitterPanes that we created.
In between the second SplitterPane, insert a Template element. The code should look similar to this:
In HTML:
<igweb:WebSplitter ID="WebSplitter1" runat="server" Height="600px" Width="800px"> <Panes> <igweb:SplitterPane runat="server" ContentUrl="http://www.infragistics.com"> </igweb:SplitterPane> <igweb:SplitterPane runat="server"> <Template/> </igweb:SplitterPane> </Panes> </igweb:WebSplitter>
Click the Design button to return to design mode.
Click the bottom SplitterPane to bring input focus here.
Go back to the Visual Studio Toolbox and double click on the WebSplitter in order to add another WebSplitter control to the content template of the second SplitterPane.
Next click on the new WebSplitter control that is in the bottom SplitterPane and in the Property Window, delete the value that is contained within the Height and Width property. This will cause the SplitterPanes to resize themselves according to the size of the content contained within.
Locate the Orientation property and set it to Vertical.
Locate the Panes collection for the second WebSplitter and click the ellipse button (…) to launch the SplitterPane collection editor.
Click the Add button twice in order to add two SplitterPanes.
Click on the first SplitterPane and in the Property Window, set the ContentUrl property to http://www.microsoft.com
Click on the second SplitterPane and in the property window, set the ContentUrl property to http://www.google.com
Click the OK button to close the SplitterPane collection editor.
Save and run the application. The application should look similar to the following image:
The top SplitterPane is linked to the Infragistics™ web site and the bottom SplitterPane contains another WebSplitter control. The two SplitterPanes within the nested WebSplitter contain two SplitterPanes as well; one is linked to Microsoft’s™ web site and the other one is linked to Google’s™ web site. It is good practice to alternate the orientation of nested WebSplitters so that the Orientation of a parent WebSplitter is not the same as an immediate child WebSplitter. If you do not wish to change and alternate the orientation of a child WebSplitter control then you can skip adding a child WebSplitter altogether and just add more SplitterPanes as you will not incur the overhead of having extra controls if they are not needed.