Hello, all.

I'm trying to add an "OnClientClick" event to treenodes in the treeview, so that I can run a javascript function as well as postback to the page.

 This function simply displays a "processing" layer until the page unloads and redirects to the new page.

I have no problem calling the function on the page "onbeforeunload" event.  But, that's not suitable because even expanding a plus sign on the treeview invokes this message, but the page never really unloads, so the layer never disappears.  So, I'm hoping to call this function instead with the "OnClientClick" event instead.

I figure I should be using the OnTreeNodeDataBound method to accomplish this, but can't quite figure it out.

Much appreciated for any help.

 Thanks,

Loz

Hi,

Try putting the below code inside the head tag of your page:

------------------------------------------------------------------- 

window.onload = function(){

     var treeview = document.getElementById("<%=Tree1.ClientID %>"); //use your treeview  id in place of  Tree1
     var treeLinks = treeview.getElementsByTagName("a");
     for(i=0;i<treeLinks.length;i++)
     {
          if(treeLinks[i].firstChild.tagName != "IMG")
          {
                  
              treeLinks[i].onclick = treeNodeClickHandler;  //setting the client function to be called on treenode click
              
          }
      }
}

function treeNodeClickHandler()  //put the code  that will run when node is clicked, inside this function
{
    alert(this.innerText);  // 'this' refers to the clicked node
}

------------------------------------------------------------------------
 

Hope this helps.

cheers!! 

Thanks a lot for the suggestion.

 But now the "processing" layer simply runs all the time (as soon as the page is loaded), with no "click" event required.

 I think I'm gonna have to intercept the generation of the link in the OnTreeNodeDataBound event anyhow.

 Any ideas on that approach?

 Thanks, again.

 Loz

I am not aware of your exact requirement, you may try the following(although the method is not very 'clean'):

In the handler for the OnTreeNodeDataBound, try wrapping the node text in a span as:

----------------------------------------------------------------- 

e.Node.Text = "<span onclick='javascript:myNodeClickHandler()'>"+e.Node.Text+"</span>";

-----------------------------------------------------------------

That would probably work but tooltips may show that big ugly text.

Hope that helps.

cheers!! 

Thanks, again.

 I managed to do that when the nodes were originally generated from our component.  It worked, sort of.

But, when I clicked on the link and the page posted back it lost focus and moved to the parent element.

I simply couldn't get to the proper page.

 Too bad, oh well.

I'm thinking I better consider another approach.

My apolgies...

 You were right, and I was just missing another thing in my code...

So, after wasting a tonne of time checking out other solutions, I came back to your suggestion, and noticed what I was missing.

It all works perfectly...

Thank you sir...you're a genious

Loz