1. Home
  2. Forum
  3. Angular - EJ 2
  4. Diagram - events

Diagram - events

I want to create an Org like structure below with diagram by using drag and drop (the options will be rectangle and circle)  from palette
And have a connector.

The first one "START" is shown always by default (can i make it non editable?)
I can have up to 2 rectangles under START or can have 1 or none - I want to open a modal when a rectangle is dropped on the screen to fill some info.
then connector is added , 
which event can i use to show modal?
which event will i know when the START and Level 1 are connected ?

Please provide an example with as many events are for shapes drag and drop
and for connector events
I will be creating a JSON from this diagram
And when i get a JSON, i should be able to render the same

Thanks for the help



28 Replies
AR Aravind Ravi Syncfusion Team October 9, 2020 07:31 AM UTC

Hi Vin, 

Please find the response for queries in below table 

The first one "START" is shown always by default (can i make it non editable?) 
Yes, by using the NodeConstraints we can able to make the node as non-Editable. Remove the Delete, Drag, Rotate, Resize constraints from the node constraints. To make the annotation as non-editable. Set the annotation constraints as ReadOnly. Please refer to the below code snippet 

{ 
        id: 'node1', width: 100, height: 100, offsetX: 300, offsetY: 300,  
        annotations: [{ constraints: AnnotationConstraints.ReadOnly, content: 'Node' }], 
        constraints: NodeConstraints.Default & ~(NodeConstraints.Delete | NodeConstraints.Drag | NodeConstraints.Resize | NodeConstraints.Rotate) 

    }, 
  


I can have up to 2 rectangles under START or can have 1 or none - I want to open a modal when a rectangle is dropped on the screen to fill some info. 
then connector is added ,  
which event can i use to show modal? 
When we drag and drop the node from palette to diagram, drop event gets triggered. In that event you can add some info for rectangle. We have prepared a KB for Add annotation to the diagram objects while dragging it from palette onto the diagram. Please find the KB in below link 

which event will i know when the START and Level 1 are connected ? 
When we change the connection for the connector, connectionChange event gets triggered.  
Please provide an example with as many events are for shapes drag and drop 
and for connector events 
We have prepared a sample in our live demos for events. Please find the sample in below link 

I will be creating a JSON from this diagram 
And when i get a JSON, i should be able to render the same 
By using the diagram SaveDiagram and LoadDiagram method we can able to save and load the diagram from JSON. The saveDiagram method is used to serialize the diagram as string. This string can be converted to JSON data and stored in the database for future purpose. Please refer below code snippet  
  
let save: string = this.diagram.saveDiagram();  
  
Diagram is loaded from this serialized string data by using the loadDiagram public method.   
  
this.diagram.loadDiagram(save);  
  
We have already prepared a sample for how to save and load the diagram in our live demos. Please find the sample in below link  
  
  
For more information about save and load, please refer to below UG documentation link  
  


Regards 
Aravind Ravi 


VI vin October 12, 2020 02:42 AM UTC

Thanks for the detailed info
One more Q
If i drag a NEW rectangle element ON existing rectangle element like for ex Project
Can i know where the NEW element/node is dropped on which  existing element/node?

I want to create a connector relationship based on which element/node they dropped on. 
I don't want to give the connector option in palette.


When i drag and drop over each other node,  How do i position/align  them one below other using connector?
If i DONT drop on other element/node is there a way to know, so i can stop it with warning msg?

How to get what shape is dropped?

Can we have a Rectangle and Square in palette?

AR Aravind Ravi Syncfusion Team October 12, 2020 10:14 AM UTC

Hi Vin, 

We have created a sample for your requirement. To perform the drag and drop of nodes in the diagram, enable the AllowDrop constraints to the nodes. At the time of every node render in palette get node defaults call back method gets trigger. In the getNodeDefaults method set node constraints as AllowDrop. So, for every node constraint is set as AllowDrop. Please refer to below code example for how to set node constraints in the node defaults method. 

public getSymbolDefaults(symbol: NodeModel): void { 
    symbol.constraints = NodeConstraints.Default | NodeConstraints.AllowDrop; 
  } 

