Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

How to Hide Close Button of Dock Title Bar

3 Answers 347 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Chandan Kumar
Top achievements
Rank 1
Chandan Kumar asked on 07 Oct 2010, 07:59 AM
Hello Fir,

How to Hide Close Button of Dock Title Bar
i want remove Close Button.

Please Help Me.

Thanks
Chandan Kumar.

3 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
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
0
Daniel Lewis
Top achievements
Rank 1
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');
    }
}
0
Pero
Telerik team
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:
  1. 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.
  2. Hide the command by setting display: none.
  3. 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">
<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
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
Tags
Dock
Asked by
Chandan Kumar
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Daniel Lewis
Top achievements
Rank 1
Pero
Telerik team
Share this question
or