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

Custom drag handle on titlebar

1 Answer 23 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Nate
Top achievements
Rank 1
Nate asked on 03 Nov 2010, 05:06 PM
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!

1 Answer, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 05 Nov 2010, 04:34 PM
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
Tags
Dock
Asked by
Nate
Top achievements
Rank 1
Answers by
Pero
Telerik team
Share this question
or