.net 2.0 rolled out with build in treeview control. It has many built in features like showing checkbox for all treeview node, formating the node. we code give the styles etc. We can enable the checkbox to select the node or leaf by just setting treeview ShowCheckBoxes=”All” property. We could observe one disadvantage is check all option missing. We could implement it using javascript method. We could find couple of javascript which provide the check all aption. You can find one good well tested javascript method to achive check all checkbox. It is bidirectional (ie Root to child node and chaild to root node check all option). You can find the below javascript implementation .

Javascript below method which you can add to your <head></head> tag.

function OnCheckBoxCheckChanged(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;
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;
function validateTreeView() {
var isChecked=false;
var tvNodes = document.getElementById('<%=tvFolders.ClientID %>');
var chBoxes = tvNodes.getElementsByTagName("input");
for (var i = 0; i < chBoxes.length; i++) {
var chk = chBoxes[i];
if (chk.type == "checkbox" && chk.checked==true) {
isChecked= true;
if (isChecked== true)
document.getElementById('<%=lbltvErrorMsg.ClientID %>').style.display="none";
document.getElementById("tdContentImg").innerHTML = "<img src='Images/loading.gif' />";
//$("#tdContentImg").append('<td align="center"><img src='Images/loading.gif' /></td>');
} else
document.getElementById('<%=lbltvErrorMsg.ClientID %>').style.display="";
return isChecked;

In your code behinde Page load method just add below line to call the javascript method.

protected void Page_Load(object sender, EventArgs e){
tvDemo.Attributes.Add("onclick", "OnCheckBoxCheckChanged(event)");

In above code tvDemo will be the treeview, has been declared on aspx page.

If you found any good idea or approach you can share with others.

Happy codding 🙂

Similar Topics:


javascript treeview checkboxtreeview checkbox javascriptjquery treeview checkboxtreeview checkbox select all javascriptjavascript treeview with checkboxjavascript to check all checkboxes in treeview