Board Logo

Expand All & Collapse All
nrao - 9/17/2003 at 10:30 PM

Is it possible to add 'Expand All' or 'Collapse All' functionality to the menu?
I saw another posting with almost the same request but with no replies.


rock - 9/18/2003 at 10:53 AM

Yes this is possible. You should call open(b_close) method for each item.


nrao - 9/18/2003 at 03:29 PM

How exactly would I do that? I have about 1000 entries in my tree. Is that through a javascript on the same page? If so, can you send me a sample of the javascript code?

Thanks, all help would be much appreciated.


rock - 9/18/2003 at 03:52 PM

There is a_index array in the tree object containing all items.


opus27 - 11/2/2003 at 10:06 PM

Try this :


function expand_all () {
for (var i = 1; i < trees[0].a_index.length; i++) {
var o_item = trees[0].a_index;
if (!o_item.b_opened) o_item.open(o_item.b_opened);
}
}
function collapse_all () {
for (var i = 1; i < trees[0].a_index.length; i++) {
var o_item = trees[0].a_index;
if (o_item.b_opened) o_item.open(o_item.b_opened);
}
}


pod - 6/11/2004 at 02:31 PM

...just wanted to mention that there was a little typo in the last posted code:

the var i was missing from the following line

var o_item = trees[0].a_index[var];


...for some reason, the i between brackets doesn't show on the posting ???

I'm sure opus27 tryied posting it and didn't notice it got removed.

Just thought I would mentionned that.


By the way , Thank you opus27, I needed that code as well

:-D


doonee - 3/6/2005 at 12:53 AM

could someone post that code again, working around the typo, say, by using [*i*] or something ?
thanks
d


youradds - 4/13/2005 at 11:32 AM

Hi,

I'm trying to get all my options to be "auto closed". Is this possible? I've tried this, but it won't work :(

Code:
<script language="JavaScript">
<!--

new tree (TREE_ITEMS, tree_tpl);
collapse_all();

//-->

function expand_all () {
for (var i = 1; i < tree[0].a_index.length; i++) {
var o_item = tree[0].a_index[var];
if (!o_item.b_opened) o_item.open(o_item.b_opened);
}
}

function collapse_all () {
for (var i = 1; i < tree[0].a_index.length; i++) {
var o_item = tree[0].a_index[var];
if (o_item.b_opened) o_item.open(o_item.b_opened);
}
}

</script>


TIA


rock - 4/14/2005 at 07:04 AM

Do not use reserved words as variable names: var o_item = tree[0].a_index[var];

Example of expand/collapse all function:

Code:

function expand_or_collapse_all (o_tree, b_collapse) {
for (var i = 1; i < tree[0].a_index.length; i++) {
var o_item = tree[0].a_index[ i];
o_item.open(b_collapse);
}
}


Usage:
Code:

o_my_lemon_tree = new tree (TREE_ITEMS, tree_tpl);
expand_or_collapse_all (o_my_lemon_tree, true);


billgates - 5/5/2005 at 12:33 PM

This is the correct code to use:

Code:

function expand_or_collapse_all (o_tree, b_collapse) {
for (var i = 1; i < o_tree.a_index.length; i++) {
var o_item = o_tree.a_index;
o_item.open(b_collapse);
}
}


Usage:
Code:

my_tree = new tree (TREE_ITEMS, tree_tpl);
expand_or_collapse_all (my_tree, true);


rock - 5/5/2005 at 01:27 PM

To billgates : Ok, thanks for your attention and assistance.

Example of expand/collapse all function:

Code:

function expand_or_collapse_all (o_tree, b_collapse) {
for (var i = 1; i < o_tree.a_index.length; i++) {
var o_item = o_tree.a_index[ i];
o_item.open(b_collapse);
}
}


Usage:
Code:

o_my_lemon_tree = new tree (TREE_ITEMS, tree_tpl);
expand_or_collapse_all (o_my_lemon_tree, true);


billgates - 5/9/2005 at 08:16 AM

Hi, I added some features to the tigra tree code, you can find them in attachment.

// Improvements:
// - Root folder cannot be collapsed or selected (controlled by "norootclose" variable)
// - Only one folder may be open on the same level (if variable "onefolder" is true)
// - Removed caret if a link is focused (with onFocus=this.blur())
// - When closing a folder, all subfolders are closed recursively ("closesubs" variable)
// - Removed doubleclick to open subfolders
// - Added expand all and collapse all function
// - Activate selection on clicking '+'


billgates - 5/9/2005 at 10:35 AM

Attached to this message there's a sample of the ASP code needed to render a Tigra tree whose structure is stored in an Access database. Data is read from the DB and the necessary JavaScript code is automatically inserted into the ASP page.

