Print Page - ComboTree- how to show Progress-Indicator when using formatter in Async Tree

Hi,
I'm using comboTree in AsyncTree mode (by using loader callback which retrieves nodes from the server),
And i'm also using formatter callback in order to show specific image at each node according to its data as the following example:

Code:

<style>
	.tree-icon{
		display:none;
	}
</style>

This Above code is done in order to hide the default icons of the tree nodes in order i'll be able to use custom icons
(I did the display:none mapping according to other post in the forum) :

The comboTree init code:

Code:

$('#ct').combotree({
	formatter: function (value){
				return '<img src="..." style="width:16px;height:18px;vertical-align:bottom"/>'+value;
			}
	,
        loader: function(param, success) { // Some Code...}
	
});

My Problem is that when using custom formatter for the displayed nodes,
the 'tree-loading' progress indicator is not displayed, because the 'tree-icon' class is set on 'display: none' .

Is there a way i can set the progress indicator (Waiting animation) to appear in every load operation when extending a parent node ?

NOTICE: here is the progress indicator i need to display:
(http://i60.tinypic.com/b4gpjm.png)

This tree progress indicator appears by default on the tree icon div, when using async tree functions, but as i mentioned above,
in my case i need to do it when using formatter function for custom icon on each node in the tree.

Thanks in advance.

Before loading children nodes, the 'onBeforeLoad' event fires, which can be used to write some code to show the node icon. Please refer to the code below:

Code:

<input id="tt" class="easyui-combotree" data-options="
		url:'tree2_getdata.php',
		formatter:function(node){
			return '<img src=\'...\' style=\'width:16px;height:18px;vertical-align:bottom\'/>' + node.text;
		},
		onBeforeLoad:function(node){
			if (node && (!node.children || !node.children.length)){
				$(node.target).find('.tree-icon').css('display','inline-block');
			}
		},
		onLoadSuccess:function(node){
			if (node){
				$(node.target).find('.tree-icon').css('display','none');
			}
		}
		">

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: amir-t on March 23, 2014, 08:40:42 AM