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

Mousewheel Zooming without pressing CTRL

Hi,

i'd like to zoom in / out by using the mouse wheel
without the need to press CTRL or any other control key.
Is there any option to do this?

Regards
Manuel

3 Replies

SG Shyam G Syncfusion Team February 4, 2020 12:52 PM UTC

Hi Manuel, 
 
We should bind the onmousewheel event for the diagram parent div element to perform zooming by using the mousewheel without pressing ctrl key. Please refer to a code example below. 
 
Code example: 
  
<div style="width:1000px;height:1000px"  @onmousewheel="@Mousewheel">      
 
<EjsDiagram @ref="@diagram" Width="100%" Height="100%" Nodes="NodeCollection" Connectors="ConnectorCollection"> </EjsDiagram>  
</div> 
 
public void Mousewheel(WheelEventArgs args)
    {
        if(args.DeltaY < 1)
        {
 
//zoom in the diagram
            diagram.ZoomTo(new ZoomOptions() { Type = ZoomTypes.ZoomIn });
        }
        else
        {
 
//zoom out the diagram
            diagram.ZoomTo(new ZoomOptions() { Type = ZoomTypes.ZoomOut });
        }
    }
 
 
 
 
Regards, 
Shyam G 



MA Manuel February 5, 2020 10:11 AM UTC

Thank you very much, this works. :)


SG Shyam G Syncfusion Team February 6, 2020 03:44 AM UTC

Hi Manuel, 
Thanks for your update. 
Regards, 
Shyam G 


Loader.
Live Chat Icon For mobile
Up arrow icon