asp.net 2.0 Treeview checkboxes-check all-javascript

Asp.net|javascript|treeview

asp.net 2.0 TreeView has many built-in features as such a checkbox for all of the tree showing. Node level formating, style, etc., enabling the showcheckboxes= ' all ' property sets it to show a checkbox for all nodes . The other options are Leaf, None, Parent and Root which show checkboxes at the respective node levels. None doesnt display checkboxes.

When we set showcheckboxes= ' all ', we would like to provide a feature where people can select the checkbox on the Root Node So, all of the other checkboxes are checked automatically. Basically, when the ' parent node is checked ', all of the child nodes should to be checked automatically.

It would be intuitive to accomplish this task at the client side without involving a postback.

The following code snippet helps in accomplishing the same.

TreeView Declaration

<asp:treeview id= "TreeView1" runat= "Server" datasourceid= "XmlDataSource1" showcheckboxes= "All" >

<DataBindings>

<asp:treenodebinding datamember= "Category" valuefield= "ID" textfield= "Name" ></asp:TreeNodeBinding>

<asp:treenodebinding datamember= "Description" valuefield= "value" textfield= "value" ></asp:treenodebinding >

</DataBindings>

</asp:TreeView>

In the above TreeView declaration Code, your can find the property event which actually is the JavaScript function which wo Uld accomplish this task.

The Javascript Code snippet is as follows:-

<script language= "javascript" type= "Text/javascript"
Function client_ontreenodechecked ()
{
var obj = window.event.srcElement;
var treenodefound = false;
Var checkedstate;
if (obj.tagname = = "INPUT" && obj.type = = "checkbox") {
var treeNode = obj;
Checkedstate = treenode.checked;
do
{
obj = obj.parentelement;
} while (Obj.tagname!= "TABLE")
var parenttreelevel = obj.rows[0]. Cells.length;
var parenttreenode = obj.rows[0].cells[0];
var tables = Obj.parentElement.getElementsByTagName ("TABLE");
var numtables = tables.length
if (numtables >= 1)
{
for (i=0 i < numtables; i++)
{
if (tables[i) = = obj)
{
Treenodefound = true;
i++;
if (i = = Numtables)
{
return;
}
}
if (Treenodefound = = True)
{
var childtreelevel = tables[i].rows[0].cells.length;
if (Childtreelevel > Parenttreelevel)
{
var cell = tables[i].rows[0].cells[childtreelevel-1];
var inputs = Cell.geteLementsbytagname ("INPUT");
inputs[0].checked = checkedstate;
}
Else
{
return;
}
}
}
}
}
}
</script>