RadDock for ASP.NET AJAX
Contents
RadControls for ASP.NET AJAX

In addition to the content template, which is described in Adding Content, RadDock also supports a title bar template for customizing the appearance of the title bar.

Note

Note that in the examples below, there is no need to add icons for the RadDock commands to the title bar template. They appear automatically.

Setting the TitlebarTemplate in the markup

You can specify the title bar template at design time in the markup:

CopyASPX
<telerik:RadDock
   runat="server"
   id="RadDock1"
   text="Click on the title to edit it">
 <TitlebarTemplate>
   <asp:UpdatePanel runat="server" id="UpdatePanel1">
     <ContentTemplate>
       <asp:LinkButton
           id="LinkButton2"
           runat="server"
           OnClick="LinkButton_Click"
           style="text-decoration: none;
           color: Gray;
           cursor: move;"
           Text="Initial text">
       </asp:LinkButton>
       <asp:TextBox
           runat="server"
           id="TextBox1"
           width="200px"
           visible="false" />
       <asp:LinkButton
           runat="server"
           id="LinkButton1"
           onclick="LinkButton_Click">
         <!-- No Text -->
       </asp:LinkButton>
     </ContentTemplate>
   </asp:UpdatePanel>
 </TitlebarTemplate>
</telerik:RadDock>

In the codebehind, you can directly access the controls in the title bar template:

The template and event handler above create a RadDock control with a title that can be edited:

Setting the TitlebarTemplate in the code-behind

You can provide a title bar template at runtime by setting the TitlebarTemplate property to an instance of a class that implements ITemplate:

The following APSX page markup is used for the example. Through the client script the dragging of the RadDock is disabled while text is entered in the TextBox and it is enabled again after the OK button is pressed. You need to add this functionality as well in order to implement the scenario successfully.

CopyASPX
<telerik:RadDockLayout runat="server" ID="RadDockLayout1">
    <telerik:RadDockZone runat="server" ID="RadDockZone1" Width="300" MinHeight="200">
    </telerik:RadDockZone>
</telerik:RadDockLayout>
<script type="text/javascript">
    function enableDockDrag(enable, dockId, textboxId) { // this script enables/disables the RadDock dragging
        var dock = $find(dockId);
        if (enable) {
            dock._initializeDrag();
            var textbox = $find(textboxId);
            if (textbox) {
                $addHandler(textbox, "mousedown", function (e) {
                    e.stopPropagation();
                });
            }
        }
        else dock._disposeDrag();
    } 
</script>

The RadDock control is created from the code-behind and the TitlebarTemplate is specified:

See Also

Other Resources

RadDock Structure