ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript RSS

• • Reply
  

  wizhack

  Member

  6 Points

  3 Posts

  Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript

  May 27, 2008 03:04 PM|LINK

  function OnTreeClick(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;

   

   

  var isAllSiblingsChecked = AreAllSiblingsChecked(srcChild);

  if(check) //checkbox checked

   

  {

   

   

   

   

   

  if(isAllSiblingsChecked)

   

  checkUncheckSwitch = true;

   

  else

   

  return; //do not need to check parent if any(one or more) child not checked

   

  }

   

   

   

  else //checkbox unchecked

   

  {

  checkUncheckSwitch=isAllSiblingsChecked; //make sure no child element is selected

     

   

  }

   

   

   

   

   

  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 true;

   

  }

   

  }

   

  }

   

  }

   

   

  return false;

   

  }

   

   

   

  //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;

   

  }

   

  This Fix    when  you  unselect a child , the parent node  was also being unselected even when another child node is selected. 

• • Reply
  

  Mike.Borozdi...

  Member

  166 Points

  65 Posts

  Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript

  Aug 11, 2008 04:48 PM|LINK

   Here is my solution - http://www.mikeborozdin.com/post/ASPNET-TreeView-and-Checkboxes.aspx

   It also allows to select a checkbox when clicking on a link besides it.
  

  Blog about programming, web and IT in general
• • Reply
  

  LKManyam

  Member

  2 Points

  1 Post

  Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript

  Sep 28, 2008 12:56 PM|LINK

   Hi,

   This solution helped a lot. I have a small query and problem after implementing the code snippet in my code.

  I have a tree in below format

  - X

     - P1
  

        - C1
  

      -P2

      -P3

          - C2
  

              - S1

              - S2

          - C3
   

  Here P - Parent node, C- Childnodes, S - sub child nodes 

  When i select or deselect parent nodes and child nodes this code works lik a charm. There is a problem when I select/de-select Sub child nodes.

   
  lets assume all the nodes are selected including subchild nodes, then I uncheck the subchild node parent node and child node is also unchecked. Till here it is fine.

  Problem is --> When i again check the unchecked node it should select its parent and child nodes (since all other nodes under them are checked).
   

  Please update me if you have a solution for this. 

   

   

  Treeview in ASP.NET Treeview treeview in ASP.NET SelectedValue treeview detailsview

• • Reply
  

  TheRed

  Member

  197 Points

  94 Posts

  Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript

  Oct 10, 2008 09:13 AM|LINK

  Hi LKManyam,

  I have tested the code posted by wizhack, and for me there isn't the problem you addressed or maybe i've misunderstood your problem (if so please be clearer and use the names of the nodes)

  When i deselect C2 (in your example) S1 S2 are deselected. When i re-select C2 , S1 S2 are selected again and P3 always remains selected

   

  Here you can find the code, that i have reformatted

  http://forums.asp.net/t/1331963.aspx (see the wizhack code)

  Experience...is simply the name we give our mistakes.
• • Reply
  

  mohammedghar...

  Member

  9 Points

  4 Posts

  Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript

  Oct 14, 2008 11:41 AM|LINK

  Hello,

  this is the first time for me to post, i have applied the logic, really it works fine but when the parent node is unchecked and i want when check the child node to cascade the parent node to be checked it does not check the parent node

   thank you