By using drop event we can drag and drop a certain node to a different parent which establish the parent-child relationship between them. When we drag the node and mouse hover on another node highlighter shows. After the node gets dropped drop event gets trigger. In that event get the dropped node from element arguments and node below dropped node from target arguments. So now create a new connection between the dropped node and below node.  If node does not drop on other node means then in args.target and args.element come same dropped node. So by using that you can check whether node is dropped on node or not. By using the args.element.shape we can find what type of shape gets dropped into diagram. 
 Please refer to below code snippet 

public drop(args: IDropEventArgs) { 
    if (args.element instanceof Node && this.diagram.nodes.length > 0) { 
      if (args.element.id !== (args.target as NodeModel).id) { 
        args.cancel = true; 
        //Argument element is used to get the dropped node. 
        let node: NodeModel = args.element; 

        let newNode: NodeModel = { 
          id: "node" + randomId(), 
          offsetX: args.element.offsetX, 
          offsetY: args.element.offsetY + 100, 
          shape: args.element.shape, 
          height: 75, 
          width: 75 
        }; 
        this.diagram.add(newNode); 

        let connector: ConnectorModel = { 
          id: "connector" + randomId(), 
          sourceID: (args.target as NodeModel).id, 
          targetID: newNode.id, 
        }; 
        this.diagram.add(connector); 
      } else { 
        alert("Node does not dropped on other node!!!!"); 
      } 
    } 
  } 

We have attached a sample for your reference. Please find the sample in below link 


Regards 
Aravind Ravi 


VI vin October 13, 2020 03:04 AM UTC

I am trying to set a default node on init, the node is NOT showing up on diagram

What is the difference between Node and NodeModel
Not able to compare like this
    if (args.element.id !== (args.target as NodeModel).id) 

ngOnInit() {
     
    let newNode: NodeModel = {
      id: "node" + randomId(),
      offsetX: 300,
      offsetY: 160,
      shape: { type: 'Basic', shape: 'Rectangle' },
      height: 75,
      width: 75,
      constraints: NodeConstraints.Default | NodeConstraints.AllowDrop | NodeConstraints.Delete
    };



WHat is the equivalent of this HTML in typescript code when created programatically

 <e-nodes>

                        <e-node id='Project' [height]=60 [offsetX]=300 [offsetY]=160 [shape]='process'>
                            <e-node-annotations>
                                <e-node-annotation content='Project Name'>
                                e-node-annotation>
                            e-node-annotations>
                        e-node>

                    e-nodes>
    this.diagram.add(newNode);
   

  }

AR Aravind Ravi Syncfusion Team October 13, 2020 08:33 AM UTC

Hi Vin, 

By using the created event you can add node at runtime. By default, in the diagram, after diagram gets created, diagram created event gets triggered. In that event you can add nodes to the diagram, by using the add public API method.  Please refer to the below code snippet 

//TS 
public created(): void { 
    let node: NodeModel =  
      { 
        // Position of the node 
        offsetX: 100, 
        offsetY: 100, 
        // Size of the node 
        width: 100, 
        height: 100, 
        style: { 
            fill: '#6BA5D7', 
            strokeColor: 'white' 
        }, 
        annotations: [ 
          { 
            content: 'Project Name' 
          } 
        ] 
    }; 
    this.diagram.add(node); 
  } 

//HTML 

<ejs-diagram #diagram id="diagram" width="100%" height="700px" [snapSettings]='snapSettings' (created)="created($event)" (drop)="drop($event)"> 
                    
                </ejs-diagram> 
  

Regards 
Aravind Ravi 


VI vin October 14, 2020 02:31 AM UTC

Sometimes i am getting 2 connectors when i add shape from palette!!

  let conn: ConnectorModel =
    {
      id: 'connector' + Math.random(), type: 'Straight',
      sourceID: parent.id, targetID: child.id
    };
    this.connectorsAdded.push(conn);
    this.diagram.connectors = this.connectorsAdded;


    if (child instanceof Node) {
      let oWidth: number = child.width;
      let oHeight: number = child.height;
      let ratio: number = 100 / child.width;
      child.width = 100;
      child.height *= ratio;
      child.offsetX += parent.offsetX + 10;
      child.offsetY += parent.offsetY + 20;
      child.style = { fill: '#357BD2', strokeColor: 'white' };
      this.objectFromPalette = child.id;
    }


