Project Cool

Great code! Exactly what I'm looking for :-)

Can you post the opposite code (ie: uncheck a child node unchecks all parents but checking a child node does NOT check all parents)?

Thanks!

Hello...
I've worked a little bit more on the above solution with other forum members help...

check it out at...
http://forums.asp.net/1243475/ShowThread.aspx#1243475

I need the complete checkboxes behavoir too...please post if anybody has any ideas or solutions....Thanks!

check out the same thread, above...I've posted a followup/final solution...

function goDeeperChecked(obj)
{
var chk1 = true;
//Get the mom.
var head1 = obj.parentElement.previousSibling;
//no rows, cant do my work.
if(obj.rows == null)
{return ;}

//This is how may rows are at this level.
var pTreeLevel1 = obj.rows[0].cells.length;
//Are we a mommy?
if(head1.tagName == "TABLE")
{
//Get the list of rows ahead of us.
var tbls = obj.parentElement.getElementsByTagName("TABLE");
//get the count of that list.
var tblsCount = tbls.length;

//determine if any of the rows underneath are unchecked.
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[0].checked == false)
{
chk1 = false;
break;
}
}
}

var nd = head1.getElementsByTagName("INPUT");
nd[0].checked = chk1;
//do the same for the level above
goDeeperChecked(obj.parentElement);
}
else
{
return;
}
}
function goDeeper(check, obj)
{

//head1 gets the parent node of the unchecked node
var head = obj.parentElement.previousSibling;

if(head.tagName == "TABLE")
{
//checks for the input tag which consists of checkbox
var matchElement = head.getElementsByTagName("INPUT");

//matchElement1[0] gives us the checkbox and it is unchecked
matchElement[0].checked = false;
}
else
{
head = obj.parentElement.previousSibling;
}

if(head.tagName == "TABLE")
{
goDeeper(check, obj.parentElement);
}

else
{
return;
}
}
function treeViewCheck()
{
// obj gives us the node on which check or uncheck operation has performed
var obj = window.event.srcElement;

var treeNodeFound = false;

var checkedState;


//checking whether obj consists of checkbox to avoid exception

if (obj.tagName == "INPUT" && obj.type == "checkbox")
{
var treeNode = obj;
checkedState = treeNode.checked;

//work our way back to the parent <table> element

do
{
obj = obj.parentElement;
}
while (obj.tagName != "TABLE")

var parentTreeLevel = obj.rows[0].cells.length;
var parentTreeNode = obj.rows[0].cells[0];

//get all the TreeNodes inside the TreeView (the parent <div>)
var tables = obj.parentElement.getElementsByTagName("TABLE");

//checking for any node is checked or unchecked during operation
if(obj.tagName == "TABLE")
{
// if any node is unchecked then their parent node are unchecked

if (!treeNode.checked)
{
goDeeper(false, obj);
} //end if - unchecked
//total number of TreeNodes
var numTables = tables.length

if (numTables >= 1)
{
//cycle through all the TreeNodes
//until we find the TreeNode we checked

for (i=0; i < numTables; i++)
{
if (tables[i] == obj)
{
treeNodeFound = true;
i++;
if (i == numTables)
{
//if we're on the last TreeNode, we are done
break;
}
}
if (treeNodeFound == true)
{
var childTreeLevel = tables[i].rows[0].cells.length;
if (childTreeLevel > parentTreeLevel)
{
var cell = tables[i].rows[0].cells[childTreeLevel - 1];
//set the checkbox to match the checkedState

var inputs = cell.getElementsByTagName("INPUT");
inputs[0].checked = checkedState;
}

else
{
//if any of the preceding TreeNodes are not deeper stop
break;
}
} //end if

}//end for
} //end if - numTables >= 1

// if all child nodes are checked then their parent node is checked
if (treeNode.checked)
{
goDeeperChecked(obj);
}//end if - checked

} //end if - tagName = TABLE

} //end if

} //end function

Did anyone else find that this works fine in IE but not in Firefox?

It seems that the OnClick event is firing the client_OnTreeNodeChecked() script.

Anyone got any ideas why \ a work around for this?

Sorry meant to say:
It seems that the OnClick event *isn't* firing the client_OnTreeNodeChecked() script.

Hii,

function client_OnTreeNodeChecked(event)
{
var TreeNode = event.srcElement || event.target ;

if (TreeNode.tagName == "INPUT" && TreeNode.type == "checkbox")
{
if(TreeNode.checked)
{
alert(TreeNode.title)
}
alert(TreeNode.value)
}
}

I am using the above code to get selected nodes at client side, and it is working fine but the problem is that I want to get Value(TreeNode.Value) of the current node instead of text(TreeNode.title gives TreeNode.Text), TreeNode.value is always returning ‘on’. Please tell me how I can retrieve Value of the node...

Cheerio
Abhishek

// JScript File

