DockControl

The DockControl represents a container of dockable windows. The DockWindow control derives from WindowBase and represents a window with header and content. Windows within the DockControl can be floating, docked to either one of the four sides of the control or in its center, or docked in another window.

Note
More information about the DockWindow control can be found in the Window topic.

Server side

Accessing windows

Use the Windows property to get a reference to the control's collection of DockWindows.

Docking and floating windows

Docking of a window within the DockControl is defined by the following set of properties: State, Dock and DockTargetID. Setting the State property to Docked will cause the window to dock to the default container and dock location, which is in the left side of the control's main container. Setting the Dock property will change the default dock location for the window. Setting the DockTargetID property to the ClientID of another window will change the default dock container for the window.

ASPX

<%-- DockWindow1 will be docked to the left side of the control's main container. --%>
<ui:DockWindow ID="DockWindow1" runat="server" Title="DockWindow1" State="Docked"></ui:DockWindow>

<%-- DockWindow2 will be floating at (0,0) coordinates of the control's main container. --%>
<ui:DockWindow ID="DockWindow2" runat="server" Title="DockWindow2" State="Floating"></ui:DockWindow>

<%-- DockWindow3 will not be shown. --%>
<ui:DockWindow ID="DockWindow3" runat="server" Title="DockWindow3" State="Hidden"></ui:DockWindow>

The DockControl handles the process of docking windows in other windows by creating temporary containers. When a window is docked at the center of another window, a temporary tab container is created and the contents of the two windows are effectively displayed as tabs. When a window is docked to a side of a floating window, a temporary floating container is created to hold the two windows. Temporary containers are automatically removed by the DockControl when their second to last child window is removed.

ASPX

<%-- DockWindow1 will be docked to the top side of the control's main container. --%>
<ui:DockWindow ID="DockWindow1" runat="server" Title="DockWindow1" State="Docked" Dock="Top"></ui:DockWindow>

<%-- DockWindow2 will be docked to the left side of Window1. --%>
<ui:DockWindow ID="DockWindow2" runat="server" Title="DockWindow2" State="Docked" Dock="Left" DockTargetID="DockControl1_DockWindow1"></ui:DockWindow>

<%-- DockWindow3 will be docked to the center of Window2, thus forcing the control to create a temporary TabControl container. --%>
<ui:DockWindow ID="DockWindow3" runat="server" Title="DockWindow3" State="Docked" Dock="Center" DockTargetID="DockControl1_DockWindow2"></ui:DockWindow>

Adding items

Use DockControl.Windows.Add method to add a new window to the collection.

C#

DockWindow window = new DockWindow();
window.ID = "ServerWindow" + DockControl1.Windows.Count.ToString();
window.Title = window.ID;
window.State = DockItemState.Docked;
DockControl1.Windows.Add(window);
DockControl1.DataBind();

VB.NET

Dim window As New DockWindow()
window.ID = "ServerWindow" & DockControl1.Windows.Count.ToString()
window.Title = window.ID
window.State = DockItemState.Docked
DockControl1.Windows.Add(window)
DockControl1.DataBind()

Removing items

Use DockControl.Windows.Remove or DockControl,Windows.RemoveAt to remove a specified window from the collection.

C#

DockControl1.Windows.RemoveAt(DockControl1.Windows.Count - 1);
DockControl1.DataBind();

VB.NET

DockControl1.Windows.RemoveAt(DockControl1.Windows.Count - 1)
DockControl1.DataBind()

Events

The following events are exposed by the DockControl class:

Event	Event args	Description
WindowCreated	WindowEventArgs	Raised when a child window is created.
WindowDeleted	WindowEventArgs	Raised when a child window is deleted.

Client side

Getting a reference to the control

You can access the control on the client side by its ClientID.

JavaScript

var dockControl = $find("DockControl1");
var dockControl = $find("<%= DockControl1.ClientID %>");

Accessing windows

Use the getAllWindows method to get a reference to the control's windows array. Use the getActiveWindow method to access the currently active window. Collections of windows in different states can be retrieved by using the getDockedWindows, getFloatingWindows and getClosedWindows methods.

Adding items

Use the DockControl.createWindow method to add a new window to its windows array. The createWindow method accepts as parameter a JSON object, containing the data for the new item. Use the data object to define values for the properties and events, exposed by the DockWindow class.

JavaScript

dockControl.createWindow({ 
    properties: { title: "Client window", state: MindFusion.UI.Web.DockItemState.Docked, dock: MindFusion.UI.Web.Dock.Top}, 
    events: { closing: onDockWindowClosing} 
});

Removing items

Use the DockControl.deleteWindow method to remove a specified window from the array.

JavaScript

dockControl.deleteWindow(dockControl.getAllWindows()[0]);

Events

The following client-side events are exposed by the DockControl class.

Event	Event arguments	Script property	Description
controlLoaded	-	ControlLoadedScript	Raised just after the control has finished loading and is ready for interaction.
windowChanged	WindowEventArgs	ActiveWindowChangedScript	Raised when the active window in the control is changed.

The following client-side events are exposed by the DockWindow class.

Event	Event arguments	Script property	Description
dragStart	WindowValidatingEventArgs	DragStartScript	Raised when the user starts to drag a control with the mouse.
drag	WindowModifiedEventArgs	DragScript	Raised during a drag operation.
dragEnd	WindowModifiedEventArgs	DragEndScript	Raised when the user finishes to drag a control with the mouse.
resizeStart	WindowValidatingEventArgs	ResizeStartScript	Raised when the user starts to resize a control with the mouse.
resize	WindowModifiedEventArgs	ResizeScript	Raised during a resize operation.
resizeEnd	WindowModifiedEventArgs	ResizeEndScript	Raised when the user finishes to resize a control with the mouse.
opening	WindowValidatingEventArgs	OpeningScript	Raised when a window is about to open.
open	WindowEventArgs	OpenScript	Raised when a window has opened.
closing	WindowValidatingEventArgs	ClosingScript	Raised when a window is about to close.
close	WindowEventArgs	CloseScript	Raised when a window has closed.
stateChanging	WindowStateValidatingEventArgs	StateChangingScript	Raised when the window state is currently changing.
stateChanged	WindowStateEventArgs	StateChangedScript	Raised when the window state has changed
headerClick	WindowEventArgs	HeaderClickScript	Raised when the user clicks the window header.
frameLoaded	-	FrameLoadedScript	Raised when the internal iframe has finished loading.
controlLoaded	-	ControlLoadedScript	Raised just after the control has finished loading and is ready for interaction.