Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [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]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]HTML Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Collapse]Navigation and Layout Extensions
   [Expand]FormLayout
   [Expand]Menu
   [Expand]NavBar
   [Expand]Ribbon
   [Expand]PageControl
   [Expand]TabControl
   [Expand]PopupMenu
   [Collapse]Splitter
     Overview - Splitter
    [Collapse]Concepts
      Pane Orientation
      Hierarchical Pane Structure
      Pane Resizing
      Pane Collapsing and Expanding
      Displaying External Content
    [Expand]Visual Elements
   [Expand]TreeView
   [Expand]Panel
  [Expand]File Management
  [Expand]Multi-Use Site Extensions
  [Expand]Charts
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Tree List
  [Expand]Data Editor Extensions
  [Expand]Report Extensions
  [Expand]SpellChecker
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[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.

How would you rate this topic?​​​​​​​