Dock and Modal Popups - Docking Overview

About Docking

The DevExpress ASP.NET MVC Docking Suite with built-in support for touch screens allows you to easily implement and manage draggable web panels within your web application.

The Docking Suite contains three extensions: DockPanel, DockZone and DockManager. They allow you to manage content placeholders (dock panels), which can be moved by end-users between specific 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 centralized programmatic control of all dock panels and dock zones contained within a page.

The code sample below demonstrates how to add the Docking extensions to your project.

View code:

@Html.DevExpress().DockPanel(settings => {
    settings.Name = "panel";
    settings.OwnerZoneUID = "zone1";
    settings.HeaderText = "2D Bubble";
    settings.Height = 220;
    settings.Width = 250;
    settings.ShowCloseButton = false;
    settings.SetContent(() => {
            "<img alt=\"\" style=\"height:140px;\" src=\"" +
              Url.Content("~/Images/2DBubble.png") + "\"/>"
@Html.DevExpress().DockZone(settings => {
    settings.Name = "zone1";
    settings.Height = 220;
    settings.Width = 250;

Key Features
  • Customizable Behavior
    You can specify whether or not end-users can drag, resize, and dock or undock a panel.
  • Forbidden zones
    Forbidden zones can be specified for a panel, allowing you to control the panel's ability to selectively dock to specific zones. Different appearances for the allowed and forbidden zone states can be specified.
  • Customizable Appearance
    You can fully customize the appearance of a panel's header, footer and content sections.
  • AJAX Support
    Panel content can be loaded on demand via callbacks.
  • Client-Side API
    You can use a client-side API to show, hide, dock, and undock panels, specify their position relative to other HTML elements, and change their content.
Version: v2017 vol 1.7
Copyright © 2006-2017 Developer Express Inc
Your Next Great MVC App Starts Here

Get started today and download your 30-day trial of DevExpress MVC Extensions (includes 30 days of free technical support).

All demos ship with full source code and are included in the DevExpress MVC distribution. Refer to the Demos and Sample Applications topic to learn more.

DevExpress MVC Extensions ship as part of DevExpress Universal, DXperience and ASP.NET Subscriptions and are backed by a 60 day unconditional money-back guarantee.
To learn more and obtain pricing information, visit the Compare Features and Pricing webpage. For immediate assistance, contact us by Email at or by phone at +1 (818) 844-3383 between 7:30am and 4:30pm Pacific Time.