ASP.NET treeview manipulation api for jquery?

Question

In my asp.net solution, I have a asp.net tree view, and I want to make some client side manipulations to it. I am basically looking for a way in jQuery, to do

• iterate through all root nodes
• iterate through all sub nodes given a node
• get the text of the given node
• get the value of the given node
• add a blue highlight around the text of the given node
• expand/collapse given node

I don't want to use any other kind of jQuery tree view plugins either. Does anyone know if there is a project that someone did to do this? Or can provide links or code to do this?

Thanks.

---

EDIT :

Here is an example of the HTML structure:

<DIV id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview>
    <TABLE style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" cellSpacing=0 cellPadding=0>
        <TBODY>
            <TR>
                <TD><A id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn0 href="javascript:TreeView_ToggleNode(ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_Data,0,ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn0,' ',ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn0Nodes)"><IMG style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" alt="Collapse 1. A" src="/WebResource.axd?d=oKkfR-BHb97Y7tPLeoIZ5CuPUYp5n51Q4XEiQRUTaq1HISixWa68nxn2YUcnu0P4F-QpKQAcYmkDFOY--39rPe3LvzCxPUlUASBT63y5J9TTXtUk0&amp;t=634605054607203927"></A></TD>
                <TD style="WHITE-SPACE: nowrap" class=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_2><A id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewt0 class="ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_0 ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_1" onclick="javascript:TreeView_ToggleNode(ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_Data,0,ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn0,' ',ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn0Nodes)" href="javascript:void(0);" target=_self>1. A</A></TD>
            </TR>
        </TBODY>
    </TABLE>
    <DIV style="DISPLAY: block" id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn0Nodes>
        <TABLE style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" cellSpacing=0 cellPadding=0>
            <TBODY>
                <TR>
                    <TD>
                        <DIV style="WIDTH: 20px; HEIGHT: 1px"></DIV>
                    </TD>
                    <TD><IMG alt="" src="/WebResource.axd?d=wVUEBOQcgjQn-5A_RWLY_fRfV16DlyE_TEShuFyVd0dtheEKaRWia9U8hMe7BvBalON1Kc8T7hXyEcYAYP1zafcbfrHc3IQbxc_merS67hdm_-KX0&amp;t=634605054607203927"></TD>
                    <TD style="WHITE-SPACE: nowrap"><A id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewt1 class=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_0 onclick="javascript:TreeView_SelectNode(ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_Data, this,'ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewt1');" href='javascript:DisplayPDF("ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_pdf_and_searchResults_container","http://mydomain/mylibrary/1. A/5.5 Quick Reference Guide.pdf","850","1100", null);' target=_self>1. 5.5 Quick Reference Guide</A></TD>
                </TR>
            </TBODY>
        </TABLE>
        <TABLE style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" cellSpacing=0 cellPadding=0>
            <TBODY>
                <TR>
                    <TD>
                        <DIV style="WIDTH: 20px; HEIGHT: 1px"></DIV>
                    </TD>
                    <TD><IMG alt="" src="/WebResource.axd?d=wVUEBOQcgjQn-5A_RWLY_fRfV16DlyE_TEShuFyVd0dtheEKaRWia9U8hMe7BvBalON1Kc8T7hXyEcYAYP1zafcbfrHc3IQbxc_merS67hdm_-KX0&amp;t=634605054607203927"></TD>
                    <TD style="WHITE-SPACE: nowrap"><A id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewt2 class=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_0 onclick="javascript:TreeView_SelectNode(ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_Data, this,'ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewt2');" href='javascript:DisplayPDF("ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_pdf_and_searchResults_container","http://mydomain/mylibrary/1. A/5.6 Upgrade.pdf","850","1100", null);' target=_self>2. 5.6 Upgrade</A></TD>
                </TR>
            </TBODY>
        </TABLE>
    </DIV>
    <TABLE style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" cellSpacing=0 cellPadding=0>
        <TBODY>
            <TR>
                <TD><A id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn3 href="javascript:TreeView_ToggleNode(ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_Data,3,ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn3,' ',ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn3Nodes)"><IMG style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" alt="Collapse 2. B" src="/WebResource.axd?d=oKkfR-BHb97Y7tPLeoIZ5CuPUYp5n51Q4XEiQRUTaq1HISixWa68nxn2YUcnu0P4F-QpKQAcYmkDFOY--39rPe3LvzCxPUlUASBT63y5J9TTXtUk0&amp;t=634605054607203927"></A></TD>
                <TD style="WHITE-SPACE: nowrap" class=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_2><A id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewt3 class="ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_0 ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_1" onclick="javascript:TreeView_ToggleNode(ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_Data,3,ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn3,' ',ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn3Nodes)" href="javascript:void(0);" target=_self>2. B</A></TD>
            </TR>
        </TBODY>
    </TABLE>
    <DIV style="DISPLAY: block" id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn3Nodes>
        <TABLE style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" cellSpacing=0 cellPadding=0>
            <TBODY>
                <TR>
                    <TD>
                        <DIV style="WIDTH: 20px; HEIGHT: 1px"></DIV>
                    </TD>
                    <TD><IMG alt="" src="/WebResource.axd?d=wVUEBOQcgjQn-5A_RWLY_fRfV16DlyE_TEShuFyVd0dtheEKaRWia9U8hMe7BvBalON1Kc8T7hXyEcYAYP1zafcbfrHc3IQbxc_merS67hdm_-KX0&amp;t=634605054607203927"></TD>
                    <TD style="WHITE-SPACE: nowrap"><A id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewt4 class=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_0 onclick="javascript:TreeView_SelectNode(ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_Data, this,'ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewt4');" href='javascript:DisplayPDF("ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_pdf_and_searchResults_container","http://mydomain/mylibrary/2. B/8830 Downloading PodCasts.pdf","850","1100", null);' target=_self>1. 8830 Downloading PodCasts</A></TD>
                </TR>
            </TBODY>
        </TABLE>
    </DIV>
    <TABLE style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" cellSpacing=0 cellPadding=0>
        <TBODY>
            <TR>
                <TD><A id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn5 href="javascript:TreeView_ToggleNode(ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_Data,5,ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn5,' ',ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn5Nodes)"><IMG style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" alt="Collapse 3. C" src="/WebResource.axd?d=oKkfR-BHb97Y7tPLeoIZ5CuPUYp5n51Q4XEiQRUTaq1HISixWa68nxn2YUcnu0P4F-QpKQAcYmkDFOY--39rPe3LvzCxPUlUASBT63y5J9TTXtUk0&amp;t=634605054607203927"></A></TD>
                <TD style="WHITE-SPACE: nowrap" class=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_2><A id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewt5 class="ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_0 ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_1" onclick="javascript:TreeView_ToggleNode(ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_Data,5,ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn5,' ',ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn5Nodes)" href="javascript:void(0);" target=_self>3. C</A></TD>
            </TR>
        </TBODY>
    </TABLE>
    <DIV style="DISPLAY: block" id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewn5Nodes>
        <TABLE style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" cellSpacing=0 cellPadding=0>
            <TBODY>
                <TR>
                    <TD>
                        <DIV style="WIDTH: 20px; HEIGHT: 1px"></DIV>
                    </TD>
                    <TD><IMG alt="" src="/WebResource.axd?d=wVUEBOQcgjQn-5A_RWLY_fRfV16DlyE_TEShuFyVd0dtheEKaRWia9U8hMe7BvBalON1Kc8T7hXyEcYAYP1zafcbfrHc3IQbxc_merS67hdm_-KX0&amp;t=634605054607203927"></TD>
                    <TD style="WHITE-SPACE: nowrap"><A id=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewt6 class=ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_0 onclick="javascript:TreeView_SelectNode(ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeview_Data, this,'ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_my_treeviewt6');" href='javascript:DisplayPDF("ctl00_m_g_7276d5bd_969d_40e4_b299_08b2f89c43e9_ctl00_pdf_and_searchResults_container","http://mydomain/mylibrary/3. C/8830 International Roaming.pdf","850","1100", null);' target=_self>1. 8830 International Roaming</A></TD>
                </TR>
            </TBODY>
        </TABLE>
    </DIV>
