.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.
<script>
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;
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;
}
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";
$("#trContent").hide();
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;
}
</script>
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 trim
- Microsoft Sharepoint SystemUpdate and Update using object model
- Server time in client javascript code
- Using jQuery in asp.net application and its advantages
- Concept of OOPS in C#
- Microsoft Sharepoint persisting webpart property values
- Singleton pattern – Design pattern
- ASP.NET Page Life Cycle explained
- WCF Interview Questions and Answers
- Email asp net Sending email using godaddy hosting account
