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