TreeMap continuously load data?

[Aubyn Crawford]

Hi,

Is there a way to dynamically load local data into the TreeMap, without using refresh() all the time? I can add data to the dataSource, but it doesn't change the display until refresh() is called.

I want to add levels as they are found, which could take several seconds.

It doesn't have to be TreeMap, so if there is another control that does this that would be great.

Thanks

[Swetha Babu]

Hi Aubyn,

Thank you for contacting Syncfusion support. 

  

We can render TreeMap by adding the data dynamically to the data source of the TreeMap. If we need to render the TreeMap with the new data entries in the existing data source, then we must call the refresh() method in the application. If you don’t need to refresh the control, you need set the entire data source again in the dataSource property along with new entries. However, we have created a simple JavaScript application to set the entire data source again along with new entries and it can be downloaded from the below link.

https://www.syncfusion.com/downloads/support/forum/163168/ze/Treemap558713417 

  

In the above sample, we have rendered the TreeMap with two levels initially. After clicking the "Add Data" button two more data gets added to the TreeMap. 

  

But this will not be a recommended approach. So we need to call the refresh() method when we push new entries in the data source object to update the TreeMap control.

Please let us know if you need any further assistance.

Regards,
Swetha Babu 

[Aubyn Crawford]

Swetha,

That is disappointing that there isn't the ability to dynamically add items, I will have to look at a different solution all together - maybe with te diagram.

Thanks for replying quickly and putting together a simple clear example.

Aubyn

[Swetha Babu]

Hi Aubyn,

Thank you for your update.

In the TreeMap component, there is an ability to add the items dynamically by calling the refresh() method. But we cannot render the component without refresh() method when new data is added in the data source. However, we have forwarded your query for checking your requirement with the diagram component to the corresponding team. Once we get a reply from them, we will update you with further details.

Regards,
Swetha Babu

[Swetha Babu]

Hi Aubyn,

Thank you for your patience.

Please find the below solution from the diagram component to update the items dynamically. 

In diagram component, we have options to change the data source setting at runtime without refreshing the diagram. We have added a sample to demonstrate how to change the data source at runtime.  

  

Sample link: https://stackblitz.com/edit/2pu9af-ykaumv?file=index.js 

Please let us know if the above sample meets your requirement.

Regards,
Swetha Babu 

[Aubyn Crawford]

Swetha,

Thanks for coming back with an example so quickly, but it is missing what I am trying to do. I want to add lots of new items over several seconds, and I want the diagram (or treemap) to respond to the new incoming data - shifting around responding to the changes.  Clearing the diagram / switching datasources doesn't help. 

I understand why TreeMap doesn't support that type of action, because it makes the rendering much more complex.

I was going to look at manually loading new items into the diagram and see if I can get some of you auto layout options to work on expanding out on the individual branches that have changed.

Aubyn 

[Sabari Anand Senthamarai Kannan]

Hi Aubyn, 

 

Thank you for your update. 

 

The Treemap component will face complexities in rendering when the data source is updated by replacing entirely as you have mentioned. 

 

We have forwarded your query about diagram component to our internal team. We will check and update you with further details once we receive a response from them. 

 

Regards, 

Sabari Anand

[Swetha Babu]

Hi Aubyn, 

  

Thank you for your patience. 

  

We have created a sample to demonstrate how to add the node and connector at run time in a layout using add API in the Diagram component. In this case, we need not refresh the diagram or reset the dataSource property. In the sample, we have added a button named add nodes, then click on the button a node and connector will add dynamically using the add API, and "dolayout" API is called to align the layout. 

  

Sample link: https://stackblitz.com/edit/wrzpst?file=index.js 

  

Please let us know if you need any further assistance. 

  

Regards, 

Swetha Babu