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

Dynamically hide/show dock title bar

1 Answer 86 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Nicholas Walker
Top achievements
Rank 1
Nicholas Walker asked on 09 Feb 2010, 03:16 AM
I would like to be able to dynamically hide and show dock titlebars from client javascript.  Is there any way that I can accomplish this?

Thanks,
--nick

1 Answer, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 11 Feb 2010, 09:40 AM
Hi Nick,

There is no built-in functionality that will show/hide RadDock's title. However you can implement a custom script that will show/hide its title HTML element. The following script uses display: none to achieve this:

<telerik:RadScriptBlock runat="server">
 
    <script type="text/javascript">
        var IsVisible = true;
 
        function ShowHideTitle()
        {
            var dock = $find("<%=RadDock1.ClientID %>");
            var dockTitleElement = dock.get_titleBar();
            var parentTitle = dockTitleElement.parentNode.parentNode;
 
            if (IsVisible)
            {
                IsVisible = false;
                dockTitleElement.style.display = "none";
                parentTitle.className = "rdTop rdNone";
            }
            else
            {
                IsVisible = true;
                dockTitleElement.style.display = "";
                parentTitle.className = "rdTop";
            }
        }
    </script>
 
</telerik:RadScriptBlock>

This is the full source code of the project:

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
    <title></title>
    <telerik:RadScriptBlock runat="server">
 
        <script type="text/javascript">
            var IsVisible = true;
 
            function ShowHideTitle()
            {
                var dock = $find("<%=RadDock1.ClientID %>");
                var dockTitleElement = dock.get_titleBar();
                var parentTitle = dockTitleElement.parentNode.parentNode;
 
                if (IsVisible)
                {
                    IsVisible = false;
                    dockTitleElement.style.display = "none";
                    parentTitle.className = "rdTop rdNone";
                }
                else
                {
                    IsVisible = true;
                    dockTitleElement.style.display = "";
                    parentTitle.className = "rdTop";
                }
            }
        </script>
 
    </telerik:RadScriptBlock>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <input id="ShowTitle1" type="button" value="Show/Hide title" onclick="ShowHideTitle(); return false;" />
    <div>
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
            <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px">
                <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title">
                    <ContentTemplate>
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        CONTENT
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                    </ContentTemplate>
                </telerik:RadDock>
                <telerik:RadDock ID="RadDock2" runat="server" Width="300px" Title="RadDock_0000"
                    DockHandle="None">
                    <ContentTemplate>
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        CONTENT
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
        </telerik:RadDockLayout>
    </div>
    </form>
</body>
</html>


All the best,
Pero
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.
Tags
Dock
Asked by
Nicholas Walker
Top achievements
Rank 1
Answers by
Pero
Telerik team
Share this question
or