We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Change data of automatic layout at runtime.


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

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

type: 'HierarchicalTree',
bounds: new Rect(0, 10, 500, 500),
horizontalSpacing: 20,
verticalSpacing: 40,
id: 'Name',
parentId: 'ReportingPerson',
dataManager: items,

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

1 Reply

SG Shyam G Syncfusion Team June 17, 2019 05:04 AM UTC

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' }); 

Shyam G 

Live Chat Icon For mobile
Up arrow icon