1. Home
  2. Forum
  3. AngularJS
  4. How to read all the NODES present within the ejDiagram and all the HTML Elements values present in each of the HTML Nodes

How to read all the NODES present within the ejDiagram and all the HTML Elements values present in each of the HTML Nodes

Hello,

First of all thanks a lot for replying to my previous post and providing a detailed explanation. 

After a lot of searching, I found this useful link and I am trying to make a project something like this: http://ngjq.syncfusion.com/#/diagram/drawingtools. I have removed all the other shapes provided in the link and just using the Shape with the HTML element.

Now user can drag and drop the Shapes with HTML elements in it. He can add as many as he wants and then click on the submit button. After that, I would like to know how many HTML element NODES he has added and I would like to read the values provided in the HTML SELECT and HTML INPUT field. I am able to find the nodes but I am not finding any values in that. Can you please tell me how to find the values present within EACH NODE that has been added. 

After trying a lot I am finding out that for some reason the NG-MODEL is not being applied to the elements within the DIV id="htmlTemplate". But the elements outside the DIV id="htmlTemplate" is working fine. so my guess is Angularjs is working fine but for some reason with syncfusion its failing to read the ng-model values.
Please help me how to resolve this issue:
Posted my complete code here: https://jsfiddle.net/B_AV_B/j6b5tfgw/1/

Please Please help me to resolve the issue.

Also, here I am adding the CONNECTOR between the NODES. I want to know how can I find the SOURCE POINT and DESTINATION POINT of a CONNECTOR once it has been added. I am trying to fire the following function but in that I don't get any info e.connectionChange="connectionChange"

I am struck here from the last 2 days and it is an important part of my project without it I am unable to proceed further. Any help would be really appreciated. Just to reduce your effort maybe you don't need to spend time in creating the sample code. You can just guide I will do from my side. Thanks a lot in advance. Thanks in advance.

8 Replies 1 reply marked as answer
AB AB July 27, 2020 10:26 AM UTC

After trying a lot I was able to get some of the things correct but still unable to get the values from the Tamplate. Please help:

I would like to find how many HTML elements are present within the Each NODE after the SUBMIT and also find the values for each of the HTML element.


AR Aravind Ravi Syncfusion Team July 27, 2020 11:03 AM UTC

Hi AB, 

Please find the response for the queries in below table 

 I am able to find the nodes but I am not finding any values in that. Can you please tell me how to find the values present within EACH NODE that has been added. 
By default, in the node , we only bind the node property values. We cannot bind the HTML content values used in the node. However, by using the node addInfo property you can store the text values. The addInfo property is used to store the additional or custom information of node. After edit the text box and click outside the text box, selectionChange event for the diagram gets fired. In that event get the value of the text box and bind it to the selected node addInfo property.  Please refer the below code example 

<ej-diagram id="diagram" e-height="600px" e-width="100%"  e-nodes="nodes" e-selectionChange="selectionChange" e-connectorTargetChange="connectorTargetChange" e-connectorSourceChange="connectorSourceChange"></ej-diagram> 


function selectionChange(args) { 
        
        if(args.state === 'changing' && args.changeType === 'remove') { 
         node =  args.oldItems[0]; 
        } else if (args.state === 'changed' && args.changeType === 'remove') { 
          debugger 
          node.addInfo = document.getElementById("text").value; 
        } 
         
      } 


After add the values in addInfo , you can get the values  of the template through node addInfo property. 

Note: AddInfo property of node is an object type, you can assign whether array , string , number or any other object type to the node addInfo property 

After trying a lot I am finding out that for some reason the NG-MODEL is not being applied to the elements within the DIV id="htmlTemplate". But the elements outside the DIV id="htmlTemplate" is working fine. so my guess is Angularjs is working fine but for some reason with syncfusion its failing to read the ng-model values. 
On analyzing the provided code snippet you have set the htmlTemplate as a div element. If we set other than script element means htmlTemplate for the node do not gets visible. If you want to set htmlTemplate for node means then set inside script element. So that only htmlTemplate for node gets visible. We have used your HTML content inside script to show htmlTemplate for node. 

<script id="htmlTemplate" type="text/x-jsrender">                        
//Html Template                            
</script> 

 

Also, here I am adding the CONNECTOR between the NODES. I want to know how can I find the SOURCE POINT and DESTINATION POINT of a CONNECTOR once it has been added. I am trying to fire the following function but in that I don't get any info e.connectionChange="connectionChange" 
When you change the source or target point of the connector, connectorSourceChange and connectorTargetChange event gets fired. By using that args element we can find in which node connector gets connected. Through sourceNode and targetNode property of element we can find in which node connector gets connected. 

function connectorSourceChange(args) { 
        if(args.dragState === "completed" && args.element.sourceNode !== null) { 
console.log(args.element.sourceNode) 
        } 
      } 
       
      function connectorTargetChange(args) { 
        if(args.dragState === "completed" && args.element.targetNode !== null) { 
          console.log(args.element.targetNode); 

        } 
      } 



