Title Bar Template
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 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:
<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:
protected void LinkButton_Click(object sender, EventArgs e)
{
if (TextBox1.Visible) // finished editing
{
LinkButton2.Visible = true;
TextBox1.Visible = false;
LinkButton2.Text = TextBox1.Text;
LinkButton1.Text = "";
}
else // show textbox for editing
{
LinkButton2.Visible = false;
TextBox1.Visible = true;
TextBox1.Text = LinkButton2.Text;
LinkButton1.Text = "OK";
}
}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:
public class DockTitleTemplate : ITemplate // creating a class, implementing the ITemplate interface
{
TextBox txt = new TextBox();
Button btn = new Button();
LinkButton lnk = new LinkButton();
RadDock dock;
public DockTitleTemplate(RadDock dock)
{
this.dock = dock;
}
public void InstantiateIn(Control container)
{
lnk.ID = "lnk1";
lnk.Text = "initial text";
lnk.Click += new EventHandler(lnk_Click);
txt.ID = "txt1";
txt.Visible = false;
btn.ID = "btn1";
btn.Click += new EventHandler(btn_Click);
btn.Text = "ok";
btn.Visible = false;
container.Controls.Add(lnk);
container.Controls.Add(txt);
container.Controls.Add(btn);
}
protected void lnk_Click(object sender, EventArgs e)
{
txt.Text = lnk.Text;
txt.Visible = true;
btn.Visible = true;
lnk.Visible = false;
var script = String.Format("function f(){{enableDockDrag(false,'{0}','{1}');Sys.Application.remove_load(f);}}Sys.Application.add_load(f);", this.dock.ClientID, txt.ClientID);
ScriptManager.RegisterStartupScript(dock.Page, dock.Page.GetType(), "disableDrag", script, true);
// disable the dragging of RadDock, when the link is clicked
}
protected void btn_Click(object sender, EventArgs e)
{
lnk.Text = txt.Text;
txt.Visible = false;
btn.Visible = false;
lnk.Visible = true;
var script = String.Format("function f(){{enableDockDrag(true,'{0}','{1}');Sys.Application.remove_load(f);}}Sys.Application.add_load(f);", this.dock.ClientID, txt.ClientID);
ScriptManager.RegisterStartupScript(dock.Page, dock.Page.GetType(), "enableDrag", script, true);
// enable the dragging of RadDock, when the Ok button is clicked
}
}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.
<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:
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
RadDock dock = new RadDock();
dock.ID = "RadDock1";
dock.Text = "This is a custom TitleTemplate example";
dock.Width = Unit.Pixel(300);
dock.Height = Unit.Pixel(100);
dock.TitlebarTemplate = new DockTitleTemplate(dock); // the TitlebarTemplate is set
RadDockZone1.Controls.Add(dock);
}