Efficient way to load multiple parents with path using ajax - JSTree 3.1.1

[chris....@cpasitesolutions.com]

Hi,

I have my JSTree working great with AJAX loading with the code below.  On initial tree display and when expanding the nodes its getting all the data correctly using dynamic loading.

But now, Im trying to decide the most efficient way to load the tree where the tree node ID to make initially selected comes from the query string of the webpage hosting the tree and may be several child nodes deep into the tree and a user wont be clicking on each node from root to expand each down to this child node and call the getnavdata1() (MVC c# call as shown below)

I wonder since I do know the ID that the child node will have, if there would be a way to get this node's data using ajax, and then load it using jstree.load_node() if this child node includes the parent node ID, will the parent node be automatically loaded if it is detected that it is not already loaded and then continue on up the tree until it finds a parent node that is already loaded and then stop the loading process?

Or is there a better way? 

<script type="text/javascript" class="source below">
	$(document).ready(function ()
	{
		$('#fvNavTree').jstree({
			'core': {
				'data': {
					"dataType": "json",
					'url': '/FileVault/getnavdata1',
					'data': function (node)
					{
						return { 'id': node.id };
					}
				}
			},
			"plugins": ["contextmenu", "sort"]
 
		})

		.delegate("a", "click", function (event, data)
		{
			event.preventDefault();
		});
 
	});
</script>

[Ivan Bozhanov]

You can load a lot of levels with a single request, and you can also use the massload plugin - it has been discussed here in the group - it serves the same purpose - loading multiple nodes (even not in the same chain) with a single request.
Let me know if you need help configuring the massload plugin (take a look at the demos in the repo and the topics here in the group for pointers).

Best regards,
Ivan

[chris....@cpasitesolutions.com]

Thank you Ivan. 

Ive been researching your suggestions for using load_node() with array and massload.    It seems that since the only child node ID I have is the one to be displayed (tree auto-expanded to)  that I would need to build an array of node ID's from root and then all the parent IDs in-order down to the child ID that I got in the query string. I would do this server-side and add to the webpage model for use in the jquery code on the client

Next I could use JSTree.LoadNode(arry) with an array.   This makes me wonder if it the order of the ids in this array are important as they are each the parent ID of the next element in the array. 

If they were presented out of order would jstree fail because the parent node may or may not exist yet depending upon the order of the Load_Nodes().  Also, would I be unnecessarily calling Load_Node() on nodes that were already in the tree?

Chris

[Ivan Bozhanov]

The order does no matter - jstree will not fail. You can also skip nodes that are already loaded using _load_nodes([...array-to-load....], function () { callback to execute once done }, true)

Best regards,
Ivan

[chris....@cpasitesolutions.com]

 Thanks Ivan,

Ive been experimenting with what you suggested and do have the 'jstree.load_nodes' working correctly with an array. I step thru the server

code and can verify the JSON string built for each node in the array is identical to the JSON string built for each when the user instead

clicked or expanded each node with the tree.  Simple code as follows below.

	var nodeidlist = ["N_-1_5721", "N_1553_5721","N_10145_5721","N_10146_5721","N_20145_5721"];
	$('#fvNavTree').jstree(true)._load_nodes(nodeidlist,function (e, data){}, false );

However, the returned JSON string for each node id in the array is not being inserted into the jstree

when using the lode_nodes call.  I can verify this by looking at the html of the page.   

After researching this a lot it I cant help but again think it has to somehow be related to the parent 

node maybe not existing yet depending on the order in the array. Without the parent id for each node how 

does it even know who the parent is unless it assumed it by the order of the array.

So Next I thought to add the 'parent' field for each node to the JSON string itself.  

(see the new json string in #3 sample below) but when I do this the javascript throws exception

	var tid = d.id.toString(), because d is undefined, line 1514 of jstree.js in _append_json_data : function (dom, data, cb, force_processing) {

You have any ideas?  

Thanks,

Chris

#1) Root of the tree (before I added 'parent' to the json)

{"ContentEncoding":null,"ContentType":null,"Data":[{"children":false,"id":"N_10152_5721","text":"2014","state":{"opened":false,"disabled":false,"selected":false},"a_attr":{"class":null},"li_attr":{"class":null}},{"children":false,"id":"N_10153_5721","text":"2015","state":{"opened":false,"disabled":false,"selected":false},"a_attr":{"class":null},"li_attr":{"class":null}},{"children":true,"id":"N_1553_5721","text":"Receipts","state":{"opened":false,"disabled":false,"selected":false},"a_attr":{"class":null},"li_attr":{"class":null}},{"children":false,"id":"N_10150_5721","text":"Test  Folder  1","state":{"opened":false,"disabled":false,"selected":false},"a_attr":{"class":null},"li_attr":{"class":null}},{"children":false,"id":"N_10151_5721","text":"Test  Folder  2","state":{"opened":false,"disabled":false,"selected":false},"a_attr":{"class":null},"li_attr":{"class":null}}],"JsonRequestBehavior":0,"MaxJsonLength":null,"RecursionLimit":null}


#2) Node for expansion of a node called My Documents (before I added parent)
{"ContentEncoding":null,"ContentType":null,"Data":[{"children":true,"id":"N_10145_5721","text":"2014","state":{"opened":false,"disabled":false,"selected":false},"a_attr":{"class":null},"li_attr":{"class":null}}],"JsonRequestBehavior":0,"MaxJsonLength":null,"RecursionLimit":null}

#3) Root after I add 'parent' id to the json

{"ContentEncoding":null,"ContentType":null,"Data":{"children":[{"children":true,"id":"N_-1_5721","parent":"N_-11_0","text":"My  Documents","state":{"opened":false,"disabled":false,"selected":true},"a_attr":{"class":null},"li_attr":{"class":null}},{"children":true,"id":"N_-4_0","parent":"N_-11_0","text":"Client  User  Documents","state":{"opened":false,"disabled":false,"selected":false},"a_attr":{"class":null},"li_attr":{"class":null}},{"children":true,"id":"N_-5_0","parent":"N_-11_0","text":"Firm  User  Documents","state":{"opened":false,"disabled":false,"selected":false},"a_attr":{"class":null},"li_attr":{"class":null}},{"children":false,"id":"N_-2_0","parent":"N_-11_0","text":"Private Firm  Documents","state":{"opened":false,"disabled":false,"selected":false},"a_attr":{"class":null},"li_attr":{"class":null}},{"children":false,"id":"N_-3_0","parent":"N_-11_0","text":"Public  Documents","state":{"opened":false,"disabled":false,"selected":false},"a_attr":{"class":null},"li_attr":{"class":null}}],"id":"N_-11_0","parent":"#","text":"Secure  File  Vault","state":{"opened":true,"disabled":false,"selected":false},"a_attr":{"class":null},"li_attr":{"class":null}},"JsonRequestBehavior":0,"MaxJsonLength":null,"RecursionLimit":null}

[Ivan Bozhanov]

Sorry, the format you are using is not the format jstree requires, still - I assume you have it configured properly.
The data will not be appended to the DOM, but it is loaded. Only visible nodes are in the DOM, since you have everything loaded you can now invoke _open_to() to expand the tree to the desired deep node and you will see the nodes being appended to the DOM.

Best regards,
Ivan