jd1000
Member
Posts: 10
Registered: 9/29/2005
Member Is Offline |
| posted on 10/3/2005 at 11:07 AM |
|
|
"Please wait" message
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
Moderator
Posts: 687
Registered: 4/15/2003
Member Is Offline |
| posted on 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
Member
Posts: 10
Registered: 9/29/2005
Member Is Offline |
| posted on 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
Moderator
Posts: 687
Registered: 4/15/2003
Member Is Offline |
| posted on 10/3/2005 at 01:10 PM |
|
|
If no page appear where you expect the message to show? :)
|
|
|
jd1000
Member
Posts: 10
Registered: 9/29/2005
Member Is Offline |
| posted on 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
Moderator
Posts: 687
Registered: 4/15/2003
Member Is Offline |
| posted on 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
Member
Posts: 10
Registered: 9/29/2005
Member Is Offline |
| posted on 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
Moderator
Posts: 687
Registered: 4/15/2003
Member Is Offline |
| posted on 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
Member
Posts: 10
Registered: 9/29/2005
Member Is Offline |
| posted on 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
Member
Posts: 10
Registered: 9/29/2005
Member Is Offline |
| posted on 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
Moderator
Posts: 687
Registered: 4/15/2003
Member Is Offline |
| posted on 10/3/2005 at 02:24 PM |
|
|
please attach your tpl.js file here
|
|
|
jd1000
Member
Posts: 10
Registered: 9/29/2005
Member Is Offline |
| posted on 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
Moderator
Posts: 687
Registered: 4/15/2003
Member Is Offline |
| posted on 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
Member
Posts: 10
Registered: 9/29/2005
Member Is Offline |
| posted on 10/3/2005 at 03:25 PM |
|
|
Hi,
still doesnt seem to work :-(
What was wrong with the original?
|
|
|
rock
Moderator
Posts: 687
Registered: 4/15/2003
Member Is Offline |
| posted on 10/3/2005 at 03:28 PM |
|
|
Please submit support ticket in our Customer Care System
|
|
|
|
|
Product Page
Live Demos
Documentation
Technical Support
ORDER NOW!