Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

 

Updated the post with the XML File I had used.

I posted this article originally in March 2006 when the ASP.NET 2.0 TreeView had just been released.  This article has received tremendous response (35000 views for this particular post) and also many recommendations / suggestions / corrections as comments.

The script then supported checking/unchecking of children/parents when selecting/deselecting a particular node.  However, in cases of having multiple children and de-selecting one of them, the parent doesn’t automatically get un-selected.  Also there seemed to be a few issues with Firefox, Safari etc.,

So the intent of this post is to publish the best working Java Script (submitted by the community) that fixes the above issues as well as support  multiple browsers and provide a better way of handling the event.  Special thanks to pushp_aspnet for taking the pain to make this script work across multiple browsers and multiple levels.

To begin with, create a blank new ASP.NET Website and in your web form, drag and drop a TreeView control in to the page.  Also, drag and drop an XML DataSource control into your page (this can be found under “Data” tab in the Visual Studio toolbox).

Configure the DataSource to an XML File (I have pasted the XML Code at the end of this post) or any method that returns an XML from your Database etc., Bind the TreeView to the XML DataSource.  Also, set the ShowCheckBox=”All” property for the TreeView.  The sample code looks as below:-

<asp:TreeView ID="TreeView1" runat="server" DataSourceID="XmlDataSource1" ShowCheckBoxes="All">
        </asp:TreeView>
        <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/Syllabus.xml"></asp:XmlDataSource>

Note, I have set the Datafile to a physical XML file I had which has decent hierarchy of parent/child nodes. (As mentioned earlier, I have pasted this XML at the end of this post)

Just run the solution to check if your Tree renders on the page with the checkboxes as well as the node elements.

The next step is to add the TreeView attribute.  In the code-behind, within the Page_Load event, add the following code:-

protected void Page_Load(object sender, EventArgs e)
    {
        TreeView1.Attributes.Add("onclick", "OnCheckBoxCheckChanged(event)");
    }

The next step is to add the Java Script function to handle the above:-

In the ASPX Page, within the <head> </head> tags, add the following code:-

<script type="text/javascript">
    function OnCheckBoxCheckChanged(evt) {
        var src = window.event != window.undefined ? window.event.srcElement : evt.target;
        var isChkBoxClick = (src.tagName.toLowerCase() == "input" && src.type == "checkbox");
        if (isChkBoxClick) {
            var parentTable = GetParentByTagName("table", src);
            var nxtSibling = parentTable.nextSibling;
            if (nxtSibling && nxtSibling.nodeType == 1)//check if nxt sibling is not null & is an element node
            {
                if (nxtSibling.tagName.toLowerCase() == "div") //if node has children
                {
                    //check or uncheck children at all levels
                    CheckUncheckChildren(parentTable.nextSibling, src.checked);
                }
            }
            //check or uncheck parents at all levels
            CheckUncheckParents(src, src.checked);
        }
    }
    function CheckUncheckChildren(childContainer, check) {
        var childChkBoxes = childContainer.getElementsByTagName("input");
        var childChkBoxCount = childChkBoxes.length;
        for (var i = 0; i < childChkBoxCount; i++) {
            childChkBoxes[i].checked = check;
        }
    }
    function CheckUncheckParents(srcChild, check) {
        var parentDiv = GetParentByTagName("div", srcChild);
        var parentNodeTable = parentDiv.previousSibling;

        if (parentNodeTable) {
            var checkUncheckSwitch;

            if (check) //checkbox checked
            {
                var isAllSiblingsChecked = AreAllSiblingsChecked(srcChild);
                if (isAllSiblingsChecked)
                    checkUncheckSwitch = true;
                else
                    return; //do not need to check parent if any(one or more) child not checked
            }
            else //checkbox unchecked
            {
                checkUncheckSwitch = false;
            }

            var inpElemsInParentTable = parentNodeTable.getElementsByTagName("input");
            if (inpElemsInParentTable.length > 0) {
                var parentNodeChkBox = inpElemsInParentTable[0];
                parentNodeChkBox.checked = checkUncheckSwitch;
                //do the same recursively
                CheckUncheckParents(parentNodeChkBox, checkUncheckSwitch);
            }
        }
    }
    function AreAllSiblingsChecked(chkBox) {
        var parentDiv = GetParentByTagName("div", chkBox);
        var childCount = parentDiv.childNodes.length;
        for (var i = 0; i < childCount; i++) {
            if (parentDiv.childNodes[i].nodeType == 1) //check if the child node is an element node
            {
                if (parentDiv.childNodes[i].tagName.toLowerCase() == "table") {
                    var prevChkBox = parentDiv.childNodes[i].getElementsByTagName("input")[0];
                    //if any of sibling nodes are not checked, return false
                    if (!prevChkBox.checked) {
                        return false;
                    }
                }
            }
        }
        return true;
    }
    //utility function to get the container of an element by tagname
    function GetParentByTagName(parentTagName, childElementObj) {
        var parent = childElementObj.parentNode;
        while (parent.tagName.toLowerCase() != parentTagName.toLowerCase()) {
            parent = parent.parentNode;
        }
        return parent;
    }
