Radial Tree with dynamic source

[Rebecca Wyman]

I'm having some trouble getting the radial tree to work with a dynamic data source.  I've tried setting the data equal to an object array that gets updated in various cases, I've also tried using a DataManager in the same way binding to an array and I've also tried using the DataManager with a URL and WebApiAdaptor.

I'm using Vue and Typescript.  The only way I've been able to get the data to update is to clear the data, reset it and then refresh.

this.$refs.diagram.clear();

this.$refs.diagram.ej2Instances.dataSourceSettings.data = value;

this.$refs.diagram.ej2Instances.refresh();

What is the correct way to have a radial tree with a remote data source that can be refreshed without refreshing the page?

[Ramya Thirugnanam]

Hi Rebecca, 

 

Thanks for contacting Syncfusion support.  

 

We have created a sample to update the data source of radial tree dynamically. Please find the sample in beloe link 

 

Sample: Radial Tree 

 

In this sample, we have changed the data source of the radial tree in button click. Please find below code snippet for how to change the data dynamically. 

 

var data1 = new DataManager(data); 

                diagramInstance.dataSourceSettings.id = 'Id'; 

                diagramInstance.dataSourceSettings.parentId = 'ReportingPerson'; 

                diagramInstance.dataSourceSettings.dataManager = data1; 

                diagramInstance.dataBind(); 

 

Instead of refresh method, please use dataBind method to change the modified data.We have attached a screen shot for how data source update before and after button click 

 

Before button click 

 

 

 

After Button click 

 

 

 

 

Demo sample link: https://ej2.syncfusion.com/vue/demos/#/material/diagram/radial-tree.html 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/diagram/automatic-layout/?no-cache=1#radial-tree-layout 

 

 

Regards, 

Ramya T