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

Edit Title

Click Dock Title to rename it.
  • Collapse
  • Close
Static Dock

This example demonstrates how to edit the RadDock title by modifying the TitleBar template. You can add controls to the titlebar of RadDock

  • declaratively:
    <telerik:RadDock ID="RadDock1" runat="server" Text="Static Dock" Width="400">
        <TitlebarTemplate>
            ...
        </TitlebarTemplate>
    </telerik:RadDock>
  • or in code-behind by manipulating the TitlebarContainer controls collection
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Dock.EditTitle.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!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" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <qsf:MessageBox Type="Info" Icon="Info" runat="server">
        Click Dock Title to rename it.
    </qsf:MessageBox>
    <div class="demo-container size-custom">
        <telerik:RadDockLayout runat="server" ID="RadDockLayout1">
            <telerik:RadDockZone runat="server" ID="RadDockZone1" Width="300" MinHeight="200">
                <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock1" Text="Static Dock" Width="400" Skin="Default" CssClass="higherZIndex" OnClientInitialize="dock_load">
                    <TitlebarTemplate>
                        <div style="float: left; line-height: 23px; font-size: 18px">
                            <asp:UpdatePanel runat="server" ID="UpdatePanel1">
                                <ContentTemplate>
                                    <asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton1_Click" Style="text-decoration: none; color: #e47701; margin-left: 15px"
                                                    Text="Initial text">
                                    </asp:LinkButton>
                                    <telerik:RadTextBox RenderMode="Lightweight" ID="TextBox1" Width="200px" Visible="false" MaxLength="22" ClientEvents-OnLoad="titleInput_load" runat="server" />
                                    <asp:LinkButton runat="server" ID="LinkButton1" CssClass="title-link-btn" OnClick="LinkButton1_Click"><!-- No Text --></asp:LinkButton>
                                </ContentTemplate>
                            </asp:UpdatePanel>
                        </div>
                    </TitlebarTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
        </telerik:RadDockLayout>
    </div>
    <script src="scripts.js" type="text/javascript"></script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance