We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to disable Ctrl + Wheel Mouse on diagram

Thread ID:

Created:

Updated:

Platform:

Replies:

126943 Oct 17,2016 06:35 PM UTC Feb 10,2017 12:12 PM UTC JavaScript 5
loading
Tags: ejDiagram
Jim Jacobs
Asked On October 17, 2016 06:35 PM UTC

Hi,

Ctrl + Wheel Mouse causes the diagram to zoom in/out.
I want to disable this and only allow the user to use the toolbar buttons that control this.

I have tried the following:

$(document).ready(function () {
    var divDiagram = $('div[id$=divDiagram]');
    divDiagram.bind('mousewheel wheel', function (e) {
        if (ctrlKeyPressed === 'yes') {
            console.log('In wheel event handler - Ctrl key pressed');
            e.preventDefault();
            return false; // Have tried true as well as commenting this statement out altogether
        }
    });
});

The diagram control is embedded within a div (divDiagram).

I do see the message above in the console, so I know I'm getting into this function, but the diagram continues to zoom.

Any suggestions on how to disable Ctrl + Wheel Mouse.

Thanks

Jim


Kameshwaran R [Syncfusion]
Replied On October 18, 2016 09:30 AM UTC

Hi Jim, 
 
To prevent the zooming, the diagram you can disable the Zoomable constraints from diagram model. Please use the following code snippet to disable the zooming. 
 
        $("#diagram").ejDiagram({ 
            nodes: nodes, 
            constraints: ej.datavisualization.Diagram.DiagramConstraints.Default & ~ej.datavisualization.Diagram.DiagramConstraints.Zoomable, 
        }); 
 
You can enable this constraint when you zoom the diagram using button. Please use the following code snippet to achieve your requirement. 
 
        function zoomDiagram(evt) { 
             // . . . 
  
 
            //Enable the Zoomable constraints 
            $("#diagram").ejDiagram({ constraints: ej.datavisualization.Diagram.DiagramConstraints.Default | ej.datavisualization.Diagram.DiagramConstraints.Zoomable }); 
            //Perform the zoom action 
            diagram.zoomTo(zoom1); 
            //Disable the Zoomable constraints 
            $("#diagram").ejDiagram({ constraints: ej.datavisualization.Diagram.DiagramConstraints.Default & ~ej.datavisualization.Diagram.DiagramConstraints.Zoomable }); 
  
            // . . . 
        } 
 
Please find the below Playground link: http://jsplayground.syncfusion.com/njdwu3b3  


Jim Jacobs
Replied On October 18, 2016 11:08 PM UTC

Hi Kamesh,

This was perfect and a much better solution that what I was attempting to implement.

Just one more question.
After I zoom, I'd like to set the scroll position to 0,0.
I've tried the following, but it does not work:
...
                diagram.zoomTo(zoom1);
                // Disable the Zoomable constraints after performing zoom
                $("#DiagramContent").ejDiagram({ constraints: ej.datavisualization.Diagram.DiagramConstraints.Default & ~ej.datavisualization.Diagram.DiagramConstraints.Zoomable });
                      $("#DiagramContent")
                        .ejDiagram({
                            scrollSettings: { horizontalOffset: 0, verticalOffset: 0 }
                        });
                }

Any suggestions?

Thanks again.

Jim

Kameshwaran R [Syncfusion]
Replied On October 19, 2016 05:58 AM UTC

Hi Jim,  
    
A support incident has been created under your account to track the status of the reported query. Please log on to our support website to check for further updates.    
    
Regards,    
Kameshwaran R.   


Carlos Lopez
Replied On February 9, 2017 05:37 PM UTC

When I try to incorporate this into a AngularJs sample I get diagram.zoomTo is not a function on line 48 of the example. Any suggestions? Or could you point me to the documentation on diagram /ejvisualization documentation ? Thanks

Shyam G [Syncfusion]
Replied On February 10, 2017 12:12 PM UTC

Hi Carlos, 

We have created a sample in AngularJS and checked the zoomTo method at our end. We are unable to reproduce the reported issue at our end. Could you please provide us more details such as console error in browser or modify the below sample. 


Regards, 
Shyam G 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;