</DIV>

Answer 1

Alright, as i mentioned, I don't know of any links. That HTML was a little tuff, ASP default design I'm assuming. Been a while since I worked with ASP. Any who. I made an example fiddle with a lot of comment in "per item demand" detail based on your question. I give a small example of how to perform each task separately along with some other useful information. For more information, be sure to frequently check http://api.jquery.com/

Examples

//  the following will get the main tree view wrapper, unless you change your ID names of course
//  by useing `.not('[id*=Nodes]')`, we can eliminate all div's having "my_treeview" without elementating the parent
//  you could also use `.first()` and get the same result
//  simply showing a couple different ways jQuery offers "selection" of elements
var treeView = $('div[id*=my_treeview]').not('[id*=Nodes]');
clog(treeView, 'Tree View Element');

//  ***  iterate through all root nodes  ***
treeView.children('table').each(function(i) { // `i` = index number (0 based)
    var node = $(this),  //  get current node
        nodeSub = $(this).next("div");  //  get sub nodes if avaialbe, if not, this will be empty jQuery Object
    clog([node, nodeSub], 'Node && Sub');
})

//  ***  iterate through all sub nodes given a node  ***
var given = treeView.children('table').first(); // in this case, just grabs first node, since it has multiple subs
clog(given, 'Given Sub Node');
given.next('div').children('table').each(function(i) {
    var subNode = $(this);
    clog(subNode, 'Sub Nodes of First Node');
});

//  ***  get the text of the given node  ***
//  this selector based on given HTML example of all node text being in an A tag having an
//  ID that contains the phrase `my_treeviewt`
//  i would suggest using class names like ('node-text') instead
treeView.find('a[id*=my_treeviewt]').each(function(i) {
    clog($(this).text(), 'Node Text by Each Node && Sub Node'); 
});

//  ***  get the value of the given node  ***
//  ??? UNSURE of your intent with this one ???

//  ***  add a blue highlight around the text of the given node  ***
given.find("a").last().css({ 'background-color': '#2AF', 'color': '#FFA' })
//  here i change the css of an element by hand using traditional CSS names
//  jQuery does include some shortcut options, my suggestiong would be to make a 'highglight' class,
//  then simply use `addClass('highlight')` or `removeClass('highligh')`


//  ***  expand/collapse given node  ***
//  selector based on layout, but again, I would suggest setting up class names to use like
//  `.node` and/or '.node.sub-node'
$('div > table a').attr('onclick', ''); // first i remove all the set onclicks for now, they cause their own interference
$(document).on('click', 'div > table a', function(e) {
    e.preventDefault();  //  stop href link from working on an A tag
    var parent = $(this).closest('table');  //  finds first parent table, aka, the "node"
    if (parent.next('div').length) {    //  will return false if there is not a sub node
        var sub = parent.next('div');
        if (sub.is(':visible')) {   //  note, this does not just check 'visible' css state, it also checks if 'display' css is set or if it is 'none'
            sub.hide();
        }
        else {
            sub.show();
        }
    }
})