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
close icon

How to simulate a user selecting a node from Javascript?


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.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?



3 Replies

SG Shyam G Syncfusion Team 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"); 
              . . . .  
            //find a node with name 
               var node = diagram.getNode("node1"); 
            //add selection 
                diagram.nudge("down", 300);  
Shyam G 

JJ Jim Jacobs 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.


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

Live Chat Icon For mobile
Up arrow icon