Traversing TreeView Server Control in JavaScript

[BlueEagle]

hi to all!

I hv added a TreeView Control on my page in Asp.net 2.0
and i want to move through the Tree in JavaScript

Anyone hv an idea
Advance Thanks

BlueEagle

[gits]

hi ...

welcome to TSDN ...

please post an example how the tree turns out in HTML-code at the client ... i assume you want to go through the tree at the client?

kind regards

[BlueEagle]

ya
i want to go through the tree on client.
Following is the HTML code of two tree nodes
i.e Root node n childNode

[HTML]<div id="ctl00_mainC opy_TvCategory" tabindex="1" class="body_tex t" onClick="return SendAJAXRequest ('category')" style="height:1 00%;width:90%;" >

<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td><a id="ctl00_mainC opy_TvCategoryn 0" href="javascrip t:TreeView_Togg leNode(ctl00_ma inCopy_TvCatego ry_Data,0,docum ent.getElementB yId('ctl00_main Copy_TvCategory n0'),' ',document.getE lementById('ctl 00_mainCopy_TvC ategoryn0Nodes' ))"><img src="/Portal/WebResource.axd ?d=1AWafB_GTw_x 5zrwUf0qOxbxUc9 SpHSpetVTIkUu1a E1&amp;t=633113 381376406250" alt="Collapse Root" style="border-width:0;" /></a></td><td class="ctl00_ma inCopy_TvCatego ry_2 ctl00_mainCopy_ TvCategory_4" style="white-space:nowrap;"> <span class="ctl00_ma inCopy_TvCatego ry_0 ctl00_mainCopy_ TvCategory_1 ctl00_mainCopy_ TvCategory_3" id="ctl00_mainC opy_TvCategoryt 0">

Root</span></td>

</tr><tr style="height:0 px;">
<td></td>

</tr>
</table><div id="ctl00_mainC opy_TvCategoryn 0Nodes" style="display: block;">
<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr style="height:0 px;">
<td></td>
</tr><tr>
<td><div style="width:20 px;height:1px"> </div></td><td><img src="/Portal/WebResource.axd ?d=1AWafB_GTw_x 5zrwUf0qO_v3eFF 7H5bL_Egg4IX37Y A1&amp;t=633113 381376406250" alt="" /></td><td class="ctl00_ma inCopy_TvCatego ry_2 body_text ctl00_mainCopy_ TvCategory_8" onmouseover="Tr eeView_HoverNod e(ctl00_mainCop y_TvCategory_Da ta, this)" onmouseout="Tre eView_UnhoverNo de(this)" style="white-space:nowrap;"> <a class="ctl00_ma inCopy_TvCatego ry_0 ctl00_mainCopy_ TvCategory_1 body_text ctl00_mainCopy_ TvCategory_7" href="javascrip t:__doPostBack( 'ctl00$mainCopy $TvCategory','s 1\\2')" onclick="TreeVi ew_SelectNode(c tl00_mainCopy_T vCategory_Data, this,'ctl00_mai nCopy_TvCategor yt1');" id="ctl00_mainC opy_TvCategoryt 1" style="border-style:none;font-size:1em;">

Books</a></td>
</tr><tr style="height:0 px;">

<td></td>
</tr>
</table><table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr style="height:0 px;">
<td></td>
</tr><tr>
<td><div style="width:20 px;height:1px"> </div></td><td><img src="/Portal/WebResource.axd ?d=1AWafB_GTw_x 5zrwUf0qO_v3eFF 7H5bL_Egg4IX37Y A1&amp;t=633113 381376406250" alt="" /></td><td class="ctl00_ma inCopy_TvCatego ry_2 body_text ctl00_mainCopy_ TvCategory_8" onmouseover="Tr eeView_HoverNod e(ctl00_mainCop y_TvCategory_Da ta, this)" onmouseout="Tre eView_UnhoverNo de(this)" style="white-space:nowrap;"> <a class="ctl00_ma inCopy_TvCatego ry_0 ctl00_mainCopy_ TvCategory_1 body_text ctl00_mainCopy_ TvCategory_7" href="javascrip t:__doPostBack( 'ctl00$mainCopy $TvCategory','s 1\\8')" onclick="TreeVi ew_SelectNode(c tl00_mainCopy_T vCategory_Data, this,'ctl00_mai nCopy_TvCategor yt2');" id="ctl00_mainC opy_TvCategoryt 2" style="border-style:none;font-size:1em;">Brea d</a></td>
</tr><tr style="height:0 px;">

<td></td>
</tr>[/HTML]

If u got an idea please tell me

thanks

BlueEagle

[gits]

hi ...

well ... your tree is a html-table so now we know that we may go through the html table. to get all rows you may use:

[CODE=javascript]
var table_rows = document.getEle mentsByTagName( 'tr');
[/CODE]
that returns you the node-list of all tr-elements in your page. now you may loop through that list and refer to childNodes of every row ... what field, value or whatever of the row is of interest for you? ... have a look at one row and tell me what you want to retrieve.

kind regards

[BlueEagle]

hi ...

well ... your tree is a html-table so now we know that we may go through the html table. to get all rows you may use:

[CODE=javascript]
var table_rows = document.getEle mentsByTagName( 'tr');
[/CODE]
that returns you the node-list of all tr-elements in your page. now you may loop through that list and refer to childNodes of every row ... what field, value or whatever of the row is of interest for you? ... have a look at one row and tell me what you want to retrieve.

kind regards

thanks it works
but can u tell me some methods of collection object "table_rows "
like length()
actually i want to get the id of all <tr> objects
like id="ctl00_mainC opy_TvCategoryt 1"
shown in above code
i need only the way that how can i move through "table_rows " by using loop
n how can i extract the required using substring or innerHTML

regards,
BlueEagle

[gits]

hi ...

hmmm ... that is not that easy as you might think. the node-list is only a collection of dom-nodes ... so our table_rows-list consists of [0...n] tr-nodes. probably you know that a dom-node may have childNodes appended that may be element-nodes or text-nodes. a node has attributes and properties. for example to retrieve (and alert) the id of every row you may do the following:

[CODE=javascript]
for (var i = 0; i < table_rows.leng th; i++) {
var row = table_rows[i];

alert(row.id);
}
[/CODE]

of course you may use innerHTML to get everything that a row contains but when using row.childNodes you get a collection of all current childNodes of a table-row and you may loop again and ask for properties or attributes ...

kind regards

[BlueEagle]

hi ...

hmmm ... that is not that easy as you might think. the node-list is only a collection of dom-nodes ... so our table_rows-list consists of [0...n] tr-nodes. probably you know that a dom-node may have childNodes appended that may be element-nodes or text-nodes. a node has attributes and properties. for example to retrieve (and alert) the id of every row you may do the following:

[CODE=javascript]
for (var i = 0; i < table_rows.leng th; i++) {
var row = table_rows[i];

alert(row.id);
}
[/CODE]

of course you may use innerHTML to get everything that a row contains but when using row.childNodes you get a collection of all current childNodes of a table-row and you may loop again and ask for properties or attributes ...

kind regards

Yee

i hv done the job. thanks
i got an idea...from ur idea

as u see HTML making the DIV and Table for each level of nodes of Tree
and there is also <a> tag for each node.
i m succeeded in getting the id's of all tree nodes by following codes
[code=javascript]
var table_rows = document.getEle mentsByTagName( 'a');
alert(table_row s.length);
var ids='Start';
for (var i = 0; i < table_rows.leng th; i++) {
var row = table_rows[i];
ids = ids + row.id;
}
ids = ids + 'End';
alert(ids);
[/code]


much thanks for reponse
my ist experiance is 2 good

regards,

[gits]

hi ...

glad you got the idea and your code working with it ;) ... come back to the forum and post your questions ... anytime ... :)

kind regards