1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Highlight - Parent and all children with same color

Highlight - Parent and all children with same color

Hi

I would like to know how to highlight Parent and children with same color when we click on Parent

below is the Sample i used

Input was JSON Sample Data with colors defined

Need : When i click on Node - General Manager i want General Manager and child nodes beneath that to be changed to same color - How is it possible ??

Also assuming there would be unclick event which can deselect selected node and children when clicked outside of any node


Below is the code attached of Index.Js

import { data } from './datasource.js';

var items = new ej.data.DataManager(data);

var diagram = new ej.diagrams.Diagram({
width: '1000px',
height: '600px',
dataSourceSettings: {
id: 'id',
parentId: 'manager',
dataManager: items,
doBinding: function (node, data) {
// You will get the employee information in data argument and bind that value directly to node's built-in properties.
node.annotations = [{ content: data.role }];
node.style = { fill: data.color };
},
},
layout: {
type: 'OrganizationalChart',
getLayoutInfo: function (node, options) {
// you can get the children belongs to the parent node and decide the assistants from that children.
if (node.data.role === 'General Manager') {
options.assistants.push(options.children[2]);
options.children.splice(2, 1);
}
},
},
getNodeDefaults: nodeDefaults,
getConnectorDefaults: connectorDefaults,
// hide the gridlines in the diagram
snapSettings: { constraints: ej.diagrams.SnapConstraints.None },
});
diagram.appendTo('#diagram');

function nodeDefaults(node) {
node.annotations[0].style.color = 'white';
node.width = 120;
node.expandIcon = { shape: 'Minus' };
node.collapseIcon = { shape: 'Plus' };
return node;
}

function connectorDefaults(connector) {
connector.type = 'Orthogonal';
connector.targetDecorator = { shape: 'None' };
return connector;
}



3 Replies
SS Sivakumar Sekar Syncfusion Team November 23, 2021 01:41 PM UTC

Hi Babu, 

Please find the response for your quires in the below table 

When i click on Node - General Manager i want General Manager and child nodes beneath that to be changed to same color - How is it possible ?? 
When we select any nodes in the diagram, through the diagram selectedItems we can get the selected node. By using the node’s inEdges and outEdges property we can able to find the connectors connected to a particular node. In the node’s inEdges and outEdges property we can get the connector’s ID.  Through node’s outEdges property we can find what are the connectors going out from nodes. After getting the ID by using the diagram getObject method, we can able to get the connector.  

After getting the connector from node outEdges & inEdges property, we can able to find the child and parent nodes of the selected node through connector targetID & sourceID property. In the connector targetID property we can get the child node id, after getting the child node id, through the diagram getObject method get the child node. Similarly using the connector sourceID we can get the parent node id.  Please refer to the below code snippet.  
public NodeReachable(): void { 
    if (this.diagram.selectedItems.nodes.length) { 
      let connectors: string[] = (this.diagram.selectedItems.nodes[0] as Node) 
        .outEdges; 
      let connectorList: string[] = this.foundConnectors(connectors, []); 
      for (let i: number = 0; i < connectorList.length; i++) { 
        let connector: ConnectorModel = this.diagram.getObject( 
          connectorList[i] 
        ); 
        let node: NodeModel = this.diagram.getObject(connector.targetID); 
        node.backgroundColor = this.diagram.selectedItems.nodes[0].backgroundColor; 
        this.diagram.dataBind(); 
      } 
    } 
  } 
 
Also assuming there would be unclick event which can deselect selected node and children when clicked outside of any node 
In the diagram, when the selection is changed or removed the selectionChange event will get triggered. We can able to find whether the selection is changed or removed by checking its type. 
public selectionChange(args: ISelectionChangeEventArgs): void { 
    if(args.type === "Addition" && args.state === "Changed") 
    { 
      this.NodeReachable(); 
      this.diagram.doLayout(); 
    }  
    else if(args.type === "Removal" && args.state === "Changed") 
    { 
      alert("Selection Removed"); 
    } 
  } 


Regards, 
Sivakumar      


BM Babu Movva November 23, 2021 02:37 PM UTC

Hi QQ

I had all the index.js file shared here - QQ where is that i need to add this public method  

public NodeReachable()

Can you direct me exactly where this method needs to be put in my sample - Does this goes in 


SS Sivakumar Sekar Syncfusion Team November 24, 2021 02:10 PM UTC

Hi Badu, 

We have created a sample in Javascript. We can able to change the color of the selected items and their child nodes using the selection change event(which will be triggered when selecting an object in the diagram). Please refer to the below code snippet to be added to your index.js file. 

var diagram = new ej.diagrams.Diagram({ 
  width: '1000px', 
  height: '600px', selectionChange: selectionChange, 
….. 

function selectionChange(args) { 
        if(args.type === "Addition" && args.state === "Changed")  
        {  
          NodeReachable();  
          diagram.doLayout();  
        }   
        else if(args.type === "Removal" && args.state === "Changed")  
        {  
          // Triggered when the selection is removed 
          alert("Selection Removed");  
        }  
    } 
    function NodeReachable() {  
        if (diagram.selectedItems.nodes.length) {  
          let connectors= (diagram.selectedItems.nodes[0]).outEdges;  
          let connectorList = foundConnectors(connectors, []);  
          for (let i = 0; i < connectorList.length; i++) {  
            let connector = diagram.getObject(  
              connectorList[i]  
            );  
            let node = diagram.getObject(connector.targetID);  
            node.backgroundColor = diagram.selectedItems.nodes[0].backgroundColor;  
            diagram.dataBind();  
          }  
        }  
      }  
      function foundConnectors(list, nodeList) { 
        for (let i = 0; i < list.length; i++) { 
          let connector = diagram.nameTable[list[i]]; 
          if (nodeList.indexOf(connector.id) > -1) { 
            break; 
          } 
     
          if (diagram.nameTable[connector.targetID].outEdges.length) { 
            if (list.indexOf(connector.targetID) === -1) { 
              foundConnectors( 
                diagram.nameTable[connector.targetID].outEdges, 
                nodeList 
              ); 
            } 
          } 
          nodeList.push(connector.id); 
        } 
        return nodeList; 
      } 


Regards, 
Sivakumar   


Loader.
Up arrow icon