Dynamically hide/show dock title bar

2 posts, 0 answers
  1. Nicholas Walker
    Nicholas Walker avatar
    55 posts
    Member since:
    May 2006

    Posted 08 Feb 2010 Link to this post

    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
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 11 Feb 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top