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 users can click on <submit> button after the click I would like to find all the NODES and values present in each of the HTML Elements of the NODES.
I am able to get the NODES but unable to find the values present in them.
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?
What I have tried:
<pre><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>
var drawingToolsList = [
{
id : "Html_Tool",
tooltiptext : "Html",
spriteCss : "icon-HTML toolBarIconStyle",
},
{
id : 'Connector_Tool',
tooltiptext : "Connector",
spriteCss : "icon-connector toolBarIconStyle",
}
];
$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 })
}
$scope.onClick = function(){
console.log("FJFJF");
}