AR Aravind Ravi Syncfusion Team October 14, 2020 12:14 PM UTC

Hi Vin, 
 
We are unable to reproduce the reported issue at our end. When we drag and drop a node from palette to diagram, in our provided sample, if we dropped a node on another node only connector gets added.  
 
 
So please share us an video demonstration of issue and modify the above sample illustrating issue. This would help us to serve you better. 
 
Regards 
Aravind Ravi 


VI vin October 16, 2020 01:36 AM UTC

After i drop on another node, i am opening a dialog with option to put name.
I am not able to update the name in the NodeModel 
nameValue is from input 

 let obj: NodeModel = this.diagram.getObject(this.objectFromPalette);
   
    obj.annotations =  [
      {
        content: this.nameValue
      }
    ]



AR Aravind Ravi Syncfusion Team October 16, 2020 05:17 AM UTC

Hi Vin, 

We have created a sample to add label for the dropped node. When we drag and drop a node from palette to diagram , drop event gets triggered. In that event add a new node to place in different offset and create connection between new node and node under it. For newly added created node set empty annotations for it and in the objectFromPalette set this new node Id. So that you can able to change the annotation content. Please refer to the below code snippet and sample 

public drop(args: IDropEventArgs) { 
    if (args.element instanceof Node && this.diagram.nodes.length > 0) { 
      if (args.element.id !== (args.target as NodeModel).id) { 
        args.cancel = true; 
        //Argument element is used to get the dropped node. 
        let node: NodeModel = args.element; 

        let newNode: NodeModel = { 
          id: "node" + randomId(), 
          offsetX: args.element.offsetX, 
          offsetY: args.element.offsetY + 100, 
          shape: args.element.shape, 
          height: 75, 
          width: 75, 
          constraints: NodeConstraints.Default | NodeConstraints.AllowDrop, 
          annotations: [{}] 
        }; 
        this.diagram.add(newNode); 

        let connector: ConnectorModel = { 
          id: "connector" + randomId(), 
          sourceID: (args.target as NodeModel).id, 
          targetID: newNode.id 
        }; 
        this.diagram.add(connector); 
        this.objectFromPalette = newNode.id; 
        this.promptDialog.show(); 
        //open a dialog box 
        this.dialogOpen(); 
      } else { 
        alert("Node does not dropped on other node!!!!"); 
      } 
    } 
  } 


Regards 
Aravind Ravi 


VI vin October 18, 2020 03:28 AM UTC

How to restrict editing the text when i doubleclick the node?
I tried using Readonly constraint, but i stll can edit
constraints: NodeConstraints.Default & ~(NodeConstraints.Delete | NodeConstraints.Drag | NodeConstraints.Resize | AnnotationConstraints.ReadOnly) ,



NG Naganathan Ganesh Babu Syncfusion Team October 19, 2020 10:43 AM UTC

Hi Vin, 
 
We suggest you to use annotation constraints property to set enable/disable the label editing for a node. please use below our online UG documentation link. 
 
Online UG Documentation link: 
 
Regards, 
 
Naganathan K G 


VI vin October 21, 2020 01:39 AM UTC

1st Q Is there a way to Auto arrange the node with proper spacing when i drop/add node?
2nd Q when i click a node, i want to show  context menu with Add/Delete node. Will i know which node i clicked/selected?

Any sample?

AR Aravind Ravi Syncfusion Team October 21, 2020 08:42 AM UTC

Hi Vin, 
 
Please find the response for queries in below table 
 
s there a way to Auto arrange the node with proper spacing when i drop/add node? 
We have already prepared a KB  for How to automatically arrange nodes without overlapping in Angular Diagram. So you can refer this KB and arrange the nodes automatically in diagram. 
 
when i click a node, i want to show  context menu with Add/Delete node. Will i know which node i clicked/selected? 
When you click on the node, click event gets triggered. In that event by using the args.element you can find in which node you have clicked.  
 
By using the diagram context menu you can able to include context menu for the diagram.  
 
