Question

Currently, I have two Stored Procedures in SQL Server that handle retrieving a tree from the database:
The first retrieves all of the nodes at a specific level when you pass in a level number.
The other retrieves the children of a specific node when you pass in Level, Left, and Right values.

I’m using MVC 3.
Ideally, I would like to setup JSTree to make a call to the database every time a user clicks to expand a node. So instead of loading the entire tree up in a Json model on the server and then passing it to JSTree as is typical, I’d like to instead ONLY pass in the children for the specific node that is clicked by the user. This will happen at every node so that ONLY the children of the immediate node will have to be passed into the JSTree instead of the entire tree.

Is this possible? And if so, I would appreciate some example code for the view (especially) and possibly the controller using Microsoft’s MVC 3 framework. I’d appreciate any help.

Answer 1

Yes this is possible, it’s actually pretty straightforward with jstree.

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

Here’s one of the examples from http://www.jstree.com/documentation/json_data modified a bit:

$("#tree").jstree({ 
  "json_data" : {
     "ajax" : {
       "url" : "/yourwebservice/getnodechildren",
       "data" : function (node) { 
           //this is passed the node being opened
           //or -1 if it's 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 quite a bit more elegant but that’s the gist. This will allow you to build out the tree on demand in chunks rather than all at once.

If your webservice is set up so that parameters are passed on the url, just make the url the function instead and use that to build up your url request with the id of the node instead or whatever other parameters you need.