Click here to Skip to main content
15,309,768 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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:

    <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">
        <ej-diagram id="diagram" e-height="700px" e-width="100%" e-nodeclick="onClick">

<div id="htmlTemplate" type="text/x-jsrender">
        <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>
        <input type="text" ng-model="Dynamic.ObjectCount" placeholder="number of objects" class="form-control"></input>         

<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",

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

//On click of node find the values
$scope.onClick  =   function(){

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900