Hi,
I'm trying to add a node to a tree that has loadOnDemand: true, on client-side. I can't find anything in the API that allows adding a node, and I can't seem to add it to the data source and re-bind since the data source is loaded on demand. Is there perhaps a way to modify the current set of loaded nodes?
For example, take the tree below, given that the 100/200/300 nodes are loaded initially, and then the 010/020 nodes and 001/002/003 nodes are loaded on demand when their parent is expanded. If I want to add a node "Node 004" as another child of Node 010 (it would be a sibling to nodes 001/002/003), is that possible on client-side?
Thanks,-Jared
Hi there Jared,
Currently there is no add/delete node functionality implemented internally. However you can achieve the desired functionality. You can add objects to the data source and rebind the tree. What this would do is rerender the tree with the new data and the new node would be there then.
Please let me know if this helps, or if you need additional information. I would be glad to help you further!
Hi Konstantin, thanks for your response.
Rebinding is fine, but since I'm using loadOnDemand functionality my data source is on the server side, so the igTree is downloading parts of the data each time nodes expand by making calls to the server. Does the igTree keep an accessible client-side copy of the partial data source that has been loaded thus far when expanding various nodes? If so, I could add the new node to that local data instead of the server data, and rebind the tree to that local data to avoid extra server calls. I've been unable to find something like this in the API so far, so please let me know if it is available.
Hi again Jared,
You can basically retrieve the data source object by calling:
var dataSource = $('#selector').igTree('option', 'dataSource');
Then to extract the data object you would want to call:
var data = dataSource.root().data()
The dataSource object is of type $.ig.HierarchicalDataSource. Calling root() retrieves the $.ig.DataSource base object and calling data() on it retrieves the data object. You can then change the data object by adding/deleting items from it and you can rebind the tree with the new data.
Let me know if this works for you!
Hi Konstantin,
Thanks for the tip on getting the copy of the data source including on-demand loaded nodes using the dataSource.root().data() methods; unfortunately, I'm still having trouble. I'm now able to add the new node to the tree's data source, set the data source to point to the updated version, and rebind the tree, but when I rebind, the tree re-draws only the top level nodes. All the previously expanded nodes and the newly added node are still there in the data source, but they are not being shown in the tree. If I try to manually expand the tree back down to the lower levels, the values are re-loaded on-demand from the server, so the new node is lost and many extra server calls are made. Any idea on how to get the re-bind to respect the already loaded nodes in the data source? My sample code looks like this:
//Get reference to the tree objectvar tree = $('#myTree');
//create a sample new node to insert in the treevar newNode = {};newNode.Desc = 'New Client-Side Node';newNode.Number = '001';newNode.id = '0';newNode.IsActive = null;newNode.NodeDepth = 2;newNode.Nodes = [];
//add the new node to the tree's data sourcevar currentDataSource = tree.igTree('option', 'dataSource');var data = currentDataSource.root().data();data[0].Nodes[0].Nodes.add(newNode);
//re-bind the tree to the updated data sourcetree.igTree('option', 'dataSource', data);tree.igTree('dataBind');
//break after the next line to see if data is bound correctlyvar newData = tree.igTree('option', 'dataSource').root().data();
Hey Jared,
Could you please attach a small isolated sample which I can work with. Also are you sure you need load on demand for your tree (do you have more than 2k nodes). Either way I would be happy to work with your sample in order to provide you with a solution!
Thanks!
Yes, have attached some sample code for you to look at, details below. Also, in our real application we're dealing with many more than 2k nodes in the tree if we download the entire hierarchy at once. I've actually exceeded default size limits for the JSON serializer when returning the whole tree before, so that's not really a good option. Using loadOnDemand is basically a must for us :-)
-----
Due to file size limitations I've attached only the files I edited when creating a new "ASP.NET MVC3 Web Application" project (using C# language, Razor view engine, HTML5 semantic markup, and the Intranet Application template). The 4 files attached should be:
You'll want to update the script references in Index.cshtml to point towards the right locations in your project for the ig scripts/css and jQueryUI script. You'll also want to double check the namespaces and/or usings on the cs files to make sure they match whatever you name the project. (I named mine "igTreeSample").
Let me know if you have trouble getting it working in a new project or if you find anything that will work for me.
Thanks!-Jared
Hello adogg,
This blog post will most probably be interesting to you: https://ko.infragistics.com/community/blogs/b/engineering/posts/the-infragistics-tree-with-a-context-menu
Hi adogg,
We do have plans to have such functionality in the near future. Please follow the updates on the Infragistics blogs in order to receive more information about the future releases.
Sincerely,
Do you have plans to introduce client-side tree modification functionality in the nearest future?
Thanks.
Hi there,
You are correct about the igTree not supporing adding and deleting of nodes at this point. You can use a custom service with the igTree, it is not limited to oData. I have explained the request parameters for each load on demand request in the following forum post:
http://community.infragistics.com/forums/t/65356.aspx
Thank you for using the Infragistics forums!
Issue was not resolved, I believe it is not possible with current igTree to add nodes on client side without re-binding the tree in this release. Hoping this will be included soon in a future release.
As to your other question, I'm currently able to do dynamic loading from an MVC controller action, very similar to a regular ASP.NET web service. The action returns data in JSON notation, so the tree does not appear to be limited to OData sources.