On-demand loading of JSTree with stored procedures

Question

I currently have two stored procedures in SQL Server that handle tree retrieval from a database:
The first one gets all nodes at a certain level when you pass the level number.
The other gets the children of a particular node when you pass the level values, left and right.

I am using MVC 3.
Ideally, I would like to configure JSTree to be called into the database every time the user clicks to expand the node. Therefore, instead of loading the whole tree in the Json model on the server and then passing it to JSTree, as it usually happens, I would like to use only those children who have a specific node that the user clicked instead. This will happen on each node, so that ONLY the children of the immediate node should be passed to JSTree instead of the entire tree.

Is it possible? And if so, I would appreciate some sample code for the presentation (especially) and possibly a controller using the Microsoft MVC 3 environment. I would appreciate any help.

Answer 1

Yes, it is possible, in fact it is quite simple with jstree.

What you want to do is use the ajax parameter of the json_data plugin, but configure it so that either the data parameter or url passed a function that will send which node id is expanded so that your web service can make a call to your stored procedure and return data for children of the selected node.

Here, one example from http://www.jstree.com/documentation/json_data has changed a bit:

 $("#tree").jstree({ "json_data" : { "ajax" : { "url" : "/yourwebservice/getnodechildren", "data" : function (node) { //this is passed the node being opened //or -1 if it the root node var dataToPass = {}; if (node === -1) { //pass parameters to the webservice that will build and return //first two tree levels dataToPass = { id : 0, initialLoad: true }; } if (node.attr && node.attr("id") { dataToPass = { id: node.attr("id"), initialLoad: false } } return dataToPass; }, "success" : function (dataFromWebservice) { //depending on how the webservice returns //data you may need to do this return dataFromWebservice.d; } } }, "plugins" : [ "themes", "json_data" ] }); 

You can make this code a little more elegant, but that's the point. This will allow you to build the tree on demand in pieces, and not immediately.

If your web service is configured in such a way that the parameters are passed to the URL, just make the url function instead and use this to create your url request with the node identifier or any other parameters you need.