Syncfusion and Angularjs: find all the HTML Elements values present in each of the HTML Nodes

Question

I am using the Syncfusion to create drag and drop fields. Each of the Dropped field (Node) is the HTML NODE and it has some of the HTML elements such as Select and input etc. After adding all the required nodes user can click on submit function after the click I would like to find all the nodes and values present in each of the HTML Elements of the nodes.

1. I am able to get the Nodes but unable to find the values present in them.
2. On the drag-and-drop of the element, I would like to add a different text to each of the node. How can I do that?

HTML:

<div>
    <div id="ToolbarItem" ej-toolbar e-datasource="drawingToolsList" e-fields-tooltiptext="tooltiptext"
         e-width="700px" e-height="33px" e-fields-id="id" e-fields-spritecssclass="spriteCss" e-click="onItemclick"
         style="background-color: #ebeced; border-bottom-color: #bbbbbb; border-top-style: none; border-left-style: none; border-right-style: none">
    </div>
    <div>
        <ej-diagram id="diagram" e-height="700px" e-width="100%" e-nodeclick="onClick">
        </ej-diagram>
    </div>
</div>

<div id="htmlTemplate" type="text/x-jsrender">
    <div>
        <select ng-model="Dynamic.optionValue" class="form-control">
            <option class="dropdown-item" value="" selected> Choose Options</option>
            <option class="dropdown-item" ng-repeat="option in options" value="{{ option.value }}"> {{ option.text }} </option>
        </select>
        <input type="text" ng-model="Dynamic.ObjectCount" placeholder="number of objects" class="form-control"></input>         
    </div>
</div>

<button id="AddNewField" ng-click="SubmitAllFields();" class="btn btn-success"> Submit </button>

Angularjs:

var drawingToolsList = [
    {
        id          :   "Html_Tool", 
        tooltiptext :   "Html",
        spriteCss   :   "icon-HTML toolBarIconStyle",
    },
    {
        id          :   'Connector_Tool',
        tooltiptext :   "Connector",
        spriteCss   :   "icon-connector toolBarIconStyle",
    }
];

//On item click drag and drop the elements to canvas
$scope.onItemclick  =   function(args){
    var option      =   args.currentTarget.id;
    switch (option) {
        case "Html_Tool":
            diagram.model.drawType  =   { type: "html", templateId: "htmlTemplate", textBlock:"Hello" };
            $scope.counts.push(counter);
            counter++;
            $scope.$apply()
            break;
        case "Connector_Tool":
            diagram.model.drawType  =   { type: "connector"};
            break;
    }
    var tool = diagram.tool();
    diagram.update({ tool: tool | ej.datavisualization.Diagram.Tool.DrawOnce })
}

//On click of node find the values
$scope.onClick  =   function(){
    console.log("FJFJF");
}

I am trying to follow the following link and execute:http://ngjq.syncfusion.com/#/diagram/drawingtools. I am using only the HTML element and I have removed all other elements.

The page would look something like this:

Answer 1

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

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;
    }
    
  }

Video demonstration: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Selection-Change-694740211

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

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

Sample: http://jsplayground.syncfusion.com/tawdhvwg