Thanks for all your efforts - saved me lots of time to understand where to start from. I am creating a treeview dynamically, i.e. programatically using "placeholder". The javascript doee n't seem to be working in such cases. Basically I believe the
child and tree levels are spit out a bit differently. Please do let me know if anyone has a working code with dynamically created trees - i.e. the entire tree creation code is within the code-behind file rather than aspx file.
Thanks for all your efforts - saved me lots of time to understand where to start from. I am creating a treeview dynamically, i.e. programatically using "placeholder". The javascript doee n't seem to be working in such cases. Basically I believe the
child and tree levels are spit out a bit differently. Please do let me know if anyone has a working code with dynamically created trees - i.e. the entire tree creation code is within the code-behind file rather than aspx file.
Thanks heaps.
Praveen
OK, all! To be more specific if you are using "nodestyle","nodeindent" etc... be aware that the javascript needs to be tweaked. Basically, everything depends on how .NET translates the treeview control to the underlying table, which is composed of rows
and columns. If you are going to change the formatting of the treeview, take care of the javascript to work with that resultant formatted tables(rows and columns).
Thank you very much. I modified your code to match the changes (from a previous reply in this thread) needed to make it work in Firefox and it works a treat!
I do have a question though. The way my treeview is setup is similar to this
-Parent
-ChildNode
-ChildNode2
What needs to happen is when the user select ChildNode2, it automatically checks ChildNode and Parent too. Right now it only checks ChildNode. Any idea what's needed to make that work? Basically if any ChildNode2 or ChildNode checkbox is checked then it's
corresponding Parent should also be checked.
Thanks for the help!
Mike W.
</div>
Upping this very interesting thread!
Crazy u probably got the same problem as me, I got the following tree:
-Parent
-ChildNode1
-ChildNode11
-ChildNode2
-ChildNode21
-ChildNode22
If I check just ChildNode22, ChildNode2 and Parent should automatically be checked too, but it doesn't work. I think it is by design, because if I check ChildNode11, ChildNode21 and ChildNode22 or just ChildNode1 and ChildNode2 then Parent is automatically
checked. To a parent be automatically checked, ALL the child nodes must be checked too.
Well, friends i too faced the above problems: check/uncheck works just for one level up and the script works only in IE. So, i decided to fix the problems but the script was too criptic to modify and finally ended up rewriting the whole solution :-)
I've tested my script in IE7 and Firefox 2.0 and it works great, do let me know in case you happen to find a bug.
Step2: Put the below script in the head tag of your .aspx page.
//************************** Treeview Parent-Child check behaviour ****************************//
function OnTreeClick(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;
}
///////////////////////////////////////////////////////////////////////////////////////
That's all there is to it.
enjoy!!!
parent childTreeview in ASP.NETAsp.Net 1.1asp.net 2.0 asp.netselectionTreeview
Home Is Where the Wind Blows
http://pushpontech.blogspot.com
I've been experimenting the scripts posted here and they all work very well.
The problem is I need some sort of modified version of check-uncheck in childs and parents...
Here is my situation: I need that when ONE of the childs is checked ALL its parents become checked as well. That's the only "special" thing I want. I DON'T NEED any other behaviour like to check all childs when a parent is selected.
I think that it should not be too difficult to achieve this, but I have very limited knowledge of javascript...If someone could point me out I would be very thankfull :-)
just one more question: is there any way to get the Value of the node (that was bound when creating the treeview's nodes with node.Value) in javascript?? I need to disable the possibility to check/uncheck some treenodes depending on a defined attribute (for
example, nodes that I "mark" as "mandatory" should not be possible to uncheck)...The checkbox associated with the node can not be disabled so I need to control this some other way...
just one more question: is there any way to get the Value of the node (that was bound when creating the treeview's nodes with node.Value) in javascript?? I need to disable the possibility to check/uncheck some treenodes depending on a defined attribute (for
example, nodes that I "mark" as "mandatory" should not be possible to uncheck)...The checkbox associated with the node can not be disabled so I need to control this some other way...
Here is the code which is used to check /uncheck all the nodes in tree node in one shot -- for example if we have a HTML check box , if we need to check all the node when this check box is checked and vice versa.
I am trying to put this code here hope it will help u ppl , if some one has got better solution for this plz suggest [:)]
the following code will could be used
this method will accept the bool parameter true /false
function UncheckAllNode(check)
{
var src=null;
var treeview = document.getElementById("_treeGroup"); //use your treeview id instead of Tree1
var treeLinks = treeview.getElementsByTagName("a");
for(i=0;i<treeLinks.length;i++)
{
src=treeLinks[i].firstChild;
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,check);
}
}
var childChkBoxes = parentTable.getElementsByTagName("input"); //check or uncheck the all main node
childChkBoxes[0].checked=check;
}
}
Best Regards,
Lalit N Dubey
Software Engineer
________________
WOW Vision Pte Ltd
(Wholly Owened Subsidiary of SM Summit Holdings Ltd)
45 Ubi Road 1 Summit Building #05-03
Singapore - 408696
Is it possible to expand the Parent nodes to show all child nodes when it is checked?
Basically what is happening, (using the original code on this forum for selected all child nodes) a user will check the parent, and all child nodes will be selected as well (Which is exactly what I want) but also, I want this parent to expand and show its
child nodes, so that the user can see what all was selected.
All of u thanks for the posts ..it helped me a lot in successfully completing my task
I wanted a tree view control where if Parent is checked or Unchecked the child nodes get checked and unchecked respectively also i wanted
if ANY one child is checked then parent should get checked and if ALL childs are unchecked then parent should get unchecked.
Following code does this
call this function "client_OnTreeNodeChecked()" on the Onclick event of treeview.
function client_OnTreeNodeChecked()
{
var obj = window.event.srcElement;
var treeNodeFound = false;
var checkedState;
if (obj.tagName == "INPUT" && obj.type == "checkbox") {
var treeNode = obj;
checkedState = treeNode.checked;
do
{
obj = obj.parentElement;
} while (obj.tagName != "TABLE")
var parentTreeLevel = obj.rows[0].cells.length;
var parentTreeNode = obj.rows[0].cells[0];
var tables = obj.parentElement.getElementsByTagName("TABLE");
if(obj.tagName == "TABLE")
{
if (treeNode.checked) //if any child is checked check parent
{
//head1 gets the parent node of the checked node
var head1 = obj.parentElement.previousSibling;
if(head1!=null)
{
if(head1.tagName == "TABLE")
{
//checks for the input tag which consists of checkbox
var matchElement1 = head1.getElementsByTagName("INPUT");
//matchElement1[0] gives us the checkbox and it is checked
if(matchElement1.length>0)
matchElement1[0].checked = true;
}
}
else {
head1 = obj.parentElement.previousSibling;
}
if(head1!=null)
{
if(head1.tagName == "TABLE")
{
//head2 gets the parent node of the checked node
var head2 = obj.parentElement.parentElement.previousSibling;
if(head2!=null)
{
if(head2.tagName == "TABLE")
{
//checks for the input tag which consists of checkbox
var matchElement2 = head2.getElementsByTagName("INPUT");
if(matchElement2.length>0)
matchElement2[0].checked = true;
}
}
}
}
else {
head2 = obj.parentElement.previousSibling;
}
if(head2!=null)
{
if(head2.tagName == "TABLE")
{
//head3 gets the parent node of the checked node
var head3 = obj.parentElement.parentElement.parentElement.previousSibling;
if(head3!=null)
{
if(head3.tagName == "TABLE")
{
//checks for the input tag which consists of checkbox
var matchElement3 = head3.getElementsByTagName("INPUT");
if(matchElement3.length>0)
matchElement3[0].checked = true;
}
}
}
}
else {
head3 = obj.parentElement.previousSibling;
}
if(head3!=null)
{
if(head3.tagName == "TABLE")
{
//head4 gets the parent node of the checked node
var head4 = obj.parentElement.parentElement.parentElement.parentElement.previousSibling;
if(head4 != null)
{
if(head4.tagName == "TABLE")
{
//checks for the input tag which consists of checkbox
var matchElement4 = head4.getElementsByTagName("INPUT");
if(matchElement4.length>0)
matchElement4[0].checked = true;
}
}
}
}
}//end if - checked
if (!treeNode.checked)//if all child are unchecked then uncheck parent
{
var chk1 = false;
var head1 = obj.parentElement.previousSibling;
var pTreeLevel1 = obj.rows[0].cells.length;
if(head1!=null)
{
if(head1.tagName == "TABLE")
{
var tbls = obj.parentElement.getElementsByTagName("TABLE");
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++)
{
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel1)
{
var chld = tbls[i].getElementsByTagName("INPUT");
if(chld.length>0)
{
if (chld[0].checked == true)
{
chk1 = true;
break;
}
}
}
}
var nd = head1.getElementsByTagName("INPUT");
if(nd.length>0){
nd[0].checked = chk1;}
}
}
else
{
head1 = obj.parentElement.previousSibling;
}
var chk2 = false;
if(head1!=null)
{
if(head1.tagName == "TABLE")
{
var head2 = obj.parentElement.parentElement.previousSibling;
if(head2!=null)
{
if(head2.tagName == "TABLE")
{
var tbls = head1.parentElement.getElementsByTagName("TABLE");
var pTreeLevel2 = head1.rows[0].cells.length;
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++)
{
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel2)
{
var chld = tbls[i].getElementsByTagName("INPUT");
if(chld.length>0)
{
if (chld[0].checked == true)
{
chk2 = true;
break;
}
}
}
}
var nd = head2.getElementsByTagName("INPUT");
if(nd.length>0){
nd[0].checked = (chk2 && chk1);}
}
}
}
}
else
{
head2 = obj.parentElement.previousSibling;
}
var chk3 = false;
if(head2!=null)
{
if(head2.tagName == "TABLE")
{
var head3 = obj.parentElement.parentElement.parentElement.previousSibling;
if(head3!=null)
{
if(head3.tagName == "TABLE")
{
var tbls = head2.parentElement.getElementsByTagName("TABLE");
var pTreeLevel3 = head2.rows[0].cells.length;
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++)
{
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel3)
{
var chld = tbls[i].getElementsByTagName("INPUT");
if(chld.length>0)
{
if (chld[0].checked == true)
{
chk3 = true;
break;
}
}
}
}
var nd = head3.getElementsByTagName("INPUT");
if(nd.length>0){
nd[0].checked = (chk3 && chk2 && chk1);}
}
}
}
}
else
{
head3 = obj.parentElement.previousSibling;
}
var chk4 = false;
if(head3!=null)
{
if(head3.tagName == "TABLE")
{
var head4 = obj.parentElement.parentElement.parentElement.parentElement.previousSibling;
if(head4!=null)
{
if(head4.tagName == "TABLE")
{
var tbls = head3.parentElement.getElementsByTagName("TABLE");
var pTreeLevel4 = head3.rows[0].cells.length;
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++)
{
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel4)
{
var chld = tbls[i].getElementsByTagName("INPUT");
if(chld.length>0)
{
if (chld[0].checked == true)
{
chk4 = true;
break;
}
}
}
}
var nd = head4.getElementsByTagName("INPUT");
if(nd.length>0){
nd[0].checked = (chk4 && chk3 && chk2 && chk1);}
}
}
}
}
}//end if - unchecked
}
var numTables = tables.length
if (numTables >= 1)
{
for (i=0; i < numTables; i++)
{
if (tables[i] == obj)
{
treeNodeFound = true;
i++;
if (i == numTables)
{
return;
}
}
if (treeNodeFound == true)
{
var childTreeLevel = tables[i].rows[0].cells.length;
if (childTreeLevel > parentTreeLevel)
{
var cell = tables[i].rows[0].cells[childTreeLevel - 1];
var inputs = cell.getElementsByTagName("INPUT");
inputs[0].checked = checkedState;
}
else
{
return;
}
}
}
}
}
}
prbabu
Member
26 Points
12 Posts
All these work in "static" tree views
Apr 26, 2007 04:48 AM|LINK
Hi All,
Thanks for all your efforts - saved me lots of time to understand where to start from. I am creating a treeview dynamically, i.e. programatically using "placeholder". The javascript doee n't seem to be working in such cases. Basically I believe the child and tree levels are spit out a bit differently. Please do let me know if anyone has a working code with dynamically created trees - i.e. the entire tree creation code is within the code-behind file rather than aspx file.
Thanks heaps.
Praveen
prbabu
Member
26 Points
12 Posts
Re: All these work in "static" tree views
Apr 26, 2007 06:10 AM|LINK
OK, all! To be more specific if you are using "nodestyle","nodeindent" etc... be aware that the javascript needs to be tweaked. Basically, everything depends on how .NET translates the treeview control to the underlying table, which is composed of rows and columns. If you are going to change the formatting of the treeview, take care of the javascript to work with that resultant formatted tables(rows and columns).
Hope the above helps.
-Praveen
pushp_aspnet
Contributor
2207 Points
447 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
May 31, 2007 07:33 AM|LINK
Well, friends i too faced the above problems: check/uncheck works just for one level up and the script works only in IE. So, i decided to fix the problems but the script was too criptic to modify and finally ended up rewriting the whole solution :-)
I've tested my script in IE7 and Firefox 2.0 and it works great, do let me know in case you happen to find a bug.
Here we go:
-----------------------------------------------------------------------------------------------------------------------------------------------
Step1: Add an attribute to the treeview in the code behind as:
TreeView1.Attributes.Add("onclick","OnTreeClick(event)");
Step2: Put the below script in the head tag of your .aspx page.
//************************** Treeview Parent-Child check behaviour ****************************//
function OnTreeClick(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;
}
///////////////////////////////////////////////////////////////////////////////////////
That's all there is to it.
enjoy!!!
parent child Treeview in ASP.NET Asp.Net 1.1 asp.net 2.0 asp.net selection Treeview
http://pushpontech.blogspot.com
ranganh
Star
12085 Points
2435 Posts
Microsoft
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Jun 09, 2007 05:22 AM|LINK
Hi Prashanth, You would need to use the IE Webcontrols to implement TreeView control in ASP.NET 1.x versions. You can download and use the same at http://www.asp.net/ControlGallery/ControlDetail.aspx?Control=75&tabindex=2
Hope this helps.
Thanks.
Harish
http://geekswithblogs.net/ranganh
nrocha
Member
26 Points
24 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Jun 10, 2007 03:38 PM|LINK
Hi all,
I've been experimenting the scripts posted here and they all work very well.
The problem is I need some sort of modified version of check-uncheck in childs and parents...
Here is my situation: I need that when ONE of the childs is checked ALL its parents become checked as well. That's the only "special" thing I want. I DON'T NEED any other behaviour like to check all childs when a parent is selected.
I think that it should not be too difficult to achieve this, but I have very limited knowledge of javascript...If someone could point me out I would be very thankfull :-)
Thanks in advance,
Nuno
nrocha
Member
26 Points
24 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Jun 10, 2007 09:34 PM|LINK
Hi again,
just one more question: is there any way to get the Value of the node (that was bound when creating the treeview's nodes with node.Value) in javascript?? I need to disable the possibility to check/uncheck some treenodes depending on a defined attribute (for example, nodes that I "mark" as "mandatory" should not be possible to uncheck)...The checkbox associated with the node can not be disabled so I need to control this some other way...
Thanks again,
Nuno
pushp_aspnet
Contributor
2207 Points
447 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Jun 13, 2007 06:00 AM|LINK
Hi Nuno,
Check my post here:http://pushpontech.blogspot.com/2007/06/getting-treenode-values-on-client-side.html
Hope this helps you.
pushp
http://pushpontech.blogspot.com
lalit_dubey
Member
22 Points
5 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Jul 24, 2007 07:50 AM|LINK
Here is the code which is used to check /uncheck all the nodes in tree node in one shot -- for example if we have a HTML check box , if we need to check all the node when this check box is checked and vice versa.
I am trying to put this code here hope it will help u ppl , if some one has got better solution for this plz suggest [:)]
the following code will could be used
this method will accept the bool parameter true /false
function UncheckAllNode(check)
{
var src=null;
var treeview = document.getElementById("_treeGroup"); //use your treeview id instead of Tree1
var treeLinks = treeview.getElementsByTagName("a");
for(i=0;i<treeLinks.length;i++)
{
src=treeLinks[i].firstChild;
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,check);
}
}
var childChkBoxes = parentTable.getElementsByTagName("input"); //check or uncheck the all main node
childChkBoxes[0].checked=check;
}
}
Lalit N Dubey
Software Engineer
________________
WOW Vision Pte Ltd
(Wholly Owened Subsidiary of SM Summit Holdings Ltd)
45 Ubi Road 1 Summit Building #05-03
Singapore - 408696
cypherkro
Member
3 Points
15 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Jul 31, 2007 01:25 PM|LINK
Hi Guys
Is it possible to expand the Parent nodes to show all child nodes when it is checked?
Basically what is happening, (using the original code on this forum for selected all child nodes) a user will check the parent, and all child nodes will be selected as well (Which is exactly what I want) but also, I want this parent to expand and show its child nodes, so that the user can see what all was selected.
Can this be done?
Thanks in advance
Kevin
Avanti
Member
2 Points
1 Post
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Aug 01, 2007 06:56 AM|LINK
All of u thanks for the posts ..it helped me a lot in successfully completing my task
I wanted a tree view control where if Parent is checked or Unchecked the child nodes get checked and unchecked respectively also i wanted
if ANY one child is checked then parent should get checked and if ALL childs are unchecked then parent should get unchecked.
Following code does this
call this function "client_OnTreeNodeChecked()" on the Onclick event of treeview.
function client_OnTreeNodeChecked()
{
var obj = window.event.srcElement;
var treeNodeFound = false;
var checkedState;
if (obj.tagName == "INPUT" && obj.type == "checkbox") {
var treeNode = obj;
checkedState = treeNode.checked;
do
{
obj = obj.parentElement;
} while (obj.tagName != "TABLE")
var parentTreeLevel = obj.rows[0].cells.length;
var parentTreeNode = obj.rows[0].cells[0];
var tables = obj.parentElement.getElementsByTagName("TABLE");
if(obj.tagName == "TABLE")
{
if (treeNode.checked) //if any child is checked check parent
{
//head1 gets the parent node of the checked node
var head1 = obj.parentElement.previousSibling;
if(head1!=null)
{
if(head1.tagName == "TABLE")
{
//checks for the input tag which consists of checkbox
var matchElement1 = head1.getElementsByTagName("INPUT");
//matchElement1[0] gives us the checkbox and it is checked
if(matchElement1.length>0)
matchElement1[0].checked = true;
}
}
else {
head1 = obj.parentElement.previousSibling;
}
if(head1!=null)
{
if(head1.tagName == "TABLE")
{
//head2 gets the parent node of the checked node
var head2 = obj.parentElement.parentElement.previousSibling;
if(head2!=null)
{
if(head2.tagName == "TABLE")
{
//checks for the input tag which consists of checkbox
var matchElement2 = head2.getElementsByTagName("INPUT");
if(matchElement2.length>0)
matchElement2[0].checked = true;
}
}
}
}
else {
head2 = obj.parentElement.previousSibling;
}
if(head2!=null)
{
if(head2.tagName == "TABLE")
{
//head3 gets the parent node of the checked node
var head3 = obj.parentElement.parentElement.parentElement.previousSibling;
if(head3!=null)
{
if(head3.tagName == "TABLE")
{
//checks for the input tag which consists of checkbox
var matchElement3 = head3.getElementsByTagName("INPUT");
if(matchElement3.length>0)
matchElement3[0].checked = true;
}
}
}
}
else {
head3 = obj.parentElement.previousSibling;
}
if(head3!=null)
{
if(head3.tagName == "TABLE")
{
//head4 gets the parent node of the checked node
var head4 = obj.parentElement.parentElement.parentElement.parentElement.previousSibling;
if(head4 != null)
{
if(head4.tagName == "TABLE")
{
//checks for the input tag which consists of checkbox
var matchElement4 = head4.getElementsByTagName("INPUT");
if(matchElement4.length>0)
matchElement4[0].checked = true;
}
}
}
}
}//end if - checked
if (!treeNode.checked)//if all child are unchecked then uncheck parent
{
var chk1 = false;
var head1 = obj.parentElement.previousSibling;
var pTreeLevel1 = obj.rows[0].cells.length;
if(head1!=null)
{
if(head1.tagName == "TABLE")
{
var tbls = obj.parentElement.getElementsByTagName("TABLE");
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++)
{
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel1)
{
var chld = tbls[i].getElementsByTagName("INPUT");
if(chld.length>0)
{
if (chld[0].checked == true)
{
chk1 = true;
break;
}
}
}
}
var nd = head1.getElementsByTagName("INPUT");
if(nd.length>0){
nd[0].checked = chk1;}
}
}
else
{
head1 = obj.parentElement.previousSibling;
}
var chk2 = false;
if(head1!=null)
{
if(head1.tagName == "TABLE")
{
var head2 = obj.parentElement.parentElement.previousSibling;
if(head2!=null)
{
if(head2.tagName == "TABLE")
{
var tbls = head1.parentElement.getElementsByTagName("TABLE");
var pTreeLevel2 = head1.rows[0].cells.length;
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++)
{
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel2)
{
var chld = tbls[i].getElementsByTagName("INPUT");
if(chld.length>0)
{
if (chld[0].checked == true)
{
chk2 = true;
break;
}
}
}
}
var nd = head2.getElementsByTagName("INPUT");
if(nd.length>0){
nd[0].checked = (chk2 && chk1);}
}
}
}
}
else
{
head2 = obj.parentElement.previousSibling;
}
var chk3 = false;
if(head2!=null)
{
if(head2.tagName == "TABLE")
{
var head3 = obj.parentElement.parentElement.parentElement.previousSibling;
if(head3!=null)
{
if(head3.tagName == "TABLE")
{
var tbls = head2.parentElement.getElementsByTagName("TABLE");
var pTreeLevel3 = head2.rows[0].cells.length;
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++)
{
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel3)
{
var chld = tbls[i].getElementsByTagName("INPUT");
if(chld.length>0)
{
if (chld[0].checked == true)
{
chk3 = true;
break;
}
}
}
}
var nd = head3.getElementsByTagName("INPUT");
if(nd.length>0){
nd[0].checked = (chk3 && chk2 && chk1);}
}
}
}
}
else
{
head3 = obj.parentElement.previousSibling;
}
var chk4 = false;
if(head3!=null)
{
if(head3.tagName == "TABLE")
{
var head4 = obj.parentElement.parentElement.parentElement.parentElement.previousSibling;
if(head4!=null)
{
if(head4.tagName == "TABLE")
{
var tbls = head3.parentElement.getElementsByTagName("TABLE");
var pTreeLevel4 = head3.rows[0].cells.length;
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++)
{
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel4)
{
var chld = tbls[i].getElementsByTagName("INPUT");
if(chld.length>0)
{
if (chld[0].checked == true)
{
chk4 = true;
break;
}
}
}
}
var nd = head4.getElementsByTagName("INPUT");
if(nd.length>0){
nd[0].checked = (chk4 && chk3 && chk2 && chk1);}
}
}
}
}
}//end if - unchecked
}
var numTables = tables.length
if (numTables >= 1)
{
for (i=0; i < numTables; i++)
{
if (tables[i] == obj)
{
treeNodeFound = true;
i++;
if (i == numTables)
{
return;
}
}
if (treeNodeFound == true)
{
var childTreeLevel = tables[i].rows[0].cells.length;
if (childTreeLevel > parentTreeLevel)
{
var cell = tables[i].rows[0].cells[childTreeLevel - 1];
var inputs = cell.getElementsByTagName("INPUT");
inputs[0].checked = checkedState;
}
else
{
return;
}
}
}
}
}
}
Treeview