Board Logo

"Please wait" message
jd1000 - 10/3/2005 at 11:07 AM

I have a very large tree that can sometimes take up to 30 seconds to render, is there a way to display a

"Loading tree... please wait" message while the tree is loading, otherwise the user doesnt realise that something is loading.


rock - 10/3/2005 at 12:44 PM

There is no such feature indegrated, but you could do it yourself using afterInit handler. Say some div contains "Please wait" message and on tree afterInit event you hide the div or clear the message. If you need assistance please refer to our Customer Care System


jd1000 - 10/3/2005 at 12:52 PM

The problem is that things no the page dont seem to appear until after the menu is loaded.

So the DIV wouldnt show up until the menu is loaded, then it would almost immediately disappear because of the afterInit command


rock - 10/3/2005 at 01:10 PM

If no page appear where you expect the message to show? :)


jd1000 - 10/3/2005 at 01:29 PM

Maybe I should explain it better.

I have a page with this on:


HELLO, this should show up before the tree
<SCRIPT>
new tree (TREE_ITEMS, TREE_TPL);
</SCRIPT>


The "HELLO..." bit shoudl show up before the tree is displayed, but it doesnt, it only appears once the tree is loaded.


rock - 10/3/2005 at 01:50 PM

Well the issue in the browser rendering algorithm. ok. We could customize the script so it will be inited after the page loads, so we got the message displayed; also if some area of the page is displayed while tree initializing you could set your message in this area.


jd1000 - 10/3/2005 at 01:56 PM

Hi,
can you tell me where and how I would set beforeInit and afterInit?

For example, if I wanted them to do alert("Hello"); where would I put it?


Thanks for all your help


rock - 10/3/2005 at 02:04 PM

In your tree_tpl var (tree_tpl.js) set for example:
var tree_tpl = {
// general
.....
'style_68':'t1ic', // mouseovered selected leaf catption style
'afterInit':'afterInitHandler'
// make sure there is no comma after the last key-value pair
};

function afterInitHandler(o_item){
alert(o_item.a_config[0]+': Hello!');
}


jd1000 - 10/3/2005 at 02:13 PM

Hi,
I put that in my file, but nothing happens.

the file looks like this:




var TREE_TPL = {

// general


'style_68':'t1ic', // mouseovered selected leaf catption style
'afterInit':'afterInitHandler'
// make sure there is no comma after the last key-value pair
};

function afterInitHandler(o_item){
alert(o_item.a_config[0]+': Hello!');
}


'target':'mainFrame', // name of the frame links will be opened in
// other possible values are:
// _blank, _parent, _search, _self and _top


jd1000 - 10/3/2005 at 02:19 PM

So I figured out that I needed to put it at the end of the file (doh!)

but it still no doing anything


rock - 10/3/2005 at 02:24 PM

please attach your tpl.js file here


jd1000 - 10/3/2005 at 03:06 PM

/*
Feel free to use your custom icons for the tree. Make sure they are all of the same size.
If you don't use some keys you can just remove them from this config
*/

var TREE_TPL = {

// general





'target':'mainFrame', // name of the frame links will be opened in
// other possible values are:
// _blank, _parent, _search, _self and _top

// icons - root
'icon_48':'icons/base.gif', // root icon normal
'icon_52':'icons/base.gif', // root icon selected
'icon_56':'icons/base.gif', // root icon opened
'icon_60':'icons/base.gif', // root icon selected opened

// icons - node
'icon_16':'icons/folder.gif', // node icon normal
'icon_20':'icons/folderopen.gif', // node icon selected
'icon_24':'icons/folderopen.gif', // node icon opened
'icon_28':'icons/folderopen.gif', // node icon selected opened

'icon_80':'icons/folderopen.gif', // mouseovered node icon normal

// icons - leaf
'icon_0':'icons/page.gif', // leaf icon normal
'icon_4':'icons/page.gif', // leaf icon selected

// icons - junctions
'icon_2':'icons/joinbottom.gif', // junction for leaf
'icon_3':'icons/join.gif', // junction for last leaf
'icon_18':'icons/plusbottom.gif', // junction for closed node
'icon_19':'icons/plus.gif', // junctioin for last closed node
'icon_26':'icons/minusbottom.gif',// junction for opened node
'icon_27':'icons/minus.gif', // junctioin for last opended node

// icons - misc
'icon_e':'icons/empty.gif', // empty image
'icon_l':'icons/line.gif', // vertical line

// styles - root
'style_48':'mout', // normal root caption style
'style_52':'mout', // selected root caption style
'style_56':'mout', // opened root caption style
'style_60':'mout', // selected opened root caption style
'style_112':'mover', // mouseovered normal root caption style
'style_116':'mover', // mouseovered selected root caption style
'style_120':'mover', // mouseovered opened root caption style
'style_124':'mover', // mouseovered selected opened root caption style

// styles - node
'style_16':'mout', // normal node caption style
'style_20':'mout', // selected node caption style
'style_24':'mout', // opened node caption style
'style_28':'mout', // selected opened node caption style
'style_80':'mover', // mouseovered normal node caption style
'style_84':'mover', // mouseovered selected node caption style
'style_88':'mover', // mouseovered opened node caption style
'style_92':'mover', // mouseovered selected opened node caption style

// styles - leaf
'style_0':'mout', // normal leaf caption style
'style_4':'mout', // selected leaf caption style
'style_64':'mover', // mouseovered normal leaf caption style
'style_68':'mover' // mouseovered selected leaf caption style


'afterInit':'afterInitHandler'
// make sure there is no comma after the last key-value pair
};