</script>

The above code should work fine when you run and try selecting/de-selecting nodes and the parent behaviors etc.,

When I last checked, it works with IE8 Beta 2, Firefox 3.0.5 & Safari 3.2.1

The link for my original post View Entry

The ASP.NET Forum where this is being discussed with various options http://forums.asp.net/t/976122.aspx?PageIndex=1

The sample XML File content is here below:-

<?xml version="1.0" encoding="utf-8" ?>
<Syllabus>
    <Classes>
        <Class>XII Standard</Class>
        <Subjects>
            <Subject>Physics</Subject>
            <chapters>
                <chapter>Chapter 1</chapter>
                <Description>This is Chapter 1 in Physics</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 2</chapter>
                <Description>This is Chapter 2 in Physics</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 3</chapter>
                <Description>This is Chapter 3 in Physics</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 4</chapter>
                <Description>This is Chapter 4 in Physics</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 5</chapter>
                <Description>This is Chapter 5 in Physics</Description>
            </chapters>
        </Subjects>
        <Subjects>
            <Subject>Biology</Subject>
            <chapters>
                <chapter>Chapter 1</chapter>
                <Description>This is Chapter 1 in Biology</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 2</chapter>
                <Description>This is Chapter 2 in Biology</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 3</chapter>
                <Description>This is Chapter 3 in Biology</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 4</chapter>
                <Description>This is Chapter 4 in Biology</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 5</chapter>
                <Description>This is Chapter 5 in Biology</Description>
            </chapters>
        </Subjects>
        <Subjects>
            <Subject>Chemistry</Subject>
            <chapters>
                <chapter>Chapter 1</chapter>
                <Description>This is Chapter 1 in Chemistry</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 2</chapter>
                <Description>This is Chapter 2 in Chemistry</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 3</chapter>
                <Description>This is Chapter 3 in Chemistry</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 4</chapter>
                <Description>This is Chapter 4 in Chemistry</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 5</chapter>
                <Description>This is Chapter 5 in Chemistry</Description>
            </chapters>
        </Subjects>
        <Subjects>
            <Subject>Maths</Subject>
            <chapters>
                <chapter>Chapter 1</chapter>
                <Description>This is Chapter 1 in Maths</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 2</chapter>
                <Description>This is Chapter 2 in Maths</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 3</chapter>
                <Description>This is Chapter 3 in Maths</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 4</chapter>
                <Description>This is Chapter 4 in Maths</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 5</chapter>
                <Description>This is Chapter 5 in Maths</Description>
            </chapters>
        </Subjects>
    </Classes>
    <Classes>
        <Class>X Standard</Class>
        <Subjects>
            <Subject>Maths</Subject>
            <chapters>
                <chapter>Chapter 1</chapter>
                <Description>This is Chapter 1 in Maths</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 2</chapter>
                <Description>This is Chapter 2 in Maths</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 3</chapter>
                <Description>This is Chapter 3 in Maths</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 4</chapter>
                <Description>This is Chapter 4 in Maths</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 5</chapter>
                <Description>This is Chapter 5 in Maths</Description>
            </chapters>
        </Subjects>
        <Subjects>
            <Subject>Social</Subject>
            <chapters>
                <chapter>Chapter 1</chapter>
                <Description>This is Chapter 1 in Social</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 2</chapter>
                <Description>This is Chapter 2 in Social</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 3</chapter>
                <Description>This is Chapter 3 in Social</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 4</chapter>
                <Description>This is Chapter 4 in Social</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 5</chapter>
                <Description>This is Chapter 5 in Social</Description>
            </chapters>
        </Subjects>
        <Subjects>
            <Subject>Science</Subject>
            <chapters>
                <chapter>Chapter 1</chapter>
                <Description>This is Chapter 1 in Science</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 2</chapter>
                <Description>This is Chapter 2 in Science</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 3</chapter>
                <Description>This is Chapter 3 in Science</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 4</chapter>
                <Description>This is Chapter 4 in Science</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 5</chapter>
                <Description>This is Chapter 5 in Science</Description>
            </chapters>
        </Subjects>
        <Subjects>
            <Subject>English</Subject>
            <chapters>
                <chapter>Chapter 1</chapter>
                <Description>This is Chapter 1 in English</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 2</chapter>
                <Description>This is Chapter 2 in English</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 3</chapter>
                <Description>This is Chapter 3 in English</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 4</chapter>
                <Description>This is Chapter 4 in English</Description>
            </chapters>
            <chapters>
                <chapter>Chapter 5</chapter>
                <Description>This is Chapter 5 in English</Description>
            </chapters>

        </Subjects>
    </Classes>
