Start Building Professional
Web Apps Today

Tree incremental loading

Hi,

when using the tree with the incremental loading of nodes: is it possible to have a loading indicator in front the
node text?

Best regards, Stefan

Tree has onXLS and onXLE events , which can be used to show|hide any kind of custom loading indicator. 
http://dhtmlx.com/docs/products/kb/index.shtml?cat=search&ssr=yes&start_search=1&s=onxls&x=0&y=0

The problem is to get the current node, which should be opened by clicking the '+' :-(.

I've not found any approbiate method.

 

Not  tree.getSelectedItemText();  but any like  tree.getClickedItemText();

 

Best regards, Stefan

Hi,

 

meanwhile i found a way, which i want to share all users:

The tree shows on the first load a div with a loading image and replaces the text of the current node to be expanded with the same image and text and restores the original text.

          <style>
        .animation {padding-left:20px; background:url(../../images/arrows.gif) top left repeat-y}
        </style>

   <table id="loader" style="display:none"><tr><td><img src="../../images/arrows.gif"/></td><td style="font-family:arial;font-size:0.7em">Loading ...</td></tr></table>

                    <script>
                    var itemText;
                    tree = new dhtmlXTreeObject("treeboxbox_tree","80%","80%",0);
                    tree.setImagePath("../../libraries/dhtmlx/tree/codebase/imgs/");
                    tree.setIconSize(0,0);
                    tree.enableSmartXMLParsing(true);
                    tree.setXMLAutoLoading("overview.xml?uname=<%=sy-uname%>");
                    tree.setOnLoadingStart(func_a);
                    tree.setOnLoadingEnd(func_b);
                    tree.enableTreeLines("true");
                    tree.setIconSize(0,0);

                    tree.loadXML("overview.xml?uname=<%=sy-uname%>");
                    function func_a(id,m){ 
                     if(m=="0"){document.getElementById('loader').style.display = 'block';}
                    if(m==null){document.getElementById('loader').style.display = 'block';}
                    }

                    tree.attachEvent("onXLS",function(id,m){ showLoading(id,m); });
                    tree.attachEvent("onXLE",function(id,m){ hideLoading(id,m); });

                    function showLoading(id,m){
                    itemText = tree.getItemText(m);
                    var newLabel = '<span class=animation>Loading ...</span>';
                    tree.setItemText(m,newLabel,'');


                    }
                    function hideLoading(id,m){

                    tree.setItemText(m,itemText,'');
                    }

                    function func_b(id,m){ 
                    document.getElementById('loader').style.display = 'none';
                    }

 

May be that this could be coded in a better way :-).

 

Best regards, Stefan