Add new Node to ComplexHierarchicalTree

Question

Hi, im trying to add a new node when the user clicks a Button. All the info will be a local data, so I can't use CRUD options.

What i'm trying is add a new object of my JSON file in the onClick method

      this.myJsonData = {...this.myJsonData,25:{
          "Name": "NEWNode",        
          "ReportingPerson": [
            "node11"
          ],
          "fillColor": "#e7704c",
          "border": "#c15433"}
    }

After this I call my data['doBinding'] to add this new JSON to my data

      this.data['doBinding'] = (nodeModel: NodeModel, data: DataInfo, diagram: Diagram) => {
        nodeModel.shape= { type: 'Text', content: data['Name'] };
        nodeModel.style = {color: 'red'}
    }

After this i just call to:

this.diagram.dataBind();

But it doesnt work

I attached the Angular project,

Thank you

Brandon

Attachment: flowchartzip_1fb15abd.zip

Aravind Ravi · Answer

Hi Brandon 
 
We have created a sample to add a new node in the layout using a button click. When you want to add a new node in the layout you don’t need to push the object in the data source. Add a new node and new connector with sourceID as in which node you need to node and targetID as newly added node Id. After adding a new node and connector in the diagram, call doLayout() method. So that new node gets added in layout and layout rearranges.  Please find below code snippet for how to add new node in layout 
 




let node: NodeModel = { height: 50, width: 50, style: { fill: 'red', strokeColor: 'white', strokeWidth: 1} }; 
    this.diagram.add(node); 
    let id: string = "node11"; 
 
    let connector: ConnectorModel = { 
      sourceID: id, 
      targetID: this.diagram.nodes[this.diagram.nodes.length - 1].id 
    }; 
    this.diagram.add(connector); 
    this.diagram.doLayout(); 
  
Sample: https://stackblitz.com/edit/angular-grae8t?file=app.component.ts 
 
Regards 
Aravind Ravi