I have dockpanels that can be dragged by clicking the content area, I also have a contextmenu for each dock. The problem is that dragging will start by left or right clicking the dockpanel while the contextmenu is also opened by right clicking. This is in a situation where the dock titlebars are hidden to get a WYSIWYG display of the page. I like to use left clicking to start dragging and right clicking to open the contextmenu. Is there a way to prevent starting a drag when using the right mouse button?
Any suggestion is greatly appreciated...
Kind regards,
Huib van Dongeren
Any suggestion is greatly appreciated...
Kind regards,
Huib van Dongeren
2 Answers, 1 is accepted
0
Accepted
Hi Huib,
We have a project that disables the right click of the RadDock. Here is the full source code:
Let us know if you have any problems with the project.
Greetings,
Pero
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
We have a project that disables the right click of the RadDock. Here is the full source code:
| <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> |
| <!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 id="Head1" runat="server"> |
| <title>Untitled Page</title> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server"> |
| </asp:ScriptManager> |
| <div> |
| <telerik:RadDockLayout ID="RadDockLayout1" runat="server"> |
| <telerik:RadDockZone runat="server" ID="DockZone" Width="300px" MinHeight="400px"> |
| <telerik:RadDock runat="server" ID="RadDock1" Skin="Black" Title="RadDock1" Text="RadDock1"> |
| <ContentTemplate> |
| <br /> |
| <br /> |
| <br /> |
| CONTENT |
| <br /> |
| <br /> |
| <br /> |
| </ContentTemplate> |
| </telerik:RadDock> |
| </telerik:RadDockZone> |
| </telerik:RadDockLayout> |
| </div> |
| <script type="text/javascript"> |
| //Disable Right Click Drag |
| function isRightClick(e) |
| { |
| var rightclick; |
| if (!e) var e = window.event; |
| if (e.which) rightclick = (e.which == 3); |
| else if (e.button) rightclick = (e.button == 2); |
| return rightclick; |
| } |
| Telerik.Web.UI.RadDock.prototype.oldDragStart = Telerik.Web.UI.RadDock.prototype.onDragStart; |
| Telerik.Web.UI.RadDock.prototype.onDragStart = function(args) |
| { |
| if (isRightClick(args.ownerEvent)) |
| { |
| return false; |
| } |
| else |
| { |
| this.oldDragStart(); |
| } |
| } |
| </script> |
| </form> |
| </body> |
| </html> |
Let us know if you have any problems with the project.
Greetings,
Pero
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Huib
Top achievements
Rank 1
Rank 1
answered on 09 Oct 2009, 01:43 PM
Hi Pero,
I could not reply earlier, I was on holliday in an internetless forrest! Your solution solved my problem, and it is working brilliantly now. I now have a real WYSIWYG page where I can drag all docks around the page using the left mouse button en call the context menu for each dock when using the right mouse button. I have a checkbox on the page that toggles the display of all title bars of all the docks. When the title bars are shown, the title bars are the drag handles. When the checkbox is not checked however, the title bars are hidden and the drag handles are set to the content of each dock. This creates a WYSIWYG display while users are still able to drag page modules. To make this WYSIWYG mode useable, I make all dockzones visible when docks are dragged and make them invisble again after the drag ends. My code looks like this now (partly shown and including your code).
Thanks a lot for helping me out!
Greetings from Holland...
Huib van Dongeren
I could not reply earlier, I was on holliday in an internetless forrest! Your solution solved my problem, and it is working brilliantly now. I now have a real WYSIWYG page where I can drag all docks around the page using the left mouse button en call the context menu for each dock when using the right mouse button. I have a checkbox on the page that toggles the display of all title bars of all the docks. When the title bars are shown, the title bars are the drag handles. When the checkbox is not checked however, the title bars are hidden and the drag handles are set to the content of each dock. This creates a WYSIWYG display while users are still able to drag page modules. To make this WYSIWYG mode useable, I make all dockzones visible when docks are dragged and make them invisble again after the drag ends. My code looks like this now (partly shown and including your code).
Thanks a lot for helping me out!
Greetings from Holland...
Huib van Dongeren
| function isRightClick(e) { |
| var rightclick; |
| if (!e) var e = window.event; |
| if (e.which) rightclick = (e.which == 3); |
| else if (e.button) rightclick = (e.button == 2); |
| return rightclick; |
| } |
| function SetHandleDock(dock, args) { |
| var checkBoxWijzigmodus = document.getElementById("<%= CheckBoxWijzigmodus.ClientID %>"); |
| if (checkBoxWijzigmodus != undefined) { |
| if (!checkBoxWijzigmodus.checked) { |
| var dockInhoud = dock.get_contentContainer(); |
| dock.set_handle(dockInhoud); |
| if (Telerik.Web.UI.RadDock.prototype.oldDragStart == undefined) { |
| Telerik.Web.UI.RadDock.prototype.oldDragStart = Telerik.Web.UI.RadDock.prototype.onDragStart; |
| Telerik.Web.UI.RadDock.prototype.onDragStart = function(dragArgs) { |
| if (isRightClick(args.ownerEvent)) |
| return false; |
| else this.oldDragStart(dragArgs); |
| } |
| } |
| } |
| } |
| } |
| function DockDragStart(sender, EventArgs) { |
| showDockZones(true); |
| var contextmenu = $find("<%= ModuleContextMenu.ClientID %>"); |
| if (contextmenu != undefined) |
| contextmenu.hide(); |
| } |
| function DockDragEnd(sender, EventArgs) { |
| showDockZones(false); |
| } |