Yahoo Search

Search the web Search this site

Live Search

Google Search

Custom Search

Translate this Web Site to

Thursday, July 15, 2010

Firing TreeView TreeNodeCheckChanged Event

Normally in ASP.Net TreeView you can enable it to show checkboxes in its node levels. So if you need to do any actions when a node is checked or unchecked you need to use the TreeNodeCheckChanged event. But the problem is TreeNodeCheckChanged event will not fire when a checkbox is clicked. The cause for this is because the TreeNode class which represents a node in the TreeView will not add onClick event on the checkbox.

But if you carefully check it the event is getting fired at the next page postback. Since I needed to do some actions when the checkbox statuses are changed I made the page post back when a checkbox is checked or unchecked by the following java script. What it does is simply it will check the element which caused the event is a checkbox and do a postback of the page.

  1. <script type="text/javascript">
  2.     function TreeViewCheckBoxClicked(Check_Event) {
  3.         var objElement;
  4.         try {
  5.             // Get the element which fired the event.
  6.             objElement = window.event.srcElement;
  7.         }
  8.         catch (Error) {
  9.             //srcElement is failing, objElement is null.
  10.         }
  11.         if (objElement != null) {
  12.             // If the element is a checkbox do postback.
  13.             if (objElement.tagName == "INPUT" && objElement.type == "checkbox") {
  14.                 __doPostBack("", "");
  15.             }
  16.         }
  17.         else {
  18.             //    If the srcElement is failing due to browser incompatibility determine
  19.             // whether the element is and HTML input element and do postback.
  20.             if (Check_Event != null) {
  21.                 if ( == "[object HTMLInputElement]") {
  22.                     __doPostBack("", "");
  23.                 }
  24.             }
  25.         }
  26.     }
  27. </script>

To make this work you need to bind the onClick event with the javascript shown above as shown below.

  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3.     // Adding the onClick script to the TreeView.
  4.     TreeView1.Attributes.Add("onClick", "TreeViewCheckBoxClicked(event)");
  5. }

Even though I have done this in Page Load this can be done in other places of code as well, for example if you are adding the TreeView by code you can use this right before adding it to the page.

The above will make the page post back when ever a checkbox in the TreeView is clicked, but nothing special will happen. You need to implement the code for TreeNodeCheckChanged event to get some task done out of it, for example I am using the following code to check or uncheck the child nodes depending on the action done for the parent node.

  1. protected void TreeView1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)
  2. {
  3.     // Loop through all the child nodes and change the checked status as required.
  4.     foreach (TreeNode tn in e.Node.ChildNodes)
  5.     {
  6.         if (e.Node.Checked)
  7.             tn.Checked = true;
  8.         else
  9.             tn.Checked = false;
  10.     }
  11. }


Anonymous said...

Hi Arjuna

Thanq u very much for posting this article.It helped me a lot.
Thanq once again.


Arjuna Chiththananda said...

Hi Naresh,

You are welcome and thanks for the appreciation.

Kind Regards,

Asitha said...

Nice Work Arjuna.. thanks a lot

Asitha said...

Nice Work Arjuna... thanks a lot

Rahul said...

This does not work, you are not passing any event arguments whicle calling __doPostBack("","").

So you will nto get e.Node.ChildNodes, becasue "e" will be null here.

Arjuna Chiththananda said...

Hi Rahul,

I know this is working since I have used this few times. If you also try you will find that this works.

Anonymous said...

TQ ~~ work like a charm!

Anonymous said...

Thank you, the non-response of the TreeView control when the checkbox is changed is counterintuitive.

You saved me a couple of hours or more of searching for a solution.