Splitter Package

Splitter control includes the Splitter Bar and Sliding Panes that allow users to divide the web page into distinct areas and to resize the panes. It offers comprehensive design-time support and client-side functionalities.

Full Design-time support lets you add Splitters, Split Panes and Split Bars to your page as well as content to the Split Panes. The control gives you a very close WYSIWYG experience.

• Access commonly used properites easily through the SmartTag
  

  
  Design-time SmartTag

• Select built-in styles through the Autoformat dialog box and preview the applied style.
  

  
  Preview Style in Style Designer Dialog Box

The main advantage of using the Splitter with Splitter Bar is to be able to let the user resize the Split Pane. There are multiple resize modes possible when using multiple splitter bars separating Split Panes laid adjacently.

Anchor to browser window or parent pane. The SplitPane can be set to automatically resize when the parent pane or browser window resizes.

Resizing can be done in Smooth mode or with a border outline.

Full Screen Mode: The splitter can also be used to show content to fill 100% of the browser window.

The other main advantage of using Splitters is the ability to create slide-out panels that appear over the content as seen in Visual Studio.Net. Such sliding panes can also be pinned to always remain visible. The slide-out panel can also be expanded on click or mouse hover.

There can be unlimited levels of nesting of splitters for a highly flexible layout functionality. Nested split-pane size can be made static or responsive with respect to parent-pane resize.

A Split Pane can be aligned horizontally or vertically separated by aSplitter Bar.

• Several built-in Styles let you setup professional-looking Splitters.
  

  
  Built-In Splitter Styles

• Easily associate Splitter with custom CSS Styles that define its appearance.

• Customize the Splitter's bar size and also its its resize mode.

Enable Auto Scrolling for Splitter panes. When the content is greater than available display space, the splitter pane Auto-Scroll feature can be enabled to automatically show scroll bars. Display either horizontal, vertical or both scroll bars.

Rich client-side API for the Splitter Control and Sliding Pane provide events to detect and create interactive applications.

List of client side events:

• ClientSideOnAfterCollapse
• ClientSideOnAfterDock
• ClientSideOnAfterExpand
• ClientSideOnAfterResize
• ClientSideOnAfterUnDock
• ClientSideOnBeforeCollapse
• ClientSideOnBeforeDock
• ClientSideOnBeforeExpand
• ClientSideOnBeforeResize
• ClientSideOnBeforeUnDock