Edit this page

Events Overview

RadDock supports a number of client-side events that let you customize the behavior of the control:

To use these events, simply write a javascript function that can be called when the event occurs. Then assign the name of the javascript function as the value of the the corresponding property.

<script type="text/javascript">
    function Undock(sender, eventArgs)
    {
        var cmd = eventArgs.command;
        if (cmd.get_name() == "Undock" && sender.get_dockZoneID() != "")
        {
            sender.undock();
        }
    }
</script>
<telerik:raddocklayout id="RadDockLayout1" runat="server">  
    <telerik:RadDockZone ID="RadDockZone1" runat="server">     
    <telerik:RadDock RenderMode="Lightweight" ID="RadDock1" 
        runat="server" 
        Text="Undock, Expand/Collapse, and Close" 
        Title="Commands"
        OnClientCommand="Undock">       
        <Commands>         
            <telerik:DockCommand Name="Undock" Text="Undock" />         
            <telerik:DockExpandCollapseCommand />         
            <telerik:DockCloseCommand />       
        </Commands>     
    </telerik:RadDock>  
</telerik:RadDockZone></telerik:raddocklayout>

You can also assign event handlers in client-side code. When using the client-side API, pass a reference to the event handler rather than its name. One advantage of using the client-side API is that you can attach multiple event handlers to one event using the standard MS AJAX convention:

function DoCommand1()
{  
    alert("First handler called");
}
function DoCommand2()
{  
    alert("Second handler called");
}
function AddCommandHandlers()
{  
    var dock = $find(<%=RadDock1.ClientID%>);    
    dock.add_command(DoCommand1);  
    dock.add_command(DoCommand2);
}   

Another advantage of the client-side API is that you can detach an event handler dynamically:

function removeCommandHandler()
{  
    var dock = $find(<%=RadDock1.ClientID%>);   
    dock.remove_command(DoCommand2);
}   

Note that on the client-side, the names of events are slightly different than on the server side. The following table shows the correspondence between client-side and server-side names:

Server-Side Name Client-Side Name Methods to add and Remove
OnClientCommand command add_command, remove_command
OnClientDockPositionChanging dockPositionChanging add_dockPositionChanging, remove_dockPositionChanging
OnClientDockPositionChanged dockPositionChanged add_dockPositionChanged, remove_dockPositionChanged
OnClientInitialize initialize add_initialize, remove_initialize
OnClientDragStart dragStart add_dragStart, remove_dragStart
OnClientDrag drag add_drag, remove_drag
OnClientDragEnd dragEnd add_dragEnd, remove_dragEnd
OnClientResizeStart resizeStart add_resizeStart, remove_resizeStart
OnClientResizeEnd resizeEnd add_resizeEnd, remove_resizeEnd

For a live example illustrating the RadDock client-side events, see Client-side events.

See Also