function goDeeperUnChecked(obj)
{
var chk1 = false;
//Get the mom.
var head1 = obj.parentElement.previousSibling;
//no rows, cant do my work.
if(obj.rows == null)
{return ;}

//This is how may rows are at this level.
var pTreeLevel1 = obj.rows[0].cells.length;

//Are we a mommy?
if(head1.tagName == "TABLE")
{
//Get the list of rows ahead of us.
var tbls = obj.parentElement.getElementsByTagName("TABLE");
//get the count of that list.
var tblsCount = tbls.length;

//determine if any of the rows underneath are unchecked.
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[0].checked == true)
{
chk1 = true;
break;
}
}
}

var nd = head1.getElementsByTagName("INPUT");
nd[0].checked = chk1;
//do the same for the level above
goDeeperUnChecked(obj.parentElement);
}
else
{
return;
}
}


function goDeeper(obj)
{

//head1 gets the parent node of the checked node
var head = obj.parentElement.previousSibling;

if(head.tagName == "TABLE")
{
//checks for the input tag which consists of checkbox
var matchElement = head.getElementsByTagName("INPUT");

//matchElement[0] gives us the checkbox and it is checked
//something is wrong here, fixed
if (matchElement.length>0){
matchElement[0].checked = true;
}

}
else
{

head = obj.parentElement.previousSibling;
}

if(head.tagName == "TABLE")
{
goDeeper(obj.parentElement);
}

else
{
return;
}
}
function treeViewCheck()
{
// obj gives us the node on which check or uncheck operation has performed
var obj = window.event.srcElement;

var treeNodeFound = false;

var checkedState;


//checking whether obj consists of checkbox to avoid exception

if (obj.tagName == "INPUT" && obj.type == "checkbox")
{
var treeNode = obj;
checkedState = treeNode.checked;


//work our way back to the parent <table> element

do
{
obj = obj.parentElement;
}
while (obj.tagName != "TABLE")

var parentTreeLevel = obj.rows[0].cells.length;
var parentTreeNode = obj.rows[0].cells[0];

//get all the TreeNodes inside the TreeView (the parent <div>)
var tables = obj.parentElement.getElementsByTagName("TABLE");

//checking for any node is checked or unchecked during operation
if(obj.tagName == "TABLE")
{

// Modified - if any node is checked then their parent node is checked
if (treeNode.checked)
{
goDeeper(obj);
} //end if - checked

//total number of TreeNodes
var numTables = tables.length

if (numTables >= 1)
{
//cycle through all the TreeNodes
//until we find the TreeNode we checked

for (i=0; i < numTables; i++)
{
if (tables[i] == obj)
{
treeNodeFound = true;
i++;
if (i == numTables)
{
//if we're on the last TreeNode, we are done
break;
}
}
if (treeNodeFound == true)
{

var childTreeLevel = tables[i].rows[0].cells.length;
if (childTreeLevel > parentTreeLevel)
{
var cell = tables[i].rows[0].cells[childTreeLevel - 1];
//set the checkbox to match the checkedState

var inputs = cell.getElementsByTagName("INPUT");
inputs[0].checked = checkedState;

}

else
{
//if any of the preceding TreeNodes are not deeper stop
break;

}
} //end if

}//end for
} //end if - numTables >= 1


//Modified - If all child nodes are unchecked then their parent node is unchecked

if (!treeNode.checked)
{
goDeeperUnChecked(obj);
}//end if - unChecked


} //end if - tagName = TABLE

} //end if

} //end function

I get an error "event has no properties" when I run "window.event.srcElement;" in Firefox.

It works perfectly in Explorer, but how do I make window.event.srcElement work in Firefox?

Thank you, Mads

One more thing,

var nd = head1.getElementsByTagName("INPUT");
nd[0].checked = chk1;

should be changed to:

var nd = head1.getElementsByTagName("INPUT");
// Check if there are any elements first
if (nd.length>0){
nd[0].checked = chk1;
}

Great code.
I'm facing a problem that,even if all the parent nodes are deselected, grand parent node is not deselected. Could any ony help me to find a solution for this.

Thanks this came to great use, saved me loads of time..

goDeeperUnChecked();
goDeeper();
treeViewCheck();

So great,thx.
But its a pity it doesnt work for grandpa.

I discovered that the html that is emitted by the treeview control can vary when using the predefined treeview formatting settings. I did not test all of the settings, but did discover that the javascript does not work with some settings.

Thank you! Thank you! That code is beautifual. I've had multiple failed attempts at accomplishing javascript that would do just this.

Any idea how to make that javascript work with Firefox?

Hi Great code...

But I want little more functionality...

Now with t his code, when I Unccheck node then it only uncheck the PArent Node...what to do If i wants to uncheck further parent node as no any child node of that parent node is selected...

And also i want to check all the child Nodes on click of Parent node..

