Change data of automatic layout at runtime.

[martin jozan]

Hello,

I would like to change data of automatic layout at runtime. 

As I unsterstand, to create an automatic layout, we do :

<DiagramComponent

layout={{

type: 'HierarchicalTree',

bounds: new Rect(0, 10, 500, 500),

horizontalSpacing: 20,

verticalSpacing: 40,

}}

dataSourceSettings={{

id: 'Name',

parentId: 'ReportingPerson',

dataManager: items,

}}

</DiagramComponent>

With items being :

let data = [{

Name: "Steve-Ceo",

offsetX: 0,

offsetY: 0

},

{

Name: "Kevin-Manager",

ReportingPerson: "Steve-Ceo"

},

{

Name: "Peter-Manager",

ReportingPerson: "Steve-Ceo"

},

{

Name: "John- Manager",

ReportingPerson: "Peter-Manager"

},

{

Name: "Mary-CSE ",

ReportingPerson: "Peter-Manager"

},

{ Name: "Martin-CSE", ReportingPerson: "Kevin-Manager" }

];

let items = new DataManager(data, new Query().take(7));

However, I would like to know if it possible to add for example two children to a node from the layout at runtime by modifying the data array?

How could I do so?

Thank you for your answer

[Shyam G]

Hi Martin, 

We have created a sample in which we have added items to an dataSource at runtime. Please refer to an code example and sample. 

Code example: 

function addDataSource() {   

            var diagram = document.getElementById("diagram"); 

            diagram = diagram.ej2_instances[0]; 

            diagram.dataSourceSettings.dataManager.dataSource.json.push( { 'Name': 'Consulting', 'Category': 'Business' }, { 'Name': 'HR', 'Category': 'Business' }); 

            diagram.clear(); 

            diagram.refresh(); 

  } 

Sample: https://stackblitz.com/edit/react-tj9wo6-udesh8?file=index.html 

Regards, 

Shyam G