[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]Tree List
  [Expand]Card View
  [Expand]Reporting
  [Expand]Charting
  [Expand]Pivot Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Scheduler
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors Extensions
  [Collapse]Docking and Popups
   [Collapse]Docking
     Overview - Docking
    [Expand]Concepts
    [Expand]Visual Elements
   [Expand]Hint
   [Expand]Loading Panel
   [Expand]PopupControl
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Extensions
  [Expand]SpellChecker
  [Expand]Query Builder
 [Expand]Localization
 [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]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Overview - Docking

The DevExpress MVC extensions contain three dockable components: DockPanel, DockZone and DockManager. They allow you to manage content placeholders (dock panels), which can be moved by end-users between particular areas (dock zones) within a web page. A dock panel can either be docked to a dock zone or made to float. Dock zones can be placed at any part of a page; their orientation and size are fully customizable. Dock manager allows you to provide a centralized programmatic control of all dock panels and dock zones contained within a page.

To learn more about dockable extensions and see them in action, refer to its online demos.

Expanded Implementation Details

DockPanel is realized by the DockPanelExtension class. Its instance can be accessed via the ExtensionsFactory.DockPanel helper method, which is used to add a DockPanel extension to a view. This method's parameter provides access to the DockPanel's settings implemented by the DockPanelSettings class, allowing you to fully customize the extension. DockPanel's client counterpart is represented by the MVCxClientDockPanel object.

DockZone is realized by the DockZoneExtension class. Its instance can be accessed via the ExtensionsFactory.DockZone helper method, which is used to add a DockZone extension to a view. This method's parameter provides access to the DockZone's settings implemented by the DockZoneSettings class, allowing you to fully customize the extension. DockZone's client counterpart is represented by the ASPxClientDockZone object.

DockManager is realized by the DockManagerExtension class. Its instance can be accessed via the ExtensionsFactory.DockManager helper method, which is used to add a DockManager extension to a view. This method's parameter provides access to the DockManager's settings implemented by the DockManagerSettings class, allowing you to fully customize the extension. DockManager's client counterpart is represented by the MVCxClientDockManager object.

Expanded Declaration

Docking extensions can be added to a view in the following manner.

View code (Razor):

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