Layout Management
- 2 minutes to read
The DockManager extension allows you to save and restore a previously saved panel layout. This information includes the settings for control visibility, initial panel docking zone, position within the zone, allowed dock state, size, and panel position on the page. You can save the layout information on the server side (e.g., within the Session) or on the client side using cookies.
Note
To obtain full information about all DockPanel and DockZone extensions on the page, DockManager should be rendered after these extensions. Otherwise, DockManager will not affect the panel or zone appearance.
On the Client Side
You can save layout information on the client side within cookies. Enable the DockManagerSettings.SaveStateToCookies option to save the layout within cookies.
On the Server Side
To save layout information on the server side, write a delegate method that implements the required functionality, and assign it to the DockManagerSettings.ClientLayout property. This property provides the ASPxClientLayoutArgs.LayoutMode argument, which indicates whether the layout should be saved or restored. The event fires before a callback (LayoutMode returns ClientLayoutMode.Saving) and on the first page load (LayoutMode returns ClientLayoutMode.Loading). The ASPxClientLayoutArgs.LayoutData argument contains the layout data.
To save layout changes immediately, call the client-side ASPxClientDockManager.PerformCallback method on the ASPxClientDockManager.AfterDock and ASPxClientDockManager.AfterFloat events. Note that as the dock manager sends a callback, it should be placed in a partial view.
You can prohibit end-users from docking and undocking panels by setting the DockManagerSettings.FreezeLayout property to true. In this case, changing a panel’s dock state and rearranging panels within a zone by drag-and-drop is not permitted.
Example
The code example below demonstrates how to automatically store the layout information in the Session between page reloads.
@Html.DevExpress().DockPanel(...).GetHtml()
@Html.DevExpress().DockZone(...).GetHtml()
<!-- ... -->
@Html.Partial("EditLayoutPartial")
@Html.DevExpress().DockManager(settings => {
settings.Name = "dockManager";
settings.CallbackRouteValues = new { Controller = "Docking", Action = "EditLayoutPartial" };
settings.ClientSideEvents.AfterDock = "function(s, e) { s.PerformCallback(); }";
settings.ClientSideEvents.AfterFloat = "function(s, e) { s.PerformCallback(); }";
settings.ClientLayout = (sender, e) => {
if(e.LayoutMode == ClientLayoutMode.Saving)
Session["EditLayout"] = e.LayoutData;
if(e.LayoutMode == ClientLayoutMode.Loading && Session["EditLayout"] != null)
e.LayoutData = Session["EditLayout"] as string;
};
}).GetHtml()