Widget data gets modified / corrupted on display

Hi all,

I’m fairly new to Webix and I promptly ran into an issue. I wonder whether anybody could set me on the right track? Thanks!

I’ve tried to make use of a tree widget. When I first start the app, the tree looks as expected (it is rendered on the Data page). But when I switch to the Dashboard and back to the Data page, the contents is corrupted, and only the first tree entry is displayed. Why is this the case, and how can I prevent it from happening?

Code-wise, I integrated the tree widget into the jet-start-typescript demo example. I replaced the datatable with a tree, and I set up the data according to the example on this page: https://snippet.webix.com/ea9f998e

The resulting code can be found in this repo: GitHub - NicoleRauch/webix-experiments: Experiments with the web framework Webix.

Any help will be greatly appreciated!

Nicole

instead of exporting DataCollection in kategoriebaumData, try to export plain array and parse its copy in the view.

kategoriebaumData.ts
export const data = [...];

kategoriebaum.ts
{
    init(view){
        view.parse(webix.copy(data));
    }
}

Hmmm… I will be working with large amounts of data, so I am not really happy to duplicate the data at each render… :-/

Is there a way to solve this issue without duplicating the data?

you can use sync
https://docs.webix.com/api__link__ui.tree_sync.html

init(view){
    view.data.sync(data);
}

I’ve checked now and realized that there is something wrong with tree data sync
https://snippet.webix.com/0y2736t5
probably cloning data is better solution.
actually you will not see difference while cloning.

I think that is the issue that I am facing. If you look at the data more closely, you will see that the root object’s data field gets removed after the data is rendered once. And I’m totally confused about why this happens…
(btw this also happens with datatable, so it’s not tree-specific).

And I’m really talking about large amounts of data, so I am not willing to clone the data on each render. I still hope there is a better solution…

Hello,

Webix Tree/Treetable modify the incoming data, and a subsequent widget receives this modified linear set. So, using webix.copy() with inline hierarchical data is a must-have requirement.

Another solution is synchronizing data with a collection, but please note that you need use TreeCollection, not DataColection (which works with liear data only):

https://snippet.webix.com/4ir7kvt6

Please note that once synced, all add/delete and load/save operations should be performed on this collection, which acts as a master and pushes the data into the dependant widgets (updates go in both directions).