For more information about how to use context menu in the diagram, please refer to the below UG documentation link 
 
 
We have prepared a sample for the context menu. Please find the sample in below link 
 
 
Regards 
Aravind Ravi 


VI vin October 22, 2020 03:07 AM UTC

I am not able to hide /show some menu items

<ejs-diagram #diagram id="diagram" width="100%" height="700px" (contextMenuClick)='contextMenuClick($event)'  
                (contextMenuOpen)="contextMenuOpen($event)"
                [contextMenuSettings]="contextmenu" [snapSettings]='snapSettings' (click)="nodeClick($event)"
                (created)="created($event)" (drop)="drop($event)">
                  
                </ejs-diagram>


public contextmenu: any = {
    show: true, items: [{
      text: 'Epic', id: 'Epic', target: '.e-diagramcontent', iconCss: 'e-copy'
    },
    {
      text: 'Feature', id: 'Feature', target: '.e-diagramcontent', iconCss: 'e-copy'
    },
    {
      text: 'Activity', id: 'Activity', target: '.e-diagramcontent', iconCss: 'e-copy'
    }],
    showCustomMenuOnly: true,
  };

contextMenuOpen(args: any): void {
    var contextMenuObj = this.diagram.contextMenuModule.contextMenu;
    if (this.parentNode.id.startsWith('Activity')) {

      contextMenuObj.hideItems(["Activity"], true);
      contextMenuObj.showItems(["Epic"], true);
      contextMenuObj.showItems(["Feature"], true);

    }
    else if (this.parentNode.id.startsWith('Epic')) {
     
    }
  }



AR Aravind Ravi Syncfusion Team October 23, 2020 04:11 AM UTC

Hi Vin, 
 
We have created a sample to hide the context menu item. When we try to open the context menu means , the contextMenuOpen event gets triggered. In that event check if the item text is activity or not. If it is activity means then push that to the args.hiddenItems. So that activity does not gets shown while open the context menu. Similarly in your sample you can hide the context menu item based on your conditions. Please refer to the below code snippet and sample 
 
public contextMenuOpen(args: DiagramBeforeMenuOpenEventArgs) { 
    for (let item of args.items) { 
      if (item.text === "Activity") { 
        if (this.diagram.selectedItems.nodes.length > 0) { 
          args.hiddenItems.push(item.id); 
        } 
      } 
    } 
  } 
 
 
Regards 
Aravind Ravi 


VI vin October 27, 2020 01:50 AM UTC

When there are no menu items in contextmenu, still seeing menu

  this.contextmenu.hideItems(["Activity"], true);
        this.contextmenu.hideItems(["Epic"], true);
        this.contextmenu.hideItems(["Feature"], true);



2nd Q
How do i delete current node and children under it.
What is the event i can use for delete



AR Aravind Ravi Syncfusion Team October 27, 2020 09:51 AM UTC

Hi Vin, 
 
Please find the response for queries in below table 
 
When there are no menu items in contextmenu, still seeing menu 
We are unable to reproduce the reported issue at our end. Could you please confirm us whether you use Syncfusion context menu component or Diagram context menu in your sample. If you use diagram context menu means then as we said earlier, When we try to open the context menu means , the contextMenuOpen event gets triggered. In that event push the context menu items that you does not want to show in the args hidden items.  
 
public contextMenuOpen(args: DiagramBeforeMenuOpenEventArgs) { 
    for (let item of args.items) { 
      if (!(this.diagram.selectedItems.nodes.length > 0)) { 
        args.hiddenItems.push(item.id); 
      } 
    } 
  } 
 
 
How do i delete current node and children under it. 
What is the event i can use for delete 
 
By using the diagram remove method we can able to remove the selected node and its connection.  
 
this.diagram.remove(); 
 
When we add or delete any node in the diagram, collectionChange event gets triggered. In that event check if the args.state is Removal or not. If we delete the node means then args.state is returned as Removal 
 
public collectionChange(args: ICollectionChangeEventArgs) { 
    if (args.state === "Changed" && args.type === "Removal") { 
      console.log("Node gets deleted"); 
    } 
  } 
 
For more information about collectionChange event args, please refer to below UG documentation link 
 
 
 
