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. Image for the cookie policy date

How to disable Ctrl + Wheel Mouse on diagram


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');
            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.



5 Replies

KR Kameshwaran R Syncfusion Team 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. 
            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 
            //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  

JJ Jim Jacobs 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:
                // Disable the Zoomable constraints after performing zoom
                $("#DiagramContent").ejDiagram({ constraints: ej.datavisualization.Diagram.DiagramConstraints.Default & ~ej.datavisualization.Diagram.DiagramConstraints.Zoomable });
                            scrollSettings: { horizontalOffset: 0, verticalOffset: 0 }

Any suggestions?

Thanks again.


KR Kameshwaran R Syncfusion Team 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.    
Kameshwaran R.   

CL Carlos Lopez 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

SG Shyam G Syncfusion Team 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. 

Shyam G 

Live Chat Icon For mobile
Up arrow icon