Custom drag handle on titlebar

2 posts, 0 answers
  1. Nate
    Nate avatar
    26 posts
    Member since:
    Dec 2008

    Posted 03 Nov 2010 Link to this post

    I am trying to see if there is a way to create a custom drag handle on the title bar.  I am trying to to do this, because I have a textbox and a search button on the titlebar as shown and I don't want to put the dock in non-draggable mode to search type in the textbox and click the button.  One way I accomplished this is by adding some javascript to disable the draggability when typing in the text box and hovering over the button.  However, this is not foolproof.  So, I am wondering if there is a better solution to this without having a button like you all do in your examples to put the dock in non-draggable mode. Also how do you actually center something in the titlebar, because when I added the custom template my title disappeared!
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 05 Nov 2010 Link to this post

    Hello Nate,

    Please test the following code, I think it will help you achieve the desired functionality:

    <!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 type="text/css">
            .rdTitleBar
            {
                position: relative;
                text-align: center;
            }
            .rdTitleBar EM
            {
                width: 100% !important;
            }
            .rdCommands
            {
                position: absolute !important;
                right: 0px !important;
                top: 0px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="RadScriptManager1" runat="server">
        </asp:ScriptManager>
        <script type="text/javascript">
            function OnClientInitialize(dock, args)
            {
                dock.set_handle($get("divHandle"));
            }
        </script>
        <div>
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="900px">
                    <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="900px"
                        OnClientInitialize="OnClientInitialize">
                        <TitlebarTemplate>
                            <div style="width: 100%; height: 100%;">
                                <div style="float: left; width: 30%; height: 100%;">
                                    <asp:TextBox ID="txt1" runat="server" Width="67%" /><asp:Button Text="Go!" Width="30%"
                                        ID="btnSearch" runat="server" />
                                </div>
                                <div id="divHandle" style="float: left; width: 70%; height: 100%;">
                                    <span style="margin: auto;">RadDock Title</span>
                                </div>
                            </div>
                        </TitlebarTemplate>
                        <ContentTemplate>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu leo quis felis eleifend
                            congue id ac nulla. Suspendisse in sapien eu tortor aliquam luctus. Suspendisse
                            pretium, nulla sit amet porttitor lobortis, ante sapien blandit ante, et tempor
                            magna eros nec sapien. In hac habitasse platea dictumst. Nullam a quam lorem, eu
                            vestibulum turpis. Praesent a neque et diam tincidunt suscipit ut semper massa.
                            Vivamus posuere, mi eu consectetur consequat, libero risus accumsan erat, ut facilisis
                            dolor justo a enim. Donec suscipit tincidunt lorem, sed aliquam velit pulvinar euismod.
                            Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
                            mus.
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
        </div>
        </form>
    </body>
    </html>


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