TreeGrid - All nodes are expanded after loadData call

[amir-t]

Hi,
When i calling loadData with the full hierarchic tree data (with about 3000 nodes, 8 levels)
all the nodes are expanded after loaded to the tree, automatically, which probably cost in performance because its taking about 1:30 minutes to load this full tree.

I really need some help with some manners :
1. Is there any way to improve the loading performance ?
2. How can i load the full tree data while telling the TreeGrid not to expand its nodes after load,
but to keep them collapsed of course. (calling collapse all after loadData call is not a solution, im looing for some setting to tell the treeGrid not to expand nodes at all but just load them to the treeGrid).

Thanks in advance

[stworthy]

Please refer to this lazy loading tutorial http://www.jeasyui.com/tutorial/tree/treegrid5.php.

[amir-t]

Thanks.

But there is still another problem,
I've noticed, that the lazy loading tutorial is related only to a full hierarchic treegrid data,
only when the data structure includes the 'children' property to each parent's node.

On our case,
we're using a treegrid data which uses a flat structure of rows, where each child row has '_parentId' property that point to its parent row id.

We actually need to load a tree data in this kind of structure:

Code:

[{"id":1,"name":"All Tasks","begin":"3/4/2010","end":"3/20/2010","progress":60,"iconCls":"icon-ok", "state":"closed"},
 {"id":2,"name":"Designing","begin":"3/4/2010","end":"3/10/2010","progress":100,"_parentId":1},
{"id":21,"name":"Database","persons":2,"begin":"3/4/2010","end":"3/6/2010","progress":100,"_parentId":2},
{"id":22,"name":"UML","persons":1,"begin":"3/7/2010","end":"3/8/2010","progress":100,"_parentId":2}]

Instead of this structure:

Code:

{
	"id":1,
	"name":"C",
	"size":"",
	"date":"02/19/2010",
	"children":[{
		"id":2,
		"name":"Program Files 2",
		"size":"120 MB",
		"date":"03/20/2010"},
		{
		"id":3,
		"name":"Program Files 3",
		"size":"120 MB",
		"date":"03/20/2010"} 
       ]
}

When we used the loadData method to fill the treeGrid with the flat structure (the first example),
for some reason,
its doesn't consider the _parentId property and adds all the nodes in the root level without the correct hierarchic relations.

We tried to use a similar Json as the example of "TreeGrid Actions" on your site, according to your following json:
http://www.jeasyui.com/demo/treegrid/treegrid_data2.json

Hope you'll be able to assist us on that manner,
Regards.

[stworthy]

The 'loadFilter' provide the opportunity to let users change the source data to standard hierarchic data. Please try the following 'loadFilter' function.

Code:

function myLoadFilter(data,parentId){  
    var tg = $(this);  
    var opts = tg.treegrid('options');  
    opts.onBeforeExpand = function(row){  
        if (row.children1){  
            tg.treegrid('append',{  
                parent: row[opts.idField],  
                data: row.children1  
            });  
            row.children1 = undefined;  
            tg.treegrid('expand', row[opts.idField]);  
        }  
        return row.children1 == undefined;  
    };  
	
	function setData(){
		var nodes = [];
		for(var i=0; i<data.length; i++){
			var row = data[i];
			if (!row._parentId){
				nodes.push(row);
				data.splice(i,1);
				i--;
			}
		}
		var todo = [];
		for(var i=0; i<nodes.length; i++){
			todo.push(nodes[i]);
		}
		while(todo.length){
			var node = todo.shift();
			for(var i=0; i<data.length; i++){
				var row = data[i];
				if (row._parentId == node[opts.idField]){
					if (node.children1){
						node.children1.push(row);
					} else {
						node.children1 = [row];
					}
					node.state = 'closed';
					row._parentId = null;
					todo.push(row);
					data.splice(i,1);
					i--;
				}
			}
		}
		return nodes;
	}
      
	data = setData(data);
    return data;  
}  

[amir-t]

I'll try it, hopes it works.

However.
I still don't understand some important manner, in your demo example of the TreeGrid- "TreeGrid Actions",
you used a full hierarchic  json: http://www.jeasyui.com/demo/treegrid/treegrid_data2.json
, and the data has loaded in the correct hierarchical relations, but you didn't used there any 'loadFilter' method there. So how in that example you managed to load the flat tree data as hierarchical  without using the loadFilter method?

Maybe the loadFilter is called in your inner code in case the full data is set at the url property?

[stworthy]

The 'loadFilter' is the public function to allow users to change their source data to accepted data. It is not the only one solution. Another solution is to extend the treegrid view.

Code:

var myview = $.extend({},$.fn.treegrid.defaults.view,{
	onBeforeRender:function(target, parentId, data){
		$.fn.treegrid.defaults.view.onBeforeRender.call(this,target,parentId,data);
		
		var data = $(target).treegrid('getData');
		
		function setData(){  
			var todo = [];  
			for(var i=0; i<data.length; i++){ 
				var node = data[i];
				if (!node.setted){
					node.setted = true;
					todo.push(node); 
				}				
			}  
			while(todo.length){  
				var node = todo.shift();  
				if (node.children){  
					node.state = 'closed';  
					node.children1 = node.children;  
					node.children = undefined;  
					todo = todo.concat(node.children1);  
				}  
			}  
		}  
		  
		setData(data);  
		var tg = $(target);  
		var opts = tg.treegrid('options');  
		opts.onBeforeExpand = function(row){  
			if (row.children1){  
				tg.treegrid('append',{  
					parent: row[opts.idField],  
					data: row.children1  
				});  
				row.children1 = undefined;  
				tg.treegrid('expand', row[opts.idField]);  
			}  
			return row.children1 == undefined;  
		};  
	}
});

Now apply this treegrid view.

Code:

$('#tg').treegrid({
  view: myview
  //...
});

[amir-t]

I see. nice solution indeed   

Is this how use implement your following demo example:
http://www.jeasyui.com/demo/main/index.php?plugin=TreeGrid&theme=default&dir=ltr&pitem=TreeGrid%20Actions

Because in the source code, i don't see any use of 'loadFiler' or setting the view property (like view: myview) of the treeGrid, when its being created.

In your demo example, the treeGrid is created as follows:

Code:

 <table id="tg" class="easyui-treegrid" title="TreeGrid Actions" style="width:700px;height:250px"
            data-options="
                iconCls: 'icon-ok',
                rownumbers: true,
                animate: true,
                collapsible: true,
                fitColumns: true,
                url: '../treegrid/treegrid_data2.json',
                idField: 'id',
                treeField: 'name'
            ">
        <thead>
            <tr>
                <th data-options="field:'name',width:180">Task Name</th>
                <th data-options="field:'persons',width:60,align:'right'">Persons</th>
                <th data-options="field:'begin',width:80">Begin Date</th>
                <th data-options="field:'end',width:80">End Date</th>
                <th data-options="field:'progress',width:120,formatter:formatProgress">Progress</th>
            </tr>
        </thead>
    </table>

Without using 'loadFilter' or any specific loading or extend logics,
While the input json is a flat tree representation (by using the _parentId property):
http://www.jeasyui.com/demo/treegrid/treegrid_data2.json

[zolotoy]

<Without using 'loadFilter' or any specific loading or extend logics,

That's exactly the same question I have. How does your sample work without any custom code?