Adding nodes programmatically using layers

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/



7 Replies

SG Shyam G Syncfusion Team 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. 
 
 
 
Regards, 
Shyam G 



RC raphael chancey 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}; 
    nodes.push(node);
    diagramInstance.layers[0].objects.push(node); 
    }


SG Shyam G Syncfusion Team 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])  
}  
 
 
 
Regards, 
Shyam G 



RC raphael chancey 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?



SG Shyam G Syncfusion Team 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. 
 
Regards, 
Shyam G 



RC raphael chancey 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 


SG Shyam G Syncfusion Team 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. 
  
  
Regards, 
Shyam G 


Loader.
Up arrow icon