Maybe it's useful to you ;)


hadeelb - 9/25/2005 at 10:18 AM

hi;
is there any method that can speed up expanding all items of the tree?
my tree have 6 levels and the tree items loaded dynamically from a database table.
i implemented two methods to expand the tree quickly, but it still slow to expand it using these methods.
i attached my file in this message to see my code.
any help will be appreciated.


mrpoge - 10/13/2005 at 06:51 PM

Quote:
Originally posted by billgates
Hi, I added some features to the tigra tree code, you can find them in attachment.


I ran into a bug with your 1.11 version. When selecting an already open subfolder by clicking on the node node name, the subfolder is collapsed.

I've attached a fix.


Grommit - 10/22/2005 at 02:58 PM

Could someone please give a "for dummies" explanation of how to add this function to the demo files...?

Experimenting with the files for "demo2" and the code posted by Rock, I added this to the end of tree.js:

Code:

function expand_or_collapse_all (o_tree, b_collapse) {
for (var i = 1; i < o_tree.a_index.length; i++) {
var o_item = o_tree.a_index[ i];
o_item.open(b_collapse);
}
}


Then removed this from Index.html...

new tree (TREE_ITEMS, TREE_TPL);

...and replaced it with this:

Code:

o_my_lemon_tree = new tree (TREE_ITEMS, tree_tpl);
expand_or_collapse_all (o_my_lemon_tree, true);


Am I even close to being on the right track?


bostondevin - 11/1/2005 at 06:16 PM

But this one works just fine!

Here is the HTML to call the function (be sure "hcomp_tree" matches the name of the tree you are creating:

<p><a href="#" onclick="expand_all('hcomp_tree');">Open</a> | <a href="#" onclick="expand_all('hcomp_tree', true);">Collapse</a></p>

Here is the code to call the tree:

<script language="JavaScript">
hcomp_tree = new tree (TREE_ITEMS, TREE_TPL);
</script>

Here is the javascript to do the work (put it in tree.js):

function expand_all(theTree, theDirective) {
for (var i = 1; i < eval(theTree + '.a_index.length'); i++) {
var o_item = eval(theTree + '.a_index[ i]');
o_item.open(theDirective);
}}


idlock - 5/24/2006 at 06:53 AM

Code:

function collapse_all() {
var o_item;
for (var i = 1; i < trees[0].tm5.length; i++) {
o_item = trees[0].tm5;

o_item.tmE(true); // if u check opend, use o_item.tmF
}
}
function expand_all() {
for (var i = 1; i < trees[0].tm5.length; i++) {
var o_item = trees[0].tm5;
o_item.tmE(false);
}
}


rhxk - 8/16/2006 at 12:42 PM

OK,

So I downloaded the tree.js version 1.11 modified by TFI available on this forum....thanx for this...

I'm still unable to get the expand_all or collapse_all to work.
Here's my .html portion of the code:

Code:

<script language="JavaScript" src="tree.js"></script>
<script language="JavaScript" src="tree_items.js"></script>
<script language="JavaScript" src="tree_tpl.js"></script>

<!-- Body -->
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#4682B4">
<tr><td class="intd" bgcolor="#faebd7">
<p><a href="#" onclick="expand_or_collapse_all('hello_tree', false);">Open</a> | <a href="#" onclick="expand_or_collapse_all('hello_tree', true);">Collapse</a></p>
</td></tr>
<tr><td class="intd" bgcolor="#faebd7">
<script language="JavaScript">
<!--

hello_tree = new tree (TREE_ITEMS, tree_tpl);
expand_or_collapse_all (hello_tree, true);

//-->
</script>
</td></tr>
</table>
<!-- /Body -->


And when I click on it, the IE javascript error window says "Error: 'a_index.length' is null or not an object"

Sorry as I'm new to this....how can I get this to work?

Thanx for any reply...




UPDATE: I got it to work.....apparently the call from onclick="expand_or_collapse_all('hello_tree', false);" .....the hello_tree is not supposed to be in quotes. just have onclick="expand_or_collapse_all(hello_tree, false);"


lubosdz - 5/6/2007 at 08:14 PM

hi guyzz,

it looks like the code for TREE MENU has been rewritten from scratch, I tried to use almost all function in this thread, however always ended up with error msg like "object index_a has no properties" or similar. Then I found out, that the code uses completely new function and names and object arrays, and for current version of free TIGRA TREE MENU you cannot use previous routines from here.

This is function for expanding - collapsing all branches of tree menu (new re-written code):

function expand_or_collapse_all (o_tree) {
for (var i = 1; i < o_tree.tm5.length; i++) {
o_tree.tmB(i);
}
}


USAGE:
act_tree = new tree (TREE_ITEMS, TREE_TPL);
<a href="#" onclick="expand_or_collapse_all(act_tree);">&raquo; Open - Collapse all items &laquo;</a>

Regards & thanx for great code!
XL:-)


