How to prevent dragging when right clicking the a dockpanel

3 posts, 1 answers
  1. Huib
    Huib avatar
    3 posts
    Member since:
    Jan 2009

    Posted 30 Sep 2009 Link to this post

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

    Posted 01 Oct 2009 Link to this post

    Hi Huib,

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Huib
    Huib avatar
    3 posts
    Member since:
    Jan 2009

    Posted 09 Oct 2009 Link to this post

    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

                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);  
                }  
     


     
Back to Top