Regards 
Aravind Ravi 


VI vin October 28, 2020 10:19 PM UTC

When i remove the child node Green one, the yellow node nd white node also need to be removed
But only the green node is getting removed

AR Aravind Ravi Syncfusion Team October 29, 2020 02:48 PM UTC

Hi Vin, 

We have created a sample to delete the children of the selected node. By using the node’s inEdges and outEdges property we can able to find the connectors connected to a particular node. In the node’s inEdges and outEdges property we can get the connector’s ID.  Through node’s outEdges property we can find what are the connectors goes out from nodes. After get the ID by using the diagram getObject method, we can able to get the connector. Please refer to below code snippet  

let connectors: string[] = (this.diagram.selectedItems.nodes[0] as Node) .outEdges; 

After get the connector from node outEdges property, we can able to find the child nodes of selected node through connector targetID property. In the connector targetID property we can get the child node id, after get the child node id, through diagram getObject method get the child node. After get the child node, remove the child node from the layout. After remove all the child nodes, at last remove the selected node. Please refer to the below code snippet 

let connector: ConnectorModel = this.diagram.getObject( 
          connectorList[i] 
        ); 
        let node: NodeModel = this.diagram.getObject(connector.targetID); 
        this.diagram.remove(node); 


We have attached a sample for your reference. Please find the sample in below link 


Regards 
Aravind Ravi 


VI vin October 30, 2020 03:23 AM UTC

I am trying to clear the diagram and show based on my dropdown selection
I am trying to set the this.diagram.nodes=[];
It didnt work

projectCreated() {
    console.log("created");
    if (this.selProject) {
      
      let node: NodeModel =
      {
        id: this.selProject !== undefined ? "Project-" + this.selProject.projectDetailId : "",
        // Position of the node
        offsetX: 400,
        offsetY: 100,
        // Size of the node
        width: 250,
        height: 100,
        style: {
          fill: '#6BA5D7',
          // strokeColor: 'white'
        },
        constraints: NodeConstraints.Default & ~(NodeConstraints.Delete | NodeConstraints.Drag | NodeConstraints.Resize),
        annotations: [
          {
            content: this.selProject !== undefined ? this.selProject.projectName : ""
          }
        ]
      };
      // this.diagram.contextMenuSettings = {show: true},
      this.diagram.add(node);
      this.diagram.doLayout();
    }
  }



AR Aravind Ravi Syncfusion Team October 30, 2020 07:28 AM UTC

Hi Vin, 
 
To clear the all nodes and objects in the diagram, use the clear public API method . The clear method is used to delete all the nodes and connectors in the diagram. Please refer to the below code snippet 
 
this.diagram.clear(); 
 
Regards 
Aravind Ravi 


VI vin November 2, 2020 12:27 AM UTC

When i save the diagram string in body using POST
let d: string =  JSON.stringify(this.diagram.saveDiagram());
i am getting error

"The JSON value could not be converted to System.String. Path: $ | LineNumber: 0 | BytePositionInLine: 1."




AR Aravind Ravi Syncfusion Team November 2, 2020 05:13 AM UTC

Hi Vin, 

We are unable to reproduce the reported issue at our end. After save the diagram, we have converted it as JSON using the stringify. The string has been converted to the JSON without any exception. We have attached a sample for your reference 


So please share us a more details of your issue , how do you save the diagram or modify the above sample illustrating issue. This would help us to serve you better. 

Regards 
Aravind Ravi  


VI vin November 4, 2020 04:10 AM UTC

Hi Arvind
i was using layout save ans LOAD diagram to build my layout earlier
this.diagram.loadDiagram(save);  

I want to build my own JSON and bind data

how do i build the JSON, need a sample


My json