tigra - 5/7/2007 at 02:01 AM

The difference is in the tree.js that you use. We supply formatted version and compressed version. All the samples in this forum were for the formatted version, yours looks like it's for compressed script.


JaRo - 8/9/2010 at 12:17 PM

Hi there, I use following code and I don't know how to implement your functions : /

Could you help me?

Code:

// Title: Tigra Tree with my change (Medreces)
// URL: http://www.softcomplex.com/products/tigra_menu_tree/
function tree (a_items, a_template, cur_cat_url) {
this.a_tpl = a_template;
this.a_config = a_items;
this.o_root = this;
this.a_index = [];
this.o_selected = null;
this.n_depth = -1;

var o_icone = new Image(),
o_iconl = new Image();
o_icone.src = a_template['icon_e'];
o_iconl.src = a_template['icon_l'];
a_template['im_e'] = o_icone;
a_template['im_l'] = o_iconl;
for (var i = 0; i < 220; i++)
if (a_template['icon_' + i]) {
var o_icon = new Image();
a_template['im_' + i] = o_icon;z
o_icon.src = a_template['icon_' + i];
}
this.toggle = function (n_id) { var o_item = this.a_index[n_id]; o_item.open(o_item.b_opened); };
this.select = function (n_id) { return this.a_index[n_id].select(); };
this.mout = function (n_id) { this.a_index[n_id].upstatus(true); this.a_index[n_id].mover_out(true);};
this.mover = function (n_id) { this.a_index[n_id].upstatus(); this.a_index[n_id].mover_out()};
this.find_path_to_item = find_path_to_item;

this.a_children = [];
for (var i = 0; i < a_items.length; i++)
new tree_item(this, i);

this.n_id = trees.length;
trees[this.n_id] = this;

for (var i = 0; i < this.a_children.length; i++) {
document.write(this.a_children.init());
this.a_children.open();
}

if(cur_cat_url != 'null') {
if (this.find_path_to_item(cur_cat_url)) {
path_to_item[path_to_item.length] = this;
for (var i = path_to_item.length-1; i >= 0; --i) {
if(path_to_item.a_children.length) {
trees[path_to_item.o_root.n_id].toggle(path_to_item.n_id);
trees[path_to_item.o_root.n_id].a_index[path_to_item.n_id].mover_out(true);
} else {
trees[path_to_item.o_root.n_id].select(path_to_item.n_id);
}
}
}
}
}

function find_path_to_item (cat_url, array_path) {
if(this.a_children) {
for (var i = 0; i < this.a_children.length; i++) {
if ( ( this.a_children.a_config[1] && this.a_children.a_config[1] == cat_url ) || this.a_children.find_path_to_item (cat_url)){ path_to_item[path_to_item.length] = this.a_children;
return true;
} else {
}
}
}
return false;
}

function tree_item (o_parent, n_order) {
this.n_depth = o_parent.n_depth + 1;
this.a_config = o_parent.a_config[n_order + (this.n_depth ? 3 : 0)];
if (!this.a_config) return;

this.o_root = o_parent.o_root;
this.o_parent = o_parent;
this.n_order = n_order;
this.b_opened = !this.n_depth;

this.n_id = this.o_root.a_index.length;
this.o_root.a_index[this.n_id] = this;
o_parent.a_children[n_order] = this;

this.a_children = [];
for (var i = 0; i < this.a_config.length - 2; i++)
new tree_item(this, i);

this.get_icon = item_get_icon;
this.open = item_open;
this.select = item_select;
this.init = item_init;
this.upstatus = item_upstatus;
this.find_path_to_item = find_path_to_item;
this.mover_out = item_mover_out;
this.is_last = function () { return this.n_order == this.o_parent.a_children.length - 1 };
}

function item_open (b_close) {
var o_idiv = get_element('i_div' + this.o_root.n_id + '_' + this.n_id);
if (!o_idiv) return;

if (!o_idiv.innerHTML) {
var a_children = [];
for (var i = 0; i < this.a_children.length; i++)
a_children= this.a_children.init();
o_idiv.innerHTML = a_children.join('');
}
if(o_idiv.style) o_idiv.style.display = (b_close ? 'none' : 'block');

this.b_opened = !b_close;
var o_jicon = document.images['j_img' + this.o_root.n_id + '_' + this.n_id],
o_iicon = document.images['i_img' + this.o_root.n_id + '_' + this.n_id];
if (o_jicon) o_jicon.src = this.get_icon(true);
if (o_iicon) o_iicon.src = this.get_icon();
this.upstatus();
}

