Diagram bind data

[vin]

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"
4. __proto__: Object
2. 1:
1. color: "white"
2. id: "Epic-10027-12-5"
3. name: "Epic1"
4. parentId: "Root-10027-11"
5. __proto__: Object
3. 2:
1. color: "white"
2. id: "Feature-10027-14-7"
3. name: "Feature1 of Epic1"
4. parentId: "Epic-10027-12-5"
5. __proto__: Object
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. __proto__: Object
5. 4:
1. color: "white"
2. id: "Task-10027-20-13"
3. name: "Task2 of Feature1 Epic 1"
4. parentId: "Feature-10027-14-7"
5. __proto__: Object
6. 5:
1. color: "white"
2. id: "Feature-10027-15-8"
3. name: "Feature2 of Epic1"
4. parentId: "Epic-10027-12-5"
5. __proto__: Object
7. 6:
1. color: "white"
2. id: "Feature-10027-16-9"
3. name: "Feature3 of Epic1"
4. parentId: "Epic-10027-12-5"
5. __proto__: Object
8. 7:
1. color: "white"
2. id: "Task-10027-21-14"
3. name: "Task1 of Feature3 Epic 1"
4. parentId: "Feature-10027-16-9"
5. __proto__: Object
9. 8:
1. color: "white"
2. id: "Epic-10027-13-6"
3. name: "Epic2"
4. parentId: "Root-10027-11"
5. __proto__: Object
10. 9:
1. color: "white"
2. id: "Feature-10027-17-10"
3. name: "Feature1 of Epic2"
4. parentId: "Epic-10027-13-6"
5. __proto__: Object
11. 10:
1. color: "white"
2. id: "Task-10027-22-15"
3. name: "Task1 of Feature1 Epic 2"
4. parentId: "Feature-10027-17-10"
5. __proto__: Object
12. 11:
1. color: "white"
2. id: "Epic-10027-59-52"
3. name: "Epic3"
4. parentId: "Root-10027-11"
5. __proto__: Object
13. 12:
1. color: "white"
2. id: "Feature-10027-67-60"
3. name: "Feature1 for Epic3"
4. parentId: "Epic-10027-59-52"
5. __proto__: Object
14. 13:
1. color: "white"
2. id: "Epic-10027-60-53"
3. name: "Epic3"
4. parentId: "Root-10027-11"

[Aravind Ravi]

Hi Vin, 

  

We have created a sample to bind data for the organizational chart. Get the data from the database and stored it in local data.  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: any = [   

        {   

            "Id": "parent",   

            "Role": "Board",   

            "color": "#71AF17"   

        },   

        {   

            "Id": "1",   

            "Role": "General Manager",   

            "Manager": "parent",   

            "ChartType": "right",   

            "color": "#71AF17"   

        },   

];   

public data: DataSourceModel = {   

//In data Manager is referred as parent id for the data.    

        id: 'Id', parentId: 'Manager',   

        dataSource: new DataManager(this.Data),   

        doBinding: (nodeModel: NodeModel, data: object, diagram: Diagram) => {   

            nodeModel.shape = {   

                type: 'Text', content: (data as EmployeeInfo).Role,   

                margin: { left: 10, right: 10, top: 10, bottom: 10 }   

            };   

        }   

    };   

  

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 feature in your sample and create layout.    

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

  

Sample: https://stackblitz.com/edit/angular-53plks  

  

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