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_mainCopy_TvCategory" tabindex="1" class="body_text" onClick="return SendAJAXRequest('category')" style="height:100%;width:90%;">

<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td><a id="ctl00_mainCopy_TvCategoryn0" href="javascript:TreeView_ToggleNode(ctl00_mainCop y_TvCategory_Data,0,document.getElementById('ctl00 _mainCopy_TvCategoryn0'),' ',document.getElementById('ctl00_mainCopy_TvCatego ryn0Nodes'))"><img src="/Portal/WebResource.axd?d=1AWafB_GTw_x5zrwUf0qOxbxUc9SpHSp etVTIkUu1aE1&amp;t=633113381376406250" alt="Collapse Root" style="border-width:0;" /></a></td><td class="ctl00_mainCopy_TvCategory_2 ctl00_mainCopy_TvCategory_4" style="white-space:nowrap;"><span class="ctl00_mainCopy_TvCategory_0 ctl00_mainCopy_TvCategory_1 ctl00_mainCopy_TvCategory_3" id="ctl00_mainCopy_TvCategoryt0">

Root</span></td>

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

</tr>
</table><div id="ctl00_mainCopy_TvCategoryn0Nodes" style="display:block;">
<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr style="height:0px;">
<td></td>
</tr><tr>
<td><div style="width:20px;height:1px"></div></td><td><img src="/Portal/WebResource.axd?d=1AWafB_GTw_x5zrwUf0qO_v3eFF7H5bL _Egg4IX37YA1&amp;t=633113381376406250" alt="" /></td><td class="ctl00_mainCopy_TvCategory_2 body_text ctl00_mainCopy_TvCategory_8" onmouseover="TreeView_HoverNode(ctl00_mainCopy_TvC ategory_Data, this)" onmouseout="TreeView_UnhoverNode(this)" style="white-space:nowrap;"><a class="ctl00_mainCopy_TvCategory_0 ctl00_mainCopy_TvCategory_1 body_text ctl00_mainCopy_TvCategory_7" href="javascript:__doPostBack('ctl00$mainCopy$TvCa tegory','s1\\2')" onclick="TreeView_SelectNode(ctl00_mainCopy_TvCate gory_Data, this,'ctl00_mainCopy_TvCategoryt1');" id="ctl00_mainCopy_TvCategoryt1" style="border-style:none;font-size:1em;">

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

<td></td>
</tr>
</table><table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr style="height:0px;">
<td></td>
</tr><tr>
<td><div style="width:20px;height:1px"></div></td><td><img src="/Portal/WebResource.axd?d=1AWafB_GTw_x5zrwUf0qO_v3eFF7H5bL _Egg4IX37YA1&amp;t=633113381376406250" alt="" /></td><td class="ctl00_mainCopy_TvCategory_2 body_text ctl00_mainCopy_TvCategory_8" onmouseover="TreeView_HoverNode(ctl00_mainCopy_TvC ategory_Data, this)" onmouseout="TreeView_UnhoverNode(this)" style="white-space:nowrap;"><a class="ctl00_mainCopy_TvCategory_0 ctl00_mainCopy_TvCategory_1 body_text ctl00_mainCopy_TvCategory_7" href="javascript:__doPostBack('ctl00$mainCopy$TvCa tegory','s1\\8')" onclick="TreeView_SelectNode(ctl00_mainCopy_TvCate gory_Data, this,'ctl00_mainCopy_TvCategoryt2');" id="ctl00_mainCopy_TvCategoryt2" style="border-style:none;font-size:1em;">Bread</a></td>
</tr><tr style="height:0px;">

<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:

var table_rows = document.getElementsByTagName('tr');
 

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:

var table_rows = document.getElementsByTagName('tr');
 

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_mainCopy_TvCategoryt1"
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:

for (var i = 0; i < table_rows.length; i++) {
    var row = table_rows[i];
 
    alert(row.id);
}
 

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:

for (var i = 0; i < table_rows.length; i++) {
    var row = table_rows[i];
 
    alert(row.id);
}
 

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

var table_rows = document.getElementsByTagName('a');
alert(table_rows.length);
var ids='Start';
for (var i = 0; i < table_rows.length; i++) {
    var row = table_rows[i];
    ids = ids + row.id;
}
ids = ids + 'End';
    alert(ids);
 

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