Thanks in Advance...

Tejas

Please can anyone help me on this
According to the functionality i need,when all checkboxes of child node is unchecked only then checkboxes of the parent node should be unchecked
Please can anybody provide with a relevant script for the same

Hi Harish,

Just a quick question on this:

Does this javascript work on treeview control populated by XMLDataSource only??

I am trying to do the same thing, check and uncheck all on the treeview control populated from database..however, the above script does not seem to WORK!

any ideas?

Hi,
Harish sir,
Ur code is tremendous,as i am beginner in .net, please send me that category xml file which is used in treeview,and please tell me where i have to place xml file,wiating for ur reply
thank u
Vishwanath

Hi,
I am getting below error

The DataSourceID of 'TreeView1' must be the ID of a control of type IHierarchicalDataSource. A control with ID 'XmlDataSource1' could not be found.

Hi
In a tree view i am binding the tree view from the back end when the page is loaded.here when a user check the Prent Node then automatically all the child node will be checked and if the user is unchecked the parent node then all the child nodes will ne unchecked.i am placing the above code in .aspx and i am not rectifying the problem can u pls help.

I am using the above code to get selected nodes at client side, and it is working fine but It is working only IE browser, it isn’t work mozhila firebox Please tell me how I can modify that code

...1. error...

if (childTreeLevel = pTreeLevel1)
{
var chld = tbls[i].getElementsByTagName("INPUT");
if (chld[0].checked == false)
{
chk1 = false;
break;
....right....
if (childTreeLevel == pTreeLevel1)
{
var chld = tbls[i].getElementsByTagName("INPUT");
if (chld[0].checked == false)
{
chk1 = false;
break;


...2.error...
var nd = head1.getElementsByTagName("INPUT");
nd[0].checked = chk1;
//do the same for the level above
goDeeperUnChecked(obj.parentElement);
}
else
{
return;
}
}
....right....
var nd = head1.getElementsByTagName("INPUT");
nd[0].checked = chk1;
//do the same for the level above
goDeeperUnChecked(obj.parentElement.previousSibling);
}
else
{
return;
}
}

Anybody help me
I am using the above code to get selected nodes at client side, and it is working fine but It is working only IE browser, it isn’t work mozhila firebox Please tell me how I can modify that code.

Hi,

There have been problems with the above script - the check/uncheck behavior is implemented only upto one level up the hierarchy. I've posted the complete solution

check here: http://forums.asp.net/p/976122/1733193.aspx#1733193

Hi,

is it possible to get the value of the node (TreeNode.Value) on the client side? The TreeNode.Text is possible through "title", but I need the value...please give me some light...

Cheers,
na-rocha

Great Article

helped me a lot

Does anyone know how to make this working with firefox?

Here you go, the asp.net forums has code that works in both IE and Firefox. It also unchecks the parent if you uncheck one of the siblings. I've tested in IE 7 and Firefox 2.0.0.9 and it works well in both:

http://forums.asp.net/p/976122/1733193.aspx#1733193

And here is the code they used:

//************************** 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;
}

The below javascript is the simple to check all the checkboxes in a treeview control

function UnCheckAllCheckBoxes()
{
var ControlToUncheck = document.getElementById('ctl00_maincontent_WTrVwDivisionHierarchy');
var tables = ControlToUncheck.getElementsByTagName("TABLE");
var iLoop;
for(iLoop = 0; iLoop < tables.length; iLoop++)
{
var check = tables[iLoop].getElementsByTagName("INPUT");
var i;
for(i = 0; i < check.length; i++)
{
if(check[i].type = "checkbox")
{
check[i].checked = true;
}
}
}

}

Thanks for the owner of first article...

The script works just fine...
great post my friend..!!!

I have another problem, please help me.
1)I want to get the text, value & deapth of the node checked.
2)should alert if its a Root Node.
3)It should be the Leaf node(last node in branch).
and not parent node...!!
4)Should open a page by passing these 3 values ( in modal window )

Can u help me friends ??

Regards,
Mandar

I have a requirement here...
My treeview has checkboxes at every node.Now when I check a node,it should be expanded...all its sub-nodes and sub-nodes of sub-nodes should be expanded
Pls help me..

Thanx in advance

Thanks a lot

Thank you,
Great piece of code, worked at the first time only

hi
dear sir
thank u for helping .
sir
i want count only checked leaf node
can u help me


i m waiting


pradeep gautam

greate code my friend Dustin Horne, i just a one question, i dont want to uncheked the parents if i uncheked any child, if i uncheked all childs i want to uncheked the parents, can you help me??
thanks bro, are you greate code master

Hey, man, thanks a lot!
This was really a sheer copy-paste. Saved me time!

Here when a user check the Prent Node then automatically all the child node will be checked and if the user is unchecked the parent node then all the child nodes will ne unchecked.

It is a great code