Question

I have listed data for ASP.net control TreeView. I wanted to disable a particular node/parentnode in the listed TreeView. I wanted to do this using jQuery.

Answer 1

if you take a simple treenode markup:

<asp:TreeView runat="server" ID="myTreeView">
        <Nodes>
            <asp:TreeNode Text="Node 1 "/>                          
            <asp:TreeNode Text="Node 2"/>                           
            <asp:TreeNode Text="Node 3"/>                           
        </Nodes>
        <NodeStyle CssClass="treeNode" />
    </asp:TreeView>

Then the default output for a single node is:

<table cellspacing="0" cellpadding="0" style="border-width: 0pt;">
    <tbody><tr>
        <td><img alt="" src="/WebResource.axd?d=g57q362hyd_ZDMok5KQd0PqwW46aD7OdNOJZcZxqq5Q1&amp;t=634092817937234954"></td><td style="white-space: nowrap;" class="treeNode myTreeView_2"><a style="border-style: none; font-size: 1em;" id="myTreeViewt0" onclick="TreeView_SelectNode(myTreeView_Data, this,'myTreeViewt0');" href="javascript:__doPostBack('myTreeView','sNode 1 ')" class="myTreeView_0 treeNode myTreeView_1">Node 1 </a></td>
    </tr>
</tbody></table>

At this point you can see that the surrounding the a tag that gets generated receives the css class ‘treeNode’ so to select a specific node you could use the following selector:

$(‘.treeNode:eq(0)’) to get the first node in the tree. there are other selectors you may prefer to use, see the selectors page on jQuery docs.

Then you can do different things.

• You can hide the node:

    $('.treeNode:eq(0)').hide();
  

you can replace the a tag with text:

      var node = $('.treeNode:eq(0)'); //get the node element
      var nodeLink = $('a', node).hide() //get the link and hide it;
      node.append(nodeLink.text()); //get the text from the link and add it to the node

or you can use a 3rd party jquery plugin to block the element (usually good while performing an ajax operation):

      - download the [blockui][2] plugin
      - reference the javascript file from your page (or masterpage)
      - then use this javascript call:
            to block:
                        $('.treeNode:eq(0)').block();
            unblock:
                         $('.treeNode:eq(0)').unblock();