Hi all,

After I search the forum, I saw that don't exists any post that explains how to make a "full version" of a treeview with checkboxes.

When I say "full version", I mean a treeview that when you check a child node, all parents above are checked. And when uncheck a child node, all all parents above are unchecked.

 So, here is my contribution to the forum. I hope that help some people.

1    //######################################################################################################
2    //******************************************************************************************************
3    //* Recursive function that check the nodes                                                            *
4    //* (check all the nodes below the selected node)                                                      *
5    //******************************************************************************************************
6    //######################################################################################################
7    function CheckNode(node)
8    {
9        //head gets the parent node of the checked node
10       var head = node.parentElement.previousSibling;
11       if(head!=null)
12       {
13           if(head.tagName == "TABLE")
14           {
15               //checks for the input tag which consists of checkbox
16               var matchElement = head.getElementsByTagName("INPUT");
17               //matchElement[0] gives us the checkbox and it is checked
18               if(matchElement.length>0)
19                   matchElement[0].checked = true;
20           }
21       }
22       else
23       {
24           head = node.parentElement.previousSibling;
25       }
26       if(head!=null)
27       {
28           if(head.tagName == "TABLE")
29           {
30               CheckNode(head);
31           }
32       }
33   }
34   //######################################################################################################
35   //******************************************************************************************************
36   //* Recursive function that uncheck the nodes                                                          *
37   //* (uncheck all the parent nodes (if possible) above the selected node)                               *
38   //******************************************************************************************************
39   //######################################################################################################
40   function UncheckNode(node)
41   {
42       var chk = false;
43       var head = node.parentElement.previousSibling;
44       var pTreeLevel = node.rows[0].cells.length;
45   
46       if(head!=null)
47       {
48           if(head.tagName == "TABLE")
49           {
50               var tbls = node.parentElement.getElementsByTagName("TABLE");
51               var tblsCount = tbls.length;
52               for (i=0; i < tblsCount; i++)
53               {
54                   var childTreeLevel = tbls[i].rows[0].cells.length;
55                   if (childTreeLevel = pTreeLevel)
56                   {
57                       var chld = tbls[i].getElementsByTagName("INPUT");
58                       if(chld.length>0)
59                       {
60                           if (chld[0].checked == true)
61                           {
62                               chk = true;
63                               break;
64                           }
65                       }
66                   }
67               }
68               var nd = head.getElementsByTagName("INPUT");
69               if(nd.length>0)
70               {
71                   nd[0].checked = chk;
72               }
73           }
74       }
75       else
76       {
77           head = node.parentElement.previousSibling;
78       }
79       
80       if(head!=null)
81       {
82           if(head.tagName == "TABLE")
83           {
84               UncheckNode(head);
85           }
86       }
87   }
88   //######################################################################################################
89   //******************************************************************************************************
90   //* Funtion that check the treeview nodes                                                              *
91   //******************************************************************************************************
92   //######################################################################################################
93   function treeViewCheck()
94   {
95       var obj = window.event.srcElement;//gets the selected object
96       var checkedState; //to keep the state of the selected object
97       
98       if (obj.tagName == "INPUT" && obj.type == "checkbox")
99       {
100          var treeNode = obj;
101          checkedState = treeNode.checked;//gets the state of the selected object(checked/unchecked)
102          
103          do
104          {
105              obj = obj.parentElement;
106          }while (obj.tagName != "TABLE")
107  
108          if(obj.tagName == "TABLE")
109          {
110              //if any child is checked check parent
111              if (treeNode.checked)
112              {
113                  CheckNode(obj);
114              }//end if - checked
115  
116              //###################################################################################
117              //***********************************************************************************
118              //* Part of the code that check / uncheck the leaves of a node.                     *
119              //***********************************************************************************
120              //###################################################################################
121              
122              var tables = obj.parentElement.getElementsByTagName("TABLE");//gets the table
123              var numTables = tables.length //gets the nodes number of the table
124              var treeNodeFound = false; //if node is parent (if a node has a tree below it)
125              var parentTreeLevel = obj.rows[0].cells.length;//gets the level of the parent node
126              
127              if (numTables >= 1)
128              {
129                  for (i=0; i < numTables; i++)
130                  {
131                      if (tables[i] == obj)
132                      {
133                          treeNodeFound = true;
134                          i++;
135                      }
136                      
137                      if(obj.nextSibling !=null)//check if exists nodes below the selected node
138                      {
139                          //check if exists more than one node
140                          if (treeNodeFound == true)
141                          {
142                              var childTreeLevel = tables[i].rows[0].cells.length;
143                              if (childTreeLevel > parentTreeLevel)
144                              {
145                                  var cell = tables[i].rows[0].cells[childTreeLevel - 1];
146                                  var inputs = cell.getElementsByTagName("INPUT");
147                                  inputs[0].checked = checkedState;
148                              }
149                              else
150                              {
151                                  break;
152                              }
153                          }
154                      }
155                  }
156              }
157              
158              //###################################################################################
159              //***********************************************************************************
160              //###################################################################################
161              
162              //if all child are unchecked then uncheck parent
163              if (!treeNode.checked)
164              {
165                  UncheckNode(obj);
166              }//end if - unchecked
167          }
168      }
169  }

