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
  1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Get All nodes - attach windows to node - bind collections

Get All nodes - attach windows to node - bind collections

Please move it to Javascript - EJ 1

1) I'm trying to get all nodes, to change a property for each one of them, and I've just found the findNode method. Does a getAllNodes exist?
2) Is there a way to keep the tooltip always prompt? or add a custom_window with a addInfo.myCustomData? I want it to be visible all the time next to de node like the tooltip does.
3) How do you fill in the html with a collection like {{:addInfo.MyCustomCollection[*].mycustomproperty}}, I want to fill in all the data that I have in my collection. 

If there is a documentation, please refer me to it.

Thanks.



3 Replies
SG Shyam G Syncfusion Team November 14, 2019 07:12 AM UTC

Hi Stheve Bjork, 
 
Query 
Response 
 I'm trying to get all nodes, to change a property for each one of them, and I've just found the findNode method. Does a getAllNodes exist? 
Please use diagram updateNode method to update the node appearance at runtime. Please refer to a code example and sample below. 
 
Code example: 
function updateNodes() {  
            // get diagram instance 
         var diagram = $("#diagram").ejDiagram("instance"); 
            //get nodes collection 
         var nodes = diagram.model.nodes; 
        if(nodes.length > 0) { 
             // iterate a nodes 
          for(var i=0; i <nodes.length; i++) {  
             var node = nodes[i];  
                 //update node properties 
            diagram.updateNode(node.name, {fillColor: "red"}); 
          } 
        } 
      } 
 
 
 
 Is there a way to keep the tooltip always prompt? or add a custom_window with a addInfo.myCustomData? I want it to be visible all the time next to de node like the tooltip does. 
The tooltip will be shown when you hover on a diagram elements If you need to show a custom data in a custom window, in a click event of the sample below, we used the dialog box to display custom information. 
 
Code example: 
click: function (args){  
                      document.getElementById("nodetext").value= args.element.addInfo.MyCustomProperty[0].data; 
                       var dialogObj = $("#dialog").data("ejDialog") 
                       dialogObj.open();  
                    },  
 
 
 How do you fill in the html with a collection like {{:addInfo.MyCustomCollection[*].mycustomproperty}}, I want to fill in all the data that I have in my collection.  
Please refer to a code example in which we have bind the HTML node custom collection data to the HTML content. 
 
Code example: 
<script id="htmlTemplate" type="text/x-jsrender"> 
                <div style="margin-left: 32px; margin-top: 18px"> 
                                <input type="button" value="{{:addInfo.MyCustomProperty[0].data}}" />  
                </div> 
</script> 
 
var nodes = 
            [ 
              { 
                name: "htmlNode", offsetX: 100, offsetY: 100, 
                                                                width: 120, height: 60, 
                addInfo: {"MyCustomProperty": [{ "data": "startNode"}]},  
                                                                //Sets type as Html 
                                                                type: ej.datavisualization.Diagram.Shapes.Html, 
                 
                                                                //Sets id of html template 
                                                                templateId: "htmlTemplate", 
                                                                value: "Button" 
              }, 
] 
 
 
 
Regards, 
Shyam G 


BJ Bjork November 15, 2019 02:11 PM UTC

I managed to make it work. But...

As a reference for you, I'm using the diagram builder that come with the javascript demos Syncfusion\JavaScript\17.3.0.14\samples\web\dashboard\diagrambuilder.

About the example you share with me https://jsplayground.syncfusion.com/rc10kuil , take a look at how weird the mouse click behave. If you click out of a node, the selection is turn-on and then it became odd. 

In the Syncfusion\JavaScript\17.3.0.14\samples\web\dashboard\diagrambuilder if I do this, also the label edition turn weird, just after you dragged and dropped the node you can write the label, but if you don't, good luck you can do it again. And sometimes after click the node keeps attached to the point.


Thanks!

SG Shyam G Syncfusion Team November 18, 2019 11:17 AM UTC

Hi Stheve Bjork,  
 
We have resolved your issue in the below sample. Please find the modified code example and sample below. 
 
Modified code example: 
  click: function (args){  
                      if(args.element&& args.element.addInfo) 
                      { 
                      document.getElementById("nodetext").value= args.element.addInfo.MyCustomProperty[0].data; 
                       var dialogObj = $("#dialog").data("ejDialog") 
                       dialogObj.open();  
                      } 
                    }, 
 
 
 
Regards, 
Shyam G 


Loader.
Up arrow icon