ComponentOne Wijmo Open for Juice UI
Wijmo Open for Juice UI Extender Controls / WijSplitter / WijSplitter Task-Based Help / Creating a Horizontal or Vertical Splitter
In This Topic
    Creating a Horizontal or Vertical Splitter
    In This Topic

    The WijSplitter 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 with a ScriptManager control and install Juice UI and the Wijmo Juice libraries to your project via NuGet.
    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>
      
    5. While still in Source view, use the following markup to add a WijSplitter control to the page and set the TargetControlID to Panel1.
      <cc1:WijSplitter ID="Panel1_WijSplitter" runat="server"        
      
              TargetControlID="Panel1">
      
      </cc1:WijSplitter>
      
    6. Use the following markup to add a second WijSplitter control to the page and set the TargetControlID to Panel2.
      <cc1:WijSplitter ID="Panel2_WijSplitter" runat="server"       
      
              TargetControlID="Panel2">       
      
      </cc1:WijSplitter>
      
    7. Select View | Properties Window in the Visual Studio menu.        
    8. Click the drop-down list at the top of the Properties window and select Panel1_WijSplitter.        
    9. Set the Orientation property to Vertical.        
    10. Click the drop-down list at the top of the Properties window and select Panel2_WijSplitter.        
    11. Set the Orientation property to Horizontal and set the FullSplit property to true.        
    12. Press F5 to run the application. The splitter will look similar to this: