Diagram automatic layout arrangement

[RakhiS]

Hi,

I have created this diagram using the following link:

https://www.syncfusion.com/kb/10448/how-to-get-started-easily-with-syncfusion-angular-7-diagram

now I want to use automatic diagram layout arrangement using this same data in Organizational layout, can you please share the dummy code for this.

[Aravind Ravi]

Hi Rakhi, 

 

We have create a sample for your requirement of organizational layout using the same data in provided KB. Please find the sample in below link 

 

Sample: https://stackblitz.com/edit/angular-ahqyyy?file=app.component.ts 

 

Regards 

Aravind Ravi  

 

[RakhiS]

Hi,

Thanks but this is some kind of hard coding, 

My Requirements:

I want to use layout as per the end user selection, so for example

 I am having data in database 

Node data and Link data. 

Now  I will provide a dropdown in the front view for user and in that dropdown there will be different kinds of layout Name like

"Flowchart,Organizationalchart,Randomchart etc", user will select any of the layout then my diagram will adjust its layout accordingly. I need this type of arrangement. 

Please help!

[Aravind Ravi]

Hi Hendri,  

  

We have created a sample for adjusting the diagram layout based on user selection. We have used hierarchical tree, organizational chart and complex hierarchical tree layouts in the sample. If user select any of these layout, then diagram will adjust its layout based on its datasource and layout type accordingly. We have also shared a sample for your reference and you can find the sample in below link.  

  

Sample: https://stackblitz.com/edit/angular-ahqyyy?file=app.component.ts    

  

   

If we misunderstood your requirement, please share any pictorial representation of your requirement. This will be helpful for us to serve you better.   

 

Regards 

Aravind Ravi 

[RakhiS]

Hi, Thanks, I followed the same code but it is displaying only the dropdown but on selecting any of the option it is not rendering the data. Also there is no error in console.log of it when I debug it goes upto datasourcesetting but from there it returns to dolayout. and no data binds into it

[Aravind Ravi]

Hi Rakhi,

We suspect that the issue occurs due to the data source objects are not binded properly. Please refer below the code snippet for how to bind data to datasource.   

   

this.diagram.dataSourceSettings = {   

        id: "Name",   

        parentId: "Category",   

        dataSource: new DataManager(data as any)   

           

    }   

   

var data: object[] = [   

    { 'Name': 'parent', ‘Category’: 'Board', 'color': '#71AF17' },   

    { 'Name': '1', Category’: 'parent', 'color': '#71AF17' },   

    { 'Name': '2', Category’: '1', 'color': '#1859B7' },   

];   

   

In the above code snippet, we set id as “Name” and parentId as “Category” respective to the JSON data. So, please check in your sample that you set proper id and parentId field that you define in data. If the issue still remains, please share your demo sample or hosted sample link with issue replication steps to proceed further.  

   

Regards   

Aravind Ravi