Pane Resizing
- 2 minutes to read
Pane resizing is, by default, available within the ASPxSplitter control. An end-user can resize a pane by dragging its adjacent separator.
Availability of the Page Resizing Feature
You can enable/disable resizing of all panes within an ASPxSplitter by using the control’s server ASPxSplitter.AllowResize property or client ASPxClientSplitter.SetAllowResize method. For an individual pane, this setting can be overridden with the help of the server SplitterPane.AllowResize property or the client ASPxClientSplitterPane.SetAllowResize method of a pane object.
You can respond to pane size changes on the client side by handling the ASPxClientSplitter.PaneResizing and ASPxClientSplitter.PaneResized events.
Resizing Mode
Using the ASPxSplitter.ResizingMode property, you can control how panes visually respond to resizing operations.
By default, this property is set to ResizingMode.Postponed, and dragging a separator to change the sizes of adjacent panes doesn’t redraw the panes until the resize operation is completed. In this case, a specific resize pointer is displayed representing the dragged separator to indicate its position.
Setting the ASPxSplitter.ResizingMode property to ResizingMode.Live results in the related panes being redrawn dynamically during the resizing operation.
You can refer to our online demo Live Resizing to learn more.
Min/Max Pane Size
If pane resizing is enabled, it is sensible to be able to restrict end-user resizings by defining maximum and minimum limits to which the size of individual panes can be changed. For this purpose, a pane’s SplitterPane.MinSize and SplitterPane.MaxSize properties can be used. You can also specify the minimum size for all panes within an ASPxSplitter control by using the ASPxSplitter.PaneMinSize property.
Note that these properties specify the height for the panes that are stacked vertically within their container (a parent pane of a splitter control), and the width - for horizontally stacked panes.
See the Min/Max Size online demo to learn more.
Fullscreen Mode
To enable the full-screen mode for an ASPxSplitter control, set the ASPxSplitter.FullscreenMode property to true
. In this case, the control fills the entire page and can be resized together with the browser window.
See the Splitter - Fullscreen Mode online demo to learn more.