function afterInitHandler(o_item){
alert(o_item.a_config[0]+': Hello!');
}



var TREE2_TPL = {

// general
'target':'_blank', // name of the frame links will be opened in
// other possible values are:
// _blank, _parent, _search, _self and _top

// icons - root
'icon_48':'icons2/base.gif', // root icon normal
'icon_52':'icons2/base.gif', // root icon selected
'icon_56':'icons2/base.gif', // root icon opened
'icon_60':'icons2/base.gif', // root icon selected opened

// icons - node
'icon_16':'icons2/folder.gif', // node icon normal
'icon_20':'icons2/folderopen.gif', // node icon selected
'icon_24':'icons2/folderopen.gif', // node icon opened
'icon_28':'icons2/folderopen.gif', // node icon selected opened

'icon_80':'icons2/folderopen.gif', // mouseovered node icon normal

// icons - leaf
'icon_0':'icons2/txt.gif', // leaf icon normal
'icon_4':'icons2/txt.gif', // leaf icon selected

// icons - junctions
'icon_2':'icons/joinbottom.gif', // junction for leaf
'icon_3':'icons/join.gif', // junction for last leaf
'icon_18':'icons/plusbottom.gif', // junction for closed node
'icon_19':'icons/plus.gif', // junctioin for last closed node
'icon_26':'icons/minusbottom.gif',// junction for opened node
'icon_27':'icons/minus.gif', // junctioin for last opended node

// icons - misc
'icon_e':'icons/empty.gif', // empty image
'icon_l':'icons/line.gif', // vertical line

// styles - root
'style_48':'mout2', // normal root caption style
'style_52':'mout2', // selected root caption style
'style_56':'mout2', // opened root caption style
'style_60':'mout2', // selected opened root caption style
'style_112':'mover2', // mouseovered normal root caption style
'style_116':'mover2', // mouseovered selected root caption style
'style_120':'mover2', // mouseovered opened root caption style
'style_124':'mover2', // mouseovered selected opened root caption style

// styles - node
'style_16':'mout2', // normal node caption style
'style_20':'mout2', // selected node caption style
'style_24':'mout2', // opened node caption style
'style_28':'mout2', // selected opened node caption style
'style_80':'mover2', // mouseovered normal node caption style
'style_84':'mover2', // mouseovered selected node caption style
'style_88':'mover2', // mouseovered opened node caption style
'style_92':'mover2', // mouseovered selected opened node caption style

// styles - leaf
'style_0':'mout2', // normal leaf caption style
'style_4':'mout2', // selected leaf caption style
'style_64':'mover2', // mouseovered normal leaf caption style
'style_68':'mover2' // mouseovered selected leaf caption style

'afterInit':'afterInitHandler'
// make sure there is no comma after the last key-value pair
};

function afterInitHandler(o_item){
alert(o_item.a_config[0]+': Hello!');
}


rock - 10/3/2005 at 03:17 PM

Fixed:

Code:

/*
Feel free to use your custom icons for the tree. Make sure they are all of the same size.
If you don't use some keys you can just remove them from this config
*/