We have prepared a sample for your requirement. Please find the sample in below link 


Regards 
Aravind Ravi 


AB AB July 27, 2020 07:45 PM UTC

Hi Aravind,

Thanks a lot for the detailed explanation. I really appreciate you took the time to understand the issue and provide the resolution.
Sorry for bugging you again but I am a bit confused about the function selectionChange(args) part.

I tried to replicate what you have provided me and it seems to work when I have only ONE NODE when I add another HTML NODE and populate some values then the second node would also store the value from FIRST NODE.

Also after adding all the required NODES to the diagram and updating the ADDINFO field when I submit then I am reading all the NODE from DIAGRAM then in that DIAGRAM I am trying to find the diagram._nodes there the field ADDINFO fields for all the NODES are {}. Since we updated ADDINFO field in function selectionChange(args) so should'nt the values for diagram._nodes  be updated?

If in case I am unable to explain to you the issue then I would be happy to provide some more information.

A little bit of modified code I have posted here: https://jsfiddle.net/B_AV_B/j6b5tfgw/5/

Here is what I was hoping to achieve as per your explanation:
When I add the NODE and fill the information then all the filled information for particular NODE would be populated in ADDINFO. This ADDINFO would be binded to forever unless we delete it so when I access it using the diagram._nodes then also the fields for corresponding NODES should be filled with value that is provided for particular NODE. 

Here is the screenshot of the same:



Also, one more small thing: 
I am assigning my own name to each NODE that is being created for ex: NODE1, NODE2 etc but for some reason when I see in the CONSOLE then I see that some new characters have been automatically appended to the NODE NAME: "Node1LUwp" or "Node2hkIu". Is there a way I can retain the name that I am assigning to the NODE? same for CONNECTOR as well.

AR Aravind Ravi Syncfusion Team July 28, 2020 06:16 AM UTC

Hi AB, 
 
We have created a sample to store HTML values of the node in the addInfo property. In the sample create a new counter variable. In the drawing tools, set this counter value with “text” to the node value property. On every HTML node render, htmlTemplate scripts gets called. In htmlTemplate we can able to access the node value property. In the template set Id for the text element as the node value. So for every node, text element gets rendered based on node value. Please refer below code example 
 
var count = 0;  
document.getElementById('addNode').onclick = function() { 
         ++count; 
          var diagram = $("#diagram").ejDiagram("instance"); 
         diagram.model.drawType = { type: "html", templateId: "htmlTemplate",  
value:"text" + Number(count) }; 
          var tool = diagram.tool(); 
          diagram.update({ tool: tool | ej.datavisualization.Diagram.Tool.DrawOnce }) 
       } 
 
<script id="htmlTemplate" type="text/x-jsrender"> 
            <div> 
        <select ng-model="Dynamic.optionValue" class="form-control"> 
            <option class="dropdown-item" value="Option 1" selected> Choose Options</option> 
            <option class="dropdown-item" ng-repeat="option in options" value="Option 2"> Option 2 </option> 
        </select> 
        <input type="text" id="{{:value}}" placeholder="number of objects"></input>          
    </div> 
</script> 
 
After text gets edited and click outside node, selectionChange events gets triggered. In that event gets the text element through node value property and assign the text value to the node addInfo property. So in every node addInfo value , text element value associated with that node has been stored. 
 
function selectionChange(args) { 
        if(args.state === 'changing' && args.changeType === 'remove') { 
         node =  args.oldItems[0]; 
        } else if (args.state === 'changed' && args.changeType === 'remove') { 
          debugger 
          node.addInfo = document.getElementById(node.value).value; 
        } 
      } 
 
document.getElementById('values').onclick = function() { 
          var diagram = $("#diagram").ejDiagram("instance"); 
         for (var i = 0 ; i < diagram.model.nodes.length ; i++) { 
           console.log("Node AddInfo: -> " + diagram.model.nodes[i].addInfo); 
         } 
       } 
 
We have attached a sample for your reference. Please find the sample in below link 
 
 
Please find the below video demonstration of how to store the values in node addInfo values. 
 
 
Regards 
Aravind R 
 


AB AB July 29, 2020 10:06 AM UTC

Hello Aravind,

Thanks a lot for the clear explanation. I was able to understand how you are trying to tackle this issue. I still have a few doubts with regards to the same:

1. How can I get the SELECT field value when they are different? Since I am assigning the VALUE for the NODE I can use only for the TEXT field if I want to use for SELECT then should I tried something like this: value:{text:"text"+Number(count),select:"select"+Number(count)}.
If there are 10 fields then I need to assign different values for all 10 fields so wanted some confirmation.

2. Every time I make an update/change any HTML fields then I should click on the DIAGRAM, right? is there any alternative approach where I can store as soon as they make the change something similar to NG-CHANGE or ONBLUR? Because I don't think user would be happy to click every time on DIAGRAM when they make a change.

