Change Theme Settings
Change Theme Settings
Show All Themes

Client-Side Functionality

Collapse pane

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.

Local Copy of this Demo
To inspect the source code for this demo on your machine, you must first install our components via the DevExpress Component Installer.
You can open a local copy of this online demo directly from this webpage (if using v20.2.8, 21.1.4 or higher).
Open CS Solution
Open VB Solution
The source code files for this demo are installed (by default) in the following directories:
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\ASPxNavigationAndLayoutDemos
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\VB\ASPxNavigationAndLayoutDemos