How to add a single node to the diagram area without any connections.

Question

same as above

Aravind Ravi · Accepted Answer

Hi Aditya,

We have created a sample to add node without connections by default and add node by using add method. To create a node, create a node object and add it to the diagram node’s collection. By using the node’s offsetX and offsetY property we can able to position the node in the diagram area. So based on your canvas you can render node and add it to the top and bottom of the page using offsetX and offsetY position.

public nodes: NodeModel[] = [

{

id: 'node1', offsetX: 100, offsetY: 100, annotations: [{ content: 'Node1'}], height: 100, width: 100

},

];

<ejs-diagram #diagram id="diagram" width="100%" height="645px" [snapSettings]='snapSettings' [nodes]='nodes' >

</ejs-diagram>

We suspect that you did not set the diagram instance in the ejs-diagram , so only diagram of undefined error occurs. To get the diagram instance in the sample, set the instance object in the ejs-diagram and assign that instance object to the viewchild. After that you can able to get the diagram instance and access the diagram properties and diagram public API methods in the sample. Please refer below code snippet for how to set diagram instance.

//html

<ejs-diagram #diagram id="diagram" width="100%" height="645px" [snapSettings]='snapSettings' [nodes]='nodes' >

</ejs-diagram>

//ts

//use the same object used in ejs-diagram. So that only diagram instance set, else it set as null.

@ViewChild('diagram')

public diagram: DiagramComponent;

We have attached a sample for your reference. Please find the sample in below link

Sample: https://stackblitz.com/edit/angular-srcbqt

Regards

Aravind Ravi

Aravind Ravi · Answer

Hi Aditya, 

By using the diagram add public API method, we can able to add node into diagram area without connections. Please refer below code snippet for how to add node at run time 





public created(args: Object): void { 
       let node: NodeModel = { 
        // Position of the node 
        offsetX: 250, 
        offsetY: 250, 
        // Size of the node 
        width: 100, 
        height: 100, 
        style: { 
            fill: '#6BA5D7', 
            strokeColor: 'white' 
        }, 
    }; 
        //Add Node 
        this.diagram.add(this.node); 
    } 

 For more information about how to use add nodes at run time, please refer to below UG documentation link 

UG link: https://ej2.syncfusion.com/angular/documentation/diagram/nodes/#addremove-node-at-runtime 

Regards 
Aravind Ravi

Srinivas Pulla · Answer

Thank you for sharing this.I want to have headers and footers on my diagram canvas too, so i was thinkinh if using some default nodes for them is there any way to add unconnected nodes by default in a diagram.

Srinivas Pulla · Answer

while trying to add nodes to a diagram i get an error saying : TypeError: Cannot read property 'add' of undefined.

@ViewChild("diagram")

public diagram: DiagramComponent;

public created() {

this.diagram.add(this.newnode);

}

I was referring this : https://ej2.syncfusion.com/angular/documentation/diagram/nodes/?_ga=2.138512563.1247588523.1599384642-642027537.1594898543#addremove-node-at-runtime