1. Home
  2. Forum
  3. React - EJ 2
  4. Is it possible to set the node border on select of the node

Is it possible to set the node border on select of the node

Hi,

We need to highlight the node on selection, can we add border on select and remove border on deselect of the node?

Thanks,
Sudhanshu

7 Replies
SG Shyam G Syncfusion Team December 23, 2019 05:09 AM UTC

Hi Sudhanshu, 

Please use the diagram click event to achieve your requirement. In the below sample, we have highlighted node on clicking the node and removed highlighter on clicking the diagram. 

Code example: 
  click={(args) => { 
          //check a condition for a node 
            if(args.element && args.element.shape && args.element.shape.type=== 'Flow' && !previousNode) { 
              args.element.style.strokeColor = 'red' 
              previousNode = args.element; 
            } //check a condition for diagram 
            else if(args.element.id === "diagram") {  
              previousNode.style.strokeColor = 'white'; 
              previousNode = null; 
            } 
        }}  



Regards, 
Shyam G 


SJ Sudhanshu Jain December 24, 2019 09:50 AM UTC

Hi Shyam,

We have used few images as nodes, could you please provide us the solution for image , as the solution provided is not working for type 'image'.

Thanks

AR Aravind Ravi Syncfusion Team December 30, 2019 04:28 AM UTC

Hi Sudhanshu, 
 
We have modified a sample in which we have highlighted the image node border in the click event. 
 
Here is the sample for your reference. 
 
 
Regards, 
Aravind Ravi 
 


SJ Sudhanshu Jain January 2, 2020 09:28 AM UTC

Hi Shyam,

onClick = (args: any) => {
    if(previousNode && (previousNode.id !== args.element.id ||
        args.element.id === 'diagramPanel') && previousNode.style) {
      previousNode.style.strokeColor = 'none';
      previousNode = {};
    }
    if(args.element && args.element.shape &&
        args.element.shape.type=== 'Image' && args.element.style) {
      args.element.style.strokeColor = '#8079EF';
      args.element.style.strokeWidth = 3;
      previousNode = args.element;
    }
  };

I have used above method to highlight the selected node.
When a new node is added, even though the above method is called in drop of diagram component & previousNode data strokecolor is changed within the same method, in UI previous node and the currently added node both will be highlighted. Could you please check and let me know why the previous node is not reset in canvas?

This issue is happening only when a new node is added when a previous existing node is selected already.

Thanks,
Sudhanshu


SG Shyam G Syncfusion Team January 3, 2020 10:15 AM UTC

Hi Sudhanshu, 

We have used collectionChange event and click event to achieve your requirement. When we drag a node from palette and drop it onto the diagram, the collectionChange event gets triggered and the click event triggers while selecting the node. Please refer to a code example and the sample below. 

Code example: 
click={(args) => { 
                    if (previousNode) { 
                      previousNode.style.strokeColor = 'black'; 
                    } 
                    //check a condition for a node 
                    if (args.element && args.element.shape) { 
                      args.element.style.strokeColor = 'red' 
                      previousNode = args.element; 
                    } //check a condition for diagram 
                    else if (args.element.id === "diagram" && previousNode) { 
                      previousNode.style.strokeColor = 'black'; 
                      previousNode = null; 
                    } 
                  }} 
     collectionChange={(args)=> {  
                      if(args.state === 'Changed') {   
                        if(previousNode) { 
                           previousNode.style.strokeColor = 'black'; 
                        } 
                        if (args.element && args.element.shape) { 
                        args.element.style.strokeColor = 'red' 
                        previousNode = args.element; 
                      }   
                      } 
                    }} 



Regards, 
Shyam G 


SJ Sudhanshu Jain January 6, 2020 03:46 AM UTC

Hi Shyam,

In the collection change argument there is no attribute to identify if node or the connector is highlighted. I can see the only difference in data is "cause" value. 
Could you please confirm how to indicate whether a node is highlighted or a connector?

Thanks

SG Shyam G Syncfusion Team January 6, 2020 05:52 AM UTC

Hi Sudhanshu, 

In the collectionChange change, we can determine the dropped element is a node or connector by checking the condition highlighted in the below code example. 

Code example: 
  collectionChange={(args) => { 
                    if (args.state === 'Changed') { 
                      if (previousNode) { 
                        previousNode.style.strokeColor = 'black'; 
                      } 
                      if (args.element && (args.element instanceof Node || args.element instanceof Connector)) { 
                        args.element.style.strokeColor = 'red' 
                        previousNode = args.element; 
                      } 
                    } 
                  }} 



Regards, 
Shyam G 


Loader.
Up arrow icon