Show theme settings Shopping cart Download trialFree Trial
Change Theme Settings
Change Theme Settings
Show All Themes

Layout Management

Edit layout

The DockManager extension allows you to respond to end-user operations on panels and zones on a page and manage the layout.

In this demo, extensions from the Docking suite are used for two different purposes: to visualize data blocks on a page using a fixed layout, and to customize the layout of these data blocks via an external page. Both pages (presentation and customization) use the same set of DevExpress docking extensions. The dock panel layout defined in the customization page is preserved and synchronized with the presentation page using the DockManager's ClientLayout property.

To save layout changes, the client-side PerformCallback method should be called in the client-side AfterDock and AfterFloat events. In this demo, only the AfterDock event is handled, because panels can only be in a docked state (the AllowedDockState property is set to DockedOnly).


  • The DockManager that sends a callback to the server for saving a layout should be defined in a separate partial view, like all callback-aware extensions.
  • To obtain complete information about all DockPanel and DockZone extensions on the page, DockManager should be rendered after these extensions.

See Also:
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
The source code files for this demo are installed (by default) in the following directory:
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\MVCxDockAndPopupsDemos