New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Client-Side Programming Overview

The RadDock and RadDockZones provide a client-side API that lets you interact with the controls and docking zones in client-side code. In addition to a full set of client-side events, the client-side object model lets you manipulate the dock controls and docking zones while avoiding unnecessary post-backs.

Getting the RadDock and RadDockZone Client-side Objects

RadDock creates a client-side object with the ClientID of the control. Similarly, RadDockZone creates a client-side object with the ClientID of the docking zone. You can obtain the reference to these objects using the following JavaScript code:

JavaScript
var dock = $find("<%= RadDock1.ClientID %>"); 
var zone = $find("<%= RadDockZone1.ClientID %>");

Getting the Instance of a Command Object

Once you have the client-side object of RadDock control, you can use the getCommand() method to get the instance of a particular command:

JavaScript
var dock = $find("<%= RadDock1.ClientID %>"); 
var command = dock.getCommand("MyCustomCommand");

Cancelling an Action

Some client-side events occur immediately before the RadDock control performs some action. You can use these events to cancel the impending action by using the cancel property of the eventArgs passed to the handler:

JavaScript
function OnClientDockPositionChanging(sender, eventArgs)
{
    eventArgs.set_cancel(true); 
}

Docking and Undocking Controls

When you get the instance of the RadDock object, you can undock it from its current docking zone by calling the undock() method:

JavaScript
function undockIt() 
{
    var dock = $find("<%= RadDock1.ClientID %>");
    dock.undock(); 
}

To dock a RadDock control, you can call the dock() method of the client-side RadDockZone object:

JavaScript
function dockAtEnd()
{
    var dock = $find("<%= RadDock1.ClientID %>");
    var zone = $find("<%= RadDockZone1.ClientID %>");
    if (dock.get_dockZoneID() != zone.get_id())
    {
        zone.dock(dock);
    } 
}

function dockAtStart()
{
    var dock = $find("<%= RadDock1.ClientID %>");
    var zone = $find("<%= RadDockZone1.ClientID %>");
    if (dock.get_dockZoneID() != zone.get_id())
    {
        zone.dock(dock, 0);
    } 
}

See Also