Can some help me with the Addition of HTML elements within the Shapes using Syncfusion ej-angular using the Angularjs

Question

I am trying to follow the official documentation of Syncfusion AngularJs and trying to create the Nodes which will have HTML Elements such as Button, Textbox, etc embedded within them but for some reason, I am unable to get the output as they have mentioned in the documentation. I tried to search a lot but there are no relevant post hence asking the same.

Official Documentation Link: https://help.syncfusion.com/angularjs/diagram/shapes#html

One thing that is bugging me is this line. I am not sure why they have this in HTML and after that they are creating the DIV:

I would really appreciate if someone can help me how can I create the nodes within that I can add HTML elements of my choice.

DOCTYPE html>
<html ng-app="defaultApp">
    <head>
        <link rel="icon" rel='nofollow' href="images/logo.jpg">
        <title>Draw Shapes with HTMLtitle>
        <link rel="stylesheet" rel='nofollow' href="http://cdn.syncfusion.com/14.3.0.49/js/web/bootstrap-theme/ej.web.all.min.css" />
        <script src="https://code.jquery.com/jquery-3.0.0.min.js">script>
        <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js" type="text/javascript">script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js">script>
        <script src="https://code.angularjs.org/1.4.0-rc.2/angular.min.js">script>
        <script src="http://cdn.syncfusion.com/14.3.0.49/js/web/ej.web.all.min.js" type="text/javascript">script>
        <script src="http://js.syncfusion.com/demos/web/scripts/xljsondata.js" type="text/javascript">script>
        <script src="https://code.angularjs.org/1.4.0-rc.2/angular-route.min.js">script>
        <script src="http://cdn.syncfusion.com/14.3.0.49/js/common/ej.widget.angular.min.js">script>
        <script src="http://borismoore.github.io/jsrender/jsrender.min.js">script>
        
        <script src="./js/draw.js">script>
            
    head>
    
    <body ng-controller="diagramCtrl">
        
        <button class="btn btn-info">Addbutton>

 <body>

html>

My DRAW.js file:

var syncApp = angular.module("defaultApp", ["ngRoute", "ejangular"]);

var diagram = ej.datavisualization.Diagram;

//Creates a html node
var nodes = [{
    name: "htmlNode",
    offsetX: 100,
    offsetY: 100,
    width: 100,
    height: 50,
    type: ej.datavisualization.Diagram.Shapes.Html,
    templateId: "htmlTemplate",
    value: "Button"
}];

syncApp.controller('diagramCtrl', function($scope) {
    //Sets nodes collection to Diagram model.
    $scope.nodes = nodes;
});

Also, how can I set the Source point Nodes and target point Nodes for the Connectors dynamically. So user can create the nodes and connect the nodes usin the connectrs after the connection how can I find the source and destination nodes?

Aravind Ravi · Accepted Answer

Hi AB,

Please find the response for queries in below table

how can I create the nodes within that I can add HTML elements

By using the node shape property we can able to add different shapes in diagram. To create a HTML node, you need to set the type of node as “html”. In addition, you need to set the id of HTML template to the templateId property of node. The following code illustrates how an Html node is created.

var nodes = [{

// Unique name for the node

name: "Start",

// Position of the node

offsetX: 300,

offsetY: 50,

// Size of the node

width: 140,

height: 50,

// Shape for the node

type: ej.datavisualization.Diagram.Shapes.Html,

//Sets id of html template

templateId: "htmlTemplate",

},

And in the angular module, set the nodes and in ej-diagram bind the nodes.

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

angular.module('syncApp', ['ejangular'])

.controller('diagramCtrl', function ($scope) {

$scope.nodes = nodes;

});

Also, how can I set the Source point Nodes and target point Nodes for the Connectors dynamically. So user can create the nodes and connect the nodes using the connectrs after the connection how can I find the source and destination nodes?

Connectors are objects used to create link between two points, nodes or ports to represent the relationships between them. The SourceNode and targetNode properties allow to define the nodes to be connected. On button click ,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. 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. Please refer the below code snippet

document.getElementById('add').onclick = function() {

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

var connectors = {

// Unique name for the connector

name: "connector1",

// Source and Target node's name to which connector needs to be connected.

sourceNode: "Start",

targetNode: "Init",

// An empty orthogonal segment

segments: [{

type: "orthogonal"

}]

};

diagram.add(connectors);

}

We have prepared a sample to show node with HTML node, for one node we have set htmlTemplate as Button and for other node we have set HTML content as Text box.

Please find the sample in below link

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

Regards

Aravind Ravi