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
WEBINAR  Visualize Customer Survey Reports Using Our React 3D Circular Charts Control —Thursday, May 02, 10:00 A.M. ET REGISTER NOW
close icon
  1. Home
  2. Forum
  3. jQuery
  4. ejDiagram - UserHandle typescript event click

ejDiagram - UserHandle typescript event click

Hi!

i try to work userHandle with typescript. 

Now, i have button rigth bottom, but i can't set event button click.

Code:


//var CloneTool = (function (base) {
        //    ej.datavisualization.Diagram.extend(base);

            
        //    // Initializes the tool
        //    function CloneTool(name) {
        //        base.call(this, name);
        //    }
        //    // Defines the required events
        //    CloneTool.prototype.mouseup = function (evt) {
        //        debugger;
        //        //clones the selected elements when the custom handle is clicked.
        //        this.diagram.copy();
        //        //Pastes the cloned elements.
        //        this.diagram.paste();
        //        base.prototype.mouseup.call(this, evt);
        //    };
        //    return CloneTool;
        //})(ej.datavisualization.Diagram.Tool.SingleSelect);

        
        var userHandle = ej.datavisualization.Diagram.UserHandle({
            name: "settings",
            position: ej.datavisualization.Diagram.UserHandlePositions.BottomRight,
            visible: true,
            size: 20,
           // tool: new CloneTool(userHandle.name), <-- Don't work
            pathData: "M267.92,119.461c-0.425-3.778-4.83-6.617-8.639-6.617    c-12.315,0-23.243-7.231-27.826-18.414c-4.682-11.454-1.663-24.812,7.515-33.231c2.889-2.641,3.24-7.062,0.817-10.133    c-6.303-8.004-13.467-15.234-21.289-21.5c-3.063-2.458-7.557-2.116-10.213,0.825c-8.01,8.871-22.398,12.168-33.516,7.529    c-11.57-4.867-18.866-16.591-18.152-29.176c0.235-3.953-2.654-7.39-6.595-7.849c-10.038-1.161-20.164-1.197-30.232-0.08    c-3.896,0.43-6.785,3.786-6.654,7.689c0.438,12.461-6.946,23.98-18.401,28.672c-10.985,4.487-25.272,1.218-33.266-7.574    c-2.642-2.896-7.063-3.252-10.141-0.853c-8.054,6.319-15.379,13.555-21.74,21.493c-2.481,3.086-2.116,7.559,0.802,10.214    c9.353,8.47,12.373,21.944,7.514,33.53c-4.639,11.046-16.109,18.165-29.24,18.165c-4.261-0.137-7.296,2.723-7.762,6.597    c-1.182,10.096-1.196,20.383-0.058,30.561c0.422,3.794,4.961,6.608,8.812,6.608c11.702-0.299,22.937,6.946,27.65,18.415    c4.698,11.454,1.678,24.804-7.514,33.23c-2.875,2.641-3.24,7.055-0.817,10.126c6.244,7.953,13.409,15.19,21.259,21.508    c3.079,2.481,7.559,2.131,10.228-0.81c8.04-8.893,22.427-12.184,33.501-7.536c11.599,4.852,18.895,16.575,18.181,29.167    c-0.233,3.955,2.67,7.398,6.595,7.85c5.135,0.599,10.301,0.898,15.481,0.898c4.917,0,9.835-0.27,14.752-0.817    c3.897-0.43,6.784-3.786,6.653-7.696c-0.451-12.454,6.946-23.973,18.386-28.657c11.059-4.517,25.286-1.211,33.281,7.572    c2.657,2.89,7.047,3.239,10.142,0.848c8.039-6.304,15.349-13.534,21.74-21.494c2.48-3.079,2.13-7.559-0.803-10.213    c-9.353-8.47-12.388-21.946-7.529-33.524c4.568-10.899,15.612-18.217,27.491-18.217l1.662,0.043    c3.853,0.313,7.398-2.655,7.865-6.588C269.044,139.917,269.058,129.639,267.92,119.461z M134.595,179.491    c-24.718,0-44.824-20.106-44.824-44.824c0-24.717,20.106-44.824,44.824-44.824c24.717,0,44.823,20.107,44.823,44.824    C179.418,159.385,159.312,179.491,134.595,179.491z"
           
        });

        this.diagram = new ej.datavisualization.Diagram(this.containers.diagramContainer, {
            height: "85vh",
            width: "100%",
            drop: this.onDrop,
            sizeChange: this.onSizeChange,
            nodes: this.nodesJson,
            enableContextMenu: false,
            tool: ej.datavisualization.Diagram.Tool.SingleSelect,
            selectedItems: {
                userHandles: [userHandle]
            }

        });



please, can you post me a example? i try it : http://help.syncfusion.com/js/diagram/interaction#user-handles  but ej.datavisualization.Diagram.ToolBase don't exist in typescript...

any idea?

Thanks!!

3 Replies
SG Shyam G Syncfusion Team May 10, 2016 12:21 PM UTC

Hi David, 

We considered this “Typescript support for user handle” as an feature request and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates. 
 

Regards, 
Shyam G 


