Log In
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Expand]Common Concepts
  [Expand]Grid View
  [Expand]Tree List
  [Expand]Card View
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Collapse]Site Navigation and Layout
     Overview - Splitter
      Pane Orientation
      Hierarchical Pane Structure
      Pane Resizing
      Pane Collapsing and Expanding
      Displaying External Content
    [Expand]Visual Elements
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors Extensions
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Extensions
  [Expand]Query Builder
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Pane Resizing

By default, Pane resizing is available within a Splitter. An end-user can resize a pane by dragging its adjacent separator.

Expanded Availability of the Page Resizing Feature

You can enable/disable resizing of all panes within a Splitter by using the SplitterSettings.AllowResize property. For an individual pane, this setting can be overridden with the help of the SplitterPane.AllowResize (via MVCxSplitterPane.AllowResize) property.

Expanded Resizing Mode

Use the SplitterSettings.ResizingMode property to 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 denotes the dragged separator to indicate its position.

Set the SplitterSettings.ResizingMode property to ResizingMode.Live to redraw the related panes dynamically during the resizing operation.

You can refer to our online demo Splitter - Resizing to learn more.

Expanded Min/Max Pane Size

If pane resizing is enabled, you can restrict end-user resizing by defining maximum and minimum limits to which the size of individual panes can be changed. For this purpose use a pane's SplitterPane.MinSize (via MVCxSplitterPane.MinSize) and SplitterPane.MaxSize (via MVCxSplitterPane.MaxSize) properties. You can also specify the minimum size for all panes within a Splitter by using the SplitterSettings.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) and the width - for horizontally stacked panes.

Expanded Fullscreen Mode

To enable a full-screen mode for a Splitter, set the SplitterSettings.FullscreenMode property to true. In this case, a Splitter fills the entire page and can be resized together with the browser window.

See the Splitter - Fullscreen Mode online demo to learn more.

Is this topic helpful?​​​​​​​