{
  "itemId": 11,
  "parentItemId": 0,
  "itemFacetId": 4,
  "name": "Test Project for WBS",
  "nodeTypeId": 0,
  "assignedToPersonageId": 5,
  "description": null,
  "childs": [
    {
      "itemId": 12,
      "parentItemId": 11,
      "itemFacetId": 5,
      "name": "Epic1",
      "nodeTypeId": 1,
      "assignedToPersonageId": 0,
      "description": "First Epic",
      "childs": [
        {
          "itemId": 14,
          "parentItemId": 12,
          "itemFacetId": 7,
          "name": "Feature1 of Epic1",
          "nodeTypeId": 2,
          "assignedToPersonageId": 0,
          "description": "Feature",
          "childs": [
            {
              "itemId": 19,
              "parentItemId": 14,
              "itemFacetId": 12,
              "name": "Task1 of Feature1 Epic 1",
              "nodeTypeId": 3,
              "assignedToPersonageId": 0,
              "description": "Task",
              "childs": []
            },
            {
              "itemId": 20,
              "parentItemId": 14,
              "itemFacetId": 13,
              "name": "Task2 of Feature1 Epic 1",
              "nodeTypeId": 3,
              "assignedToPersonageId": 0,
              "description": "Task",
              "childs": []
            }
          ]
        },
        {
          "itemId": 15,
          "parentItemId": 12,
          "itemFacetId": 8,
          "name": "Feature2 of Epic1",
          "nodeTypeId": 2,
          "assignedToPersonageId": 0,
          "description": "Feature",
          "childs": []
        },
        {
          "itemId": 16,
          "parentItemId": 12,
          "itemFacetId": 9,
          "name": "Feature3 of Epic1",
          "nodeTypeId": 2,
          "assignedToPersonageId": 0,
          "description": "Feature",
          "childs": [
            {
              "itemId": 21,
              "parentItemId": 16,
              "itemFacetId": 14,
              "name": "Task1 of Feature3 Epic 1",
              "nodeTypeId": 3,
              "assignedToPersonageId": 0,
              "description": "Task",
              "childs": []
            }
          ]
        }
      ]
    },
    {
      "itemId": 13,
      "parentItemId": 11,
      "itemFacetId": 6,
      "name": "Epic2",
      "nodeTypeId": 1,
      "assignedToPersonageId": 0,
      "description": "Second Epic",
      "childs": [
        {
          "itemId": 17,
          "parentItemId": 13,
          "itemFacetId": 10,
          "name": "Feature1 of Epic2",
          "nodeTypeId": 2,
          "assignedToPersonageId": 0,
          "description": "Feature",
          "childs": [
            {
              "itemId": 22,
              "parentItemId": 17,
              "itemFacetId": 15,
              "name": "Task1 of Feature1 Epic 2",
              "nodeTypeId": 3,
              "assignedToPersonageId": 0,
              "description": "Task",
              "childs": []
            }
          ]
        }
      ]
    },
    {
      "itemId": 59,
      "parentItemId": 11,
      "itemFacetId": 52,
      "name": "Epic3",
      "nodeTypeId": 1,
      "assignedToPersonageId": 0,
      "description": "",
      "childs": [
        {
          "itemId": 67,
          "parentItemId": 59,
          "itemFacetId": 60,
          "name": "Feature1 for Epic3",
          "nodeTypeId": 2,
          "assignedToPersonageId": 5,
          "description": "Feature",
          "childs": []
        }
      ]
    },
    {
      "itemId": 60,
      "parentItemId": 11,
      "itemFacetId": 53,
      "name": "Epic3",
      "nodeTypeId": 1,
      "assignedToPersonageId": 0,
      "description": "",
      "childs": []
    }
  ]
}

 

VI vin replied to vin November 5, 2020 03:51 AM UTC

Hi Arvind
i was using layout save ans LOAD diagram to build my layout earlier
this.diagram.loadDiagram(save);  

I want to build my own JSON and bind data = > update with my own JSON

how do i build the JSON, need a sample


i created the JSON object and binding, but the diagram is not updating!!

  public diagDataObj: object[] = []; 
public data: Object = {
    id: "id",
    parentId: "parentId",
    dataSource: new DataManager((this.diagDataObj)),
    doBinding: (nodeModel: NodeModel, data: object, diagram: Diagram) => {
      nodeModel.shape = {
        type: "Text",
        content: (data as TypeInfo).name,
        margin: { left: 10, right: 10, top: 10, bottom: 10 }
      };
    }
  };

