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  Copy Code

  <%-- 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  Copy Code

  <%-- 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#  Copy Code
  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  Copy Code
  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#  Copy Code
  DockControl1.Windows.RemoveAt(DockControl1.Windows.Count - 1); DockControl1.DataBind();

  
  

  VB.NET  Copy Code
  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  Copy Code
  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  Copy Code
  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  Copy Code
  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.