</Syllabus>

Cheers !!!

Print | posted on Wednesday, January 21, 2009 1:22 PM

Comments on this post

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
if Syllabus.xml was downloadable or example of the XML file would have made code bit easier to understand for beginners like me.
Left by Javed on Jan 21, 2009 8:53 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Thanks for this one. Very helpful :)
Left by Crystal30 on Jan 22, 2009 11:12 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Very helpful! Thanks a lot.
In the AreAllSiblingsChecked I had to add
a null-check. In the document was an empty table
and error occurs.
if (prevChkBox != null && !prevChkBox.checked) {
return false;
Left by zabel on Jan 26, 2009 11:14 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
It was a great help, thanks buddy.
Left by Rahul Paliwal on Jan 29, 2009 4:59 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Superb Solution!! Thanks a lot.. :)
Left by Nil on Feb 19, 2009 3:20 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
This solution was perfect, just was i looking for.

Thank you so much.!!!!!
Left by Hector Sanchez on Feb 20, 2009 8:50 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Works great on left click... how could I apply this to right click? I'm doing a check to make sure it's window.event.button==2 but the default right click menu still appears. Thanks for any help!
Left by James on Feb 24, 2009 1:10 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Very useful. Thanks
Left by Radhika on Mar 02, 2009 1:28 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Perfect ! Thank you !
Left by terrgirl on Mar 04, 2009 4:42 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Thanks for the Post...
It helps a lot...
Left by Leo on Mar 11, 2009 12:35 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Exactly what I needed. Couldn't have asked for a better post.

Thank you.
Left by Toby on Mar 17, 2009 12:22 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
You're the man! The best post I have seen in last 10 years. Wish you were taking donations, I would chip in.
Left by Anthony on Mar 21, 2009 2:26 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
I have a Treeview control with checkboxes enabled inside a Ajax Update Panel.
On checking one or more node(s) and click of a button, the Required details are displayed in a Modal PopUp.
After the PopUp is closed, the Treeview checked nodes are not cleared, though
checked nodes are cleared - "myTree.ClearCheckedNodes();" on button click.
Left by free multiline slots on Apr 25, 2009 3:40 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Well, that's about the slickest piece of code I've come across in a while. I don't dare figure out how much time you just saved me.
Left by Ben Griswold on Apr 29, 2009 5:58 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Thanks for the wonderful expamle
Left by YP on May 14, 2009 2:26 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
awesome thanks!!!! Saved me lots of effort.
Left by Bpd on May 16, 2009 1:07 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Excellent.. a truly excellent offering.
Left by Walter Dellenback on May 30, 2009 8:51 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Thanks, Its an perfect example.
Left by Manish on Jun 26, 2009 2:45 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
thank you so much ..^^
Left by amper on Jul 14, 2009 4:33 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Merci beaucoup, le code est excellent ! ^^
Left by Johnny on Jul 14, 2009 9:08 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Dude, in ten years of coding I don't think I have ever copied and pasted a script and had it work immediately. Outstanding job!
Left by NateDogg on Aug 06, 2009 8:39 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
thanks.. worked like a charm...
Left by Dev on Aug 31, 2009 6:23 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
thank you so much .. Sir , You are great.......
Left by vipin on Sep 01, 2009 4:55 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Does not work if use CSS Friendly control?
Left by Eric on Sep 03, 2009 11:48 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Thanks for the script! Works perfectly for my implementation.

Normally I don't like using JS when I don't have to, gets kinda messy, but in this case I couldn't find any other way to do it, and the script does exactly what I need.
Left by Ethiessen on Oct 08, 2009 7:09 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Outstanding work! This is just what I needed. Now, do you have a good method for loading the tree from a database rather than an XML file?
Left by Postman on Oct 08, 2009 8:02 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Thanks A lot Great Article....
Left by Foram on Oct 14, 2009 9:24 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Thanks a lot , thats what exactly i wanted
Left by Yeetender on Oct 15, 2009 2:12 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Good Work ;)
Left by Bashir Ahmed on Nov 02, 2009 3:44 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
This is excellent and saved me lots of work. But why does the page title have the worlds "check all" when the script does not have a Check All function?
Left by getrdone on Nov 10, 2009 8:13 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Hi, This is an excellent workable example. Awesome work. I an so greatfull to you.

