ComponentOne Extender Controls for ASP.NET Web Forms
Wijmo Control Toolkit Extender Controls / C1SplitterExtender / Creating a Horizontal or Vertical Splitter
In This Topic
    Creating a Horizontal or Vertical Splitter
    In This Topic

    The C1SplitterExtender control allows you to change the orientation of a splitter. Simply set the Orientation property to take advantage of this feature.

    1. Create an ASP.NET Web application.
    2. Add a standard Panel control to the main content of  your page.
    3. Add a second Panel control within the first panel, Panel1.
    4. Add markup within each panel so the final markup looks like this:

    <asp:Panel runat="server" ID="Panel1">

                <div>

                      panel1     

                </div>

                <div>

                      <asp:Panel runat="server" ID="Panel2">

                            <div>

                                  panel2</div>

                            <div>

                                  panel3</div>

                      </asp:Panel>

                </div>

          </asp:Panel>

    1. Click the Panel1 smart tag and select Add Extender from the Tasks menu.
    2. In the Extender Wizard, select C1SplitterExtender and click OK. A C1SplitterExtender control is added to the page and the TargetControlID is set to Panel1.
    3. Click the Panel2 smart tag and select Add Extender from the Tasks menu.
    4. In the Extender Wizard, select C1SplitterExtender and click OK. A C1SplitterExtender control is added to the page and the TargetControlID is set to Panel2.
    5. Select View | Properties Window in the Visual Studio menu.
    6. Click the drop-down list at the top of the Properties window and select Panel1_C1SplitterExtender.
    7. Set the C1SplitterExtender.Orientation property to Vertical.
    8. Click the drop-down list at the top of the Properties window and select Panel2_C1SplitterExtender.
    9. Set the C1SplitterExtender.Orientation property to Horizontal and set the C1SplitterExtender.FullSplit property to true.
    10. Press F5 to run the application. The splitter will look similar to this: