Button to Add Node to Diagram

[dsoftware]

Trying to add a button to index.cshtml that will add a node to my diagram. 

I have a SyncFusion Button which doesn't seem to be reaching my "addReport()" function at all. 

A regular HTML button is correctly calling my JS function but my diagram is not being updated.

I have also tried adding diagram.layout() as I saw somewhere that that will update the diagram but that just throws and exception about not being a valid function.

@{
    ViewBag.Title = "Diagram";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!--dependency scripts-->
<script src="http://borismoore.github.io/jsrender/jsrender.min.js"></script>
    <!—define html element-->
<script id="htmlTemplate" type="text/x-jsrender">
    <div style="text-align: center">
        <input type="button" value="Button"/>
    </div>
</script>
<h2>Diagram Features:</h2>
<br />
<li> Diagram Samples - Symbol Palette</li>
<li> Gridlines and Snapping</li>
<li> Theme - Flat-Azure</li>
<li>@Html.EJ().Button("Report").Size(ButtonSize.Large).ShowRoundedCorner(true).ClientSideEvents(e => e.Click("addReport()")).Text("Add Report")</li>
<li>
    <button type="button" class="btn btn-primary" onclick="addReport();">Add Report</button>
</li>
<br />
<div id="ControlRegion">
    <div>
        <table>
            <tr>
                <td>
                    @Html.EJ().SymbolPalette("SymbolPalette", ViewData["SymbolPaletteModel"] as Syncfusion.JavaScript.DataVisualization.Models.SymbolPaletteProperties)
                </td>
                <td>
                    @Html.EJ().Diagram("Diagram", ViewData["DiagramModel"] as Syncfusion.JavaScript.DataVisualization.Models.DiagramProperties)
                </td>
            </tr>
        </table>
    </div>
</div>

<script type="text/javascript">
    function addReport() {
        alert("Hello world!");
        // Defines JSON to create a node
        var node = {
            name: "node1",
            width: 100,
            height: 100,

            //Sets position
            offsetX: 250,
            offsetY: 250,
            fillColor: "darkcyan",
            borderWidth: 2
        };

        var diagram = $("#diagram").ejDiagram("instance");

        // Adds node to the Diagram
        diagram.add(node);
        diagram.layout();
    }
</script>

Attachment: MVC_AddButton_8cb389b1.zip

[Aravind Ravi]

Hi Dsoftware, 

We have created a sample to add node at run time through Syncfusion button click. To trigger a click event for the Syncfusion button use the client side click events. When you click a button event click gets triggered and in that event add a new node to the diagram through diagram public API method add. The newly added node ID should not be as same as previously rendered node id. The node and connector ID in the diagram should be unique and do not use same Id for two nodes. Get the diagram instance through diagram Id. If you refer other Id means then diagram instance does not get and cannot able to access the diagram methods and properties. Please refer the below code example and sample below 

@Html.EJ().Button("add").Size(ButtonSize.Large).ShowRoundedCorner(true).Text("Add Report").ClientSideEvents(e=>e.Click("click")) 

<script> 

    function click() { 

    var node = { 

              name: "newNode", 

              width: 100, 

              height: 100, 

              //Sets position 

              offsetX: 550, 

              offsetY: 100, 

              fillColor: "red", 

              borderWidth: 2 

}; 

//Here Diagramcontent is an Id of the diagram control. 

var diagram = $("#DiagramContent").ejDiagram("instance"); 

// Adds node to the Diagram 

diagram.add(node); 

    } 

We have attached a video demonstration that when add node through button, it gets added properly. Please find the video in below link 

Video: https://www.syncfusion.com/downloads/support/forum/156261/ze/Add-Node-568526352 

Sample: https://www.syncfusion.com/downloads/support/forum/156261/ze/Nodes-123745686 

Regards 

Aravind Ravi 

[dsoftware]

Thank you very much!  This worked perfectly once I update my Diagram Id.

[Aravind Ravi]

Hi Dsoftware, 

  

Most Welcome. 

  

Regards 

Aravind Ravi