function item_select (b_deselect) {
if (!b_deselect) {
var o_olditem = this.o_root.o_selected;
this.o_root.o_selected = this;
if (o_olditem) o_olditem.select(true);
}
var o_iicon = document.images['i_img' + this.o_root.n_id + '_' + this.n_id];
if (o_iicon) o_iicon.src = this.get_icon();
get_element('i_txt' + this.o_root.n_id + '_' + this.n_id).style.fontWeight = b_deselect ? 'normal' : '600';

this.upstatus();
return Boolean(this.a_config[1]);
}

function item_upstatus (b_clear) {
window.setTimeout('window.status="' + (b_clear ? '' : this.a_config[0] + (this.a_config[1] ? ' ('+ this.a_config[1] + ')' : '')) + '"', 10);
}

function item_mover_out (b_clear) {
var o_jicon = document.images['j_img' + this.o_root.n_id + '_' + this.n_id];
if( o_jicon ) {
o_jicon.src = this.o_root.a_tpl['icon_' + ((b_clear ? 0 : 128) + (this.a_config[2] ? 64 : 0) + (this.n_depth ? 0 : 32) + (this.a_children.length? 16 : 0) + (this.a_children.length && this.b_opened ? 8 : 0) + 2 + (this.is_last() ? 1 : 0))];
}
}

function item_init () {
var a_offset = [],
o_current_item = this.o_parent;
for (var i = this.n_depth; i > 1; i--) {
a_offset = '<img src="' + this.o_root.a_tpl[o_current_item.is_last() ? 'icon_e' : 'icon_l'] + '" border="0" align="absmiddle">';
o_current_item = o_current_item.o_parent;
}
if(this.a_config[0]=='') {
return '<table cellpadding="0" cellspacing="0" border="0"></table>' + (this.a_children.length ? '<div id="i_div' + this.o_root.n_id + '_' + this.n_id + '" style="display:none"></div>' : '');
}
return '<table cellpadding="0" cellspacing="0" border="0"><tr><td>' + (this.n_depth ? a_offset.join('') + (this.a_children.length ? '<a href="javascript: trees[' + this.o_root.n_id + '].toggle(' + this.n_id + ')" onmouseover="trees[' +this.o_root.n_id + '].mover(' + this.n_id + ')" onmouseout="trees[' + this.o_root.n_id + '].mout(' + this.n_id + ')"><img src="' + this.get_icon(true) + '" border="0" align="absmiddle" name="j_img' + this.o_root.n_id + '_' + this.n_id + '"></a>' : '<img src="' + this.get_icon(true) + '" id="j_img' + this.o_root.n_id + '_' + this.n_id + '" border="0" align="absmiddle">') : '') + '<a href="' + ( this.a_config[1]=='0' ? 'javascript: trees[' + this.o_root.n_id + '].toggle(' + this.n_id + ')' : this.a_config[1] ) +'" target="' + this.o_root.a_tpl['target'] + '" onclick="return ' + (this.a_children[0] ? 'true' : 'trees[' + this.o_root.n_id +'].select(' + this.n_id + ')' ) + '" onmouseover="trees[' + this.o_root.n_id + '].mover(' + this.n_id + ')" onmouseout="trees[' +this.o_root.n_id + '].mout(' + this.n_id + ')" class="' + style_el + '" id="i_txt' + this.o_root.n_id + '_' + this.n_id + '"><img src="' + this.get_icon() + '" border="0" align="absmiddle" name="i_img' + this.o_root.n_id + '_' + this.n_id + '" class="t' + this.o_root.n_id + 'im">' + this.a_config[0] + '</a></td></tr></table>' + (this.a_children.length ? '<div id="i_div' + this.o_root.n_id + '_' + this.n_id + '" style="display:none"></div>' : '');
}

function item_get_icon (b_junction) {
return this.o_root.a_tpl['icon_' + ((this.a_config[2] && b_junction ? 64 : 0) + (this.n_depth ? 0 : 32) + (this.a_children.length ? 16 : 0) + (this.a_children.length && this.b_opened ? 8 : 0) + (!b_junction && this.o_root.o_selected == this ? 4 : 0) + (b_junction ? 2 : 0) + (b_junction && this.is_last() ? 1 : 0))];
}

var path_to_item = [];
var trees = [];
get_element = document.all ?
function (s_id) { return document.all[s_id] } :
function (s_id) { return document.getElementById(s_id) };
load_tree_menu = 1;


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