This is a migrated thread and some comments may be shown as answers.

How to Hide Close Button of Dock Title Bar

3 Answers 408 Views

Dock

This is a migrated thread and some comments may be shown as answers.

3 Answers, 1 is accepted

answered on 07 Oct 2010, 08:14 AM

Hello Chandan,

You could use RadDock DefaultCommands property to choose which buttons to have in the titlebar. Another option to set different combination of buttons is to use Commands collection option. The following is a sample example for a combination without Close Button.

<telerik:RadDock runat="server" ID="RadDock1" Visible="true" Title="No Close Button"

Width="300" Height="300" Top="20" Left="340" DefaultCommands="ExpandCollapse">

<Commands>

<telerik:DockCommand />

<telerik:DockExpandCollapseCommand />

<telerik:DockPinUnpinCommand />

<telerik:DockToggleCommand />

</Commands>

</telerik:RadDock>

Please, note that Commands collection has higher priority than DefaultCommands property.

Greetings,
Bojo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 30 Mar 2011, 04:48 AM

I understand how to add and remove Commands at Server side, but having problems doing Client Side...

I would like to remove the DockCloseCommand via the Client for all the docks in a particular zone.

The set_enableDrag portion is working fine, but the remove_command is not. What am I missing here?

function stopDockActions() {

var leftZone = $find("<%= RadDockZone1.ClientID %>");

var numberOfDocksLeftZone = leftZone.get_docks().length;

var docksArray = leftZone.get_docks();

for (var i = 0; i < numberOfDocksLeftZone; i++) {

var isDragable = !docksArray[i].get_enableDrag();

docksArray[i].set_enableDrag(isDragable);

docksArray[i].remove_command('DockCloseCommand');

}

answered on 01 Apr 2011, 02:45 PM

Hi Daniel,

There is no client-side method or property that removes the dock commands on the client. However they can be easily removed using CSS, and a bit of JavaScript.
Here is what I suggest you do:

Handle the OnClientInitialize event of every dock on the page and in the handler method, set a CSS class to the parent <LI/> element of the command.
Hide the command by setting display: none.
To hide the command we cascade through a CSS class set on the <form/> element. When the class is set to the <form/> the command is removed, and when not, it stays.

Here is a sample code that demonstrates this approach:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style id="hideCommands" type="text/css">

.rdHideCommands .rdCloseLI

{

display: none !important;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="RadScriptManager1" runat="server">

</asp:ScriptManager>

<script type="text/javascript">

function Initialize(dock, args)

{

var closeCmd = dock.get_commands()["Close"];

if (closeCmd)

closeCmd.get_element().parentNode.className = "rdCloseLI";

}

function HideCommand()

{

var form1 = document.forms[0];

if (form1.className.indexOf("rdHideCommands") == -1)

{

Sys.UI.DomElement.addCssClass(form1, "rdHideCommands");

}

else

{

Sys.UI.DomElement.removeCssClass(form1, "rdHideCommands");

}

</script>

<div>

<input type="button" onclick="HideCommand(); return false;" value="HideCommands" />

<telerik:RadDockLayout ID="RadDockLayout1" runat="server">

<telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px">

<telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px"

OnClientInitialize="Initialize" Height="300px">

<ContentTemplate>

Dock's Content

</ContentTemplate>

</telerik:RadDock>

<telerik:RadDock ID="RadDock2" runat="server" Title="RadDock-Title" Width="300px"

OnClientInitialize="Initialize" Height="300px">

<ContentTemplate>

Dock's Content

</ContentTemplate>

</telerik:RadDock>

<telerik:RadDock ID="RadDock3" runat="server" Title="RadDock-Title" Width="300px"

OnClientInitialize="Initialize" Height="300px">

<ContentTemplate>

Dock's Content

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadDockLayout>

</div>

</form>

</body>

</html>

Greetings,
Pero
the Telerik team