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
0
Hello Nate,
Please test the following code, I think it will help you achieve the desired functionality:
Best wishes,
Pero
the Telerik team
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"><html xmlns="http://www.w3.org/1999/xhtml"><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