Hi pushp_aspnet,

   Not quite good at javascript..Can you modify your script "function OnTreeClick(evt)"? What I needed is when I check a node, all nodes (parent) above are checked and no child nodes below are checked including siblings on same level, and when I unchecked a node, no all parent node above is unchecked, only all child nodes below are unchecked...

Sample Data: (Item+<number> is for references only) 

Item1 Parent Node 1

Item2    Child Node 1

Item3       Sub-Child Node 1

Item4           Sub-Sub Child Node 1

Item5           Sub-Sub Child Node 2

Item6       Sub-Child Node 2 

Item7 Parent Node 2

Item8    Child Node 1

Item9      Sub-Child Node 1

 

Case 1: Checking a node

   If I checked Item4 "Sub-Sub Child Node 1", Item 5,7,8,9 are Not checked, but from Item1 to Item4 and Item 6 are all checked.

Case 2: Unchecking a Node

  If I unchecked Item3, in the previously checked Items 1,2,3,4 and 6, only Item 3 and 4 are unchecked, the rest remain checked

Thanks in advanced.

this thread rocks.

I thank anyone here that posted the js code.

it's a god sent for treeview control.

I have solved the problem.

 

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; iif (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; iif (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; iif(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;    
   }

 

Hi Avanti.....

Just Superb Code.....! This is what I reuqired......And this is what should be logically.....in Treeview with Checkboxes...

Thousands of thankx.....for this Superb code....!

-Bihag Thaker

Hi den2005,

 I try tu use your code in my page but it it gives me an error in the for cycles.

den2005:

for(var i = 0; iif (check == false){

den2005:

for(var i = 0; iif (check == false){

den2005:

for(var i=0; iif(parentDiv.childNodes[i].nodeType == 1)

I don't understand what "iif" do.

There is another way of doing this cycle? 

Thanks. 

 

Hi den2005,

 I try tu use your code in my page but it it gives me an error in the for cycles.

den2005:

for(var i = 0; iif (check == false){

den2005:

for(var i = 0; iif (check == false){

den2005:

for(var i=0; iif(parentDiv.childNodes[i].nodeType == 1)

I don't understand what "iif" do.

There is another way of doing this cycle? 

Thanks. 

 

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.

      

 

the treeview structure is made with a table

Thank you so much.

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

Can you please explain me this?

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

Hi den2005,

First, thanks for your help.

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

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

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. 

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)<