Thanks dude
Left by Tapojjwal Mandal on Dec 01, 2009 10:00 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Good code and works fine except I also added a gridview with a checkboxes column and a 'Select All' checkbox in the header. When I select the 'Select All' checkbox in the gridview, all the checkboxes in the treeview also get selected! Any workaround for this scenario?
Left by Brian Jansen on Dec 15, 2009 5:18 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
I am trying to use the same example. It works like a charm with your example. but the moment i use my XML file as a source it stops working. The only change i do is the EnableClientScript set to "false". I have 4k nodes in my XML file. If I set the EnableClientScript property to true, it takes ages to load the page. Any other way out on this?
Left by Saurabh on Dec 22, 2009 7:49 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Thanks a lot man. The code works perfectly !

The above code works for selecting the child nodes when a parent node is selected. Is there a way to retrieve only the selected (Checked) Parent Node's values ?

Thanks in advance.
Left by Dinesh on Dec 28, 2009 2:17 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
very nice!!! many thanks...

regards from spain
Left by Sergio on Jan 19, 2010 9:22 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Very Useful! Thank You! =)
Left by Jo on Jan 24, 2010 7:35 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
any one can tell me how to find which checkbox user have selected before submiting the form or after submiting the form
Left by David Nil on Jan 24, 2010 9:55 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
This Post is very useful.
It's working well.

Thanks a lot.
Regarda
Sathieshkumar. R
Left by Sathieshkumar on Jan 28, 2010 7:32 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Thanks Ranganh for the great illustration.

I too rehydrated my solution on the asp.net forum into a post long time back: http://pushpontech.blogspot.com/2007/06/treeview-checkuncheck-all-script.html

- pushp
Left by pushp on Feb 17, 2010 3:57 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Wow, that looks like the (almost) ultimate answer. Apart from one thing i've noticed, the parent will not populate the child nodes unless the parent has been maximized (at least once).

For example, this is what the tree looks when ExpandDepth = 1:

+ [ ] NodeA
+ [ ] Node1
+ [ ] Node2
+ [ ] Node3

If I tick Node1, and then expand it afterwards, I notice that the child nodes have not been ticked, ie:

Ticked Node First...
- [ ] NodeA
+ [x] Node1
+ [ ] Node2
+ [ ] Node3

Then expand...
- [ ] NodeA
+ [x] Node1
- [ ] Node1.1
- [ ] Node1.2
- [ ] Node1.3
- [ ] Node1.4
+ [ ] Node2
+ [ ] Node3

But, if I expand Node1 first and then tick on it, it'll tick all the child nodes as expected. Or even, if I expand Node1 first, and then minimize it again, then clicking on Node1, it will still tick all the child nodes:

- [ ] NodeA
+ [x] Node1
- [x] Node1.1
- [x] Node1.2
- [x] Node1.3
- [x] Node1.4
+ [ ] Node2
+ [ ] Node3

Left by Chandra Kumar on Mar 16, 2010 7:39 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Hopefully this is still checked on.
I love this script, it's awesome but I do have one issue.
I have a node that does two deep like this:
-Parent Node
--Child Node
---Sub Child Node

If I select the Child Node checkbox it selects the Sub Child Node's checkbox as well.

Is there a way to disable this?

Thanks in advance
Left by Danny H on Apr 22, 2010 7:29 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Perfect Thank You very very very very Much For your Help.
Left by Samir Moussa Farag on May 04, 2010 10:24 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Thanks a ton! it was very very useful
Left by AB on Jun 15, 2010 8:27 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
thank you very very much.
it works wonderful.
hope i need more help from u.
Left by ravi on Jul 22, 2010 9:48 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Perfecto!!! justo lo que necesitaba para el uso de un TreeView. Gracias!!!
Saludos
Left by martin on Aug 26, 2010 3:16 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Very kelpful.Thanks a lot.
Left by Mugunthan on Aug 26, 2010 2:18 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
This is not working at all. I followed the code, but the event onclick does note exist for treeview.
Left by KHW on Sep 18, 2010 2:27 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
it is working perfecct for me..

Surya Bhaskar
Left by Surya Bhaskar on Oct 21, 2010 10:53 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Works fine for me also. Check it again.
Left by St. Louis Plumber on Oct 26, 2010 12:00 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Thank you. Its Working yaaaaaaaaaaa

