Radial Tree with dynamic source

Thread ID:	Created:	Updated:	Platform:	Replies:
143023	Feb 28,2019 08:15 PM UTC	Mar 1,2019 07:07 AM UTC	Vue	1

Subscribe to this post

Tags: Diagram

Rebecca Wyman

Asked On February 28, 2019 08:15 PM UTC

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?

Reply | Reply with quote

Ramya Thirugnanam [Syncfusion]

Replied On March 1, 2019 07:07 AM UTC

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