pedro...thanks alot this worked the best for me as well. I couldn't get what was in the oter thread to work the way I needed either. If possible, would there be a way to edit this code so that if I click a sub-child it doesn't uncheck everything above it. In other words, I would like to be able to select Parent and child nodes...but not sub-children unless needed. I commented out line 165 of your code and that works pretty well. The only thing is If I uncheck all child nodes it still leaves the parent checked. If you could help...that would be great. Thanks again for your code.

'Sorry this may be a double post! 

Okay, I'll give it a whirl here.
My structure lokks something like this...
Admin ' root
------Manage Users 'child of admin
                  ------editable 'child of manage users
------Manage Web Users 'child of admin
                  ------editable 'child of manage web users
Customer Service ' root

and so on....

I would like to be able to check 'admin' and only check 'manage users' and 'manage web users' and not check the editable boxes. The way it is now it check them all, which I can kind of live with.

 Checking the editiable button check all the parents which is great. The big thing I would like is to be able to uncheck the editiable nodes without unchecking the 'manage users'  or the editable under 'manage web users' without unchecking the 'manage web users'. With the 165 line edited out I can do that. The only problem is, I can uncheck everything under admin and the admin root stays checked.
Sorry if that is still confusing, I've tried to do this witout javascript and I jus tcouldn't get it to work. I haven't really worked with js much at all. Thanks for your help.

I see your post.

I try to see if I can do it.
 

I get this error

Microsoft JScript runtime error: 'rows' is null or not an object

here:

I just could do this.

Misses one thing: when you click on the root it doesn't select the parents.

1    function treeViewCheck(tree)
2    {
3        var obj = window.event.srcElement;//gets the selected object
4        var checkedState; //to keep the state of the selected object
5        
6        if (obj.tagName == "INPUT" && obj.type == "checkbox")
7        {
8            var treeNode = obj;
9            checkedState = treeNode.checked;//gets the state of the selected object(checked/unchecked)
10           
11           do
12           {
13               obj = obj.parentElement;
14           }while (obj.tagName != "TABLE")
15   
16           if(obj.tagName == "TABLE")
17           {
18               //if any child is checked check parent
19               if (treeNode.checked)
20               {
21                   CheckNode(obj);
22               }//end if - checked
23   
29               
30               var tables = obj.parentElement.getElementsByTagName("TABLE");//gets the table
31               var numTables = tables.length //gets the nodes number of the table
32               var treeNodeFound = false; //if node is parent (if a node has a tree below it)
33               var parentTreeLevel = obj.rows[0].cells.length;//gets the level of the parent node
34               
35               //alert(tables[0].innerText);
36               
37               if (numTables >= 1)
38               {
39                   for (i=0; i < numTables; i++)
40                   {
41                       if (tables[i] == obj)
42                       {
43                           treeNodeFound = true;
44                           i++;
45                       }
46                       
47                       if(checkedState == true)
48                       {
49                           if (treeNodeFound == true)
50                           {
51                               var childTreeLevel = tables[i].rows[0].cells.length;
52                               //alert("Child:"+childTreeLevel+"PArent:"+parentTreeLevel+"Node:"+tables[i].innerText);
53                               if ((childTreeLevel - parentTreeLevel) == 1  && (childTreeLevel == parentTreeLevel))
54                               {
55                                       var cell = tables[i].rows[0].cells[childTreeLevel - 1];
56                                       var inputs = cell.getElementsByTagName("INPUT");
57                                       inputs[0].checked = checkedState;
58                               }
59                           }
60                       }
61                       else
62                       {
63                           if (treeNodeFound == true)
64                           {
65                               var childTreeLevel = tables[i].rows[0].cells.length;
66                               if (childTreeLevel > parentTreeLevel)
67                               {
68                                   var cell = tables[i].rows[0].cells[childTreeLevel - 1];
69                                   var inputs = cell.getElementsByTagName("INPUT");
70                                   inputs[0].checked = checkedState;
71                               }
72                               else
73                               {
74                                   break;
75                               }
76                           }
77                       }
78                      
79                   }
80               }
81           }
82       }
83   }