3. I am assigning my own name to each NODE that is being created for ex: NODE1, NODE2 etc but for some reason when I see in the CONSOLE then I see that some new characters have been automatically appended to the NODE NAME: "Node1LUwp" or "Node2hkIu". Is there a way I can retain the name that I am assigning to the NODE? same for CONNECTOR as well.

4. Is there any way I can use the ng-template instead of the x-jsrender? Because I would like to populate the SELECT drop-down in each of the NODE with values from DB. If I am using x-jsrender then I am unable to achieve it for some reason. If I am using the ng-template then I am not understanding how to assign the ID or NG-MODEL value for the fields within the NODE? Can you please help me with this issue? Here is the code:

This init function with $scope.businessSteps will hold the values which needs to be populated into the select drop down:
      $scope.init = function () {
$http({
url: "/populateFields",
method: "GET"
}).success(function(response) {
$scope.businessSteps = response.businessStep;
businessSteps = $scope.businessSteps;

}).error(function(error) {
console.log(error);
});
}


//Call the function on click of the diagram
function selectionChange(args) {
console.log("SELECTION CHANGE");
if(args.state === 'changing' && args.changeType === 'remove')
{
node =  args.oldItems[0];
}
else if (args.state === 'changed' && args.changeType === 'remove')
{
node.addInfo.value = document.getElementById(node.value.text).value;
var OptionsField = document.getElementById(node.value.select);
var OptionValue = OptionsField.options[OptionsField.selectedIndex].value;
node.addInfo.BusinessStep = OptionValue;
}
}


If I use ng-model then I get the error while reading the values from the corresponding fields within function selectionChange(args)


AR Aravind Ravi Syncfusion Team July 29, 2020 10:09 AM UTC

Hi AB, 
 
Please find the response for queries in below table 
 
 How can I get the SELECT field value when they are different? Since I am assigning the VALUE for the NODE I can use only for the TEXT field if I want to use for SELECT then should I tried something like this: value:{text:"text"+Number(count),select:"select"+Number(count)}. 
If there are 10 fields then I need to assign different values for all 10 fields so wanted some confirmation. 
 
In the value property we can able to set an array of string values. In that value field set an Id for the HTML content and bind it in the HTML select and text box Id field. Please refer below code snippet 
 
<script id="htmlTemplate" type="text/x-jsrender"> 
            <div> 
        <select ng-model="Dynamic.optionValue" class="form-control" id={{:value[1]}}> 
            <option class="dropdown-item" value="Option 1" selected> Choose Options</option> 
            <option class="dropdown-item" ng-repeat="option in options" value="Option 2"> Option 2 </option> 
        </select> 
        <input type="text" id="{{:value[0]}}" placeholder="number of objects" onblur="change()"></input>          
    </div> 
</script> 
 
diagram.model.drawType = { type: "html", templateId: "htmlTemplate", value: ["text" + Number(count), "select" + Number(count)] }; 
 
 
Every time I make an update/change any HTML fields then I should click on the DIAGRAM, right? is there any alternative approach where I can store as soon as they make the change something similar to NG-CHANGE orONBLUR? Because I don't think user would be happy to click every time on DIAGRAM when they make a change. 
Yes, you can use the text box onchange or onBlur event instead of selection change event. After the value gets changed in the text box and out of text box OnBlur event gets triggered. In that event get the diagram selected items through diagram selectionList. After get the selected node , now set the text box value to the node addInfo value. 
 
function change() { 
        var diagram = $("#diagram").ejDiagram("instance"); 
        var node = diagram.selectionList[0]; 
         var text = document.getElementById(node.value).value; 
         node.addInfo = text; 
       } 
 
 
 
 
I am assigning my own name to each NODE that is being created for ex: NODE1, NODE2 etc but for some reason when I see in the CONSOLE then I see that some new characters have been automatically appended to the NODE NAME: "Node1LUwp" or "Node2hkIu". Is there a way I can retain the name that I am assigning to the NODE? same for CONNECTOR as well. 
By default, in the diagram , when we drag and drop a node from symbol palette to diagram or draw a node through drawing tools, we have add randomId at last of the node name. Because in the diagram id of the diagram elements should be unique. If we set name for the drawing tools object and draw that object more than in diagram means then object which draw at last only gets displayed in the diagram if we set same name. So to overcome this only we have added a randomId at last of the node name.  
 
Regards 
Aravind Ravi 


Marked as answer
AB AB July 29, 2020 12:43 PM UTC

Hello Aravind Ravi,

Thanks a lot for the explanation. Since I am using this for the first time I have a lot of doubts hence I am needing some clarification. I am really sorry for that.
Thanks a lot for being patient and answering all the questions.

AR Aravind Ravi Syncfusion Team July 30, 2020 04:07 AM UTC

Hi AB, 
 
Most Welcome.  
 
Regards 
Aravind Ravi 


Loader.
Up arrow icon