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.
Unfortunately, activation email could not send to your email. Please try again.

TypeScript Diagram - highlight a series of nodes

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 08:28 AM

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 


Gareth Brown
Replied On March 14, 2017 10:23 AM

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 02:13 AM

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 


Gareth Brown
Replied On March 16, 2017 07:30 AM

Yes, this is fantastic! Thank you!

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

Hi Gareth, 
  
Thanks for your compliment. 
  
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.

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.

;