export interface TypeInfo {
  name: string;
  color: string;
}

 <ejs-diagram #diagram id="diagram" width="100%" height="700px" (collectionChange) = "collectionChange($event)"
                   [selectedItems]="selectedItems" [getCustomTool]="getCustomTool"
                 [snapSettings]='snapSettings'  [layout]="layout" (click)="nodeClick($event)"
                 [layout]="layout"
                 [dataSourceSettings]="data"
                (created)="created($event)"   [tool]="tool">
                  
                ejs-diagram>
  1. 0:
    1. color: "Yellow"
    2. id: "Root-10027-11"
    3. name: "Test Project for WBS"
  2. 1:
    1. color: "white"
    2. id: "Epic-10027-12-5"
    3. name: "Epic1"
    4. parentId: "Root-10027-11"
  3. 2:
    1. color: "white"
    2. id: "Feature-10027-14-7"
    3. name: "Feature1 of Epic1"
    4. parentId: "Epic-10027-12-5"
  4. 3:
    1. color: "white"
    2. id: "Task-10027-19-12"
    3. name: "Task1 of Feature1 Epic 1"
    4. parentId: "Feature-10027-14-7"
  5. 4:
    1. color: "white"
    2. id: "Task-10027-20-13"
    3. name: "Task2 of Feature1 Epic 1"
    4. parentId: "Feature-10027-14-7"
  6. 5:
    1. color: "white"
    2. id: "Feature-10027-15-8"
    3. name: "Feature2 of Epic1"
    4. parentId: "Epic-10027-12-5"
  7. 6:
    1. color: "white"
    2. id: "Feature-10027-16-9"
    3. name: "Feature3 of Epic1"
    4. parentId: "Epic-10027-12-5"
  8. 7:
    1. color: "white"
    2. id: "Task-10027-21-14"
    3. name: "Task1 of Feature3 Epic 1"
    4. parentId: "Feature-10027-16-9"
  9. 8:
    1. color: "white"
    2. id: "Epic-10027-13-6"
    3. name: "Epic2"
    4. parentId: "Root-10027-11"
  10. 9:
    1. color: "white"
    2. id: "Feature-10027-17-10"
    3. name: "Feature1 of Epic2"
    4. parentId: "Epic-10027-13-6"
  11. 10:
    1. color: "white"
    2. id: "Task-10027-22-15"
    3. name: "Task1 of Feature1 Epic 2"
    4. parentId: "Feature-10027-17-10"
  12. 11:
    1. color: "white"
    2. id: "Epic-10027-59-52"
    3. name: "Epic3"
    4. parentId: "Root-10027-11"
  13. 12:
    1. color: "white"
    2. id: "Feature-10027-67-60"
    3. name: "Feature1 for Epic3"
    4. parentId: "Epic-10027-59-52"
  14. 13:
    1. color: "white"
    2. id: "Epic-10027-60-53"
    3. name: "Epic3"
    4. parentId: "Root-10027-11"
 

Any update please

AR Aravind Ravi Syncfusion Team November 5, 2020 02:56 PM UTC

Hi Vin,  
  
We have created a sample to save the JSON data as you shared. After JSON object get returned from the saveDiagram method, parse the JSON string, so that you can get the individual objects in the diagram i.e. nodes, connectors. Create an empty array JSON object and iterate the nodes from the JSON parsed string and get the node label , branch and fill color through node.  For every node push the object to the json object. At last the JSON look likes you have shared in previous update and you can store the JSON object in the data base. Please refer the below code example and sample below  
  
public Save() { 
    let save: string = this.diagram.saveDiagram(); 
    let data = JSON.parse(save); 
    let nodes = data["nodes"]; 
    let json = []; 
    let data1; 
    for (let i = 0; i < nodes.length; i++) { 
      if (nodes[i].inEdges.length > 0) { 
        let parentId: string = nodes[i].inEdges; 
        let connector: ConnectorModel = this.diagram.getObject(parentId); 
 
        data1 = { 
          id: nodes[i].id, 
         name: nodes[i].annotations[0].content, 
          color: nodes[i].style.fill, 
          parentId: connector.sourceID 
        }; 
      } else { 
        data1 = { 
          id: nodes[i].id, 
          name: nodes[i].annotations[0].content, 
          color: nodes[i].style.fill 
        }; 
      } 
      // Push the data to the JSON 
      json.push(data1); 
    } 
    console.log(json); 
  } 
  
 
