Prevent TreeView PostBack When Click the Little Plus Sign (expand)

[pbd22]

Hi.

Can somebody tell me how to prevent a postback
when I click on the little "plus" sign next to the
treenode's root folder? It postbacks and I have to
restart a video stream coming to the page via an
iframe.

I have tried javascript:void(0) and that doesn't work.

anybody?

thanks.

 

[cfps.Christian]

Hi.

Can somebody tell me how to prevent a postback
when I click on the little "plus" sign next to the
treenode's root folder? It postbacks and I have to
restart a video stream coming to the page via an
iframe.

I have tried javascript:void(0) and that doesn't work.

anybody?

thanks.

I didn't want to deal with that either so I wrote my own treeview
using javascript.

First I put a Plus/Minus image box in front of a div then added all
the nodes to the div as labels
Then when someone clicks the div I change the image to the plus/minus
and expand/contract the div by setting all the subnodes visibility to
visible and position to static for plus and visibility to hidden and
position to absolute for minus

The position absolute will allow the div directly below that one to
move up into the blank space then when static is put back everything
returns to its rightful place.

 

[pbd22]

I didn't want to deal with that either so I wrote my own treeview
using javascript.

First I put a Plus/Minus image box in front of a div then added all
the nodes to the div as labels
Then when someone clicks the div I change the image to the plus/minus
and expand/contract the div by setting all the subnodes visibility to
visible and position to static for plus and visibility to hidden and
position to absolute for minus

The position absolute will allow the div directly below that one to
move up into the blank space then when static is put back everything
returns to its rightful place.

Care to share your code?

 

[cfps.Christian]

Care to share your code?

<div>
<input type="image" id="grpTopNode" onClick="return
ExpandContractGroup(this);" src="minus.gif"/>
<label for="imgTopNode" id="lblTopNode">Top Node Text</label>
//you would also do a mouseover event on this section to highlight (I
used CSS)
</div>
<ul id="TopNode">
//you would probably use listitem for the unordered list but it
worked
//so I don't plan to change it
<label id="lblNodeName">Node Name</label>
</ul>

function ExpandContractGroup(obj)
{
var strGroup = obj.id.replace('grp', '');
// get group name
var oGroup = document.getElementById(strGroup);
//replace the image 'grp' and it gives you the name of the "ul"

if (obj.src.indexOf('Minus.gif') > -1)
{
oGroup.style.visibility = 'hidden';
var items = oGroup.getElementsByTagName('label');
for (var i = 0; i < items.length; i++)
items.style.position = 'absolute';
obj.src = 'Plus.gif';
}
else
{
oGroup.style.visibility = 'visible';
var items = oGroup.getElementsByTagName('img');
for (var i = 0; i < items.length; i++)
items.style.position = 'static';
obj.src = 'Minus.gif';
}
return false;
}

Absolute positioning removes the space that the objects take up.
Add events where needed.
I also keep track of the groups in the client script for other
purposes
(this code was used in my instant messenger and I had to drag drop
items in my treeview).

The basic idea is that you have to do everything manually. Catch the
click and use the object passed to determine if you need to expand/
contract. Once you do that eliminate all the items in the list. For
each item add functionality as needed, for me I was lucky all of them
had the same functionality so I just used a big loop.