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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to simulate a user selecting a node from Javascript?

Thread ID:

Created:

Updated:

Platform:

Replies:

150842 Jan 21,2020 08:02 PM UTC Jan 24,2020 09:49 AM UTC JavaScript - EJ 2 3
loading
Tags: Diagram
Jim Jacobs
Asked On January 21, 2020 08:02 PM UTC

Hi,

I'm using an automated tool to perform testing of our diagrams and am coding some Javascript within the tool.
I want to simulate the user clicking on a node which should cause the selectionChangeHandler event to fire.

I was hoping that diagram.addSelection(node1); would do the job, but it does not seem to work.

Here's my complete code:

var ports = [
{ name: "in", offset: { x: 0, y: 0.5 }, shape: "square", fillColor: "green" },
{ name: "out", offset: { x: 1, y: 0.5 }, shape: "square", fillColor: "green" }
];
var connectors = [{
name: "flow1",
sourceNode: "node1",
targetNode: "node2",
sourcePort: "out",
targetPort: "in"
}];
var addInfo = { NodeType: "Task", TaskType: "Task" };
var node1 = {
name: "node1", width: 120, height: 60,
offsetX: 100, offsetY: 100,
fillColor: "white", borderWidth: 1,
labels: [{ text: "Submit RFC" }],
addInfo: addInfo, ports: ports
};
var node2 = {
name: "node2", width: 120, height: 60,
offsetX: 325, offsetY: 100,
fillColor: "white", borderWidth: 1,
labels: [{ text: "Approve RFC" }],
addInfo: addInfo, ports: ports
};
var nodes = [node1, node2];

// Add nodes and connectors to the Diagram

diagram.add(nodes);
diagram.add(connectors);
diagram.clearSelection();
diagram.addSelection(node1);
diagram.nudge("down", 300);
console.log('diagram.model.selectedItems.children.length = ' + diagram.model.selectedItems.children.length);

The nodes and the connector are drawn correctly, but the nudge does not work and the selectedItems.children.length shows as zero!

Any suggestions for what I need to do to simulate a user selection in code?

Thanks

Jim




Shyam G [Syncfusion]
Replied On January 22, 2020 10:57 AM UTC

Hi Jim, 
 
When you add nodes and connectors at runtime and clear a selection using clearSelection method, the selectedItems children property will not contain any items. So, you need to get a node object using the method getNode, and pass it through the method addSelection as a parameter. 
 
Code example: 
function addSelection() { 
               var diagram = $("#diagram").ejDiagram("instance"); 
              . . . .  
               diagram.add(nodes); 
                diagram.add(connectors); 
               diagram.clearSelection(); 
            //find a node with name 
               var node = diagram.getNode("node1"); 
            //add selection 
               diagram.addSelection(node); 
                diagram.nudge("down", 300);  
      } 
 
 
 
Regards, 
Shyam G 


Jim Jacobs
Replied On January 22, 2020 03:52 PM UTC

Hi Shyam,

It's been a while since we chatted.
Glad to see you're still providing excellent support!

You're tip worked.  Thanks

I have another question.
Is there anyway to simulate (via JavaScript) a user dragging a shape form the palette and dropping it on the canvas?
And if so, will the drop and nodecollectionchange events be fired?

Thanks for any advice.

Jim



Shyam G [Syncfusion]
Replied On January 24, 2020 09:49 AM UTC

Hi Jim, 
Sorry for the delay. 
We don’t have any Javascript API to drag and drop the shapes from palette into the diagram. We can drag the shapes from the palette by mouse. 
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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon