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;
//check if nxt sibling is not null & is an element node
if(nxtSibling && nxtSibling.nodeType == 1)
{
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<checkBoxCount;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;
}
Friday, July 15, 2011
Check a Parent node and all Child nodes get checked in TreeView using JS
Had this requirement in my project. Got a great post here - http://pushpontech.wordpress.com/2007/06/06/aspnet-20-treeview-checkbox-checkuncheck-all-script/ and http://forums.asp.net/t/1367074.aspx
Labels:
JavaScript,
TreeView
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment