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:
Post a Comment