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

TypeScript Diagram - highlight a series of nodes

Thread ID:





129334 Mar 13,2017 08:48 PM UTC Mar 17,2017 05:04 AM UTC JavaScript 5
Tags: ejDiagram
Gareth Brown
Asked On March 13, 2017 08:48 PM UTC

Is it possible to individually select items rather box them together? It's important I show the individual nodes are highlighted.

Attachment: 20170313_20_46_37Clipboard_a689e415.zip

Shyam G [Syncfusion]
Replied On March 14, 2017 12:28 PM UTC

Hi Gareth, 

Could you please confirm us whether your requirement is “When we multiselect the several objects, some objects needs to be highlighted and some doesn’t” as shown in the below screenshot. If yes, we can achieve it in the application level or else please tell us what action do you need to perform after selecting the individual object. So that we can analyse and provide a better solution. 


Shyam G 

Gareth Brown
Replied On March 14, 2017 02:23 PM UTC

As per the diagram you provided - Yes, that would be a good enough solution. I want to show a route through a diagram, by programmatically selecting nodes.

Shyam G [Syncfusion]
Replied On March 15, 2017 06:13 AM UTC

Hi Gareth, 

Please use selectionChange event to achieve your requirement. Please refer to the code example and JSPlayground link below. 

Code example: 
                    //define selectionChange event 
   function selectionchange(args) {              
            if (args && args.element && args.state === "changed" && args.elementType === "pseudoGroup") { 
                var diagram = $("#diagram").ejDiagram("instance"); 
                //get the selected nodes 
                var nodes = diagram.model.selectedItems.children; 
                for (i = 0; i < nodes.length; i++) { 
                    var node = nodes[i]; 
                    //update borderColor for node 
                    diagram.updateNode(node.name, { borderColor: "red" }); 

In the above sample, when you ctrl+mouseclick on the node(For pseudoGroup elements), the node’s borderColor is highlighted with red Color.  

Shyam G 

Gareth Brown
Replied On March 16, 2017 11:30 AM UTC

Yes, this is fantastic! Thank you!

Shyam G [Syncfusion]
Replied On March 17, 2017 05:04 AM UTC

Hi Gareth, 
Thanks for your compliment. 
Shyam G 


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