Tuesday, December 16, 2008

Check All Option in TreeView control

Javascript : Check All Option in TreeView control
ASP.Net 2.0 Provides Tree view control with more features. It gives an option to select items through checkboxes. But there is no option for select all in a single click.

We can do that using Javascript. Here the stuff....



<script language = "javascript" type = "text/javascript">
function treeViewClick()
{
var checkStatus = false;
var obj = event.srcElement;
if(obj.tagName == 'INPUT' && obj.type == 'checkbox')
{
checkStatus = obj.checked;
while(obj.tagName != 'TABLE')
{
obj = obj.parentElement;
}
if(isParent(obj)) /// Parent Node ---- Needs to set the parent status (Checked or Unchecked) to its child.
{
obj = obj.nextSibling;
var tables = obj.getElementsByTagName('TABLE');
for(tblcnt = 0; tblcnt < tables.length; tblcnt++)
{
checkAllDependents(tables[tblcnt], checkStatus);
}
}
else /// Child Node --- Needs to set the parent of this child as unchecked...
{
var parent = obj.parentElement.previousSibling;
var parentchkboxes = parent.getElementsByTagName('INPUT');
if(parentchkboxes.length > 0 && checkStatus == false)
parentchkboxes[0].checked = false;
}
}
}

function checkAllDependents(element, isChecked)
{
var ctrls = element.getElementsByTagName('INPUT');
for(cnt = 0; cnt < ctrls.length; cnt++)
{
if(ctrls[cnt].type == 'checkbox')
{
ctrls[cnt].checked = isChecked;
}
}
}

function isParent(element)
{
var anchors = element.getElementsByTagName('A');
//if(anchors.length > 1) // the Treeview Node option of SelectAction is other than "none"
if(anchors.length > 0) // the Treeview Node option of SelectAction is "none"
return true;
else
return false;
}
</script>




Here is the controls scripts.



<div>
<asp:XmlDataSource ID = "dsXML" runat = "server">
<Data>
<Products>
<Type Name = "Microsoft">
<Product ID = "1" Name = "DOTNET" />
<Product ID = "2" Name = "SQLServer" />
<Product ID = "3" Name = "Office" />
</Type>
<Type Name = "Oracle">
<Product ID = "1" Name = "Oracle11g" />
<Product ID = "2" Name = "Oracle10g" />
<Product ID = "3" Name = "Oracle9i" />
</Type>
<Type Name = "Sun">
<Product ID = "1" Name = "J2EE" />
<Product ID = "2" Name = "J2ME" />
<Product ID = "3" Name = "JSP" />
</Type>
</Products>
</Data>
</asp:XmlDataSource>

<asp:TreeView ID = "tvProducts" runat = "server"
DataSourceID = "dsXML" onclick = "treeViewClick();"
ShowCheckBoxes = "Leaf" BackColor = "seagreen" ForeColor = "white">
<DataBindings>
<asp:TreeNodeBinding DataMember = "Products" Text = "Products" SelectAction ="none" />
<asp:TreeNodeBinding DataMember = "Type" TextField = "NAME" ShowCheckBox = "true" SelectAction="none" />
<asp:TreeNodeBinding DataMember = "Product" ValueField = "ID" TextField = "NAME" SelectAction="none" />
</DataBindings>
</asp:TreeView>
</div>


No comments: