Dock - Client-side API

RadDock1
  • Collapse
  • Close
RadDock1
RadDock2
  • Pin
  • Collapse
  • Close
RadDock2
RadDock3
  • Pin
  • Collapse
  • Close
RadDock3
RadDock4
  • Collapse
  • Close
RadDock4
RadDock5
  • Pin
  • Collapse
  • Close
RadDock5
RadDock6
  • Pin
  • Collapse
  • Close
RadDock6

Demo Configurator

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadDock provides a rich client-side API.

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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>
    <script type="text/javascript">
        //<![CDATA[
        serverIDs({
            dockZone1ID: '<%= RadDockZone1.ClientID %>',
            dockZone2ID: '<%= RadDockZone2.ClientID %>'
        });
        //]]>
    </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-custom">
        <telerik:RadFormDecorator RenderMode="Lightweight" runat="server" DecoratedControls="Buttons" />
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
            <table>
                <tr>
                    <td style="vertical-align: top">
                        <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="200" Width="300">
                            <telerik:RadDock RenderMode="Lightweight" ID="RadDock1" runat="server" Text="RadDock1" Title="RadDock1" Height="80"
                                EnableRoundedCorners="true" CssClass="higherZIndex" OnClientInitialize="dock_load">
                            </telerik:RadDock>
                            <telerik:RadDock RenderMode="Lightweight" ID="RadDock2" runat="server" DefaultCommands="All" Text="RadDock2"
                                Title="RadDock2" Height="80" EnableRoundedCorners="true" CssClass="higherZIndex">
                            </telerik:RadDock>
                            <telerik:RadDock RenderMode="Lightweight" ID="RadDock3" runat="server" DefaultCommands="All" Text="RadDock3"
                                Title="RadDock3" Height="80" EnableRoundedCorners="true" CssClass="higherZIndex">
                            </telerik:RadDock>
                        </telerik:RadDockZone>
                    </td>
                    <td style="vertical-align: top">
                        <telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="200" Width="300"
                            Skin="Outlook">
                            <telerik:RadDock RenderMode="Lightweight" ID="RadDock4" runat="server" Text="RadDock4" Title="RadDock4" Height="80"
                                EnableRoundedCorners="true" CssClass="higherZIndex">
                            </telerik:RadDock>
                            <telerik:RadDock RenderMode="Lightweight" ID="RadDock5" runat="server" DefaultCommands="All" Text="RadDock5"
                                Title="RadDock5" Height="80" EnableRoundedCorners="true" CssClass="higherZIndex">
                            </telerik:RadDock>
                            <telerik:RadDock RenderMode="Lightweight" ID="RadDock6" runat="server" DefaultCommands="All" Text="RadDock6"
                                Title="RadDock6" Height="80" EnableRoundedCorners="true" CssClass="higherZIndex">
                            </telerik:RadDock>
                        </telerik:RadDockZone>
                    </td>
                </tr>
            </table>
        </telerik:RadDockLayout>
    </div>
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View runat="server">
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:Button ID="dockButton" Text="Move RadDock1 To Right Zone" OnClientClicked="DockRadDock1ToRightZone" AutoPostBack="false" runat="server" />
                        </li>
                        <li>
                            <qsf:Button ID="moveAllButton" Text="Move All Docks To Left Zone" OnClientClicked="MoveAllDocksToLeftZone" AutoPostBack="false" runat="server" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server">
                    <ul class="fb-group">
                        <li>
                            <qsf:Button ID="collapseExpandButton" Text="Collapse/Expand RadDock1" OnClientClicked="CollapseExpandRadDock1" AutoPostBack="false" runat="server" />
                        </li>
                        <li>
                            <qsf:Button ID="showHideButton" Text="Show/Hide RadDock1" OnClientClicked="ShowHideRadDock1" AutoPostBack="false" runat="server" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?