How to swap out treeview data sources?

[Zachary]

I want to be able to switch between data sources for my treeview. This is what I'm trying to do right now and it almost works, but when I do it, the nodes are all squashed together and glitchy, I'm not sure if it's an issue with my CSS or what, although my treeview nodes look fine when the website loads initially.

How the nodes look after changing data source and treeview.refreshing:


How they should look (it looks good when I use this data source on initial webpage load):

CSS code:

#treeView {

width: 100%;

position: absolute;

overflow-y: auto;

z-index: 0;

padding: 10px;

height: 68%;

}

#treeview:hover {

cursor: auto;

}

#mask {

padding-left: 2%;

font-size: 130%;

}

.treeviewfilter {

width: 100%;

border: 1px solid #bbbbbb;

margin: 0 auto;

z-index: 0;

position: absolute;

height: 2%;

}

.e-mask .e-input {

border-bottom: 1px solid #bbbbbb;

top: 10%;

bottom: 12%;

overflow: hidden;

}

JS code (Maybe it's because of destroy? But if I don't use destroy, the new datasource gets concatenated and glitched instead of replacing the old data source):

listTreeObj.destroy();

listTreeObj.dataSource = localData;

listTreeObj.refresh();

[Indhumathy Loganathan]

Hi Zachary,

Greetings from Syncfusion support.

In our TreeView component, the fields property has been provided to set or get the data source and other data related information. You can use this property to dynamically change the TreeView component data source and there is no need to use the refresh method. Check out the below blog to find the details.

https://support.syncfusion.com/kb/article/9132/how-to-refresh-the-data-in-ej2-treeview

Check out the shared details and get back to us if you need any further assistance.

Regards,

Indhumathy L