Tree incremental loading

Suite and Optimus Suite 5
#1

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

#2

Tree has onXLS and onXLE events , which can be used to show|hide any kind of custom loading indicator.
dhtmlx.com/docs/products/kb/inde … ls&x=0&y=0

#3


The problem is to get the current node, which should be opened by clicking the ‘+’ :frowning:.



I’ve not found any approbiate method.



 



Not 

SPAN { font-family: "Arial monospaced for SAP"; font-size: 8pt; color: #000000; background: #FFFFFF; }

tree.getSelectedItemText();  but any like 

SPAN { font-family: "Arial monospaced for SAP"; font-size: 8pt; color: #000000; background: #FFFFFF; }

tree.getClickedItemText();



 



Best regards, Stefan

#4


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.



 

SPAN { font-family: "Arial monospaced for SAP"; font-size: 8pt; color: #000000; background: #FFFFFF; } .L3S50 { color: #00008B; } .L3S51 { color: #8B0000; }

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



 

SPAN { font-family: "Arial monospaced for SAP"; font-size: 8pt; color: #000000; background: #FFFFFF; } .L3S33 { color: #009300; } .L3S50 { color: #00008B; } .L3S51 { color: #8B0000; } .L3S55 { background: #F2FFF9; }

 <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>




 

SPAN { font-family: "Arial monospaced for SAP"; font-size: 8pt; color: #000000; background: #FFFFFF; } .L3S32 { color: #7D9EC0; } .L3S33 { color: #009300; } .L3S50 { color: #00008B; } .L3S51 { color: #8B0000; }

                  <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 …’;
                    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 :slight_smile:.



 



Best regards, Stefan