Docking

• Aug 01, 2019
• 3 minutes to read

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.

Note

A popup element (i.e., the PopupControl or the DockPanel) cannot contain another popup element inside.

Implementation Details

DockPanel is realized by the DockPanelExtension class. Its instance can be accessed via the DockPanel(DockPanelSettings) 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.

Declaration

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

View code (Razor):

C#

@Html.DevExpress().DockPanel(
    settings => {
        settings.Name = "panel1";
        settings.PanelUID = "panel1";
        settings.OwnerZoneUID = "zone1";
        settings.VisibleIndex = 0;
        settings.HeaderText = "2D Pie";
        settings.FooterText = "Model: Simple";
        settings.Height = 100;
        settings.Width = 250;
        settings.ShowFooter = true;
        settings.SetContent(() => {
            ViewContext.Writer.Write(
                "<img id=\"panel1Image\" src=\"" + Url.Content("~/Content/Docking/Images/Charts/2DPie.png") + "\" alt=\"\"/>"
            );
        });
    }
).GetHtml()

@Html.DevExpress().DockZone(
        settings => {
            settings.Name = "zone1";
            settings.ZoneUID = "zone1";
            settings.ControlStyle.CssClass = "zone left";
            settings.PanelSpacing = 11;
            settings.Width = 250;
            settings.Height = 385;
        }
).GetHtml()

@Html.DevExpress().DockManager(
    settings => {
        settings.Name = "manager";
        settings.ClientSideEvents.AfterDock = "function(s, e) { ShowProperties(); }";
        settings.ClientSideEvents.PanelCloseUp = "function(s, e) { OnClose(); }";
    }
).GetHtml()