Free Trial Buy Now

Splitter - Client-Side Functionality

ContentUrl for the second pane:
v
Width of the first pane:
v
Collapse/Expand panes:
v
Collapse pane
 

Description

This example demonstrates how you can manipulate the ASPxSplitter control programmatically on the client using enhanced client-side functionality. The client-side programmatic interface is available if the EnableClientSideAPI property is set to true, or if there is a handler assigned to any client-side event.

The ASPxSplitter control allows its panes to be resized in real time. This functionality can be enabled/disabled by using the SetAllowResize method on the client side. (See JS code)

In this demo, you can expand or collapse the splitter panes by using a specific button whose text is changed automatically, depending upon the action. On the client side, it is implemented within the CollapseExpandButtonClick() function by using the ASPxClientSplitterPane.Expand and ASPxClientSplitterPane.Collapse methods. (See JS code)

It's possible to change the splitter pane's content on the client side by using the SetContentUrl method within the UpdateContentUrl function.

The size of a pane can be changed programmatically by using the pane's client SetSize method. A pane's current size can be obtained via the client GetSize method.

Version: v2012 vol 2.8
Experience the DevExpress Difference Today
Demos with source code are included with an installation of DevExpress controls for ASP.NET. Refer to the Demos and Sample Applications topic to learn more.
To download your free evaluation copy of our award-winning ASP.NET libraries, visit the Downloads page
All DevExpress ASP.NET Controls ship as part of DXperience ASP.NET, Enterprise, and Universal.
To obtain pricing information, visit the Pricing Options page or contact us via Email at info@devexpress.com
or by telephone at +1 (818) 844-3383 between 8:30am and 5pm Pacific Time.