Rearranging Nodes in TreeView

[IT4EVR]

I have a server-side treeview control that I want to be able to move selected nodes up or down within a parent. I can do this rather easily in server-side code but it generates post backs each time. So that led me to try a Javascript solution.

I'm not a DOM expert but I see the possibilities here. However I can't get the code to work properly.

trvt1 represents the first node under the parent, trvt4 represents the fourth. This code below moves the 4th behind the 1st node but I want to insert it before. I inserted a spacer because if I didn't insertBefore puts the nodes on the same line.

function nodeUp()
{
    /* this inserts an existing node AFTER the target node then rearranges
    * the ordering of the node */
    var spacer = document.createElement('br');
    document.getElementById('trvt1').appendChild(spacer);
    var testing = document.getElementById('trvt1').insertBefore(document.getElementById('trvt4'));
}

If someone can point me in the right direction that would be great.

 

[IT4EVR]

The problem revolves around this server-side treeview control. Apparently it inserts elements with ids that aren't listed in the properties of the control.

I'm going to create this with regular <ul><li> tags instead. The insertBefore works fine in this case.

 

[monksnake]

From what I see, you are using the insertBefore statement incorrectly.

var testing = document.getElementById('trvt1').insertBefore(document.getElementById('trvt4'));

Unless you are referencing the node testing, you have no use to assign it, and the way your code is written document.getElementById('trvt1') is a parent node of document.getElementById('trvt4').

Do this instead, since I don't know the name of the parent node, I'll just reference it with parentNode:

document.getElementById('trvt1')[!].parentNode[/!].insertBefore(document.getElementById('trvt4')[!], document.getElementById('trvt1')[/!]);

<.

 

[IT4EVR]

Thanks, but what that does is position the fourth node in front of the first node on the same line directly under the parent and leaves a space where the fourth node resided.

This isn't your fault, it's based on how the server-side treeview is rendered. Apparently for each node a separate table is created. I put pound signs where Microsoft added a lot of proprietary gobbledy gook. It appears the parent node would be the <div id="trv">. Inside this div are individual tables for each node.

Below is an example of how this treeview is rendered:

<div id="trv">
	<table cellpadding="0" cellspacing="0" style="border-width:0;">
		<tr>
			<td><a id="trvn0" href="#""><img src="#" style="border-width:0;" /></a></td><td style="white-space:nowrap;"><a class="trv_0" href="#" id="trvt0">Root Node</a></td>
		</tr>
	</table><div id="trvn0Nodes" style="display:block;">
		<table cellpadding="0" cellspacing="0" style="border-width:0;">
			<tr>
				<td><div style="width:20px;height:1px"></div></td><td><img src="#"/></td><td style="white-space:nowrap;"><a id="trvt1">First Child</a></td>
			</tr>
		</table>
</div>

 

[IT4EVR]

When I created an html based treeview with list tags inside of a <div> element I was easily able to move nodes up and down. It even positioned the child nodes along with it.

I would do it this way but I'm storing the links and ordering of the nodes in a database table and not sure how that might jive with javascript on the client.

So if there is a way to work with this Microsoft TreeView in Javascript I would love it.

The other issue, and maybe more important, is that when the Microsoft treeview is rendered, it names the id's trvt1, trvt2, trvt3, etc. I'm not giving these names.