var TREE_TPL = {

// general
'target':'mainFrame', // name of the frame links will be opened in
// other possible values are:
// _blank, _parent, _search, _self and _top

// icons - root
'icon_48':'icons/base.gif', // root icon normal
'icon_52':'icons/base.gif', // root icon selected
'icon_56':'icons/base.gif', // root icon opened
'icon_60':'icons/base.gif', // root icon selected opened

// icons - node
'icon_16':'icons/folder.gif', // node icon normal
'icon_20':'icons/folderopen.gif', // node icon selected
'icon_24':'icons/folderopen.gif', // node icon opened
'icon_28':'icons/folderopen.gif', // node icon selected opened

'icon_80':'icons/folderopen.gif', // mouseovered node icon normal

// icons - leaf
'icon_0':'icons/page.gif', // leaf icon normal
'icon_4':'icons/page.gif', // leaf icon selected

// icons - junctions
'icon_2':'icons/joinbottom.gif', // junction for leaf
'icon_3':'icons/join.gif', // junction for last leaf
'icon_18':'icons/plusbottom.gif', // junction for closed node
'icon_19':'icons/plus.gif', // junctioin for last closed node
'icon_26':'icons/minusbottom.gif',// junction for opened node
'icon_27':'icons/minus.gif', // junctioin for last opended node

// icons - misc
'icon_e':'icons/empty.gif', // empty image
'icon_l':'icons/line.gif', // vertical line

// styles - root
'style_48':'mout', // normal root caption style
'style_52':'mout', // selected root caption style
'style_56':'mout', // opened root caption style
'style_60':'mout', // selected opened root caption style
'style_112':'mover', // mouseovered normal root caption style
'style_116':'mover', // mouseovered selected root caption style
'style_120':'mover', // mouseovered opened root caption style
'style_124':'mover', // mouseovered selected opened root caption style

// styles - node
'style_16':'mout', // normal node caption style
'style_20':'mout', // selected node caption style
'style_24':'mout', // opened node caption style
'style_28':'mout', // selected opened node caption style
'style_80':'mover', // mouseovered normal node caption style
'style_84':'mover', // mouseovered selected node caption style
'style_88':'mover', // mouseovered opened node caption style
'style_92':'mover', // mouseovered selected opened node caption style

// styles - leaf
'style_0':'mout', // normal leaf caption style
'style_4':'mout', // selected leaf caption style
'style_64':'mover', // mouseovered normal leaf caption style
'style_68':'mover', // mouseovered selected leaf caption style


'afterInit':'afterInitHandler'
// make sure there is no comma after the last key-value pair
};




var TREE2_TPL = {

// general
'target':'_blank', // name of the frame links will be opened in
// other possible values are:
// _blank, _parent, _search, _self and _top

// icons - root
'icon_48':'icons2/base.gif', // root icon normal
'icon_52':'icons2/base.gif', // root icon selected
'icon_56':'icons2/base.gif', // root icon opened
'icon_60':'icons2/base.gif', // root icon selected opened

// icons - node
'icon_16':'icons2/folder.gif', // node icon normal
'icon_20':'icons2/folderopen.gif', // node icon selected
'icon_24':'icons2/folderopen.gif', // node icon opened
'icon_28':'icons2/folderopen.gif', // node icon selected opened

'icon_80':'icons2/folderopen.gif', // mouseovered node icon normal

// icons - leaf
'icon_0':'icons2/txt.gif', // leaf icon normal
'icon_4':'icons2/txt.gif', // leaf icon selected

// icons - junctions
'icon_2':'icons/joinbottom.gif', // junction for leaf
'icon_3':'icons/join.gif', // junction for last leaf
'icon_18':'icons/plusbottom.gif', // junction for closed node
'icon_19':'icons/plus.gif', // junctioin for last closed node
'icon_26':'icons/minusbottom.gif',// junction for opened node
'icon_27':'icons/minus.gif', // junctioin for last opended node

// icons - misc
'icon_e':'icons/empty.gif', // empty image
'icon_l':'icons/line.gif', // vertical line

// styles - root
'style_48':'mout2', // normal root caption style
'style_52':'mout2', // selected root caption style
'style_56':'mout2', // opened root caption style
'style_60':'mout2', // selected opened root caption style
'style_112':'mover2', // mouseovered normal root caption style
'style_116':'mover2', // mouseovered selected root caption style
'style_120':'mover2', // mouseovered opened root caption style
'style_124':'mover2', // mouseovered selected opened root caption style

// styles - node
'style_16':'mout2', // normal node caption style
'style_20':'mout2', // selected node caption style
'style_24':'mout2', // opened node caption style
'style_28':'mout2', // selected opened node caption style
'style_80':'mover2', // mouseovered normal node caption style
'style_84':'mover2', // mouseovered selected node caption style
'style_88':'mover2', // mouseovered opened node caption style
'style_92':'mover2', // mouseovered selected opened node caption style

// styles - leaf
'style_0':'mout2', // normal leaf caption style
'style_4':'mout2', // selected leaf caption style
'style_64':'mover2', // mouseovered normal leaf caption style
'style_68':'mover2', // mouseovered selected leaf caption style

'afterInit':'afterInitHandler'
// make sure there is no comma after the last key-value pair
};

function afterInitHandler(o_item){
alert(o_item.a_config[0]+': Hello!');
}


jd1000 - 10/3/2005 at 03:25 PM

Hi,

still doesnt seem to work :-(


What was wrong with the original?


rock - 10/3/2005 at 03:28 PM

Please submit support ticket in our Customer Care System


Softcomplex: http://www.softcomplex.com/
Back to forum: http://www.softcomplex.com/forum/