TreeView with CheckBox

   ASP.NET 2.0 TreeView has many built-in features such as showing a checkbox for all the Tree Nodes. Node level formating, style, etc., Enabling the ShowCheckBoxes="All" property sets it to show a checkbox for all the 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 that all the other checkboxes are checked automatically. Basically, when the parent node is checked, all the child nodes should 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" οnclick="client_OnTreeNodeChecked();" 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, you can find the property οnclick="client_OnTreeNodeChecked();" event which actually is the JavaScript function which would 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 == obj)
  {
  treeNodeFound = true;
  i++;
  if (i == numTables)
  {
  return;
  }
  }
  if (treeNodeFound == true)
  {
  var childTreeLevel = tables.rows[0].cells.length;
  if (childTreeLevel > parentTreeLevel)
  {
  var cell = tables.rows[0].cells[childTreeLevel - 1];
  var inputs = cell.getElementsByTagName("INPUT");
  inputs[0].checked = checkedState;
  }
  else
  {
  return;
  }
  }
  }
  }
  }
  }
  </script> 
   
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值