Does anybody know how to load data in ExtJS TreeGrid on demand? - extjs

Question

I have found a good TreeGrid control in ExtJS library. But there is one thing, I have very big tree and I need the loading on demand.
Does anybody know how to load data in ExtJS TreeGrid on demand?
My code is here:
Ext.onReady(function () {
Ext.QuickTips.init();
var tree = new Ext.ux.tree.TreeGrid({
title: 'Encyclopedia',
width: 400,
height: 500,
animate: true,
autoScroll: true,
renderTo: "EncyclopediaTree",
containerScroll: false,
border: false,
enableDD: false,
root : new Ext.tree.AsyncTreeNode({text: 'Root'}),
loader: new Ext.tree.TreeLoader({ dataUrl: '/AdminEx/GetEncyclopediaTree' }),
columns: [{
header: 'Item',
dataIndex: 'item',
width: 230
}, {
header: 'Type',
width: 150,
dataIndex: 'type'
}]
});
});

Answer 1

What do you mean by on demand loading? I can see you are using asynchronous nodes, so that will be automatically on demand loaded whenever a node is expanded.

Answer 2

I see that you are you are using the Ext.tree.AsynctreeNode and Ext.tree.TreeLoader but the TreeGrid also has ux classes for TreeGridLoader and TreeGridNodeUI, etc.
Look at this example with Firebug's Net tab and you will see all the related files to use the TreeGrid http://dev.sencha.com/deploy/dev/examples/treegrid/treegrid.html

Answer 3

The example from Sencha work fine and loads data on demand as you want.
The question is whether or not it needs to load new data.
So in that example, it doesn't need to, cause no matter what parameters you pass to the dataUrl it will always return the full tree loaded.
But if there is a node in the tree without children and you don't explicitly say it's a leaf, when you expand that node it will make a new call to the dataUrl with the node id parameter.
You are responsible to return the right data from your backend, both in the initial load of all the parent nodes and everytime a new node is expanded.
You can check that it's working simply removing all children from any node, you will see that when that node is expanded it will execute an Ajax request for the new nodes (I think default method is POST).
A simple example setting request method and baseParams to be passed in the request along with the node id:
var tree = new Ext.ux.tree.TreeGrid({
renderTo: "outputDiv",
loader: new Ext.ux.tree.TreeGridLoader({
dataUrl: "general-data",
requestMethod: "GET",
baseParams: {
fromDate: "2010-01-01",
toDate: "2010-01-01",
dateField: "systemDate"
}
}),
columns:[{
header: "Customer",
dataIndex: "customer"
},{
header: "Order",
dataIndex: "orderNumber"
},{
header: "Order Line",
dataIndex: "orderLine"
},{
header: "Item",
dataIndex: "itemNumber"
}]
});
You can also add node attributes as params like this:
tree.getLoader.on("beforeload", function(treeLoader, node) {
this.baseParams.customer = node.attributes.customer;
}, this);

Answer 4

Just in case someone runs into this via google (like I did), the way to solve this is to do the following:
If your data has a children field, then it will not asynchronously load children.
If you want asynchronous loading, you need to remove the 'children' field from your data.
ie: This will asynchronously load when you click on the folder
[{
"ShopTree": {
"id": "ShopCategory1",
"name": "Large Items"
},
"leaf": false
}, {
"ShopTree": {
"id": "ShopCategory5",
"name": "Accessories"
},
"leaf": false
}]
while this will not asynchronously load:
[{
"ShopTree": {
"id": "ShopCategory1",
"name": "Large Items"
},
"children": [],
"leaf": false
}, {
"ShopTree": {
"id": "ShopCategory5",
"name": "Accessories"
},
"children": [],
"leaf": false
}]