Regards  
Aravind Ravi 

VI vin November 6, 2020 01:13 AM UTC

I was able to create the json, but i was not able to create the diagram from json data. Thats what is my Q
After i get data, do i have to do do this.diagram.databind() ?

public diagDataObj: object[] = []; 
public data: Object = {
    id: "id",
    parentId: "parentId",
    dataSource: new DataManager((this.diagDataObj)),
    doBinding: (nodeModel: NodeModel, data: object, diagram: Diagram) => {
      nodeModel.shape = {
        type: "Text",
        content: (data as TypeInfo).name,
        margin: { left: 10, right: 10, top: 10, bottom: 10 }
      };
    }
  };

export interface TypeInfo {
  name: string;
  color: string;
}

 <ejs-diagram #diagram id="diagram" width="100%" height="700px" (collectionChange) = "collectionChange($event)"
                   [selectedItems]="selectedItems" [getCustomTool]="getCustomTool"
                 [snapSettings]='snapSettings'  [layout]="layout" (click)="nodeClick($event)"
                 [layout]="layout"
                 [dataSourceSettings]="data"
                (created)="created($event)"   [tool]="tool">
                  
                ejs-diagram>

    1. color: "Yellow"
    2. id: "Root-10027-11"
    3. name: "Test Project for WBS"
  1. 1:
    1. color: "white"
    2. id: "Epic-10027-12-5"
    3. name: "Epic1"
    4. parentId: "Root-10027-11"
  2. 2:
    1. color: "white"
    2. id: "Feature-10027-14-7"
    3. name: "Feature1 of Epic1"
    4. parentId: "Epic-10027-12-5"
  3. 3:
    1. color: "white"
    2. id: "Task-10027-19-12"
    3. name: "Task1 of Feature1 Epic 1"
    4. parentId: "Feature-10027-14-7"
  4. 4:
    1. color: "white"
    2. id: "Task-10027-20-13"
    3. name: "Task2 of Feature1 Epic 1"
    4. parentId: "Feature-10027-14-7"
  5. 5:
    1. color: "white"
    2. id: "Feature-10027-15-8"
    3. name: "Feature2 of Epic1"
    4. parentId: "Epic-10027-12-5"

AR Aravind Ravi Syncfusion Team November 6, 2020 04:56 AM UTC

Hi Vin, 
  
We have created a sample to bind data for the organizational chart using generated json. By using the diagram dataSource property we can able to map the id and parentId for the data. In the diagram dataSource map the proper Id and parentId from data. The ID property is used to define the unique field of each JSON data. The parentId property is used to defines the parent field which builds the relationship between ID and parent field.   
  
  
public Data = [{ id: "FOUgT", name: "Board", color: "#71AF17" }, 
    { 
      id: "iH41u", 
      name: "General Manager", 
      color: "#71AF17", 
      parentId: "FOUgT" 
    }, 
    { 
      id: "FqoSg", 
      name: "Assistant General Manager", 
      color: "#71AF17", 
      parentId: "iH41u" 
    }, 
]; 
 
public data: Object = { 
    id: "id", 
    parentId: "parentId", 
    dataSource: new DataManager(this.Data), 
    doBinding: (nodeModel: NodeModel, data: object, diagram: Diagram) => { 
      nodeModel.annotations = [ 
        { 
          content: (data as EmployeeInfo).name 
        } 
      ]; 
    } 
  }; 
  
By using the diagram’s doBinding we can able to populated the diagram with the nodes and connectors based on the information provided from an external data source Set the data for the organizational chart , and bind that data through diagram’s doBinding feature. Similarly,  you can able to bind the data in doBinding in your sample and create layout.    

We have attached a sample for your reference. Please find the sample in below link   
  
 
For more information about diagram’s databinding and how to use in layout, please refer to below UG documentation link 
 
  
Note: The layout gets arranged if the data contains parent-child relationship. If it does not have any parent-child relationship means then layout does not arranged.   
  
Regards   
Aravind Ravi   
 


Loader.
Up arrow icon