New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Commands

ExpandCollapse + Close
  • Collapse
  • Close
  • Click the Collapse/Expand button on the title bar to toggle the content of the object.
  • Click the Close button on the title bar to close the object.
Custom Commands + Close
  • Custom
  • Custom
  • Close
  • Click the first or the second icon in the titlebar to see the action of the custom commands.
  • Click the Close button on the title bar to close the object.
Event Log:

RadDock Command is a button which appears in the top right corner of the RadDock titlebar. Each command can optionally perform postback. RadDock provides the Command event, which is fired when a command was clicked on the client.

RadDock comes with three integrated commands: ExpandCollapse, Close and PinUnpin. By default they will be displayed in the titlebar, unless you modify the DefaultCommands property, or the Commands collection.

You can easily create custom commands by adding DockCommand objects to the Commands collection. If you want to encapsulate functionality, you may inherit from DockCommand and provide new default values for the existing properties, or add new properties, which will be sent to the client-side object.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Dock.Commands.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadDockLayout runat="server" ID="RadDockLayout1">
            <table>
                <tr>
                    <td>
                        <telerik:RadDockZone runat="server" ID="RadDockZone1" MinHeight="300" Width="384">
                            <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock1" Title="ExpandCollapse + Close" EnableRoundedCorners="true" CssClass="higherZIndex">
                                <ContentTemplate>
                                    <ul>
                                        <li>Click the Collapse/Expand button on the title bar to toggle the content of the object.</li>
                                        <li>Click the Close button on the title bar to close the object.</li>
                                    </ul>
                                </ContentTemplate>
                            </telerik:RadDock>
                            <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock3" Title="Custom Commands + Close" OnCommand="RadDock_Command"
                                EnableRoundedCorners="true" CssClass="higherZIndex">
                                <Commands>
                                    <telerik:DockCloseCommand></telerik:DockCloseCommand>
                                    <telerik:DockCommand AutoPostBack="true" Name="Custom Command" OnClientCommand="CustomCommand"></telerik:DockCommand>
                                </Commands>
                                <ContentTemplate>
                                    <ul>
                                        <li>Click the first or the second icon in the titlebar to see the action of the custom
                                        commands.</li>
                                        <li>Click the Close button on the title bar to close the object.</li>
                                    </ul>
                                </ContentTemplate>
                            </telerik:RadDock>
                        </telerik:RadDockZone>
                    </td>
                    <td>
                        <telerik:RadDockZone runat="server" ID="RadDockZone2" MinHeight="300" Width="384">
                        </telerik:RadDockZone>
                    </td>
                </tr>
            </table>
        </telerik:RadDockLayout>
    </div>
    <qsf:EventLogConsole ID="EventLogConsole1" runat="server" Title="Event Log:"></qsf:EventLogConsole>
    <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock2" DefaultCommands="PinUnpin,Close" Title="PinUnpin + Close"
        Top="220px" Left="820px" EnableRoundedCorners="true" CssClass="higherZIndex">
        <ContentTemplate>
            <ul>
                <li>Click the Pin/Unpin button on the title bar to disable/enable the ability to drag
                        the object.</li>
                <li>Click the Close button on the title bar to close the object.</li>
            </ul>
        </ContentTemplate>
    </telerik:RadDock>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance