Dock Element Zone |UI Control for ASP.NET AJAX, C#, VB.NET

Dock Element Zone |KT.UI for ASP.NET AJAX

Home > How to > Dock Znoe

Information to Dock Element Zone

What is dock zone? Dock zone refers to the region where the PerDock controls will be docked. And the background color of the dock zone and the orientation of the dock zone can be easily and freely set and modified. Besides, developers are also allowed to forbid users to put PerDock controls into certain dock zone.

And from this online tutorial page, you will find detailed programming examples for fully modify the settings of the dock element, zone.

Customize the Settings of Dock Zone

In this section, we will show developers how to create custom zone by modifying three properties of dock zone element.

How to Set Background Color of Dock Zone

Firstly, we need to state that the background color of the dock zone element is not modified via CSS. And here we attach the sample example to show you how to change the dock zone background color in aspx web page.

<kettic:PerDockZone ID="PerDockZone1" runat="server" 
 Width="250px"  Height="400px" BackColor="Green">
</kettic:PerDockZone>

We here specifically attach image to represent the differences of applying duck zone color or not.

How to Modify Orientation of Dock Zone

ZoneOrientation is responsible for which direction the PerDock controls will be placed into the zone. And in following text, we will set the ZoneOrientation="Vertical" as an example to illustrate this property. After we set ZoneOrientation="Vertical", the dock controls will be placed in the dock zone in vertical direction.

<kettic:PerDockZone runat="server" ID="PerDockZone1" 
Orientation="Vertical"
Height="150px" Width="320px">
</kettic:PerDockZone>

You may not observe any difference if the combined height of all the dock controls is less than the zone height (as is seen in following image).

But when the combined height is larger than the zone height, the zone will add a vertical scrollbar automatically. And following attached image is used to represent the effect of setting the ZoneOrientation to vertical.

How to Forbid Dock Zone

If you want to forbid current dock being placed in corresponding zone, you can use this ForbiddenZones property. And here we provide a sample programming example to illustrate this property.

<table>
            <tr style="background-color: #006400">
                <td>
                    <kettic:PerDockZone runat="server" ID="PerDockZone1" Width="300" MinHeight="400" ToolTip="Dock Zone1" >
                        
                        <kettic:PerDock runat="server" ID="PerDock1"  DockHandle="Grip" DockMode="Default" 
ForbiddenZones="PerDockZone2,PerDockZone3" BorderStyle="None" Height="200" >
                            <ContentTemplate>
                                <h1>Panel1</h1>
                                <img src="/Images/Dock/ForbiddenZone23.png" />
                            </ContentTemplate>
                        </kettic:PerDock>
                      
                    </kettic:PerDockZone>
                </td>
                <td>
                    <kettic:PerDockZone runat="server" ID="PerDockZone2"  Width="300" MinHeight="400" ToolTip="Dock Zone2">                        
                        <kettic:PerDock runat="server" ID="PerDock2" DockHandle="Grip" DockMode="Default" 
ForbiddenZones="PerDockZone1,PerDockZone3" BorderStyle="None" Height="200">
                            <ContentTemplate>
                                <h1>Panel2</h1>
                                <img src="/Images/Dock/ForbiddenZone13.png"/>
                            </ContentTemplate>
                        </kettic:PerDock>
                        
                    </kettic:PerDockZone>
                </td>
            </tr>
            <tr>
                <td colspan="2" style="background-color: #006400">
                    <kettic:PerDockZone runat="server" ID="PerDockZone3"   Width="600" Height="220" 
ToolTip="Dock Zone3" Orientation="Horizontal">
                        <kettic:PerDock runat="server" ID="PerDock3"  DockHandle="Grip" DockMode="Default" 
ForbiddenZones="PerDockZone1,PerDockZone2" BorderStyle="None" Height="200">
                            <ContentTemplate>
                                <h1>Panel3</h1>
                                <img src="/Images/Dock/ForbiddenZone12.png"/>
                            </ContentTemplate>
                        </kettic:PerDock>
                    </kettic:PerDockZone>
                </td>
                
            </tr>
        </table>

This image is used to represent the result of above programming code.

If you want to customize the settings and appearance of dock zone using C# code, please feel free to visit this page for Setting Dock Element Zone Using C# Code.
If you want to modify the settings of other dock element, like commands, in aspx web page, you can visit this page for Setting the Dock Element Command in ASP.NET.

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control ASP.NET AJAX Grid UI Control ASP.NET AJAX Barcode UI Control ASP.NET AJAX Button UI Control ASP.NET AJAX Calendar UI Control ASP.NET AJAX NavigationBar UI Control ASP.NET AJAX Captcha UI Control ASP.NET AJAX Color Editor UI Control ASP.NET AJAX ComboBox UI Control ASP.NET AJAX DataPager UI Control

ASP.NET AJAX Dock UI Control

Overview Getting Started

Element

Zones

Commands

Templates

Client Prpgramming

Dock Event

Server Programming

Dock Event ASP.NET AJAX DropDownList UI Control ASP.NET AJAX DropDownTree UI Control ASP.NET AJAX HtmlEditor UI Control ASP.NET AJAX FileManager UI Control ASP.NET AJAX Filter UI Control ASP.NET AJAX Input UI Control ASP.NET AJAX ListBox UI Control ASP.NET AJAX ListView UI Control ASP.NET AJAX ToolBar UI Control ASP.NET AJAX TabControl UI Control ASP.NET AJAX Menu UI Control ASP.NET AJAX ToolTip UI Control