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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Adding nodes programmatically using layers

Thread ID:





149059 Nov 12,2019 11:31 PM UTC Nov 15,2019 06:30 AM UTC React - EJ 2 7
Tags: Diagram
raphael chancey
Asked On November 12, 2019 11:31 PM UTC

I am adding nodes programmatically using diagramInstance.add().. same with connections. All working fine. Thanks for your other answer to use the 'add' method.

I am now trying to enable different nodes in different layers.

I am using the layers array and setting them visible and not visible. I add the nodes to the diagram and to the layer.. and then set a layer to be false.

all nodes show.

I was thinking I need to not add nodes to the diagram directly rather add them to the nodes array and then show a layer.. but not sure.

can you share an example of programmatically adding nodes and connections, also to a layer, and then hiding a layer?

I think I must have the wrong combination of things/

Shyam G [Syncfusion]
Replied On November 13, 2019 12:28 PM UTC

Hi Raphael, 
We have created a sample to show how to create layers with objects initially, add a layer at runtime and show/hide the layers at runtime. Please refer to a sample and help documentation for more details. 
Shyam G 

raphael chancey
Replied On November 13, 2019 10:42 PM UTC

Thank you Shyam, for your reply and example. I can see how to set the layers visible and such.

Can you explain how to add nodes to an existing layer at runtime.?

I added a button to your example and I tried the below but it has no effect. I can of course add it to the diagram using add but then it won't hide when I set the layer invisible 
in fact when I add a node to the layer 'objects' and then I try to set invisible I get this error: undefined is not an object (evaluating 's.wrapper')

do I need remove and rebuild the layer each time? Interesting there is no mention in the API of adding objects to a layer at runtime.

Additionally it looks like I also need to add the connections to the layer for them to hide and show?

Appreciate any insight. Thank you. 

 drawNode() { 
    let node = {id: 'newNode', width:100, height: 100, offsetX: 200,offsetY: 200}; 

Shyam G [Syncfusion]
Replied On November 14, 2019 11:14 AM UTC

Hi Raphael, 
Please refer to an below code example in which we have shown how to add an object to an existing layer. 
Code example: 
function addLayer() { 
            var node = { 
            id: 'nodeData', offsetX: 400, offsetY: 0, height: 100, width: 100, 
        // add object to an existing layer 
          diagramInstance.addLayer(diagramInstance.layers[0], [node])  
Shyam G 

raphael chancey
Replied On November 14, 2019 05:02 PM UTC

Ok.. I see.. so rather than diagram.add and then adding to the object array this is a nice helper.. thank you. 

Well, the issue now is it is adding a new layer each time.. which makes sense since the function is called 'addLayer'

I am trying to add nodes to an existing layer.. and I was using layer.objects.push()..

what is the correct way to add nodes to an 'existing' layer at runtime?

Shyam G [Syncfusion]
Replied On November 15, 2019 12:44 AM UTC

Hi Raphael, 
We should use addLayer method to add a node into an existing layer at runtime. In the previous update, we have shared a code example in which we have added new node into an existing layer “layer1” at runtime. 
Shyam G 

raphael chancey
Replied On November 15, 2019 01:16 AM UTC

I understand.. for some reason it kept adding a new layer each time.. I ended up with 10k layers :-( 

I have removed layers for now.. maybe later I can come back to it 

Shyam G [Syncfusion]
Replied On November 15, 2019 06:30 AM UTC

Hi Raphael, 
Could you please share us more details such as exact scenario of an issue or modify the below sample. 
Shyam G 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon