DOJO: Dynamic creation/Loading/fetching of trees - html

Question

I want to load a tree structure in dojo dynamically with every layer loading(fetching data from server) only after a click to the next layer is made. This would help me to not have the entire tree loaded in memory all together but as someone clicks a level of a tree, only then all the elements of the next level are fetched from the server using ajax requests in dojo.
Can someone help me on how to go about this?

Answer 1

The answer for this is here as follows: using a dijit tree, it has just 3 steps to create a dynamic tree that loads lazily: 1. Create a store, 2. Create a model, 3. Create the tree. Here is the code snippet that I used which worked perfectly:
function createLazyTreeStore()
{
var store = new JsonRest({
target: "location where your file is",
getChildren: function(object) {
// object may just be stub object, so get the full object first and then return it's
// list of children
return this.get(object.id).then(function(fullObject){
console.log(fullObject.children);
return fullObject.children;
});
}
});
return store;
}
function createModel(store)
{
var model = new ObjectStoreModel({
store: store,
getRoot: function(onItem) {
this.store.get("the .php file").then(function(item)
{
onItem(item[0]);
});
},
getChildren: function(object, onComplete, onError)
{
this.store.get("your url to fetch the data with parent child relation").then(function(fullObject) {
object.children = fullObject;
onComplete(object.children);
}, function(error)
{
console.error(error);
onComplete([]);
});
},
mayHaveChildren: function(object) {
return true;
}
});
return model;
}
function createTree(model)
{
var tree = new Tree({
model: model,
style: "your preference",
id: "tree",
});
return tree;
}
Then call these functions in the following order:
var store = createLazyTreeStore();
var model = createModel(store);
var tree = createTree(model);
accordionPane.addChild(tree);