Start Building Professional
Web Apps Today

Trying to show 'loading...' icon when opening tree nodes with dhtmlxTree

I'm loading data dynamically but the problem is that some of the XML being loaded is *very* large. I'd like to show the user some assurance that something is happening and I have an animated 'loading' gif that I want to show in place of the folder icon when the XML is being generated and parsed.

The tree initializer is shown below. Note the functions that I'm attaching to the onOpenStart and onOpenEnd events.

I'm not getting the expected results. The console.log output is showing up in Firebug but the icon is not changing.
Am I misunderstanding the purpose of onOpenStart and onOpenEnd?

Any ideas? Thanks,
Eric

function loadTree()
{
var field = field_input.value;
tree = new dhtmlXTreeObject("tree_container", "100%", "100%", -1);

//enable Drag&Drop
tree.enableDragAndDrop(true);


// do something when the user clicks a node
tree.setOnClickHandler(loadInfo);

// load the children when a node is expanded
tree.setXMLAutoLoading("ajax_page.php");


tree.attachEvent("onOpenStart", function (id, state) {
tree.setItemImage(id, 'loading.gif');
console.log('onOpenStart id = ' + id);
return true; // if function not return true, operation will be stoped
});


tree.attachEvent("onOpenEnd", function(id, state) {
console.log('onOpenEnd id = ' + id);
tree.setItemImage(id, 'folderOpen.gif');
});


// load the initial tree
tree.loadXML("ajax_page.php?id=-1");

// use the dataProcessor to fire move_node when an item is dragged
myDataProcessor = new dataProcessor("move_node.php?field=" + field);
myDataProcessor.init(tree);
}

You are using correct approach, but the setItemImage command works in slightly different way.

setItemImage(itemId,image1,image2)
*     @param: itemId - id of node
*     @param: image1 - node without children icon or closed node icon (if image2 specified)
*     @param: image2 - open node icon (optional)   

So the correct code will be

tree.attachEvent("onOpenStart", function (id, state) {
    tree.setItemImage(id, 'loading.gif','loading.gif');
    return true; // if function not return true, operation will be stoped
});


tree.attachEvent("onOpenEnd", function(id, state) {
    tree.setItemImage(id, 'folderClose.gif','folderOpen.gif');
});