MM Matthew Meehan replied to David April 26, 2017 09:54 PM UTC

Hi!

i try to work userHandle with typescript. 

Now, i have button rigth bottom, but i can't set event button click.

Code:


//var CloneTool = (function (base) {
        //    ej.datavisualization.Diagram.extend(base);

            
        //    // Initializes the tool
        //    function CloneTool(name) {
        //        base.call(this, name);
        //    }
        //    // Defines the required events
        //    CloneTool.prototype.mouseup = function (evt) {
        //        debugger;
        //        //clones the selected elements when the custom handle is clicked.
        //        this.diagram.copy();
        //        //Pastes the cloned elements.
        //        this.diagram.paste();
        //        base.prototype.mouseup.call(this, evt);
        //    };
        //    return CloneTool;
        //})(ej.datavisualization.Diagram.Tool.SingleSelect);

        
        var userHandle = ej.datavisualization.Diagram.UserHandle({
            name: "settings",
            position: ej.datavisualization.Diagram.UserHandlePositions.BottomRight,
            visible: true,
            size: 20,
           // tool: new CloneTool(userHandle.name), <-- Don't work
            pathData: "M267.92,119.461c-0.425-3.778-4.83-6.617-8.639-6.617    c-12.315,0-23.243-7.231-27.826-18.414c-4.682-11.454-1.663-24.812,7.515-33.231c2.889-2.641,3.24-7.062,0.817-10.133    c-6.303-8.004-13.467-15.234-21.289-21.5c-3.063-2.458-7.557-2.116-10.213,0.825c-8.01,8.871-22.398,12.168-33.516,7.529    c-11.57-4.867-18.866-16.591-18.152-29.176c0.235-3.953-2.654-7.39-6.595-7.849c-10.038-1.161-20.164-1.197-30.232-0.08    c-3.896,0.43-6.785,3.786-6.654,7.689c0.438,12.461-6.946,23.98-18.401,28.672c-10.985,4.487-25.272,1.218-33.266-7.574    c-2.642-2.896-7.063-3.252-10.141-0.853c-8.054,6.319-15.379,13.555-21.74,21.493c-2.481,3.086-2.116,7.559,0.802,10.214    c9.353,8.47,12.373,21.944,7.514,33.53c-4.639,11.046-16.109,18.165-29.24,18.165c-4.261-0.137-7.296,2.723-7.762,6.597    c-1.182,10.096-1.196,20.383-0.058,30.561c0.422,3.794,4.961,6.608,8.812,6.608c11.702-0.299,22.937,6.946,27.65,18.415    c4.698,11.454,1.678,24.804-7.514,33.23c-2.875,2.641-3.24,7.055-0.817,10.126c6.244,7.953,13.409,15.19,21.259,21.508    c3.079,2.481,7.559,2.131,10.228-0.81c8.04-8.893,22.427-12.184,33.501-7.536c11.599,4.852,18.895,16.575,18.181,29.167    c-0.233,3.955,2.67,7.398,6.595,7.85c5.135,0.599,10.301,0.898,15.481,0.898c4.917,0,9.835-0.27,14.752-0.817    c3.897-0.43,6.784-3.786,6.653-7.696c-0.451-12.454,6.946-23.973,18.386-28.657c11.059-4.517,25.286-1.211,33.281,7.572    c2.657,2.89,7.047,3.239,10.142,0.848c8.039-6.304,15.349-13.534,21.74-21.494c2.48-3.079,2.13-7.559-0.803-10.213    c-9.353-8.47-12.388-21.946-7.529-33.524c4.568-10.899,15.612-18.217,27.491-18.217l1.662,0.043    c3.853,0.313,7.398-2.655,7.865-6.588C269.044,139.917,269.058,129.639,267.92,119.461z M134.595,179.491    c-24.718,0-44.824-20.106-44.824-44.824c0-24.717,20.106-44.824,44.824-44.824c24.717,0,44.823,20.107,44.823,44.824    C179.418,159.385,159.312,179.491,134.595,179.491z"
           
        });

        this.diagram = new ej.datavisualization.Diagram(this.containers.diagramContainer, {
            height: "85vh",
            width: "100%",
            drop: this.onDrop,
            sizeChange: this.onSizeChange,
            nodes: this.nodesJson,
            enableContextMenu: false,
            tool: ej.datavisualization.Diagram.Tool.SingleSelect,
            selectedItems: {
                userHandles: [userHandle]
            }

        });



please, can you post me a example? i try it : http://help.syncfusion.com/js/diagram/interaction#user-handles  but ej.datavisualization.Diagram.ToolBase don't exist in typescript...

any idea?

Thanks!!

this might help if anyone else searches for userHandles and typescript.
ej.datavisualization.Diagram.ToolBase does exist under ej.web.all.min.js, just that the ts @types definition doesn't reveal it, so if you can produce an output it will likely work



SG Shyam G Syncfusion Team April 28, 2017 11:58 AM UTC

Hi Matthew Meehan, 
 
We considered this “Userhandles not working in typescript” as an issue and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates. 
 
                                                                                                                                     
Regards, 
Shyam G 


Loader.
Live Chat Icon For mobile
Up arrow icon