Treegrid reloading with saving the state of the tree

[ildar]

Hello, when I execute treegrid reload() function all nodes of the treegrid has collapsed. Is it possible to save current state of the tree? I load nodes of each level by AJAX.

[stworthy]

You need to set these states manually. The code below demonstrate how to set the data states when loading data.

Code:

$('#tg').treegrid({
	loadFilter: function(data){
		var opts = $(this).treegrid('options');
		var originalData = $(this).treegrid('getData');
		if (originalData){
			setState(data);
		}
		return data;
		
		function setState(data){
			for(var i=0; i<data.length; i++){
				var node = data[i];
				var originalNode = findNode(node[opts.idField], originalData);
				if (originalNode){
					node.state =originalNode.state;
				}
				if (node.children){
					setState(node.children);
				}
			}
		}
		
		function findNode(id, data){
			var cc = [data];
			while(cc.length){
				var c = cc.shift();
				for(var i=0; i<c.length; i++){
					var node = c[i];
					if (node[opts.idField] == id){
						return node;
					} else if (node['children']){
						cc.push(node['children']);
					}
				}
			}
			return null;
		}
	}
});

[ildar]

You need to set these states manually. The code below demonstrate how to set the data states when loading data.

Code:

$('#tg').treegrid({
	loadFilter: function(data){
		var opts = $(this).treegrid('options');
		var originalData = $(this).treegrid('getData');
		if (originalData){
			setState(data);
		}
		return data;
		
		function setState(data){
			for(var i=0; i<data.length; i++){
				var node = data[i];
				var originalNode = findNode(node[opts.idField], originalData);
				if (originalNode){
					node.state =originalNode.state;
				}
				if (node.children){
					setState(node.children);
				}
			}
		}
		
		function findNode(id, data){
			var cc = [data];
			while(cc.length){
				var c = cc.shift();
				for(var i=0; i<c.length; i++){
					var node = c[i];
					if (node[opts.idField] == id){
						return node;
					} else if (node['children']){
						cc.push(node['children']);
					}
				}
			}
			return null;
		}
	}
});

Thank you very much! It works