Tree and TreeTable using data from DataCollection

Webix JS
#1

Hi,
I have a TreeTable and a Tree retrieving data from server (url:“data.php”). This works fine.
If I understand things correctly, it would make more sense to use a DataCollection which would retrieve the data (url:“data.php”) and then sync TreeTable & Tree from that DataCollection (both beeing initially configured with no data using: data:""):

store = new webix.DataCollection({
url:"./data.php"
});

$$(“mytable”).data.sync(store);

$$(“mytree”).data.sync(store);

I tried it. JS debugging leads me to think that data is correctly loaded into “mytable” and “mytree” ($$(“mytable”).data.pull is filled with correct data), but nothing shows up, even after $$(“mytable”).refresh();. No error message in console either.

Is there anything I’m doing wrong? Could someone please point me to the right direction?

Thank you.

#2

Can you share - why do you think usage of separate DataCollection will work better than direct data loading ?

Tree and TreeTable stores data in a separate way ( they have extra collection and extra attributes to organize data in a hierarchy ) so syncing them with plain DataCollection doesn’t work.

#3

Hi,
“mytree” needs data that is already loaded into mytable (which is in fact a TreeTable). I was thinking that the less I access data remotely, the better. This would limit bandwidth and avoid having different data in different elements (if one loads data from server but another one has modified data on client-side only).
The idea is the following: mytreetable show categories, with name, description, … and subcategories with a tree view (this works fine using data:"./data.php"). I would like the user to be able to select, in an extra form, a possible destination to move a category. My plan was to load the same category tree in “mytree” and remove the branch on which the element to move is sitting (thus not allowing a user to move a category within the same or subcategory). Once all modifications are made, update whatever was modified to the server (only one update to the server).

Any pointer on how to manipulate TreeTables or Trees syncing them with DataCollection or TreeCollection would be great.

Thank you.

#4

I see, you can try to use the next code to share content between the treetable and tree.

//get data from treetable
var data = $$(“treetable”).serialize();
//load data in to the tree
$$(“tree”).parse(data);

It is not so convenient like .sync API though.

#5

$$(“mytreetable”).serialize(); returns an empty object (even though ui shows my elements).
I’m going crazy…

#6

Is the method was called just after initialization ? As data loading is async, this code will return an empty result if it was called before a real data loading

You can call the above code from some action ( for example, in moment when you want to show the tree, and data in treegrid is available for sure ) or use ready handler ( if you are using load command - second parameter of load is after-load callback )

http://webix.com/snippet/a87da4fc

#7

THANK YOU!!! Thank you so much. Your support is highly appreciated.
For completeness of my scenario (use a TreeCollection to load only once, fill tree with data from treetable, remove branch from tree on click of treetable), here is the relevant part of my code.

<code class="js">
treetable1 = new webix.ui({
					...
					view:"treetable", id:"treetable1",
					select:true, //enable selection of list items
				});

tree1 = new webix.ui({
				container:"div_tree1",
				view:"tree", id:"tree1",
				...
			});

var myTreeCollection = new webix.TreeCollection({
	url:"./dat.php",
	on:{
		onAfterLoad:function(){
			$$("treetable1").parse(myTreeCollection.serialize());
			$$("tree1").parse(myTreeCollection.serialize());
				 },
		}
});

webix.ready(function(){
$$("treetable1").attachEvent("onItemClick", function (id, e, node){
	webix.storage.local.put("state", $$("tree1").getState());
	$$("tree1").clearAll();
	$$("tree1").parse(myTreeCollection.serialize());
	$$("tree1").remove(id);
	$$("tree1").setState(webix.storage.local.get("state"));
	});
});

Works great. Thank you again for your precious help.