RadDock for ASP.NET

Docking Zones Send comments on this topic.
Defining dynamic layouts with RadDock controls > Docking Zones

Glossary Item Box

RadDockingZone component represents a dynamic zone where the dynamic objects (RadDockableObject) can be placed – docked to it. To add an instance of  RadDockingZone control, you can drag-n-drop it from the Toolbox to the form, or define it programmatically by writing its tags in the body of the form:

 

...
   <rad:RadDockingZone id=RadDockingZone1 runat="server" Width="100%" Height="100%">
    ...

   </rad:RadDockingZone>
...

 

RadDockingZone is a container for any dockable objects and or Web/HTML controls. You can drag-n-drop any of them inside a RadDockingZone, or define their tags in the body of the zone.

 
 <rad:RadDockingZone id="Raddockingzone5" runat="server" Width="100%" Height="100%" Type="Horizontal">
   <asp:Button id="Button2" runat="server" Text="Button2"></asp:Button>
 </rad:RadDockingZone>

 

Because of the specifics of this control, it is advisory that only dockable objects should be placed after the first dockable object. Though it is possible to add any static or dynamic objects inside the docking zones, there is no probability for arranging the position of static objects towards dockable objects.

Conventional types of docking zones

Telerik RadDock layout defines six logical types of docking zones which allows developers to fine-tune the docking behavior. The available zone types are as follows:

  • Horizontal - represents a horizontal docking region;
  • Vertical- represents a vertical docking region;
  • Top - horizontal zone logically placed on the top of the layout;
  • Bottom - horizontal zone logically placed on the bottom of the layout;
  • Left - vertical zone logically placed on the left of the layout;
  • Right - vertical zone logically placed on the right of the layout;

 

Consider the following example:

 

Fixed Width/Height

RadDockingZone controls can have their width/height fixed or allow to resize automatically. This behavior is controled from the RadDockignZone.FixedSizeMode property.

 

Consider the following example:

Fixed Width/Height

 

<rad:RadDockingManager id="RadDockingManager1" runat="server"></rad:RadDockingManager>
   ...
   <rad:RadDockingZone id="RadDockingZone3" runat="server" Width="100%" Height="100px" Type="Top" FixedSizeMode="ByHeight">
      <span class="Label" style="width:auto">Fixed by height</span>
   </rad:RadDockingZone>
   ...
   <rad:RadDockingZone id=RadDockingZone1 runat="server" Width="100%" Height="350px" Type="Left">
       <div class="Label">No fixed size</div>
   <rad:RadDockableObject id=RadDockableObject1 runat="server" Text="Object1" Behavior="Resizable">
       <ContentTemplate>
           Object 2<br>
           Move this object to dock to different zones with different fixed size modes.<br>
           When floating this object will has its width/heigth set to their original values.
       </ContentTemplate>
   </rad:RadDockableObject>
   <rad:RadDockableObject id=RadDockableObject2 runat="server" Text="Object2" Behavior="Resizable">
       <ContentTemplate>
           Object 2<br>
           Move this object to dock to different zones with different fixed size modes.<br>
           When floating this object will has its width/heigth set to their original values.
       </ContentTemplate>
    </rad:RadDockableObject>
    </rad:RadDockingZone>
    ...
    <rad:RadDockingZone id="Raddockingzone4" runat="server" Width="300px" Height="350px" Type="Bottom" FixedSizeMode="ByWidth">
        <span class="Label" style="width:auto">Fixed by width</span>
    </rad:RadDockingZone>
    ...
    <rad:RadDockingZone id=RadDockingZone2 runat="server" Width="100%" Height="100px" Type="Right" FixedSizeMode="ByWidthHeight">
         <div class="Label">Fixed by width/height</div>
    </rad:RadDockingZone>