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

TypeScript Diagram - highlight a series of nodes

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

5 Replies

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

Screenshot: 
 

Regards, 
Shyam G 



GB Gareth Brown 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.


SG Shyam G Syncfusion Team 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: 
    $("#diagram").ejDiagram({ 
                    //define selectionChange event 
                    selectionChange:selectionchange, 
  
                }); 
   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.  

Regards, 
Shyam G 



GB Gareth Brown March 16, 2017 11:30 AM UTC

Yes, this is fantastic! Thank you!


SG Shyam G Syncfusion Team March 17, 2017 05:04 AM UTC

Hi Gareth, 
  
Thanks for your compliment. 
  
Regards, 
Shyam G 


Loader.
Live Chat Icon For mobile
Up arrow icon