treeGrid add, remove and update nodes

[alex_m2000_cl]

Hi, i was looking for an example in the documentation that show me how to make the add, remove and update operations on the nodes of a treeGrid bound to a xml dataSource, but i can´t find it, i suppose i most to use addData, removeData and updateData. ¿ is this correct ? ¿ there is any sample ?

[Isomorphic]

Hi Alex,
Databound TreeGrids do not currently support the standard addData, removeData and updateData APIs available on databound list grids - if you try to do this you will find the client data does not automatically stay in sync with the data on the server.

Our recommended approach for this kind of thing is therefore to create a client-side Tree object based on data from the dataSource.
You can then manage the both the client side Tree displayed in the TreeGrid via the public Tree APIs, and the server data via the standard DataSource APIs.
To give you some concrete code to work with, I'm going to assume you're working with the "contacts" DataSource described here http://forums.smartclient.com/showthread.php?t=161

You can create a TreeGrid and initially display the data like this:

isc.TreeGrid.create({
   ID: "contactsTree",
   ... // various properties
   fields:[
       {name:"au_lname", treeField:true}
   ]
});


// Initial fetch
// Retrieve data from the dataSource and convert to a client-side Tree object
isc.DataSource.getDataSource("contacts").fetchData(
   null,
   function updateContactsTree(DSResponse, data, dsRequest) {
       var tree = isc.Tree.create({rootValue:1, idField:au_id, parentIdField:"address"});
       tree.linkNodes(data);
       contactsTree.setData(tree);
   }
);

Note I used the Tree.linkNodes() method to convert the array of nodes to a hierachical tree.

If you then want to add or delete rows from the tree you can do so with Tree.add(...) and Tree.remove(...), and at the same time update the dataSource using DataSource.addData(...) / DataSource.removeData(...).
Something like this:

isc.Button.create({
   left:500,
   title:"remove selected row",
   click: function () {
       var node = contactsTree.getSelectedRecord();
       contactsTree.data.remove(node);
       isc.DataSource.getDataSource("contacts").removeData(node);
   }
})

isc.Button.create({
   left:500, top:100,
   title:"add row",
   click: function () {
       var newNode = {au_id:10, au_lname:"X", au_fname:"Y", address:2};
       contactsTree.data.add(newNode, '/2');
       isc.DataSource.getDataSource("contacts").addData(newNode);
   }
})

You can take a similar approach of directly manipulating the tree and the DataSource to perform an update of an existing node in the tree.
However in this case you probably need to let the user edit records directly, and then save out changes.
The easiest way to do this is to use a DynamicForm, via editRecord() and saveData()

I hope this all makes sense - please let us know if you run into problems implementing this

Regards
Isomorphic Software

[alex_m2000_cl]

this info is very useful for me
Thank you

[dgude]

This solution did not work from me

The browser hangs up or dies.

[Isomorphic]

Hi GDude,
Can you give us some info - what method are you calling that is actually killing the browser? Is it the initial fetch from the DataSource? The call to Tree.linkNodes? or TreeGrid.setData()? (or something else?)

What does the data being transferred from the server look like?
What does your dataSource definition look like?

Thanks
Isomorphic Software

[tsaville]

I'm not sure if this is the same thing dgude is seeing, but it doesn't work for me either. When trying to call addData, removeData, or updateData, I get an exception that says "too much recursion."

When I debug the code using Firebug, I can see that newNode is a recursive mess. It contains _parent_isc_Tree, which has children, which have the same parent, which also has children, etc. So I can see where the 'too much recursion' is coming from. Is there a way to fix this? Thanks.

[Isomorphic]

Hi Tsaville,
Thanks for the additional information - you will see recursive properties like this on the data nodes within the tree (these are used internally by the tree itself).
In 5.6, passing the node with these properties directly to the DataSource methods such as 'removeData()' could cause the problem you describe.

Try this: only pass the required fields to the DataSource methods. So for 'removeData()' you only need pass in the primary key field value from the record.

var node = contactsTree.getSelectedRecord();
contactsTree.data.remove(node);
var contactsDS = isc.DataSource.getDataSource("contacts"),
     // Assume a primaryKey field of "contactID"
     primaryKey = {contactID:node.contactID};
contactsDS.removeData(primaryKey);

For addData(), you will be providing the node object yourself, so it will not have these recursive properties, and for updates you will probably be using the DynamicForm interface to perform edits, so should not run into these problems.

Let us know if you run into further problems
Thanks
Isomorphic Software

[Isomorphic]

FYI, given a node object, you can always extract all record fields by simply copying every fieldName from the dataSource across to a new object - something like this:

// assume your raw 'node' object is present in a var called "node"
var fieldNames = myDataSource.getFieldNames(),
     processedNode = {};
for (var i = 0; i < fieldNames.length; i++) {
    processedNode[fieldNames[i]] = node[fieldNames[i]];
}

return processedNode;

[tsaville]

Thanks, that fixed the recursion problem.

The only other problem I'm seeing is that calling Tree.data.add or Tree.data.remove does not seem to have an effect on the TreeGrid. The only way I can get the tree to refresh is to call fetchData, and even that is inconsistent because there appears to be a delay between the addData (or removeData) execution and the fetchData. Is there another way I can get the tree to refresh without hitting the server?

[Isomorphic]

TreeGrid.data.add()/remove() should immediately cause the TreeGrid to redraw(). If it does not, try manually redrawing via treeGrid.markForRedraw(). If you can't get the changes to appear, inspect the dataset itself (via Tree APIs such as getChildren()) - you probably have not actually made the changes you think you have, and the TreeGrid is showing the true state of the Tree.