FAQ - Frequently Asked Questions

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

atarikg — Tue, 06 Jan 2009 19:18:41 GMT

You're a awesome guru. You're awesome...Thanks..

God Bless you :)

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

Ralph Labecki — Thu, 11 Dec 2008 14:14:18 GMT

Hi everyone,

I got a small issue with my asp:treeview. I have inserted it into dynamic js sliding menu, just to save more space on the screen.

There is just one problem, my js code that opens menu needs height property, however this depends on collapsed nodes.

Getting to the point I need to find a way to run another js function after node is collapsed or the other way around, but not before.

I know about "onClick" event, but this one will be executed before everything else, so no chance for my function to get a new height value.

I also discovered that I need to run my event after this one "TreeView_ToggleNode".

Any ideas ??

PS. I'm not using checkboxes, it's just a simple treeview.

Thanks

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

mohammedgharieb — Tue, 14 Oct 2008 11:41:12 GMT

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

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

TheRed — Fri, 10 Oct 2008 09:13:47 GMT

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)

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

LKManyam — Sun, 28 Sep 2008 12:56:32 GMT

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.

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

aravind.talasila — Wed, 27 Aug 2008 17:57:47 GMT

this fine and good to do

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

Mike.Borozdin — Mon, 11 Aug 2008 16:48:58 GMT

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.

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

wizhack — Tue, 27 May 2008 15:04:02 GMT

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.

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

wizhack — Tue, 27 May 2008 14:20:22 GMT

There is a logic Error with the javascript code in that when i unselect a child element it unselect the parent even if other child elements are selected.

I am working on a fix posting it soon.

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

mandar44 — Fri, 11 Apr 2008 09:21:44 GMT

=============================

The script works just fine...

great post my friend..!!!

I have another problem, please help me.

On Button Click ...

1) I want to get the text, value & deapth of the node checked. (may be single or multiple nodes)

2) should alert if its a Root Node.

3) It should be the Leaf node ( Last node in branch ). and not parent node...!!

4) And -- should open a page by passing these 3 values ( in modal window )

Can u help me friends ??

Regards,

Mandar

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

pedro.gmr — Tue, 01 Apr 2008 11:00:19 GMT

Hi den2005,

First, thanks for your help.

But, as I was with some hurry, I resolve by anotherway.

Here you can see my post: http://forums.asp.net/t/1241344.aspx

Anyway, I apreciate your concern. Thanks again.

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

den2005 — Tue, 01 Apr 2008 07:34:39 GMT

Sorry about that pedro,

I just post it without checking..

function OnTreeClick(evt)
   {
        var src = window.event != window.undefined ? window.event.srcElement : evt.target;
        var obj = window.event.srcElement;
        var isChkBoxClick = (src.tagName.toLowerCase() == "input" && src.type == "checkbox");
        if(isChkBoxClick)
        {
            var parentTable = GetParentByTagName("table", src);
            var nxtSibling = parentTable.nextSibling;

            do
   {
    obj = obj.parentElement;
   }
   while (obj.tagName != "TABLE")

   var tables = obj.parentElement.getElementsByTagName("TABLE");

   //get current node level
   var nodeTreeLevel = 0;
   if (tables[0] == obj)
   {
    nodeTreeLevel = tables[0].rows[0].cells.length;
   }

            if(nxtSibling)
            {
    var parentDiv = GetParentByTagName("div", src);
    //check or uncheck children at all levels
                CheckUncheckChildren(nodeTreeLevel,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++)
      {
    if (check == false){
    alert("the checkbox is " + check + " for " + childChkBoxes[i].title);
    childChkBoxes[i].checked = check;
    }
      }
   }
   function CheckUncheckChildren(nodeLevel,childContainer, check)
   {
  var childChkBoxes = childContainer.getElementsByTagName("input");
  var childTreeLevel = 0;
  if (childContainer.rows != null)
   childTreeLevel = childContainer.rows[0].cells.length;

var childChkBoxCount = childChkBoxes.length;

  for(var i = 0; i<childChkBoxCount; i++)
  {
   if (check == false){
    if (nodeLevel != childTreeLevel)
     childChkBoxes[i].checked = check;
   }
  }
   }
   function CheckUncheckParents(srcChild, check)
   {
       var parentDiv = GetParentByTagName("div", srcChild);
       var parentNodeTable = parentDiv.previousSibling;

       if(parentNodeTable)
        {
            var inpElemsInParentTable = parentNodeTable.getElementsByTagName("input");
            if(inpElemsInParentTable.length > 0)
            {
                var parentNodeChkBox = inpElemsInParentTable[0];
                if (check)
                {
     parentNodeChkBox.checked = check;
     //do the same recursively
     CheckUncheckParents(parentNodeChkBox, check);
    }
            }
        }
   }
   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 false;
              }
            }
        }
     }
     return true;
   }

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

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

lokanadham — Tue, 01 Apr 2008 07:25:52 GMT

Thank you so much.

Can we access the treeview with that TABLE and How do we access it?

Can you please explain me this?

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

GillouX — Tue, 01 Apr 2008 07:07:34 GMT

the treeview structure is made with a table

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

lokanadham — Tue, 01 Apr 2008 06:54:39 GMT

Hi All,

Can someone explain me what is this TABLE used in the script?

I am not able to understand it..

It will be greatful if you respond.

Thanks alot in advance.