Thank you
Left by Muneer on Nov 03, 2010 11:14 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
This is cool example and working perfectly.
Left by Pavan on Nov 11, 2010 1:47 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Hey,

Me too Facing similar Kind of Problem. when the Tree is in Collapsed Mode, when i check the Parent, the corresponding Child doesnt get checked, but once the Parent is expanded, the above function Runs Successfully.

For example, this is what the tree looks when ExpandDepth = 1:

+ [ ] NodeA
+ [ ] Node1
+ [ ] Node2
+ [ ] Node3

If I tick Node1, and then expand it afterwards, I notice that the child nodes have not been ticked, ie:

Ticked Node First...
- [ ] NodeA
+ [x] Node1
+ [ ] Node2
+ [ ] Node3

Then expand...
- [ ] NodeA
+ [x] Node1
- [ ] Node1.1
- [ ] Node1.2
- [ ] Node1.3
- [ ] Node1.4
+ [ ] Node2
+ [ ] Node3

But, if I expand Node1 first and then tick on it, it'll tick all the child nodes as expected. Or even, if I expand Node1 first, and then minimize it again, then clicking on Node1, it will still tick all the child nodes:

- [ ] NodeA
+ [x] Node1
- [x] Node1.1
- [x] Node1.2
- [x] Node1.3
- [x] Node1.4
+ [ ] Node2
+ [ ] Node3


Kindly Help me out on this as the ExpandDepth Level of my Treeview is Dynamic.??
Request your Help. Regarding the Same.
Left by Rohan on Nov 12, 2010 12:10 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Hi Frnds,
I'm newer to using treeview.can any1 help to post the code for how to getting the path from childnodes which are checkboxes in treeview and treeview nodes are bind with dynamically with database.
Thanks in Advance...........
Left by Arunkumar on Dec 26, 2010 3:13 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Hi Friends,
I'm newer to using treeview.can any1 help to post the code for how to getting the path from childnodes which are checkboxes in treeview and treeview nodes are bind with dynamically with database.
Left by escort on Feb 21, 2011 9:22 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Great !!!!!! It worked like a charm ..... thanks a Lott maan ... u made my day ... :) :) :)
Left by Atarpan on Aug 16, 2011 9:22 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
love you for this code...
Left by Zeeshan on Nov 23, 2011 1:35 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
i want to add 2 button check all
and uncheck all.
can you help me for that..

thak you
Left by shekhar on Nov 23, 2011 2:59 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
yeah done....!!!
Left by shekhar on Nov 23, 2011 4:21 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
how do i count number of checkboxes are checked...


Left by shekhar on Nov 23, 2011 5:11 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Very very thanks
Left by Aneesh on Dec 06, 2011 3:39 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
thank you
good
Left by mohamad on Dec 17, 2011 10:33 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
thanks so much! very full!
Left by Trương Ngọc Tư on Jan 14, 2012 6:26 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Awesome.. Thanks
Left by Sohanit on Feb 07, 2012 2:17 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
very use for my app, thank you so much
Left by kanda on Apr 09, 2012 6:57 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Thank you so much! That's exactly what i needed!!! gosh, you just save me a headache
Left by Juliana on Jun 15, 2012 12:26 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...

Script is excellent, but to fix the issue Rohan pointed out where parent needs expanded before javascript works, do the following:
in code behind:
myTreeView.ExpandAll()
'then apply javascript to the opened checkboxes
myTreeView.Attributes.Add("onclick", "OnCheckBoxCheckChanged(event)")

'Then close the checkboxes using another piece of javascript on load - I use Masterpages so can't just stick it into onload in html

Dim myBody As HtmlGenericControl = CType(Master.FindControl("body"), HtmlGenericControl)
myBody.Attributes.Add("onload", "TreeviewExpandCollapseAll('myTreeView','true')")


Here is the function:
http://stackoverflow.com/questions/1639258/asp-net-treeview-expand-collapse-all-does-not-work-when-node-icons-are-present
Left by dd on Sep 04, 2012 7:04 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
That worked like magic! Thanks a lot! God bless :)
Left by LittleMissWeyshel on Aug 06, 2013 6:40 AM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
Awesome code! keep blogging
Left by Nachi on Jan 31, 2014 11:33 PM

# re: Updated: ASP.NET TreeView CheckBoxes – Check All – JavaScript

Requesting Gravatar...
This is very good articles. I used the same code. it works perfectly.
Left by Chandra on Mar 10, 2014 5:47 PM

Your comment:

 (will show your gravatar)