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

TypeScript - Stop diagram context menu from opening involuntarily

I have a TypeScript click event attached to a diagram which opens up a property dialog. However I've noticed the context menu on the diagram opens up, if the mouse pointer remains to hover over the node. Can I disable this from happening? This causes further when clicking on node connections, and if breaks the node links on either end. Maybe the focus is doing unintended things with diagram.

this.theDiagram =
    new ej.datavisualization.Diagram($("#diagram"), {
        pageSettings: {
            // Sets page size
            pageHeight: 1000,
            pageWidth: 600,
            // Customizes the appearance of page
            pageBorderWidth: 0,
            pageBackgroundColor: "transparent",
            pageBorderColor: "lightgray",
            pageMargin: 0,
            showPageBreak: false,
            multiplePage: false,
            pageOrientation: ej.datavisualization.Diagram.PageOrientations.Landscape,
            scrollLimit: ej.datavisualization.Diagram.ScrollLimit.Infinite
        enableContextMenu: true,
        scrollSettings: {
            horizontalOffset: 0,
            verticalOffset: 0
        nodes: [],
        connectors: [],
        click: (args) => { this.clickDiagram(args); }

public clickDiagram(clickEvent: ej.datavisualization.Diagram.ClickEventArgs): void {
    let nodedata: NodeData = clickEvent.element.class as NodeData;
    // open dialog

Attachment: Diagram_Dialog_Problems_52b78e2f.zip

3 Replies

SG Shyam G Syncfusion Team February 17, 2017 08:59 AM UTC

Hi Gareth, 

When we long click the left mouse button, the taphold event raises and the context menu appears. This is a default behaviour. So please unbind the taphold event to resolve your reported issue. please refer to the code example and sample below. 

Code example: 
Var  obj = $("#diagram_contextMenu").ejMenu("instance"); 
//unbind the taphold event to acheive your requirement. 
obj._off($("#diagram_canvas"), "taphold"); 

Note: In the code $("#diagram_contextMenu")”, diagram is an control ID. 

Shyam G 

GB Gareth Brown February 17, 2017 10:43 AM UTC

Thanks, that works as expected now.

SG Shyam G Syncfusion Team February 20, 2017 03:56 AM UTC

Hi Gareth, 
We are happy to hear that your problem is resolved. 
Shyam G 

Live Chat Icon For mobile
Up arrow icon