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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Get All nodes - attach windows to node - bind collections

Thread ID:

Created:

Updated:

Platform:

Replies:

149052 Nov 12,2019 06:15 PM UTC Nov 18,2019 11:17 AM UTC JavaScript - EJ 2 3
loading
Tags: Diagram
Bjork
Asked On November 12, 2019 06:16 PM UTC

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.



Shyam G [Syncfusion]
Replied On 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 


Bjork
Replied On 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!

Shyam G [Syncfusion]
Replied On 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 


CONFIRMATION

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