Posted the updated code at http://geekswithblogs.net/ranganh/archive/2009/01/21/updated-asp.net-treeview-checkboxes-ndash-check-all-ndash-javascript.aspx
Didnt want to copy paste it into this post and make it too big. Thanks to all who have provided various suggestions. Infact, the best code was written by pushp_aspnet and I took the liberty to update the original code. When I last tested, I found it work
with IE 8 Beta 2, Firefox 3.0.5 and Safari 3.2.7 browsers.
Apologies for editing this post but some of the information is outdated and instead of again opening a thread, I have redirected it to a single place where I have put up the updated code.
The following script would help you in achieving this.
function treeViewCheck()
{
// obj gives us the node on which check or uncheck operation has performed
var obj = window.event.srcElement;
var treeNodeFound =
false;
var checkedState;
//checking whether obj consists of checkbox or not
if (obj.tagName ==
"INPUT" && obj.type ==
"checkbox")
{
//easier to read
var treeNode = obj;
//record the checked state of the TreeNode
checkedState = treeNode.checked;
//work our way back to the parent <table> element
do
{
obj = obj.parentElement;
}
while (obj.tagName !=
"TABLE")
//keep track of the padding level for comparison with any children
var parentTreeLevel = obj.rows[0].cells.length;
var parentTreeNode = obj.rows[0].cells[0];
//get all the TreeNodes inside the TreeView (the parent <div>)
var tables = obj.parentElement.getElementsByTagName("TABLE");
//checking for any node is checked or unchecked during operation
if((treeNode.checked) || (!treeNode.checked))
{
// if any node is unchecked then their parent node are unchecked
if(!treeNode.checked)
{
if(obj.tagName ==
"TABLE")
{
//head1 gets the parent node of the unchecked node
var head1 = obj.parentElement.previousSibling;
if(head1.tagName ==
"TABLE")
{
//checks for the input tag which consists of checkbox
var matchElement1 = head1.getElementsByTagName("INPUT");
//matchElement1[0] gives us the checkbox and it is unchecked
matchElement1[0].checked =
false;
}
else
{
head1 = obj.parentElement.previousSibling;
}
if(head1.tagName ==
"TABLE")
{
//head2 gets the parent node of the unchecked node
var head2 = obj.parentElement.parentElement.previousSibling;
if(head2.tagName ==
"TABLE")
{
//checks for the input tag which consists of checkbox
var matchElement2 = head2.getElementsByTagName("INPUT");
matchElement2[0].checked =
false;
}
}
else
{
head2 = obj.parentElement.previousSibling;
}
if(head2.tagName ==
"TABLE")
{
//head3 gets the parent node of the unchecked node
var head3 = obj.parentElement.parentElement.parentElement.previousSibling;
if(head3.tagName ==
"TABLE")
{
//checks for the input tag which consists of checkbox
var matchElement3 = head3.getElementsByTagName("INPUT");
matchElement3[0].checked =
false;
}
}
else
{
head3 = obj.parentElement.previousSibling;
}
if(head3.tagName ==
"TABLE")
{
//head4 gets the parent node of the unchecked node
var head4 = obj.parentElement.parentElement.parentElement.parentElement.previousSibling;
if(head4 !=
null)
{
if(head4.tagName ==
"TABLE")
{
//checks for the input tag which consists of checkbox
var matchElement4 = head4.getElementsByTagName("INPUT");
matchElement4[0].checked =
false;
}
}
}
}
}
}
//total number of TreeNodes
var numTables = tables.length
if (numTables >= 1)
{
//cycle through all the TreeNodes
//until we find the TreeNode we checked
for (i=0; i < numTables; i++)
{
if (tables[i] == obj)
{
treeNodeFound =
true;
i++;
if (i == numTables)
{
//if we're on the last
//TreeNode then stop
return;
}
}
if (treeNodeFound ==
true)
{
var childTreeLevel = tables[i].rows[0].cells.length;
//if the current node is under the parent
//the level will be deeper (greater)
if (childTreeLevel > parentTreeLevel)
{
//jump to the last cell... it contains the checkbox
var cell = tables[i].rows[0].cells[childTreeLevel - 1];
//set the checkbox to match the checkedState
//of the TreeNode that was clicked
var inputs = cell.getElementsByTagName("INPUT");
inputs[0].checked = checkedState;
}
else
{
//if any of the preceding TreeNodes are not deeper stop
return;
}
//end if
}
//end if
else
{
// var childTreeLevel = tables[0].rows[0].cells.length;
}
}
//end for
}
//end if
}
//end if
}
//end function
This unchecking works upto 5 levels currently, however, you can improvise it for more levels or if possible, make it n-level.
However, the check all, un check all is already level independent.
I need little more help with it...which I've tried for hours and couldn't get it...I think adding this would make it complete as I expect to have the check boxes behavior....
- currently, if I select a parent, all its childs are selected
- if I deselect one of these childs the parent is deselected (this works fine with your new post)
- now again, if I select the same child it doesn't select the parent, even though all its childs are selected. you see what I'm saying...if you can help me with this I greatly appreciate it.
Hey Harish...I think I almost nailed it with a small bug to fix...it's been already a long day for me and I can't fix it. I'm wondering if you have got any sleek way of doing it. See below my lines of code is in
between two **** lines. Please post your solution as well, if you have it.
I'm wondering if you have any ideas to make it generic instead of 4 levels as my treeview hierachy is not fixed level.
Thanks for you time.
function treeViewCheck() {
// obj gives us the node on which check or uncheck operation has performed
var obj = window.event.srcElement;
var treeNodeFound = false;
var checkedState;
//checking whether obj consists of checkbox or not
if (obj.tagName == "INPUT" && obj.type == "checkbox") {
//easier to read
var treeNode = obj;
//record the checked state of the TreeNode
checkedState = treeNode.checked;
//work our way back to the parent <table> element
do {
obj = obj.parentElement;
} while (obj.tagName != "TABLE")
//keep track of the padding level for comparison with any children
var parentTreeLevel = obj.rows[0].cells.length;
var parentTreeNode = obj.rows[0].cells[0];
//get all the TreeNodes inside the TreeView (the parent <div>)
var tables = obj.parentElement.getElementsByTagName("TABLE");
//checking for any node is checked or unchecked during operation
if(obj.tagName == "TABLE") {
**********************************************************************
// if all child nodes are checked then their parent node is checked
if (treeNode.checked) {
var chk1 = true;
var head1 = obj.parentElement.previousSibling;
var pTreeLevel1 = obj.rows[0].cells.length;
if(head1.tagName == "TABLE") {
var tbls = obj.parentElement.getElementsByTagName("TABLE");
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++) {
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel1) {
var chld = tbls[i].getElementsByTagName("INPUT");
if (chld[0].checked == false) {
chk1 = false;
break;
}
}
}
var nd = head1.getElementsByTagName("INPUT");
nd[0].checked = chk1;
}
else {
head1 = obj.parentElement.previousSibling;
}
var chk2 = true;
if(head1.tagName == "TABLE") {
var head2 = obj.parentElement.parentElement.previousSibling;
if(head2.tagName == "TABLE") {
//var tbls = obj.parentElement.getElementsByTagName("TABLE");
var tbls = head1.parentElement.getElementsByTagName("TABLE");
var pTreeLevel2 = head1.rows[0].cells.length;
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++) {
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel2) {
var chld = tbls[i].getElementsByTagName("INPUT");
if (chld[0].checked == false) {
chk2 = false;
break;
}
}
}
var nd = head2.getElementsByTagName("INPUT");
nd[0].checked = (chk2 && chk1);
}
}
else {
head2 = obj.parentElement.previousSibling;
}
var chk3 = true;
if(head2.tagName == "TABLE") {
var head3 = obj.parentElement.parentElement.parentElement.previousSibling;
if(head3.tagName == "TABLE") {
//var tbls = obj.parentElement.getElementsByTagName("TABLE");
var tbls = head2.parentElement.getElementsByTagName("TABLE");
var pTreeLevel3 = head2.rows[0].cells.length;
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++) {
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel3) {
var chld = tbls[i].getElementsByTagName("INPUT");
if (chld[0].checked == false) {
chk3 = false;
break;
}
}
}
var nd = head3.getElementsByTagName("INPUT");
nd[0].checked = (chk3 && chk2 && chk1);
}
}
else {
head3 = obj.parentElement.previousSibling;
}
var chk4 = true;
if(head3.tagName == "TABLE") {
var head4 = obj.parentElement.parentElement.parentElement.parentElement.previousSibling;
if(head4.tagName == "TABLE") {
//var tbls = obj.parentElement.getElementsByTagName("TABLE");
var tbls = head3.parentElement.getElementsByTagName("TABLE");
var pTreeLevel4 = head3.rows[0].cells.length;
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++) {
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel4) {
var chld = tbls[i].getElementsByTagName("INPUT");
if (chld[0].checked == false) {
chk4 = false;
break;
}
}
}
var nd = head4.getElementsByTagName("INPUT");
nd[0].checked = (chk4 && chk3 && chk2 && chk1);
}
}
}//end if - checked
**************************************************************************************
// if any node is unchecked then their parent node are unchecked
if (!treeNode.checked) {
//head1 gets the parent node of the unchecked node
var head1 = obj.parentElement.previousSibling;
if(head1.tagName == "TABLE") {
//checks for the input tag which consists of checkbox
var matchElement1 = head1.getElementsByTagName("INPUT");
//matchElement1[0] gives us the checkbox and it is unchecked
matchElement1[0].checked = false;
}
else {
head1 = obj.parentElement.previousSibling;
}
if(head1.tagName == "TABLE") {
//head2 gets the parent node of the unchecked node
var head2 = obj.parentElement.parentElement.previousSibling;
if(head2.tagName == "TABLE") {
//checks for the input tag which consists of checkbox
var matchElement2 = head2.getElementsByTagName("INPUT");
matchElement2[0].checked = false;
}
}
else {
head2 = obj.parentElement.previousSibling;
}
if(head2.tagName == "TABLE") {
//head3 gets the parent node of the unchecked node
var head3 = obj.parentElement.parentElement.parentElement.previousSibling;
if(head3.tagName == "TABLE") {
//checks for the input tag which consists of checkbox
var matchElement3 = head3.getElementsByTagName("INPUT");
matchElement3[0].checked = false;
}
}
else {
head3 = obj.parentElement.previousSibling;
}
if(head3.tagName == "TABLE") {
//head4 gets the parent node of the unchecked node
var head4 = obj.parentElement.parentElement.parentElement.parentElement.previousSibling;
if(head4 != null) {
if(head4.tagName == "TABLE") {
//checks for the input tag which consists of checkbox
var matchElement4 = head4.getElementsByTagName("INPUT");
matchElement4[0].checked = false;
}
}
}
} //end if - unchecked
} //end if - tagName = TABLE
//total number of TreeNodes
var numTables = tables.length
if (numTables >= 1) {
//cycle through all the TreeNodes
//until we find the TreeNode we checked
for (i=0; i < numTables; i++) {
if (tables[i] == obj) {
treeNodeFound = true;
i++;
if (i == numTables) {
//if we're on the last
//TreeNode then stop
return;
}
}
if (treeNodeFound == true) {
var childTreeLevel = tables[i].rows[0].cells.length;
//if the current node is under the parent
//the level will be deeper (greater)
if (childTreeLevel > parentTreeLevel) {
//jump to the last cell... it contains the checkbox
var cell = tables[i].rows[0].cells[childTreeLevel - 1];
//set the checkbox to match the checkedState
//of the TreeNode that was clicked
var inputs = cell.getElementsByTagName("INPUT");
inputs[0].checked = checkedState;
}
else {
//if any of the preceding TreeNodes are not deeper stop
return;
}
} //end if
}//end for
} //end if
} //end if
} //end function
I havent had a time to look into this and would post the code once I arrive at the same.
However, I think its not a major requirement since for selecting all, you already have a Select All option.
It is only logical to implement it and I think Check All, Uncheck All, Uncheck Parent when child node checked, is far more enough a rich experience for the users.
Anyways, if you happen to figure out, please post it over here.
All right...here we go...I think, I DID IT with the exception that some functionality is limited to a hierarchy level...however, you can add more levels as necessary...
Please post back if anybody finds a generic solution...also post any bugs in this function (I've done enough testing though...)
Thanks to Harish for the original post and following replies...
Cheers! Kiks
function
treeViewCheck() {
// obj gives us the node on which check or uncheck operation has performed
var obj = window.event.srcElement;
var treeNodeFound =
false;
var checkedState;
//checking whether obj consists of checkbox or not
if (obj.tagName ==
"INPUT" && obj.type == "checkbox") {
//easier to read
var treeNode = obj;
//record the checked state of the TreeNode
checkedState = treeNode.checked;
//work our way back to the parent <table> element
do {
obj = obj.parentElement;
} while (obj.tagName !=
"TABLE")
//keep track of the padding level for comparison with any children
var parentTreeLevel = obj.rows[0].cells.length;
var parentTreeNode = obj.rows[0].cells[0];
//get all the TreeNodes inside the TreeView (the parent <div>)
var tables = obj.parentElement.getElementsByTagName("TABLE");
//checking for any node is checked or unchecked during operation
if(obj.tagName ==
"TABLE") {
// if any node is unchecked then their parent node are unchecked
if (!treeNode.checked) {
//head1 gets the parent node of the unchecked node
var head1 = obj.parentElement.previousSibling;
if(head1.tagName ==
"TABLE") {
//checks for the input tag which consists of checkbox
var matchElement1 = head1.getElementsByTagName("INPUT");
//matchElement1[0] gives us the checkbox and it is unchecked
matchElement1[0].checked = false;
}
else {
head1 = obj.parentElement.previousSibling;
}
if(head1.tagName ==
"TABLE") {
//head2 gets the parent node of the unchecked node
var head2 = obj.parentElement.parentElement.previousSibling;
if(head2.tagName ==
"TABLE") {
//checks for the input tag which consists of checkbox
var matchElement2 = head2.getElementsByTagName("INPUT");
matchElement2[0].checked = false;
}
}
else {
head2 = obj.parentElement.previousSibling;
}
if(head2.tagName ==
"TABLE") {
//head3 gets the parent node of the unchecked node
var head3 = obj.parentElement.parentElement.parentElement.previousSibling;
if(head3.tagName ==
"TABLE") {
//checks for the input tag which consists of checkbox
var matchElement3 = head3.getElementsByTagName("INPUT");
matchElement3[0].checked = false;
}
}
else {
head3 = obj.parentElement.previousSibling;
}
if(head3.tagName ==
"TABLE") {
//head4 gets the parent node of the unchecked node
var head4 = obj.parentElement.parentElement.parentElement.parentElement.previousSibling;
if(head4 !=
null) {
if(head4.tagName ==
"TABLE") {
//checks for the input tag which consists of checkbox
var matchElement4 = head4.getElementsByTagName("INPUT");
matchElement4[0].checked = false;
}
}
}
} //end if - unchecked
//total number of TreeNodes
var numTables = tables.length
if (numTables >= 1) {
//cycle through all the TreeNodes
//until we find the TreeNode we checked
for (i=0; i < numTables; i++) {
if (tables[i] == obj) {
treeNodeFound = true;
i++;
if (i == numTables) {
//if we're on the last
//TreeNode then stop
//return;
break;
}
}
if (treeNodeFound ==
true) {
var childTreeLevel = tables[i].rows[0].cells.length;
//if the current node is under the parent
//the level will be deeper (greater)
if (childTreeLevel > parentTreeLevel) {
//jump to the last cell... it contains the checkbox
var cell = tables[i].rows[0].cells[childTreeLevel - 1];
//set the checkbox to match the checkedState
//of the TreeNode that was clicked
var inputs = cell.getElementsByTagName("INPUT");
inputs[0].checked = checkedState;
}
else {
//if any of the preceding TreeNodes are not deeper stop
//return;
break;
}
} //end if
}//end for
} //end if - numTables >= 1
// if all child nodes are checked then their parent node is checked
if (treeNode.checked) {
var chk1 =
true;
var head1 = obj.parentElement.previousSibling;
var pTreeLevel1 = obj.rows[0].cells.length;
if(head1.tagName ==
"TABLE") {
var tbls = obj.parentElement.getElementsByTagName("TABLE");
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++) {
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel1) {
var chld = tbls[i].getElementsByTagName("INPUT");
if (chld[0].checked ==
false) {
chk1 = false;
break;
}
}
}
var nd = head1.getElementsByTagName("INPUT");
nd[0].checked = chk1;
}
else {
head1 = obj.parentElement.previousSibling;
}
var chk2 =
true;
if(head1.tagName ==
"TABLE") {
var head2 = obj.parentElement.parentElement.previousSibling;
if(head2.tagName ==
"TABLE") {
var tbls = head1.parentElement.getElementsByTagName("TABLE");
var pTreeLevel2 = head1.rows[0].cells.length;
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++) {
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel2) {
var chld = tbls[i].getElementsByTagName("INPUT");
if (chld[0].checked ==
false) {
chk2 = false;
break;
}
}
}
var nd = head2.getElementsByTagName("INPUT");
nd[0].checked = (chk2 && chk1);
}
}
else {
head2 = obj.parentElement.previousSibling;
}
var chk3 =
true;
if(head2.tagName ==
"TABLE") {
var head3 = obj.parentElement.parentElement.parentElement.previousSibling;
if(head3.tagName ==
"TABLE") {
var tbls = head2.parentElement.getElementsByTagName("TABLE");
var pTreeLevel3 = head2.rows[0].cells.length;
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++) {
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel3) {
var chld = tbls[i].getElementsByTagName("INPUT");
if (chld[0].checked ==
false) {
chk3 = false;
break;
}
}
}
var nd = head3.getElementsByTagName("INPUT");
nd[0].checked = (chk3 && chk2 && chk1);
}
}
else {
head3 = obj.parentElement.previousSibling;
}
var chk4 =
true;
if(head3.tagName ==
"TABLE") {
var head4 = obj.parentElement.parentElement.parentElement.parentElement.previousSibling;
if(head4.tagName ==
"TABLE") {
var tbls = head3.parentElement.getElementsByTagName("TABLE");
var pTreeLevel4 = head3.rows[0].cells.length;
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++) {
var childTreeLevel = tbls[i].rows[0].cells.length;
Thats works great cheers for the code. Or thou i have one little question left to all you coders out there
is it possible to have it so that when you delect a child of a parent thats already selected that as well as deselecting the parent it changes the check box background to a greyish colour ??
I had the same problem. After some investigation I found the solution in replacing some only IE JavaScript commands with commands both browsers (and maybe more) understand.
1. I replaced the onclick handler with a version which has event as a parameter, i.e. onclick=="client_OnTreeNodeChecked(event);"
2. In the handle function replace "var obj = window.event.srcElement;" with "var obj =
event.srcElement || event.target ;", because only IE supports srcElement property. This sentence works for IE and Firefox.
3. replace parentElement by parentNode. parentElement is IE special, parentNode is supported by both.
This routine should work fine on IE and I haven't tested on any other browsers. Try using the tips that others had posted, for multi browser compatibility.
In you case it looks like
getElementsByTagName is returning nothing...
I have updated the TreeView Javascript original post (first post in this thread) with a working script which will take care of all the requirements mentioned in this post.
I have tested it and it works fine in IE, Safari, FireFox and even IE 7.0 Beta.
It is level independant, takes care of checking / unchecking for parent / child node checks / unchecks.
If you still face issues, please feel free to post your query.
I would like to thank all of you for the various inputs / suggestions given in this thread and a special thanks to Jake from GeekswithBlogs.com who took the pain to make it work n-level, and posting it in my Blog
Post. (http://geekswithblogs.net/ranganh/archive/2006/03/25/73300.aspx)
I have have created a JavaScript solution similar to the previous coded but in a much more organized way - Tell me what do you think.
Currently the code was only tested on IE - I guess that with more 30 minutes the code will work on all browsers (I will post it very soon)
Tell me what do you think?
* I was not able to attach it - mail me and I will send it to you :)
// Handle tree view click
function Davidovitz_HandleCheckbox()
{
var element = event.srcElement;
if (element.tagName == "INPUT" && element.type == "checkbox")
{
var checkedState = element.checked;
while (element.tagName != "TABLE") // Get wrapping table
{
element = element.parentElement;
}
Davidovitz_UnCheckParents(element); // Uncheck all parents
element = element.nextSibling;
if (element == null) // If no childrens than exit
return;
var childTables = element.getElementsByTagName("TABLE");
for (var tableIndex = 0; tableIndex < childTables.length; tableIndex++)
{
Davidovitz_CheckTable(childTables[tableIndex], checkedState);
}
}
}
// Uncheck the parents of the given table, Can remove the recurse (redundant)
function Davidovitz_UnCheckParents(table)
{
if (table == null || table.rows[0].cells.length == 2) // This is the root
{
return;
}
var parentTable = table.parentElement.previousSibling;
Davidovitz_CheckTable(parentTable, false);
Davidovitz_UnCheckParents(parentTable);
}
// Handle the set of checkbox checked state
function Davidovitz_CheckTable(table, checked)
{
var checkboxIndex = table.rows[0].cells.length - 1;
var cell = table.rows[0].cells[checkboxIndex];
var checkboxes = cell.getElementsByTagName("INPUT");
if (checkboxes.length == 1)
{
checkboxes[0].checked = checked;
}
}
if (TreeNode.tagName ==
"INPUT" && TreeNode.type == "checkbox")
{
if(TreeNode.checked)
{
alert(TreeNode.title)
}
alert(TreeNode.value)
}
}
I am using the above code to get selected nodes at client side, and it is working fine but the problem is that I want to get Value(TreeNode.Value)
of the current node instead of text(TreeNode.title gives TreeNode.Text), TreeNode.value is always returning ‘on’. Please tell me how I can retrieve Value of the node...
Cheerio
Abhishek
When you ask a question, remember to click "mark as answered" when you get a reply which answers your question; this ensures the right forum member gets credit for being helpful (and makes search more relevant too).
It's important for you to understand that because you are working with a tree you must know the path of the node (not only the value)
When you look at the client side you can see that each note has an anchor element with href that contain something like this: href="javascript:__doPostBack('TreeView1','smyvalue1\\myvalue2')" (Microsoft didn't do the extra mile and wrap it with
client side
So if you want to get the value from the client side all you have to do is to parse the string and extract the bold part that represent the nodes' values of the path.
I recommand parsing the string using a regex - If you are having problem with the regex tell me and I will create one for you [:D]
Also if you value contain a '\' character than it will be encoded to "*|*" so dont forget to replace it later on
I got ur point but it may be silly to ask but I cant figure out how to get this href/ anchor tag through javascript at client side so that i can parse it. [:(]
Is'nt there any other way I can get the value of the node as I can get its text through title property...[Idea]
or treeview doesent keep nodes value at clientside...
Cheerio
Abhishek
When you ask a question, remember to click "mark as answered" when you get a reply which answers your question; this ensures the right forum member gets credit for being helpful (and makes search more relevant too).
The treeview doesn't save the node value at client side so you have to parse it,
To get the anchor element you simply have to walk up the DOM to the row that was clicked and then get elements by tag ("A") - The first will be your needed anchor.
You can also look at the resource code (javascript) of the treeview using reflector and see that they do the same.
The treeview doesn't save the node value at client side so you have to parse it,
To get the anchor element you simply have to walk up the DOM to the row that was clicked and then get elements by tag ("A") - The first will be your needed anchor.
You can also look at the resource code (javascript) of the treeview using reflector and see that they do the same.
I don't know if you found a solution to your issue in bold, but here is a fix for your issue. The original code would check the parent if you select a child node and all the children are checked, but would not check its parent if all of the child nodes were
selected.
I did not re-post all the functions. Just replace goDeeperChecked with this version below.
function goDeeperChecked(obj)
{
var chk1 = true;
//Get the mom.
var head1 = obj.parentElement.previousSibling;
//no Table, cant do my work.
if (head1.tagName != "TABLE")
{return ;}
//This is how may rows are at this level.
var pTreeLevel1
if (obj.rows == null || obj.rows == "undefined")
{
pTreeLevel1 = head1.rows[0].cells.length;
}
else
{
pTreeLevel1 = obj.rows[0].cells.length;
}
//Are we a mommy?
if(head1.tagName == "TABLE")
{
//Get the list of rows ahead of us.
var tbls = obj.parentElement.getElementsByTagName("TABLE");
//get the count of that list.
var tblsCount = tbls.length;
//determine if any of the rows underneath are unchecked.
for (i=0; i < tblsCount; i++)
{
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel1)
{
var chld = tbls[i].getElementsByTagName("INPUT");
if (chld[0].checked == false)
{
chk1 = false;
break;
}
}
}
var nd = head1.getElementsByTagName("INPUT");
nd[0].checked = chk1;
//do the same for the level above
goDeeperChecked(obj.parentElement);
}
else
{
return;
}
}
Hockey_Scott, thanks for sharing that. I think, I already posted the full version of very lengthy solution (may be similar to your solution or not) in my ealrlier posts.
But, see Davidovitz's post of shorter and cleaner version of the function which misses the same little functionality that you are talking about.
If anybody has a TOTAL solution to Davidovitz's, please post it. Thanks!
// Gets a handle to the TreeView's selected node.
//
function CollapseOtherNodes(obj,treeHanld)
{
var tree = treeHanld;
var treeNode,treeParent, treeChild,ownChilds;
var nodeIndex,curnodeIndex;
var blnRoot =false;
if ( null == tree || undefined == tree )
return null;
treeNode = tree.getTreeNode(obj); //current Node
if ( null != treeNode && undefined != treeNode )
{
ownChilds= treeNode.getChildren();//get its own childs.
treeParent = treeNode.getParent();//its parent..
if ( null != treeParent && undefined != treeParent )
{
nodeIndex= treeParent.getNodeIndex()//Parent Node index
}
curnodeIndex= treeNode.getNodeIndex()//current Node index
}
if ( null != nodeIndex && undefined != nodeIndex )
{
treeParent = tree.getTreeNode(nodeIndex); //Get Parent..
}
else
{
treeParent = tree;
blnRoot=true;
}
if(blnRoot)//Root Node expand
{
var ID = document.getElementById('hdnStatus');
var NodeID;
if(ID != null )
{
tree = tree.getChildren();
tree= tree[0].getChildren();
I attempted to implement both the "goDeeper" and "Davidovitz" consolidated code.
The "goDeeper" does not produce any errors, but the parents are not unchecked when a child is unchecked.
"Davidovitz" code gives me an error "rows.0 is null or not a object" in the
Davidovitz_CheckTable function. I believe this is happening from
Davidovitz_UnCheckParents ->Davidovitz_CheckTable(parentTable,
false);
Should the "goDeeper" function uncheck parents when a child is unchecked? If so where is the code to do that.
Has anyone verified Davidovitz functions?
My treeview is located within a wizard if that makes a difference.
<div> </div> <div> </div> <div align=left>[INTERNAL]</div> <div align=left> </div>
<div align=left>Dear Fiends,</div> <div> </div> <div align=left>Thanx to Jack who provides actual solution for the problem at site
http://geekswithblogs.net/ranganh/archive/2006/03/25/73300.aspx. However his both program was not complete in functionality, In first one there was problem during selection
of Node(Check) while in second program there was problem in Unselection of node(Uncheck).
I merged the two and here lies the final solution however if anybody find any bug plzz resend
it with solution if any? or report the same.</div> <div> </div> <div align=left> </div> <div> </div> <div align=left>function goDeeperChecked(obj)
{
var chk1 = true;
//Get the mom.
var head1 = obj.parentElement.previousSibling;
//no Table, cant do my work.
if (head1.tagName != "TABLE")
{return ;}</div> <div> </div> <div align=left>//This is how may rows are at this level.
var pTreeLevel1
if (obj.rows == null || obj.rows == "undefined")
{
pTreeLevel1 = head1.rows[0].cells.length;
}
else
{
pTreeLevel1 = obj.rows[0].cells.length;
}</div> <div> </div> <div align=left>//Are we a mommy?
if(head1.tagName == "TABLE")
{
//Get the list of rows ahead of us.
var tbls = obj.parentElement.getElementsByTagName("TABLE");
//get the count of that list.
var tblsCount = tbls.length; </div> <div> </div> <div align=left>//determine if any of the rows underneath are unchecked.
for (i=0; i < tblsCount; i++)
{
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel1)
{
var chld = tbls[i].getElementsByTagName("INPUT");
if (chld[0].checked == false)
{
chk1 = false;
break;
}
}
} </div> <div> </div> <div align=left>var nd = head1.getElementsByTagName("INPUT");
nd[0].checked = chk1;
//do the same for the level above
goDeeperChecked(obj.parentElement);
}
else
{
return;
}
}
function goDeeper(check, obj)
{ </div> <div> </div> <div align=left>//head1 gets the parent node of the unchecked node
var head = obj.parentElement.previousSibling; </div> <div> </div> <div align=left>if(head.tagName == "TABLE")
{
//checks for the input tag which consists of checkbox
var matchElement = head.getElementsByTagName("INPUT"); </div> <div> </div> <div align=left>//matchElement1[0] gives us the checkbox and it is unchecked
matchElement[0].checked = false;
}
else
{
head = obj.parentElement.previousSibling;
} </div> <div> </div> <div align=left>if(head.tagName == "TABLE")
{
goDeeper(check, obj.parentElement);
} </div> <div> </div> <div align=left>else
{
return;
}
}
function treeViewCheck()
{
// obj gives us the node on which check or uncheck operation has performed
var obj = window.event.srcElement; </div> <div> </div> <div align=left>var treeNodeFound = false;
</div> <div> </div> <div align=left>var checkedState;
</div> <div> </div> <div align=left>
//checking whether obj consists of checkbox to avoid exception </div> <div> </div> <div align=left>if (obj.tagName == "INPUT" && obj.type == "checkbox")
{
var treeNode = obj;
checkedState = treeNode.checked; </div> <div> </div> <div align=left>//work our way back to the parent <table> element </div> <div> </div> <div align=left>do
{
obj = obj.parentElement;
}
while (obj.tagName != "TABLE") </div> <div> </div> <div align=left>var parentTreeLevel = obj.rows[0].cells.length;
var parentTreeNode = obj.rows[0].cells[0]; </div> <div> </div> <div align=left>//get all the TreeNodes inside the TreeView (the parent <div>)
var tables = obj.parentElement.getElementsByTagName("TABLE"); </div> <div> </div> <div align=left>//checking for any node is checked or unchecked during operation
if(obj.tagName == "TABLE")
{
// if any node is unchecked then their parent node are unchecked </div> <div> </div> <div align=left>if (!treeNode.checked)
{
goDeeper(false, obj);
} //end if - unchecked
//total number of TreeNodes
var numTables = tables.length </div> <div> </div> <div align=left>if (numTables >= 1)
{
//cycle through all the TreeNodes
//until we find the TreeNode we checked </div> <div> </div> <div align=left>for (i=0; i < numTables; i++)
{
if (tables[i] == obj)
{
treeNodeFound = true;
i++;
if (i == numTables)
{
//if we're on the last TreeNode, we are done
break;
}
}
if (treeNodeFound == true)
{
var childTreeLevel = tables[i].rows[0].cells.length;
if (childTreeLevel > parentTreeLevel)
{
var cell = tables[i].rows[0].cells[childTreeLevel - 1];
//set the checkbox to match the checkedState </div> <div> </div> <div align=left>var inputs = cell.getElementsByTagName("INPUT");
inputs[0].checked = checkedState;
} </div> <div> </div> <div align=left>else
{
//if any of the preceding TreeNodes are not deeper stop
break;
}
} //end if </div> <div> </div> <div align=left>}//end for
} //end if - numTables >= 1 </div> <div> </div> <div align=left>// if all child nodes are checked then their parent node is checked
if (treeNode.checked)
{
goDeeperChecked(obj);
}//end if - checked </div> <div> </div> <div align=left>} //end if - tagName = TABLE </div> <div> </div> <div align=left>} //end if </div> <div> </div> <div align=left>} //end function </div> <div> </div> <div align=left> </div> <div align=left> </div>
<div align=left>Regards</div> <div align=left>Sachin Jain</div> <div align=left>"Great
People don't do different things but they do things differently"</div> <div> </div>
Thank you very much. I modified your code to match the changes (from a previous reply in this thread) needed to make it work in Firefox and it works a treat!
I do have a question though. The way my treeview is setup is similar to this
-Parent
-ChildNode
-ChildNode2
What needs to happen is when the user select ChildNode2, it automatically checks ChildNode and Parent too. Right now it only checks ChildNode. Any idea what's needed to make that work? Basically if any ChildNode2 or ChildNode checkbox is checked then it's
corresponding Parent should also be checked.
Thank you very much. I modified your code to match the changes (from a previous reply in this thread) needed to make it work in Firefox and it works a treat!
I do have a question though. The way my treeview is setup is similar to this
-Parent
-ChildNode
-ChildNode2
What needs to happen is when the user select ChildNode2, it automatically checks ChildNode and Parent too. Right now it only checks ChildNode. Any idea what's needed to make that work? Basically if any ChildNode2 or ChildNode checkbox is checked then it's
corresponding Parent should also be checked.
Thanks for the help!
Mike W.
Upping this very interesting thread!
Crazy u probably got the same problem as me, I got the following tree:
-Parent
-ChildNode1
-ChildNode11
-ChildNode2
-ChildNode21
-ChildNode22
If I check just ChildNode22, ChildNode2 and Parent should automatically be checked too, but it doesn't work. I think it is by design, because if I check ChildNode11, ChildNode21 and ChildNode22 or just ChildNode1 and ChildNode2 then Parent is automatically
checked. To a parent be automatically checked, ALL the child nodes must be checked too.
Thank you very much. I modified your code to match the changes (from a previous reply in this thread) needed to make it work in Firefox and it works a treat!
I do have a question though. The way my treeview is setup is similar to this
-Parent
-ChildNode
-ChildNode2
What needs to happen is when the user select ChildNode2, it automatically checks ChildNode and Parent too. Right now it only checks ChildNode. Any idea what's needed to make that work? Basically if any ChildNode2 or ChildNode checkbox is checked then it's
corresponding Parent should also be checked.
Thanks for the help!
Mike W.
Upping this very interesting thread!
Crazy u probably got the same problem as me, I got the following tree:
-Parent
-ChildNode1
-ChildNode11
-ChildNode2
-ChildNode21
-ChildNode22
If I check just ChildNode22, ChildNode2 and Parent should automatically be checked too, but it doesn't work. I think it is by design, because if I check ChildNode11, ChildNode21 and ChildNode22 or just ChildNode1 and ChildNode2 then Parent is automatically
checked. To a parent be automatically checked, ALL the child nodes must be checked too.
Don't know if it fits ur need but fitted mines:
function Davidovitz_HandleCheckbox(evento)
{
var element = evento.srcElement || evento.target;
if (element.tagName == "INPUT" && element.type == "checkbox")
{
var checkedState = element.checked;
while (element.tagName != "TABLE") // Get wrapping table
{
element = element.parentElement;
}
//Davidovitz_UnCheckParents(element); // Uncheck all parents
CheckParents(element);
element = element.nextSibling;
if (element == null) // If no childrens than exit
return;
var childTables = element.getElementsByTagName("TABLE");
for (var tableIndex = 0; tableIndex < childTables.length; tableIndex++)
{
CheckTable(childTables[tableIndex], checkedState);
}
}
}
// Uncheck the parents of the given table, Can remove the recurse (redundant)
function Davidovitz_Davidovitz_UnCheckParents(table)
{
if (table == null || table.rows[0].cells.length == 2) // This is the root
{
return;
}
if(table.parentElement.previousSibling=='[object]')
{
var parentTable = table.parentElement.previousSibling;
CheckTable(parentTable, false);
Davidovitz_UnCheckParents(parentTable);
}
}
// Check the parents of the given table, Can remove the recurse (redundant)
function Davidovitz_CheckParents(table)
{
// if (table == null || table.rows[0].cells.length == 2) // This is the root
// {
// return;
// }
if(table.parentElement.previousSibling=='[object]')
{
var parentTable = table.parentElement.previousSibling;
CheckTable(parentTable, true);
Davidovitz_CheckParents(parentTable);
}
}
// Handle the set of checkbox checked state
function Davidovitz_CheckTable(table, checked)
{
var checkboxIndex = table.rows[0].cells.length - 1;
var cell = table.rows[0].cells[checkboxIndex];
var checkboxes = cell.getElementsByTagName("INPUT");
if (checkboxes.length == 1)
{
checkboxes[0].checked = checked;
}
}
Sorry for the bad javascript coding but it's been 3 years I don't write a line of code in JS.
Thanks everybody (especially Davidovitz) for ur great work!!!
ASP.NET 2.0 Treeview Checkboxes - Expand/Collapse - Javascript
Mar 23, 2007 06:14 AM|shivaatgenmills@hotmail.com|LINK
Hello All,
I have a requirement like this,
I am using ASP.NET 2.0 TreeView with Checkboxes on all nodes. I want to have expand functionality written on checkbox click instead of expand/collapse(+/-) Image.
Thanks for all your efforts - saved me lots of time to understand where to start from. I am creating a treeview dynamically, i.e. programatically using "placeholder". The javascript doee n't seem to be working in such cases. Basically I believe the
child and tree levels are spit out a bit differently. Please do let me know if anyone has a working code with dynamically created trees - i.e. the entire tree creation code is within the code-behind file rather than aspx file.
Thanks for all your efforts - saved me lots of time to understand where to start from. I am creating a treeview dynamically, i.e. programatically using "placeholder". The javascript doee n't seem to be working in such cases. Basically I believe the
child and tree levels are spit out a bit differently. Please do let me know if anyone has a working code with dynamically created trees - i.e. the entire tree creation code is within the code-behind file rather than aspx file.
Thanks heaps.
Praveen
OK, all! To be more specific if you are using "nodestyle","nodeindent" etc... be aware that the javascript needs to be tweaked. Basically, everything depends on how .NET translates the treeview control to the underlying table, which is composed of rows
and columns. If you are going to change the formatting of the treeview, take care of the javascript to work with that resultant formatted tables(rows and columns).
Thank you very much. I modified your code to match the changes (from a previous reply in this thread) needed to make it work in Firefox and it works a treat!
I do have a question though. The way my treeview is setup is similar to this
-Parent
-ChildNode
-ChildNode2
What needs to happen is when the user select ChildNode2, it automatically checks ChildNode and Parent too. Right now it only checks ChildNode. Any idea what's needed to make that work? Basically if any ChildNode2 or ChildNode checkbox is checked then it's
corresponding Parent should also be checked.
Thanks for the help!
Mike W.
</div>
Upping this very interesting thread!
Crazy u probably got the same problem as me, I got the following tree:
-Parent
-ChildNode1
-ChildNode11
-ChildNode2
-ChildNode21
-ChildNode22
If I check just ChildNode22, ChildNode2 and Parent should automatically be checked too, but it doesn't work. I think it is by design, because if I check ChildNode11, ChildNode21 and ChildNode22 or just ChildNode1 and ChildNode2 then Parent is automatically
checked. To a parent be automatically checked, ALL the child nodes must be checked too.
Well, friends i too faced the above problems: check/uncheck works just for one level up and the script works only in IE. So, i decided to fix the problems but the script was too criptic to modify and finally ended up rewriting the whole solution :-)
I've tested my script in IE7 and Firefox 2.0 and it works great, do let me know in case you happen to find a bug.
Step2: Put the below script in the head tag of your .aspx page.
//************************** Treeview Parent-Child check behaviour ****************************//
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;
if(check) //checkbox checked
{
var isAllSiblingsChecked = AreAllSiblingsChecked(srcChild);
if(isAllSiblingsChecked)
checkUncheckSwitch = true;
else
return; //do not need to check parent if any(one or more) child not checked
}
else //checkbox unchecked
{
checkUncheckSwitch = false;
}
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 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;
}
///////////////////////////////////////////////////////////////////////////////////////
That's all there is to it.
enjoy!!!
parent childTreeview in ASP.NETAsp.Net 1.1asp.net 2.0 asp.netselectionTreeview
Home Is Where the Wind Blows
http://pushpontech.blogspot.com
I've been experimenting the scripts posted here and they all work very well.
The problem is I need some sort of modified version of check-uncheck in childs and parents...
Here is my situation: I need that when ONE of the childs is checked ALL its parents become checked as well. That's the only "special" thing I want. I DON'T NEED any other behaviour like to check all childs when a parent is selected.
I think that it should not be too difficult to achieve this, but I have very limited knowledge of javascript...If someone could point me out I would be very thankfull :-)
just one more question: is there any way to get the Value of the node (that was bound when creating the treeview's nodes with node.Value) in javascript?? I need to disable the possibility to check/uncheck some treenodes depending on a defined attribute (for
example, nodes that I "mark" as "mandatory" should not be possible to uncheck)...The checkbox associated with the node can not be disabled so I need to control this some other way...
just one more question: is there any way to get the Value of the node (that was bound when creating the treeview's nodes with node.Value) in javascript?? I need to disable the possibility to check/uncheck some treenodes depending on a defined attribute (for
example, nodes that I "mark" as "mandatory" should not be possible to uncheck)...The checkbox associated with the node can not be disabled so I need to control this some other way...
Here is the code which is used to check /uncheck all the nodes in tree node in one shot -- for example if we have a HTML check box , if we need to check all the node when this check box is checked and vice versa.
I am trying to put this code here hope it will help u ppl , if some one has got better solution for this plz suggest [:)]
the following code will could be used
this method will accept the bool parameter true /false
function UncheckAllNode(check)
{
var src=null;
var treeview = document.getElementById("_treeGroup"); //use your treeview id instead of Tree1
var treeLinks = treeview.getElementsByTagName("a");
for(i=0;i<treeLinks.length;i++)
{
src=treeLinks[i].firstChild;
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,check);
}
}
var childChkBoxes = parentTable.getElementsByTagName("input"); //check or uncheck the all main node
childChkBoxes[0].checked=check;
}
}
Best Regards,
Lalit N Dubey
Software Engineer
________________
WOW Vision Pte Ltd
(Wholly Owened Subsidiary of SM Summit Holdings Ltd)
45 Ubi Road 1 Summit Building #05-03
Singapore - 408696
Is it possible to expand the Parent nodes to show all child nodes when it is checked?
Basically what is happening, (using the original code on this forum for selected all child nodes) a user will check the parent, and all child nodes will be selected as well (Which is exactly what I want) but also, I want this parent to expand and show its
child nodes, so that the user can see what all was selected.
All of u thanks for the posts ..it helped me a lot in successfully completing my task
I wanted a tree view control where if Parent is checked or Unchecked the child nodes get checked and unchecked respectively also i wanted
if ANY one child is checked then parent should get checked and if ALL childs are unchecked then parent should get unchecked.
Following code does this
call this function "client_OnTreeNodeChecked()" on the Onclick event of treeview.
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");
if(obj.tagName == "TABLE")
{
if (treeNode.checked) //if any child is checked check parent
{
//head1 gets the parent node of the checked node
var head1 = obj.parentElement.previousSibling;
if(head1!=null)
{
if(head1.tagName == "TABLE")
{
//checks for the input tag which consists of checkbox
var matchElement1 = head1.getElementsByTagName("INPUT");
//matchElement1[0] gives us the checkbox and it is checked
if(matchElement1.length>0)
matchElement1[0].checked = true;
}
}
else {
head1 = obj.parentElement.previousSibling;
}
if(head1!=null)
{
if(head1.tagName == "TABLE")
{
//head2 gets the parent node of the checked node
var head2 = obj.parentElement.parentElement.previousSibling;
if(head2!=null)
{
if(head2.tagName == "TABLE")
{
//checks for the input tag which consists of checkbox
var matchElement2 = head2.getElementsByTagName("INPUT");
if(matchElement2.length>0)
matchElement2[0].checked = true;
}
}
}
}
else {
head2 = obj.parentElement.previousSibling;
}
if(head2!=null)
{
if(head2.tagName == "TABLE")
{
//head3 gets the parent node of the checked node
var head3 = obj.parentElement.parentElement.parentElement.previousSibling;
if(head3!=null)
{
if(head3.tagName == "TABLE")
{
//checks for the input tag which consists of checkbox
var matchElement3 = head3.getElementsByTagName("INPUT");
if(matchElement3.length>0)
matchElement3[0].checked = true;
}
}
}
}
else {
head3 = obj.parentElement.previousSibling;
}
if(head3!=null)
{
if(head3.tagName == "TABLE")
{
//head4 gets the parent node of the checked node
var head4 = obj.parentElement.parentElement.parentElement.parentElement.previousSibling;
if(head4 != null)
{
if(head4.tagName == "TABLE")
{
//checks for the input tag which consists of checkbox
var matchElement4 = head4.getElementsByTagName("INPUT");
if(matchElement4.length>0)
matchElement4[0].checked = true;
}
}
}
}
}//end if - checked
if (!treeNode.checked)//if all child are unchecked then uncheck parent
{
var chk1 = false;
var head1 = obj.parentElement.previousSibling;
var pTreeLevel1 = obj.rows[0].cells.length;
if(head1!=null)
{
if(head1.tagName == "TABLE")
{
var tbls = obj.parentElement.getElementsByTagName("TABLE");
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++)
{
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel1)
{
var chld = tbls[i].getElementsByTagName("INPUT");
if(chld.length>0)
{
if (chld[0].checked == true)
{
chk1 = true;
break;
}
}
}
}
var nd = head1.getElementsByTagName("INPUT");
if(nd.length>0){
nd[0].checked = chk1;}
}
}
else
{
head1 = obj.parentElement.previousSibling;
}
var chk2 = false;
if(head1!=null)
{
if(head1.tagName == "TABLE")
{
var head2 = obj.parentElement.parentElement.previousSibling;
if(head2!=null)
{
if(head2.tagName == "TABLE")
{
var tbls = head1.parentElement.getElementsByTagName("TABLE");
var pTreeLevel2 = head1.rows[0].cells.length;
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++)
{
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel2)
{
var chld = tbls[i].getElementsByTagName("INPUT");
if(chld.length>0)
{
if (chld[0].checked == true)
{
chk2 = true;
break;
}
}
}
}
var nd = head2.getElementsByTagName("INPUT");
if(nd.length>0){
nd[0].checked = (chk2 && chk1);}
}
}
}
}
else
{
head2 = obj.parentElement.previousSibling;
}
var chk3 = false;
if(head2!=null)
{
if(head2.tagName == "TABLE")
{
var head3 = obj.parentElement.parentElement.parentElement.previousSibling;
if(head3!=null)
{
if(head3.tagName == "TABLE")
{
var tbls = head2.parentElement.getElementsByTagName("TABLE");
var pTreeLevel3 = head2.rows[0].cells.length;
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++)
{
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel3)
{
var chld = tbls[i].getElementsByTagName("INPUT");
if(chld.length>0)
{
if (chld[0].checked == true)
{
chk3 = true;
break;
}
}
}
}
var nd = head3.getElementsByTagName("INPUT");
if(nd.length>0){
nd[0].checked = (chk3 && chk2 && chk1);}
}
}
}
}
else
{
head3 = obj.parentElement.previousSibling;
}
var chk4 = false;
if(head3!=null)
{
if(head3.tagName == "TABLE")
{
var head4 = obj.parentElement.parentElement.parentElement.parentElement.previousSibling;
if(head4!=null)
{
if(head4.tagName == "TABLE")
{
var tbls = head3.parentElement.getElementsByTagName("TABLE");
var pTreeLevel4 = head3.rows[0].cells.length;
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++)
{
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel4)
{
var chld = tbls[i].getElementsByTagName("INPUT");
if(chld.length>0)
{
if (chld[0].checked == true)
{
chk4 = true;
break;
}
}
}
}
var nd = head4.getElementsByTagName("INPUT");
if(nd.length>0){
nd[0].checked = (chk4 && chk3 && chk2 && chk1);}
}
}
}
}
}//end if - unchecked
}
var numTables = tables.length
if (numTables >= 1)
{
for (i=0; i < numTables; i++)
{
if (tables[i] == obj)
{
treeNodeFound = true;
i++;
if (i == numTables)
{
return;
}
}
if (treeNodeFound == true)
{
var childTreeLevel = tables[i].rows[0].cells.length;
if (childTreeLevel > parentTreeLevel)
{
var cell = tables[i].rows[0].cells[childTreeLevel - 1];
var inputs = cell.getElementsByTagName("INPUT");
inputs[0].checked = checkedState;
}
else
{
return;
}
}
}
}
}
}
HI Prashanth check this. it works fine with ASp.NET 1.1
function CheckSelect()
{ //initialize tree
var tree = GetTreeHandle();
//get checked tree node
var treenode = tree.getTreeNode(event.treeNodeIndex);
//get index of the parent node whose child node is checked.
var index=event.treeNodeIndex.charAt(0);
//get "type" of the node .Type returns the name of the nodegroup given while loading the
//control. In this exmple it is used as ("groups" as parent nodes) and ("contacts" as child nodes)
var type=treenode.getAttribute('type');
//check whether it is Checked or Unchecked.It returns true or false.
var sel=treenode.getAttribute('checked');
var i;
if (type=="groups")
{ //As the treenode checked is a parent, get the children of that node
var objarr= treenode.getChildren();
if (sel==true)
{//if the parent node is checked then uncheck all child nodes
for (i=0;i<objarr.length;i++)
{
objarr[i].setAttribute("checked",true);
}
}
else
{//if the parent node is unchecked then uncheck all child nodes
for (i=0;i<objarr.length;i++)
{
objarr[i].setAttribute("checked",false);
}
}
}
//if type is not parent node but its a child node then.
else
{ //get parent node of th child node which is Checked
var parentnode=tree.getTreeNode(index);
//get the children of the parent node
var objarr= parentnode.getChildren();
var truecheck,falsecheck;
truecheck=1;
falsecheck=1
; //check All the child nodes are checked or unchecked
for (i=0;i<objarr.length;i++)
{
if (objarr[i].getAttribute("checked")==true)
{
falsecheck=0;
}
else
{
truecheck=0;
}
}
if (truecheck==1)
{//all child nodes are checked so check the parent too...
parentnode.setAttribute("checked",true);
}////
else
{//none of the child nodes or any of th child node is unchecked
//so uncheck the parent node
parentnode.setAttribute("checked",false);
}
}
}//end function
function GetTreeHandle()
{
var tree;
var treeName = 'treeview1';//"treeview1" is the id f the TREEVIEW CONTROL USED
// Get a handle to the TreeView.
tree = document.getElementById( treeName );
if ( null == tree || undefined == tree )
return null;
return tree;
}
Treeview in ASP.NETAsp.Net 1.1Treeviewtreeview in ASP.NET SelectedValue
can u tell me the way to disable the other nodes if i select any two nodes in tree view.and enable if i selected one or nothing.there is no select all option in my tree view..
I've got a question, not specifically a check/uncheck, but enable/disable. The theory of it remains the same!
I'm using the shorter version of the code posted, but have a couple of problems that perhaps somebody smarter than me can come up with. I have a treeView, with unlimited depth.
Here's what I need to do: If a user clicks a node, everything that is NOT at that same level needs to be disabled. So if a user clicks Node 0, everything below that is disabled... if the user clicks node 2, then node 1 and node 3 remain enabled, and everything
else is disabled. I'm having trouble! Help if ya can!
var parentDiv = GetParentByTagName("div", srcChild);var
parentNodeTable = parentDiv.previousSibling;
if(parentNodeTable)
{
var checkUncheckSwitch;
if(!check)
//checkbox unchecked
{
var isAllSiblingsUnChecked = AreAllSiblingsUnChecked(srcChild);
if(isAllSiblingsUnChecked)
checkUncheckSwitch = false;
else
return; //do not need to uncheck parent if any(one or more) child checked
}
else //checkbox checked
{
checkUncheckSwitch = true;
}
var inpElemsInParentTable = parentNodeTable.getElementsByTagName("input");if(inpElemsInParentTable.length
> 0)
thanks very good piece of code, this yours treeView works fine, but I have one question:
Where I could change a little bit your code, I need to have that if child node is selected then automatically parient node is selected. Now it is like if all childes nodes are selected then parient node is selected automatically.
Wow, that looks like the (almost) ultimate answer. Apart from one thing i've noticed, the parent will not populate the child nodes unless the parent has been maximized (at least once).
For example, this is what the tree looks when ExpandDepth = 1:
+ [ ] NodeA
+ [ ] Node1
+ [ ] Node2
+ [ ] Node3
If I tick Node1, and then expand it afterwards, I notice that the child nodes have
not been ticked, ie:
But, if I expand Node1 first and then tick on it, it'll tick all the child nodes as expected. Or even, if I expand Node1 first, and then minimize it again, then clicking on Node1, it will still tick all the child nodes:
I've noticed that this problem occurs for every parent node. But if I was to fully expand my tree too its deepest leaf at first, the parent checkboxes will then tick the child tickboxes too (this is also true if i fully expand and then fully minimize, which
is why quoted earlier that it needs maximizing "at least once".
My tree is only 3 levels deep, so I tried some hacks such as setting
TreeView1.ExpandDepth = 3 in the Page_Load, and then immediatly on the next line set it to
TreeView1.ExpandDepth = 1 (or 0, but i prefer 1). The page load does set the ExpandDepth property, but it seems like its happening too fast, for my hack to work, it would need to ExpandDepth = 3 on page_load, and then perhaps on another call
(i dont know if there is a call that follows the Page_Load by any chace), set ExpandDepth = 1. - So I need some assistance trying to get the hack to work, or some assistance modifying the javascript.
Any ideas? (is it me, or has nonoe spotted this bug)?
My question is i need the functionality of the above code which i am getting ,added to it i want to select "Only" the parent nodes by using some kind of key press(ex:Ctrl+) function or any other function for multiple selection of that particular selected
parent nodes.(no need of selection of child nodes in this case.
function CheckLevelZeroNodes(treeId) //function to be called on some event
{
var tree = document.getElementById(treeId); if(tree)
{
var firstNode = GetFirstNode(tree);
CheckLevelZeroNodesRecursive(firstNode);
}
}
function GetFirstNode(tree)
{
var firstNode = tree.firstChild; while(firstNode.nodeType != 1)
firstNode = firstNode.nextSibling;
return firstNode;
}
function CheckLevelZeroNodesRecursive(node)
{
var chkBox = node.getElementsByTagName("input")[0]; if(chkBox)
chkBox.checked = true;
i used the above given code.when i click on the anchor tag the root node is being selected.I should be able to select specified parent nodes that to when clicked i don't need child nodes to be selected.
<div class=MsoNormal>Dear Sir,</div> <div class=MsoNormal> Thanks a lot for
your valuable time for me.</div> <div class=MsoNormal></div> <div class=MsoNormal></div>
<div class=MsoNormal></div> <form id=form1 name=form1></form> <form id=form1 name=form1> <div class=MsoNormal></div>
<div class=MsoNormal></div> <div class=MsoNormal> WIth the help of
your code:</div> <div class=MsoNormal> 1. i am able to select all the child nodes when a parent node is checked.</div> <div class=MsoNormal>
If i select Govind all the child nodes are getting selected.</div> <div class=MsoNormal> 2 . i am able to select child nodes individually,</div>
<div class=MsoNormal> i can select lingaraj or satyanarayana without checking vani.</div> <div class=MsoNormal></div>
<div class=MsoNormal></div> <div class=MsoNormal> I addition to the above ones i also need to select only parent check box .For example when we press ctrl button and Select vani,vijay,balaji,kulkarni check
boxes i should be able to select that particular nodes "only" leaving the child nodes deselected.
</div> <div class=MsoNormal></div> <div class=MsoNormal></div> <div class=MsoNormal></div>
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.
Remember to click “Mark as Answer” on the post, if it helps you
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;
}
Remember to click “Mark as Answer” on the post, if it helps you
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;
}
Remember to click “Mark as Answer” on the post, if it helps you
<div id="result_box" dir="ltr">But, as I was with some hurry, I resolve by anotherway.</div><div id="result_box" dir="ltr">Here you can see my post:
http://forums.asp.net/t/1241344.aspx
</div><div id="result_box" dir="ltr"> </div><div id="result_box" dir="ltr">Anyway, I apreciate your concern. Thanks again. </div>
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.
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.NETTreeviewtreeview in ASP.NET SelectedValuetreeview detailsview
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
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
Member
182 Points
2336 Posts
Microsoft
ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Mar 27, 2006 06:38 AM|ranganh|LINK
Posted the updated code at http://geekswithblogs.net/ranganh/archive/2009/01/21/updated-asp.net-treeview-checkboxes-ndash-check-all-ndash-javascript.aspx
Didnt want to copy paste it into this post and make it too big. Thanks to all who have provided various suggestions. Infact, the best code was written by pushp_aspnet and I took the liberty to update the original code. When I last tested, I found it work with IE 8 Beta 2, Firefox 3.0.5 and Safari 3.2.7 browsers.
Apologies for editing this post but some of the information is outdated and instead of again opening a thread, I have redirected it to a single place where I have put up the updated code.
Hope this helps.
Harish
http://geekswithblogs.net/ranganh
None
0 Points
16 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Mar 29, 2006 06:07 PM|Kiks|LINK
Hey...thanks for that post. This function is working fine, if I select a parent node it selects all child nodes.
Now, if I deselect one of the child nodes then the parent node, for that child node, is not deselected.
Can you/anybody post that additional functionality?
Thanks, Kiks
Member
182 Points
2336 Posts
Microsoft
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Mar 30, 2006 02:08 AM|ranganh|LINK
Hi,
The following script would help you in achieving this.
function treeViewCheck(){
// obj gives us the node on which check or uncheck operation has performed var obj = window.event.srcElement; var treeNodeFound = false; var checkedState; //checking whether obj consists of checkbox or not if (obj.tagName == "INPUT" && obj.type == "checkbox"){
//easier to read var treeNode = obj; //record the checked state of the TreeNodecheckedState = treeNode.checked;
//work our way back to the parent <table> element do{
obj = obj.parentElement;
}
while (obj.tagName != "TABLE") //keep track of the padding level for comparison with any children var parentTreeLevel = obj.rows[0].cells.length; var parentTreeNode = obj.rows[0].cells[0]; //get all the TreeNodes inside the TreeView (the parent <div>) var tables = obj.parentElement.getElementsByTagName("TABLE"); //checking for any node is checked or unchecked during operation if((treeNode.checked) || (!treeNode.checked)){
// if any node is unchecked then their parent node are unchecked if(!treeNode.checked){
if(obj.tagName == "TABLE"){
//head1 gets the parent node of the unchecked node var head1 = obj.parentElement.previousSibling; if(head1.tagName == "TABLE"){
//checks for the input tag which consists of checkbox var matchElement1 = head1.getElementsByTagName("INPUT"); //matchElement1[0] gives us the checkbox and it is uncheckedmatchElement1[0].checked =
false;}
else{
head1 = obj.parentElement.previousSibling;
}
if(head1.tagName == "TABLE"){
//head2 gets the parent node of the unchecked node var head2 = obj.parentElement.parentElement.previousSibling; if(head2.tagName == "TABLE"){
//checks for the input tag which consists of checkbox var matchElement2 = head2.getElementsByTagName("INPUT");matchElement2[0].checked =
false;}
}
else{
head2 = obj.parentElement.previousSibling;
}
if(head2.tagName == "TABLE"){
//head3 gets the parent node of the unchecked node var head3 = obj.parentElement.parentElement.parentElement.previousSibling; if(head3.tagName == "TABLE"){
//checks for the input tag which consists of checkbox var matchElement3 = head3.getElementsByTagName("INPUT");matchElement3[0].checked =
false;}
}
else{
head3 = obj.parentElement.previousSibling;
}
if(head3.tagName == "TABLE"){
//head4 gets the parent node of the unchecked node var head4 = obj.parentElement.parentElement.parentElement.parentElement.previousSibling; if(head4 != null){
if(head4.tagName == "TABLE"){
//checks for the input tag which consists of checkbox var matchElement4 = head4.getElementsByTagName("INPUT");matchElement4[0].checked =
false;}
}
}
}
}
}
//total number of TreeNodes var numTables = tables.length if (numTables >= 1){
//cycle through all the TreeNodes //until we find the TreeNode we checked for (i=0; i < numTables; i++){
if (tables[i] == obj){
treeNodeFound =
true;i++;
if (i == numTables){
//if we're on the last //TreeNode then stop return;}
}
if (treeNodeFound == true){
var childTreeLevel = tables[i].rows[0].cells.length; //if the current node is under the parent //the level will be deeper (greater) if (childTreeLevel > parentTreeLevel){
//jump to the last cell... it contains the checkbox var cell = tables[i].rows[0].cells[childTreeLevel - 1]; //set the checkbox to match the checkedState //of the TreeNode that was clicked var inputs = cell.getElementsByTagName("INPUT");inputs[0].checked = checkedState;
}
else{
//if any of the preceding TreeNodes are not deeper stop return;}
//end if}
//end if else{
// var childTreeLevel = tables[0].rows[0].cells.length;
}
}
//end for}
//end if}
//end if}
//end functionThis unchecking works upto 5 levels currently, however, you can improvise it for more levels or if possible, make it n-level.
However, the check all, un check all is already level independent.
Write back if you need further help.
Thanks.
Harish
http://geekswithblogs.net/ranganh
None
0 Points
16 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Mar 30, 2006 02:00 PM|Kiks|LINK
Hey...Thanks so so much for the reply...
I need little more help with it...which I've tried for hours and couldn't get it...I think adding this would make it complete as I expect to have the check boxes behavior....
- currently, if I select a parent, all its childs are selected
- if I deselect one of these childs the parent is deselected (this works fine with your new post)
- now again, if I select the same child it doesn't select the parent, even though all its childs are selected. you see what I'm saying...if you can help me with this I greatly appreciate it.
Thanks again, Kiks
None
0 Points
16 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Mar 30, 2006 06:05 PM|Kiks|LINK
Hey Harish...I think I almost nailed it with a small bug to fix...it's been already a long day for me and I can't fix it. I'm wondering if you have got any sleek way of doing it. See below my lines of code is in between two **** lines. Please post your solution as well, if you have it.
I'm wondering if you have any ideas to make it generic instead of 4 levels as my treeview hierachy is not fixed level.
Thanks for you time.
function treeViewCheck() {
// obj gives us the node on which check or uncheck operation has performed
var obj = window.event.srcElement;
var treeNodeFound = false;
var checkedState;
//checking whether obj consists of checkbox or not
if (obj.tagName == "INPUT" && obj.type == "checkbox") {
//easier to read
var treeNode = obj;
//record the checked state of the TreeNode
checkedState = treeNode.checked;
//work our way back to the parent <table> element
do {
obj = obj.parentElement;
} while (obj.tagName != "TABLE")
//keep track of the padding level for comparison with any children
var parentTreeLevel = obj.rows[0].cells.length;
var parentTreeNode = obj.rows[0].cells[0];
//get all the TreeNodes inside the TreeView (the parent <div>)
var tables = obj.parentElement.getElementsByTagName("TABLE");
//checking for any node is checked or unchecked during operation
if(obj.tagName == "TABLE") {
**********************************************************************
// if all child nodes are checked then their parent node is checked
if (treeNode.checked) {
var chk1 = true;
var head1 = obj.parentElement.previousSibling;
var pTreeLevel1 = obj.rows[0].cells.length;
if(head1.tagName == "TABLE") {
var tbls = obj.parentElement.getElementsByTagName("TABLE");
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++) {
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel1) {
var chld = tbls[i].getElementsByTagName("INPUT");
if (chld[0].checked == false) {
chk1 = false;
break;
}
}
}
var nd = head1.getElementsByTagName("INPUT");
nd[0].checked = chk1;
}
else {
head1 = obj.parentElement.previousSibling;
}
var chk2 = true;
if(head1.tagName == "TABLE") {
var head2 = obj.parentElement.parentElement.previousSibling;
if(head2.tagName == "TABLE") {
//var tbls = obj.parentElement.getElementsByTagName("TABLE");
var tbls = head1.parentElement.getElementsByTagName("TABLE");
var pTreeLevel2 = head1.rows[0].cells.length;
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++) {
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel2) {
var chld = tbls[i].getElementsByTagName("INPUT");
if (chld[0].checked == false) {
chk2 = false;
break;
}
}
}
var nd = head2.getElementsByTagName("INPUT");
nd[0].checked = (chk2 && chk1);
}
}
else {
head2 = obj.parentElement.previousSibling;
}
var chk3 = true;
if(head2.tagName == "TABLE") {
var head3 = obj.parentElement.parentElement.parentElement.previousSibling;
if(head3.tagName == "TABLE") {
//var tbls = obj.parentElement.getElementsByTagName("TABLE");
var tbls = head2.parentElement.getElementsByTagName("TABLE");
var pTreeLevel3 = head2.rows[0].cells.length;
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++) {
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel3) {
var chld = tbls[i].getElementsByTagName("INPUT");
if (chld[0].checked == false) {
chk3 = false;
break;
}
}
}
var nd = head3.getElementsByTagName("INPUT");
nd[0].checked = (chk3 && chk2 && chk1);
}
}
else {
head3 = obj.parentElement.previousSibling;
}
var chk4 = true;
if(head3.tagName == "TABLE") {
var head4 = obj.parentElement.parentElement.parentElement.parentElement.previousSibling;
if(head4.tagName == "TABLE") {
//var tbls = obj.parentElement.getElementsByTagName("TABLE");
var tbls = head3.parentElement.getElementsByTagName("TABLE");
var pTreeLevel4 = head3.rows[0].cells.length;
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++) {
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel4) {
var chld = tbls[i].getElementsByTagName("INPUT");
if (chld[0].checked == false) {
chk4 = false;
break;
}
}
}
var nd = head4.getElementsByTagName("INPUT");
nd[0].checked = (chk4 && chk3 && chk2 && chk1);
}
}
}//end if - checked
**************************************************************************************
// if any node is unchecked then their parent node are unchecked
if (!treeNode.checked) {
//head1 gets the parent node of the unchecked node
var head1 = obj.parentElement.previousSibling;
if(head1.tagName == "TABLE") {
//checks for the input tag which consists of checkbox
var matchElement1 = head1.getElementsByTagName("INPUT");
//matchElement1[0] gives us the checkbox and it is unchecked
matchElement1[0].checked = false;
}
else {
head1 = obj.parentElement.previousSibling;
}
if(head1.tagName == "TABLE") {
//head2 gets the parent node of the unchecked node
var head2 = obj.parentElement.parentElement.previousSibling;
if(head2.tagName == "TABLE") {
//checks for the input tag which consists of checkbox
var matchElement2 = head2.getElementsByTagName("INPUT");
matchElement2[0].checked = false;
}
}
else {
head2 = obj.parentElement.previousSibling;
}
if(head2.tagName == "TABLE") {
//head3 gets the parent node of the unchecked node
var head3 = obj.parentElement.parentElement.parentElement.previousSibling;
if(head3.tagName == "TABLE") {
//checks for the input tag which consists of checkbox
var matchElement3 = head3.getElementsByTagName("INPUT");
matchElement3[0].checked = false;
}
}
else {
head3 = obj.parentElement.previousSibling;
}
if(head3.tagName == "TABLE") {
//head4 gets the parent node of the unchecked node
var head4 = obj.parentElement.parentElement.parentElement.parentElement.previousSibling;
if(head4 != null) {
if(head4.tagName == "TABLE") {
//checks for the input tag which consists of checkbox
var matchElement4 = head4.getElementsByTagName("INPUT");
matchElement4[0].checked = false;
}
}
}
} //end if - unchecked
} //end if - tagName = TABLE
//total number of TreeNodes
var numTables = tables.length
if (numTables >= 1) {
//cycle through all the TreeNodes
//until we find the TreeNode we checked
for (i=0; i < numTables; i++) {
if (tables[i] == obj) {
treeNodeFound = true;
i++;
if (i == numTables) {
//if we're on the last
//TreeNode then stop
return;
}
}
if (treeNodeFound == true) {
var childTreeLevel = tables[i].rows[0].cells.length;
//if the current node is under the parent
//the level will be deeper (greater)
if (childTreeLevel > parentTreeLevel) {
//jump to the last cell... it contains the checkbox
var cell = tables[i].rows[0].cells[childTreeLevel - 1];
//set the checkbox to match the checkedState
//of the TreeNode that was clicked
var inputs = cell.getElementsByTagName("INPUT");
inputs[0].checked = checkedState;
}
else {
//if any of the preceding TreeNodes are not deeper stop
return;
}
} //end if
}//end for
} //end if
} //end if
} //end function
Member
182 Points
2336 Posts
Microsoft
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Mar 31, 2006 10:48 AM|ranganh|LINK
Hi,
Thanks for your interest.
I havent had a time to look into this and would post the code once I arrive at the same.
However, I think its not a major requirement since for selecting all, you already have a Select All option.
It is only logical to implement it and I think Check All, Uncheck All, Uncheck Parent when child node checked, is far more enough a rich experience for the users.
Anyways, if you happen to figure out, please post it over here.
Thanks.
Harish
http://geekswithblogs.net/ranganh
None
0 Points
16 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Mar 31, 2006 06:22 PM|Kiks|LINK
All right...here we go...I think, I DID IT with the exception that some functionality is limited to a hierarchy level...however, you can add more levels as necessary...
Please post back if anybody finds a generic solution...also post any bugs in this function (I've done enough testing though...)
Thanks to Harish for the original post and following replies...
Cheers! Kiks
function
treeViewCheck() {// obj gives us the node on which check or uncheck operation has performed
var obj = window.event.srcElement;
var treeNodeFound = false;
var checkedState;
//checking whether obj consists of checkbox or not
if (obj.tagName == "INPUT" && obj.type == "checkbox") {
//easier to read
var treeNode = obj;
//record the checked state of the TreeNode
checkedState = treeNode.checked;
//work our way back to the parent <table> element
do {
obj = obj.parentElement;
} while (obj.tagName != "TABLE")
//keep track of the padding level for comparison with any children
var parentTreeLevel = obj.rows[0].cells.length;
var parentTreeNode = obj.rows[0].cells[0];
//get all the TreeNodes inside the TreeView (the parent <div>)
var tables = obj.parentElement.getElementsByTagName("TABLE");
//checking for any node is checked or unchecked during operation
if(obj.tagName == "TABLE") {
// if any node is unchecked then their parent node are unchecked
if (!treeNode.checked) {
//head1 gets the parent node of the unchecked node
var head1 = obj.parentElement.previousSibling;
if(head1.tagName == "TABLE") {
//checks for the input tag which consists of checkbox
var matchElement1 = head1.getElementsByTagName("INPUT");
//matchElement1[0] gives us the checkbox and it is unchecked
matchElement1[0].checked = false;
}
else {
head1 = obj.parentElement.previousSibling;
}
if(head1.tagName == "TABLE") {
//head2 gets the parent node of the unchecked node
var head2 = obj.parentElement.parentElement.previousSibling;
if(head2.tagName == "TABLE") {
//checks for the input tag which consists of checkbox
var matchElement2 = head2.getElementsByTagName("INPUT");
matchElement2[0].checked = false;
}
}
else {
head2 = obj.parentElement.previousSibling;
}
if(head2.tagName == "TABLE") {
//head3 gets the parent node of the unchecked node
var head3 = obj.parentElement.parentElement.parentElement.previousSibling;
if(head3.tagName == "TABLE") {
//checks for the input tag which consists of checkbox
var matchElement3 = head3.getElementsByTagName("INPUT");
matchElement3[0].checked = false;
}
}
else {
head3 = obj.parentElement.previousSibling;
}
if(head3.tagName == "TABLE") {
//head4 gets the parent node of the unchecked node
var head4 = obj.parentElement.parentElement.parentElement.parentElement.previousSibling;
if(head4 != null) {
if(head4.tagName == "TABLE") {
//checks for the input tag which consists of checkbox
var matchElement4 = head4.getElementsByTagName("INPUT");
matchElement4[0].checked = false;
}
}
}
} //end if - unchecked
//total number of TreeNodes
var numTables = tables.length
if (numTables >= 1) {
//cycle through all the TreeNodes
//until we find the TreeNode we checked
for (i=0; i < numTables; i++) {
if (tables[i] == obj) {
treeNodeFound = true;
i++;
if (i == numTables) {
//if we're on the last
//TreeNode then stop
//return;
break;
}
}
if (treeNodeFound == true) {
var childTreeLevel = tables[i].rows[0].cells.length;
//if the current node is under the parent
//the level will be deeper (greater)
if (childTreeLevel > parentTreeLevel) {
//jump to the last cell... it contains the checkbox
var cell = tables[i].rows[0].cells[childTreeLevel - 1];
//set the checkbox to match the checkedState
//of the TreeNode that was clicked
var inputs = cell.getElementsByTagName("INPUT");
inputs[0].checked = checkedState;
}
else {
//if any of the preceding TreeNodes are not deeper stop
//return;
break;
}
} //end if
}//end for
} //end if - numTables >= 1
// if all child nodes are checked then their parent node is checked
if (treeNode.checked) {
var chk1 = true;
var head1 = obj.parentElement.previousSibling;
var pTreeLevel1 = obj.rows[0].cells.length;
if(head1.tagName == "TABLE") {
var tbls = obj.parentElement.getElementsByTagName("TABLE");
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++) {
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel1) {
var chld = tbls[i].getElementsByTagName("INPUT");
if (chld[0].checked == false) {
chk1 = false;
break;
}
}
}
var nd = head1.getElementsByTagName("INPUT");
nd[0].checked = chk1;
}
else {
head1 = obj.parentElement.previousSibling;
}
var chk2 = true;
if(head1.tagName == "TABLE") {
var head2 = obj.parentElement.parentElement.previousSibling;
if(head2.tagName == "TABLE") {
var tbls = head1.parentElement.getElementsByTagName("TABLE");
var pTreeLevel2 = head1.rows[0].cells.length;
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++) {
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel2) {
var chld = tbls[i].getElementsByTagName("INPUT");
if (chld[0].checked == false) {
chk2 = false;
break;
}
}
}
var nd = head2.getElementsByTagName("INPUT");
nd[0].checked = (chk2 && chk1);
}
}
else {
head2 = obj.parentElement.previousSibling;
}
var chk3 = true;
if(head2.tagName == "TABLE") {
var head3 = obj.parentElement.parentElement.parentElement.previousSibling;
if(head3.tagName == "TABLE") {
var tbls = head2.parentElement.getElementsByTagName("TABLE");
var pTreeLevel3 = head2.rows[0].cells.length;
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++) {
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel3) {
var chld = tbls[i].getElementsByTagName("INPUT");
if (chld[0].checked == false) {
chk3 = false;
break;
}
}
}
var nd = head3.getElementsByTagName("INPUT");
nd[0].checked = (chk3 && chk2 && chk1);
}
}
else {
head3 = obj.parentElement.previousSibling;
}
var chk4 = true;
if(head3.tagName == "TABLE") {
var head4 = obj.parentElement.parentElement.parentElement.parentElement.previousSibling;
if(head4.tagName == "TABLE") {
var tbls = head3.parentElement.getElementsByTagName("TABLE");
var pTreeLevel4 = head3.rows[0].cells.length;
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++) {
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel4) {
var chld = tbls[i].getElementsByTagName("INPUT");
if (chld[0].checked == false) {
chk4 = false;
break;
}
}
}
var nd = head4.getElementsByTagName("INPUT");
nd[0].checked = (chk4 && chk3 && chk2 && chk1);
}
}
}//end if - checked
} //end if - tagName = TABLE
} //end if
} //end function
None
0 Points
10 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Apr 18, 2006 05:09 AM|Ninja Programmer|LINK
Thats works great cheers for the code. Or thou i have one little question left to all you coders out there
is it possible to have it so that when you delect a child of a parent thats already selected that as well as deselecting the parent it changes the check box background to a greyish colour ??
None
0 Points
1 Post
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Apr 18, 2006 05:36 AM|gareths|LINK
It seems that the OnClick event isn't firing the client_OnTreeNodeChecked() script.
Anyone got any ideas why \ a work around for this?
Member
20 Points
10 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Apr 25, 2006 04:17 AM|rcerff|LINK
Hello,
I had the same problem. After some investigation I found the solution in replacing some only IE JavaScript commands with commands both browsers (and maybe more) understand.
1. I replaced the onclick handler with a version which has event as a parameter, i.e. onclick=="client_OnTreeNodeChecked(event);"
2. In the handle function replace "var obj = window.event.srcElement;" with "var obj = event.srcElement || event.target ;", because only IE supports srcElement property. This sentence works for IE and Firefox.
3. replace parentElement by parentNode. parentElement is IE special, parentNode is supported by both.
Hope that helps.
Regards
Rolf
None
0 Points
2 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Apr 26, 2006 03:37 PM|cj2210|LINK
the code is awesome and working great, but i keep getting javascript errors when checking or unchecking different levels saying "0 is null "
if i uncheck level 2 i will get the js error on the line; (matchElement2[0].checked = false; )
for example: (marked where error occurs)
if(head1.tagName == "TABLE"){
//head2 gets the parent node of the unchecked node var head2 = obj.parentElement.parentElement.previousSibling; if(head2.tagName == "TABLE"){
//checks for the input tag which consists of checkbox var matchElement2 = head2.getElementsByTagName("INPUT");matchElement2[0].checked =
false; //ERROR OCCURS HERE}
}
any clues???
thanks
None
0 Points
16 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Apr 26, 2006 06:19 PM|Kiks|LINK
This routine should work fine on IE and I haven't tested on any other browsers. Try using the tips that others had posted, for multi browser compatibility.
In you case it looks like getElementsByTagName is returning nothing...
Member
182 Points
2336 Posts
Microsoft
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Apr 28, 2006 05:10 AM|ranganh|LINK
Hi,
I have updated the TreeView Javascript original post (first post in this thread) with a working script which will take care of all the requirements mentioned in this post.
I have tested it and it works fine in IE, Safari, FireFox and even IE 7.0 Beta.
It is level independant, takes care of checking / unchecking for parent / child node checks / unchecks.
If you still face issues, please feel free to post your query.
I would like to thank all of you for the various inputs / suggestions given in this thread and a special thanks to Jake from GeekswithBlogs.com who took the pain to make it work n-level, and posting it in my Blog Post. (http://geekswithblogs.net/ranganh/archive/2006/03/25/73300.aspx)
Thanks.
Harish
http://geekswithblogs.net/ranganh
Member
10 Points
11 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
May 05, 2006 12:38 PM|Ran Davidovitz|LINK
Hi,
I have have created a JavaScript solution similar to the previous coded but in a much more organized way - Tell me what do you think.
Currently the code was only tested on IE - I guess that with more 30 minutes the code will work on all browsers (I will post it very soon)
Tell me what do you think?
* I was not able to attach it - mail me and I will send it to you :)
// Handle tree view click function Davidovitz_HandleCheckbox() { var element = event.srcElement; if (element.tagName == "INPUT" && element.type == "checkbox") { var checkedState = element.checked; while (element.tagName != "TABLE") // Get wrapping table { element = element.parentElement; } Davidovitz_UnCheckParents(element); // Uncheck all parents element = element.nextSibling; if (element == null) // If no childrens than exit return; var childTables = element.getElementsByTagName("TABLE"); for (var tableIndex = 0; tableIndex < childTables.length; tableIndex++) { Davidovitz_CheckTable(childTables[tableIndex], checkedState); } } } // Uncheck the parents of the given table, Can remove the recurse (redundant) function Davidovitz_UnCheckParents(table) { if (table == null || table.rows[0].cells.length == 2) // This is the root { return; } var parentTable = table.parentElement.previousSibling; Davidovitz_CheckTable(parentTable, false); Davidovitz_UnCheckParents(parentTable); } // Handle the set of checkbox checked state function Davidovitz_CheckTable(table, checked) { var checkboxIndex = table.rows[0].cells.length - 1; var cell = table.rows[0].cells[checkboxIndex]; var checkboxes = cell.getElementsByTagName("INPUT"); if (checkboxes.length == 1) { checkboxes[0].checked = checked; } }http://davidovitz.blogspot.com
Contributor
2345 Points
610 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
May 06, 2006 09:26 AM|akjoshi|LINK
Hii all,
function client_OnTreeNodeChecked(event)
{
var TreeNode = event.srcElement || event.target ;
if (TreeNode.tagName == "INPUT" && TreeNode.type == "checkbox")
{
if(TreeNode.checked)
{
alert(TreeNode.title)
}
alert(TreeNode.value)
}
}
I am using the above code to get selected nodes at client side, and it is working fine but the problem is that I want to get Value(TreeNode.Value) of the current node instead of text(TreeNode.title gives TreeNode.Text), TreeNode.value is always returning ‘on’. Please tell me how I can retrieve Value of the node...
Cheerio
Abhishek
Member
10 Points
11 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
May 07, 2006 02:52 PM|Ran Davidovitz|LINK
It's important for you to understand that because you are working with a tree you must know the path of the node (not only the value)
When you look at the client side you can see that each note has an anchor element with href that contain something like this: href="javascript:__doPostBack('TreeView1','smyvalue1\\myvalue2')" (Microsoft didn't do the extra mile and wrap it with client side
So if you want to get the value from the client side all you have to do is to parse the string and extract the bold part that represent the nodes' values of the path.
http://davidovitz.blogspot.com
Contributor
2345 Points
610 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
May 08, 2006 03:38 AM|akjoshi|LINK
Hii Ran,
I got ur point but it may be silly to ask but I cant figure out how to get this href/ anchor tag through javascript at client side so that i can parse it. [:(]
Is'nt there any other way I can get the value of the node as I can get its text through title property...[Idea]
or treeview doesent keep nodes value at clientside...
Cheerio
Abhishek
Member
10 Points
11 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
May 10, 2006 12:38 AM|Ran Davidovitz|LINK
To get the anchor element you simply have to walk up the DOM to the row that was clicked and then get elements by tag ("A") - The first will be your needed anchor.
You can also look at the resource code (javascript) of the treeview using reflector and see that they do the same.
Hope this helps
http://davidovitz.blogspot.com
None
0 Points
2 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
May 10, 2006 01:00 AM|kvraju|LINK
To get the anchor element you simply have to walk up the DOM to the row that was clicked and then get elements by tag ("A") - The first will be your needed anchor.
You can also look at the resource code (javascript) of the treeview using reflector and see that they do the same.
Hope this helps
[\quote]
None
0 Points
1 Post
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Jul 06, 2006 12:10 PM|Hockey_Scott|LINK
I don't know if you found a solution to your issue in bold, but here is a fix for your issue. The original code would check the parent if you select a child node and all the children are checked, but would not check its parent if all of the child nodes were selected.
I did not re-post all the functions. Just replace goDeeperChecked with this version below.
function goDeeperChecked(obj)
{
var chk1 = true;
//Get the mom.
var head1 = obj.parentElement.previousSibling;
//no Table, cant do my work.
if (head1.tagName != "TABLE")
{return ;}
//This is how may rows are at this level.
var pTreeLevel1
if (obj.rows == null || obj.rows == "undefined")
{
pTreeLevel1 = head1.rows[0].cells.length;
}
else
{
pTreeLevel1 = obj.rows[0].cells.length;
}
//Are we a mommy?
if(head1.tagName == "TABLE")
{
//Get the list of rows ahead of us.
var tbls = obj.parentElement.getElementsByTagName("TABLE");
//get the count of that list.
var tblsCount = tbls.length;
//determine if any of the rows underneath are unchecked.
for (i=0; i < tblsCount; i++)
{
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel1)
{
var chld = tbls[i].getElementsByTagName("INPUT");
if (chld[0].checked == false)
{
chk1 = false;
break;
}
}
}
var nd = head1.getElementsByTagName("INPUT");
nd[0].checked = chk1;
//do the same for the level above
goDeeperChecked(obj.parentElement);
}
else
{
return;
}
}
None
0 Points
16 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Jul 06, 2006 05:42 PM|Kiks|LINK
Hockey_Scott, thanks for sharing that. I think, I already posted the full version of very lengthy solution (may be similar to your solution or not) in my ealrlier posts.
But, see Davidovitz's post of shorter and cleaner version of the function which misses the same little functionality that you are talking about.
If anybody has a TOTAL solution to Davidovitz's, please post it. Thanks!
None
0 Points
1 Post
Tree View Control Close all other Nodes when open one Node.
Jul 10, 2006 05:40 AM|ramnaresh|LINK
Hi ,
Please find the entire Java script to close all other nodes when open one node.. it prevents vertical scrolling.
There is one more important property for Tree View Target = '_top' / Target = '_blank' / Target = '-self'
<script language=javascript> function TreeDefaultStyel() { var treeHanld = GetHandler(); if(null == treeHanld || undefined == treeHanld) { return; }//handler treeHanld.oncontentready(); } // Intercepts the collapsed event on the client. // function NodeExpand(obj) { var treeHanld = GetHandler(); if(null == treeHanld || undefined == treeHanld) { return; }//handler CollapseOtherNodes(obj,treeHanld);//selected node } function IndexChanged(obj) { var treeHanld = GetHandler(); var treeNode; if(null == treeHanld || undefined == treeHanld) { return; }//handler treeNode = treeHanld.getTreeNode(obj); //current Node if(null == treeNode || undefined == treeNode) { return; }//tree node var ID=treeNode.getAttribute('id') //Tree ID. if(null != treeNode.getAttribute('nodeData') && null ==treeNode.getAttribute('NavigateUrl') ) { if (treeNode.getAttribute('nodeData').indexOf("&") > -1) { strNavigationURL=treeNode.getAttribute('nodeData') +"&ID="+ID; } else { strNavigationURL=treeNode.getAttribute('nodeData') +"?ID="+ID; } treeHanld.getTreeNode(obj).setAttribute('NavigateUrl',strNavigationURL); } } // Gets a handle to the TreeView's selected node. // function CollapseOtherNodes(obj,treeHanld) { var tree = treeHanld; var treeNode,treeParent, treeChild,ownChilds; var nodeIndex,curnodeIndex; var blnRoot =false; if ( null == tree || undefined == tree ) return null; treeNode = tree.getTreeNode(obj); //current Node if ( null != treeNode && undefined != treeNode ) { ownChilds= treeNode.getChildren();//get its own childs. treeParent = treeNode.getParent();//its parent.. if ( null != treeParent && undefined != treeParent ) { nodeIndex= treeParent.getNodeIndex()//Parent Node index } curnodeIndex= treeNode.getNodeIndex()//current Node index } if ( null != nodeIndex && undefined != nodeIndex ) { treeParent = tree.getTreeNode(nodeIndex); //Get Parent.. } else { treeParent = tree; blnRoot=true; } if(blnRoot)//Root Node expand { var ID = document.getElementById('hdnStatus'); var NodeID; if(ID != null ) { tree = tree.getChildren(); tree= tree[0].getChildren(); for(j=0; j< tree.length ; j++) { NodeID = tree[j].getAttribute('id'); if(NodeID == ID.value) { tree[j].setAttribute('expanded',true); } else { tree[j].setAttribute('expanded',false); } } } } else //Other Node Expansion { if ( null != treeParent && undefined != treeParent ) { treeChild = treeParent.getChildren(); //siblings.. } for(i=0; i< treeChild.length ; i++) { nodeIndex= treeChild[i].getNodeIndex() if(nodeIndex != curnodeIndex) { tree.getTreeNode(nodeIndex).setAttribute('expanded',false); } else//own childs.. { if(ownChilds != null || ownChilds != nothing) { for(j=0; j< ownChilds.length ; j++) { nodeIndex= ownChilds[j].getNodeIndex() tree.getTreeNode(nodeIndex).setAttribute('expanded',false); } } } }//for end } } // Gets a handle to the TreeView. function GetHandler() { var tree; var treeName = 'EPTreeView'; // Get a handle to the TreeView. tree = document.getElementById( treeName ); if ( null == tree || undefined == tree ) return null; return tree; } </script>
<script language="javascript">
function TreeDefaultStyel()
{
var treeHanld = GetHandler();
if(null == treeHanld || undefined == treeHanld)
{
return;
}//handler
treeHanld.oncontentready();
}
// Intercepts the collapsed event on the client.
//
function NodeExpand(obj)
{
var treeHanld = GetHandler();
if(null == treeHanld || undefined == treeHanld)
{
return;
}//handler
CollapseOtherNodes(obj,treeHanld);//selected node
}
function IndexChanged(obj)
{
var treeHanld = GetHandler();
var treeNode;
if(null == treeHanld || undefined == treeHanld)
{
return;
}//handler
treeNode = treeHanld.getTreeNode(obj); //current Node
if(null == treeNode || undefined == treeNode)
{
return;
}//tree node
var ID=treeNode.getAttribute('id') //Tree ID.
if(null != treeNode.getAttribute('nodeData') && null ==treeNode.getAttribute('NavigateUrl') )
{
if (treeNode.getAttribute('nodeData').indexOf("&") > -1)
{
strNavigationURL=treeNode.getAttribute('nodeData') +"&ID="+ID;
}
else
{
strNavigationURL=treeNode.getAttribute('nodeData') +"?ID="+ID;
}
treeHanld.getTreeNode(obj).setAttribute('NavigateUrl',strNavigationURL);
}
}
// Gets a handle to the TreeView's selected node.
//
function CollapseOtherNodes(obj,treeHanld)
{
var tree = treeHanld;
var treeNode,treeParent, treeChild,ownChilds;
var nodeIndex,curnodeIndex;
var blnRoot =false;
if ( null == tree || undefined == tree )
return null;
treeNode = tree.getTreeNode(obj); //current Node
if ( null != treeNode && undefined != treeNode )
{
ownChilds= treeNode.getChildren();//get its own childs.
treeParent = treeNode.getParent();//its parent..
if ( null != treeParent && undefined != treeParent )
{
nodeIndex= treeParent.getNodeIndex()//Parent Node index
}
curnodeIndex= treeNode.getNodeIndex()//current Node index
}
if ( null != nodeIndex && undefined != nodeIndex )
{
treeParent = tree.getTreeNode(nodeIndex); //Get Parent..
}
else
{
treeParent = tree;
blnRoot=true;
}
if(blnRoot)//Root Node expand
{
var ID = document.getElementById('hdnStatus');
var NodeID;
if(ID != null )
{
tree = tree.getChildren();
tree= tree[0].getChildren();
for(j=0; j< tree.length ; j++)
{
NodeID = tree[j].getAttribute('id');
if(NodeID == ID.value)
{
tree[j].setAttribute('expanded',true);
}
else
{
tree[j].setAttribute('expanded',false);
}
}
}
}
else //Other Node Expansion
{
if ( null != treeParent && undefined != treeParent )
{
treeChild = treeParent.getChildren(); //siblings..
}
for(i=0; i< treeChild.length ; i++)
{
nodeIndex= treeChild[i].getNodeIndex()
if(nodeIndex != curnodeIndex)
{
tree.getTreeNode(nodeIndex).setAttribute('expanded',false);
}
else//own childs..
{
if(ownChilds != null || ownChilds != nothing)
{
for(j=0; j< ownChilds.length ; j++)
{
nodeIndex= ownChilds[j].getNodeIndex()
tree.getTreeNode(nodeIndex).setAttribute('expanded',false);
}
}
}
}//for end
}
}
// Gets a handle to the TreeView.
function GetHandler()
{
var tree;
var treeName = 'EPTreeView';
// Get a handle to the TreeView.
tree = document.getElementById( treeName );
if ( null == tree || undefined == tree )
return null;
return tree;
}
</script>
Add Handlers in .cs file.
private void AddHandlers(){
string clickHandler=""; // Create and wire up the javascript event handlers. //clickHandler = "IndexChanged(this.clickedNodeIndex);";
this.EPTreeView.Attributes.Add( "onselectedindexchange",clickHandler );clickHandler = "NodeExpand(this.clickedNodeIndex);";
this.EPTreeView.Attributes.Add( "onexpand", clickHandler );}
---Ram Naresh Yadav Talluri
ramnaresh_t@yahoo.com
None
0 Points
5 Posts
Re: check all checkbox in list
Jul 15, 2006 10:14 AM|santhoshthambiah|LINK
hi all
when page first time loaded alll the checkbox have to be checked in repeater control
thanks
santhosh
Member
1 Points
73 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Sep 07, 2006 01:03 PM|jason_m|LINK
I attempted to implement both the "goDeeper" and "Davidovitz" consolidated code.
The "goDeeper" does not produce any errors, but the parents are not unchecked when a child is unchecked.
"Davidovitz" code gives me an error "rows.0 is null or not a object" in the Davidovitz_CheckTable function. I believe this is happening from Davidovitz_UnCheckParents ->Davidovitz_CheckTable(parentTable, false);
Should the "goDeeper" function uncheck parents when a child is unchecked? If so where is the code to do that.
Has anyone verified Davidovitz functions?
My treeview is located within a wizard if that makes a difference.
client parent child javascript
Programmer
Specialty Bakers, Inc.
None
0 Points
1 Post
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Nov 04, 2006 07:29 AM|jainsachin22|LINK
I merged the two and here lies the final solution however if anybody find any bug plzz resend it with solution if any? or report the same.</div> <div> </div> <div align=left> </div> <div> </div> <div align=left>function goDeeperChecked(obj)
{
var chk1 = true;
//Get the mom.
var head1 = obj.parentElement.previousSibling;
//no Table, cant do my work.
if (head1.tagName != "TABLE")
{return ;}</div> <div> </div> <div align=left>//This is how may rows are at this level.
var pTreeLevel1
if (obj.rows == null || obj.rows == "undefined")
{
pTreeLevel1 = head1.rows[0].cells.length;
}
else
{
pTreeLevel1 = obj.rows[0].cells.length;
}</div> <div> </div> <div align=left>//Are we a mommy?
if(head1.tagName == "TABLE")
{
//Get the list of rows ahead of us.
var tbls = obj.parentElement.getElementsByTagName("TABLE");
//get the count of that list.
var tblsCount = tbls.length; </div> <div> </div> <div align=left>//determine if any of the rows underneath are unchecked.
for (i=0; i < tblsCount; i++)
{
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel1)
{
var chld = tbls[i].getElementsByTagName("INPUT");
if (chld[0].checked == false)
{
chk1 = false;
break;
}
}
} </div> <div> </div> <div align=left>var nd = head1.getElementsByTagName("INPUT");
nd[0].checked = chk1;
//do the same for the level above
goDeeperChecked(obj.parentElement);
}
else
{
return;
}
}
function goDeeper(check, obj)
{ </div> <div> </div> <div align=left>//head1 gets the parent node of the unchecked node
var head = obj.parentElement.previousSibling; </div> <div> </div> <div align=left>if(head.tagName == "TABLE")
{
//checks for the input tag which consists of checkbox
var matchElement = head.getElementsByTagName("INPUT"); </div> <div> </div> <div align=left>//matchElement1[0] gives us the checkbox and it is unchecked
matchElement[0].checked = false;
}
else
{
head = obj.parentElement.previousSibling;
} </div> <div> </div> <div align=left>if(head.tagName == "TABLE")
{
goDeeper(check, obj.parentElement);
} </div> <div> </div> <div align=left>else
{
return;
}
}
function treeViewCheck()
{
// obj gives us the node on which check or uncheck operation has performed
var obj = window.event.srcElement; </div> <div> </div> <div align=left>var treeNodeFound = false; </div> <div> </div> <div align=left>var checkedState; </div> <div> </div> <div align=left>
//checking whether obj consists of checkbox to avoid exception </div> <div> </div> <div align=left>if (obj.tagName == "INPUT" && obj.type == "checkbox")
{
var treeNode = obj;
checkedState = treeNode.checked; </div> <div> </div> <div align=left>//work our way back to the parent <table> element </div> <div> </div> <div align=left>do
{
obj = obj.parentElement;
}
while (obj.tagName != "TABLE") </div> <div> </div> <div align=left>var parentTreeLevel = obj.rows[0].cells.length;
var parentTreeNode = obj.rows[0].cells[0]; </div> <div> </div> <div align=left>//get all the TreeNodes inside the TreeView (the parent <div>)
var tables = obj.parentElement.getElementsByTagName("TABLE"); </div> <div> </div> <div align=left>//checking for any node is checked or unchecked during operation
if(obj.tagName == "TABLE")
{
// if any node is unchecked then their parent node are unchecked </div> <div> </div> <div align=left>if (!treeNode.checked)
{
goDeeper(false, obj);
} //end if - unchecked
//total number of TreeNodes
var numTables = tables.length </div> <div> </div> <div align=left>if (numTables >= 1)
{
//cycle through all the TreeNodes
//until we find the TreeNode we checked </div> <div> </div> <div align=left>for (i=0; i < numTables; i++)
{
if (tables[i] == obj)
{
treeNodeFound = true;
i++;
if (i == numTables)
{
//if we're on the last TreeNode, we are done
break;
}
}
if (treeNodeFound == true)
{
var childTreeLevel = tables[i].rows[0].cells.length;
if (childTreeLevel > parentTreeLevel)
{
var cell = tables[i].rows[0].cells[childTreeLevel - 1];
//set the checkbox to match the checkedState </div> <div> </div> <div align=left>var inputs = cell.getElementsByTagName("INPUT");
inputs[0].checked = checkedState;
} </div> <div> </div> <div align=left>else
{
//if any of the preceding TreeNodes are not deeper stop
break;
}
} //end if </div> <div> </div> <div align=left>}//end for
} //end if - numTables >= 1 </div> <div> </div> <div align=left>// if all child nodes are checked then their parent node is checked
if (treeNode.checked)
{
goDeeperChecked(obj);
}//end if - checked </div> <div> </div> <div align=left>} //end if - tagName = TABLE </div> <div> </div> <div align=left>} //end if </div> <div> </div> <div align=left>} //end function </div> <div> </div> <div align=left> </div> <div align=left> </div> <div align=left>Regards</div> <div align=left>Sachin Jain</div> <div align=left>"Great People don't do different things but they do things differently"</div> <div> </div>
javascript Treeview in ASP.NET Asp.Net 2.0
Member
2 Points
10 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Feb 01, 2007 01:11 PM|JustPlaneCrazy|LINK
Sachin,
Thank you very much. I modified your code to match the changes (from a previous reply in this thread) needed to make it work in Firefox and it works a treat!
I do have a question though. The way my treeview is setup is similar to this
-Parent
-ChildNode
-ChildNode2
What needs to happen is when the user select ChildNode2, it automatically checks ChildNode and Parent too. Right now it only checks ChildNode. Any idea what's needed to make that work? Basically if any ChildNode2 or ChildNode checkbox is checked then it's corresponding Parent should also be checked.
Thanks for the help!
Mike W.
Member
1 Points
28 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Feb 14, 2007 01:33 PM|Dom Márcio|LINK
Upping this very interesting thread!
Crazy u probably got the same problem as me, I got the following tree:
-Parent
-ChildNode1
-ChildNode11
-ChildNode2
-ChildNode21
-ChildNode22
If I check just ChildNode22, ChildNode2 and Parent should automatically be checked too, but it doesn't work. I think it is by design, because if I check ChildNode11, ChildNode21 and ChildNode22 or just ChildNode1 and ChildNode2 then Parent is automatically checked. To a parent be automatically checked, ALL the child nodes must be checked too.
Visit: http://oguri.blogspot.com
Member
1 Points
28 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Feb 14, 2007 02:23 PM|Dom Márcio|LINK
Don't know if it fits ur need but fitted mines:
function Davidovitz_HandleCheckbox(evento) { var element = evento.srcElement || evento.target; if (element.tagName == "INPUT" && element.type == "checkbox") { var checkedState = element.checked; while (element.tagName != "TABLE") // Get wrapping table { element = element.parentElement; } //Davidovitz_UnCheckParents(element); // Uncheck all parents CheckParents(element); element = element.nextSibling; if (element == null) // If no childrens than exit return; var childTables = element.getElementsByTagName("TABLE"); for (var tableIndex = 0; tableIndex < childTables.length; tableIndex++) { CheckTable(childTables[tableIndex], checkedState); } } } // Uncheck the parents of the given table, Can remove the recurse (redundant) function Davidovitz_Davidovitz_UnCheckParents(table) { if (table == null || table.rows[0].cells.length == 2) // This is the root { return; } if(table.parentElement.previousSibling=='[object]') { var parentTable = table.parentElement.previousSibling; CheckTable(parentTable, false); Davidovitz_UnCheckParents(parentTable); } } // Check the parents of the given table, Can remove the recurse (redundant) function Davidovitz_CheckParents(table) { // if (table == null || table.rows[0].cells.length == 2) // This is the root // { // return; // } if(table.parentElement.previousSibling=='[object]') { var parentTable = table.parentElement.previousSibling; CheckTable(parentTable, true); Davidovitz_CheckParents(parentTable); } } // Handle the set of checkbox checked state function Davidovitz_CheckTable(table, checked) { var checkboxIndex = table.rows[0].cells.length - 1; var cell = table.rows[0].cells[checkboxIndex]; var checkboxes = cell.getElementsByTagName("INPUT"); if (checkboxes.length == 1) { checkboxes[0].checked = checked; } }Visit: http://oguri.blogspot.com
Member
11 Points
131 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Feb 26, 2007 01:39 PM|gkrieger|LINK
Hello,
It works really well on IE. Unfortuneately does not work on Firefox.
Would be great if it did.
Regards
Grant
Member
2 Points
22 Posts
ASP.NET 2.0 Treeview Checkboxes - Expand/Collapse - Javascript
Mar 23, 2007 06:14 AM|shivaatgenmills@hotmail.com|LINK
Hello All,
I have a requirement like this,
I am using ASP.NET 2.0 TreeView with Checkboxes on all nodes. I want to have expand functionality written on checkbox click instead of expand/collapse(+/-) Image.
Could you please help me to achieve this.
Shiva Kumar
Member
10 Points
12 Posts
All these work in "static" tree views
Apr 26, 2007 12:48 AM|prbabu|LINK
Hi All,
Thanks for all your efforts - saved me lots of time to understand where to start from. I am creating a treeview dynamically, i.e. programatically using "placeholder". The javascript doee n't seem to be working in such cases. Basically I believe the child and tree levels are spit out a bit differently. Please do let me know if anyone has a working code with dynamically created trees - i.e. the entire tree creation code is within the code-behind file rather than aspx file.
Thanks heaps.
Praveen
Member
10 Points
12 Posts
Re: All these work in "static" tree views
Apr 26, 2007 02:10 AM|prbabu|LINK
OK, all! To be more specific if you are using "nodestyle","nodeindent" etc... be aware that the javascript needs to be tweaked. Basically, everything depends on how .NET translates the treeview control to the underlying table, which is composed of rows and columns. If you are going to change the formatting of the treeview, take care of the javascript to work with that resultant formatted tables(rows and columns).
Hope the above helps.
-Praveen
Participant
791 Points
439 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
May 31, 2007 03:33 AM|pushp_aspnet|LINK
Well, friends i too faced the above problems: check/uncheck works just for one level up and the script works only in IE. So, i decided to fix the problems but the script was too criptic to modify and finally ended up rewriting the whole solution :-)
I've tested my script in IE7 and Firefox 2.0 and it works great, do let me know in case you happen to find a bug.
Here we go:
-----------------------------------------------------------------------------------------------------------------------------------------------
Step1: Add an attribute to the treeview in the code behind as:
TreeView1.Attributes.Add("onclick","OnTreeClick(event)");
Step2: Put the below script in the head tag of your .aspx page.
//************************** Treeview Parent-Child check behaviour ****************************//
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;
if(check) //checkbox checked
{
var isAllSiblingsChecked = AreAllSiblingsChecked(srcChild);
if(isAllSiblingsChecked)
checkUncheckSwitch = true;
else
return; //do not need to check parent if any(one or more) child not checked
}
else //checkbox unchecked
{
checkUncheckSwitch = false;
}
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 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;
}
///////////////////////////////////////////////////////////////////////////////////////
That's all there is to it.
enjoy!!!
parent child Treeview in ASP.NET Asp.Net 1.1 asp.net 2.0 asp.net selection Treeview
http://pushpontech.blogspot.com
Member
182 Points
2336 Posts
Microsoft
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Jun 09, 2007 01:22 AM|ranganh|LINK
Hi Prashanth, You would need to use the IE Webcontrols to implement TreeView control in ASP.NET 1.x versions. You can download and use the same at http://www.asp.net/ControlGallery/ControlDetail.aspx?Control=75&tabindex=2
Hope this helps.
Thanks.
Harish
http://geekswithblogs.net/ranganh
None
0 Points
24 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Jun 10, 2007 11:38 AM|nrocha|LINK
Hi all,
I've been experimenting the scripts posted here and they all work very well.
The problem is I need some sort of modified version of check-uncheck in childs and parents...
Here is my situation: I need that when ONE of the childs is checked ALL its parents become checked as well. That's the only "special" thing I want. I DON'T NEED any other behaviour like to check all childs when a parent is selected.
I think that it should not be too difficult to achieve this, but I have very limited knowledge of javascript...If someone could point me out I would be very thankfull :-)
Thanks in advance,
Nuno
None
0 Points
24 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Jun 10, 2007 05:34 PM|nrocha|LINK
Hi again,
just one more question: is there any way to get the Value of the node (that was bound when creating the treeview's nodes with node.Value) in javascript?? I need to disable the possibility to check/uncheck some treenodes depending on a defined attribute (for example, nodes that I "mark" as "mandatory" should not be possible to uncheck)...The checkbox associated with the node can not be disabled so I need to control this some other way...
Thanks again,
Nuno
Participant
791 Points
439 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Jun 13, 2007 02:00 AM|pushp_aspnet|LINK
Hi Nuno,
Check my post here:http://pushpontech.blogspot.com/2007/06/getting-treenode-values-on-client-side.html
Hope this helps you.
pushp
http://pushpontech.blogspot.com
None
0 Points
4 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Jul 24, 2007 03:50 AM|lalit_dubey|LINK
Here is the code which is used to check /uncheck all the nodes in tree node in one shot -- for example if we have a HTML check box , if we need to check all the node when this check box is checked and vice versa.
I am trying to put this code here hope it will help u ppl , if some one has got better solution for this plz suggest [:)]
the following code will could be used
this method will accept the bool parameter true /false
function UncheckAllNode(check)
{
var src=null;
var treeview = document.getElementById("_treeGroup"); //use your treeview id instead of Tree1
var treeLinks = treeview.getElementsByTagName("a");
for(i=0;i<treeLinks.length;i++)
{
src=treeLinks[i].firstChild;
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,check);
}
}
var childChkBoxes = parentTable.getElementsByTagName("input"); //check or uncheck the all main node
childChkBoxes[0].checked=check;
}
}
Lalit N Dubey
Software Engineer
________________
WOW Vision Pte Ltd
(Wholly Owened Subsidiary of SM Summit Holdings Ltd)
45 Ubi Road 1 Summit Building #05-03
Singapore - 408696
Member
1 Points
15 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Jul 31, 2007 09:25 AM|cypherkro|LINK
Hi Guys
Is it possible to expand the Parent nodes to show all child nodes when it is checked?
Basically what is happening, (using the original code on this forum for selected all child nodes) a user will check the parent, and all child nodes will be selected as well (Which is exactly what I want) but also, I want this parent to expand and show its child nodes, so that the user can see what all was selected.
Can this be done?
Thanks in advance
Kevin
None
0 Points
1 Post
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Aug 01, 2007 02:56 AM|Avanti|LINK
All of u thanks for the posts ..it helped me a lot in successfully completing my task
I wanted a tree view control where if Parent is checked or Unchecked the child nodes get checked and unchecked respectively also i wanted
if ANY one child is checked then parent should get checked and if ALL childs are unchecked then parent should get unchecked.
Following code does this
call this function "client_OnTreeNodeChecked()" on the Onclick event of treeview.
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");
if(obj.tagName == "TABLE")
{
if (treeNode.checked) //if any child is checked check parent
{
//head1 gets the parent node of the checked node
var head1 = obj.parentElement.previousSibling;
if(head1!=null)
{
if(head1.tagName == "TABLE")
{
//checks for the input tag which consists of checkbox
var matchElement1 = head1.getElementsByTagName("INPUT");
//matchElement1[0] gives us the checkbox and it is checked
if(matchElement1.length>0)
matchElement1[0].checked = true;
}
}
else {
head1 = obj.parentElement.previousSibling;
}
if(head1!=null)
{
if(head1.tagName == "TABLE")
{
//head2 gets the parent node of the checked node
var head2 = obj.parentElement.parentElement.previousSibling;
if(head2!=null)
{
if(head2.tagName == "TABLE")
{
//checks for the input tag which consists of checkbox
var matchElement2 = head2.getElementsByTagName("INPUT");
if(matchElement2.length>0)
matchElement2[0].checked = true;
}
}
}
}
else {
head2 = obj.parentElement.previousSibling;
}
if(head2!=null)
{
if(head2.tagName == "TABLE")
{
//head3 gets the parent node of the checked node
var head3 = obj.parentElement.parentElement.parentElement.previousSibling;
if(head3!=null)
{
if(head3.tagName == "TABLE")
{
//checks for the input tag which consists of checkbox
var matchElement3 = head3.getElementsByTagName("INPUT");
if(matchElement3.length>0)
matchElement3[0].checked = true;
}
}
}
}
else {
head3 = obj.parentElement.previousSibling;
}
if(head3!=null)
{
if(head3.tagName == "TABLE")
{
//head4 gets the parent node of the checked node
var head4 = obj.parentElement.parentElement.parentElement.parentElement.previousSibling;
if(head4 != null)
{
if(head4.tagName == "TABLE")
{
//checks for the input tag which consists of checkbox
var matchElement4 = head4.getElementsByTagName("INPUT");
if(matchElement4.length>0)
matchElement4[0].checked = true;
}
}
}
}
}//end if - checked
if (!treeNode.checked)//if all child are unchecked then uncheck parent
{
var chk1 = false;
var head1 = obj.parentElement.previousSibling;
var pTreeLevel1 = obj.rows[0].cells.length;
if(head1!=null)
{
if(head1.tagName == "TABLE")
{
var tbls = obj.parentElement.getElementsByTagName("TABLE");
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++)
{
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel1)
{
var chld = tbls[i].getElementsByTagName("INPUT");
if(chld.length>0)
{
if (chld[0].checked == true)
{
chk1 = true;
break;
}
}
}
}
var nd = head1.getElementsByTagName("INPUT");
if(nd.length>0){
nd[0].checked = chk1;}
}
}
else
{
head1 = obj.parentElement.previousSibling;
}
var chk2 = false;
if(head1!=null)
{
if(head1.tagName == "TABLE")
{
var head2 = obj.parentElement.parentElement.previousSibling;
if(head2!=null)
{
if(head2.tagName == "TABLE")
{
var tbls = head1.parentElement.getElementsByTagName("TABLE");
var pTreeLevel2 = head1.rows[0].cells.length;
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++)
{
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel2)
{
var chld = tbls[i].getElementsByTagName("INPUT");
if(chld.length>0)
{
if (chld[0].checked == true)
{
chk2 = true;
break;
}
}
}
}
var nd = head2.getElementsByTagName("INPUT");
if(nd.length>0){
nd[0].checked = (chk2 && chk1);}
}
}
}
}
else
{
head2 = obj.parentElement.previousSibling;
}
var chk3 = false;
if(head2!=null)
{
if(head2.tagName == "TABLE")
{
var head3 = obj.parentElement.parentElement.parentElement.previousSibling;
if(head3!=null)
{
if(head3.tagName == "TABLE")
{
var tbls = head2.parentElement.getElementsByTagName("TABLE");
var pTreeLevel3 = head2.rows[0].cells.length;
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++)
{
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel3)
{
var chld = tbls[i].getElementsByTagName("INPUT");
if(chld.length>0)
{
if (chld[0].checked == true)
{
chk3 = true;
break;
}
}
}
}
var nd = head3.getElementsByTagName("INPUT");
if(nd.length>0){
nd[0].checked = (chk3 && chk2 && chk1);}
}
}
}
}
else
{
head3 = obj.parentElement.previousSibling;
}
var chk4 = false;
if(head3!=null)
{
if(head3.tagName == "TABLE")
{
var head4 = obj.parentElement.parentElement.parentElement.parentElement.previousSibling;
if(head4!=null)
{
if(head4.tagName == "TABLE")
{
var tbls = head3.parentElement.getElementsByTagName("TABLE");
var pTreeLevel4 = head3.rows[0].cells.length;
var tblsCount = tbls.length;
for (i=0; i < tblsCount; i++)
{
var childTreeLevel = tbls[i].rows[0].cells.length;
if (childTreeLevel = pTreeLevel4)
{
var chld = tbls[i].getElementsByTagName("INPUT");
if(chld.length>0)
{
if (chld[0].checked == true)
{
chk4 = true;
break;
}
}
}
}
var nd = head4.getElementsByTagName("INPUT");
if(nd.length>0){
nd[0].checked = (chk4 && chk3 && chk2 && chk1);}
}
}
}
}
}//end if - unchecked
}
var numTables = tables.length
if (numTables >= 1)
{
for (i=0; i < numTables; i++)
{
if (tables[i] == obj)
{
treeNodeFound = true;
i++;
if (i == numTables)
{
return;
}
}
if (treeNodeFound == true)
{
var childTreeLevel = tables[i].rows[0].cells.length;
if (childTreeLevel > parentTreeLevel)
{
var cell = tables[i].rows[0].cells[childTreeLevel - 1];
var inputs = cell.getElementsByTagName("INPUT");
inputs[0].checked = checkedState;
}
else
{
return;
}
}
}
}
}
}
Treeview
None
0 Points
7 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Aug 09, 2007 05:49 PM|Ahamed Syed|LINK
HI Prashanth check this. it works fine with ASp.NET 1.1
function CheckSelect()
{ //initialize tree
var tree = GetTreeHandle();
//get checked tree node
var treenode = tree.getTreeNode(event.treeNodeIndex);
//get index of the parent node whose child node is checked.
var index=event.treeNodeIndex.charAt(0);
//get "type" of the node .Type returns the name of the nodegroup given while loading the
//control. In this exmple it is used as ("groups" as parent nodes) and ("contacts" as child nodes)
var type=treenode.getAttribute('type');
//check whether it is Checked or Unchecked.It returns true or false.
var sel=treenode.getAttribute('checked');
var i;
if (type=="groups")
{ //As the treenode checked is a parent, get the children of that node
var objarr= treenode.getChildren();
if (sel==true)
{//if the parent node is checked then uncheck all child nodes
for (i=0;i<objarr.length;i++)
{
objarr[i].setAttribute("checked",true);
}
}
else
{//if the parent node is unchecked then uncheck all child nodes
for (i=0;i<objarr.length;i++)
{
objarr[i].setAttribute("checked",false);
}
}
}
//if type is not parent node but its a child node then.
else
{ //get parent node of th child node which is Checked
var parentnode=tree.getTreeNode(index);
//get the children of the parent node
var objarr= parentnode.getChildren();
var truecheck,falsecheck;
truecheck=1;
falsecheck=1
; //check All the child nodes are checked or unchecked
for (i=0;i<objarr.length;i++)
{
if (objarr[i].getAttribute("checked")==true)
{
falsecheck=0;
}
else
{
truecheck=0;
}
}
if (truecheck==1)
{//all child nodes are checked so check the parent too...
parentnode.setAttribute("checked",true);
}////
else
{//none of the child nodes or any of th child node is unchecked
//so uncheck the parent node
parentnode.setAttribute("checked",false);
}
}
}//end function
function GetTreeHandle()
{
var tree;
var treeName = 'treeview1';//"treeview1" is the id f the TREEVIEW CONTROL USED
// Get a handle to the TreeView.
tree = document.getElementById( treeName );
if ( null == tree || undefined == tree )
return null;
return tree;
}
Treeview in ASP.NET Asp.Net 1.1 Treeview treeview in ASP.NET SelectedValue
Participant
1460 Points
604 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Aug 21, 2007 02:29 AM|GillouX|LINK
Hello
I m a newbie in javascript, i want to use your nice code but just use the fact to select all the children , what I have to keep and delete out there ?
thx
None
0 Points
7 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Aug 25, 2007 11:50 PM|Ahamed Syed|LINK
Hello,
i dint get ur requirement. Is it u need to select all children on parent select ?
Regards
None
0 Points
1 Post
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Aug 27, 2007 08:19 AM|vasu1984|LINK
can u tell me the way to disable the other nodes if i select any two nodes in tree view.and enable if i selected one or nothing.there is no select all option in my tree view..
Participant
1460 Points
604 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Aug 29, 2007 06:22 AM|GillouX|LINK
actually I want to adapt this code to make it independant of the tree levels
None
0 Points
7 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Aug 29, 2007 11:50 PM|Ahamed Syed|LINK
If it is the case. You dont need javascript. You can use the server side code...
None
0 Points
7 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Aug 29, 2007 11:53 PM|Ahamed Syed|LINK
To disable the node use this
treenode.setAttribute("checked",false);
Participant
1460 Points
604 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Aug 30, 2007 06:30 AM|GillouX|LINK
You can't make treenode.setAttributes
but if sy has a idea to disabled the checkbox of a node; I will be happy :D
None
0 Points
7 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Sep 03, 2007 11:07 AM|Ahamed Syed|LINK
R u using ASp.net 2.0 or 1.1...?
Participant
1460 Points
604 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Sep 03, 2007 11:31 AM|GillouX|LINK
2.0
None
0 Points
7 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Sep 03, 2007 11:30 PM|Ahamed Syed|LINK
Check page 1 in this posting. It has 2.0 listing. This one is for 1.1.
None
0 Points
1 Post
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Oct 04, 2007 11:11 AM|aoxoa|LINK
Great code here guys!
I've got a question, not specifically a check/uncheck, but enable/disable. The theory of it remains the same!
I'm using the shorter version of the code posted, but have a couple of problems that perhaps somebody smarter than me can come up with. I have a treeView, with unlimited depth.
Assuming my tree looks like this:
- Node 0
|- Node 1
|- Node 2
| |- Node 2.1
|- Node 3
|- Node 3.1
| |- Node 3.1.1
|- Node 3.2
Here's what I need to do: If a user clicks a node, everything that is NOT at that same level needs to be disabled. So if a user clicks Node 0, everything below that is disabled... if the user clicks node 2, then node 1 and node 3 remain enabled, and everything else is disabled. I'm having trouble! Help if ya can!
.net treeview javascript
None
0 Points
1 Post
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Oct 16, 2007 11:27 AM|pventura|LINK
Hi,
I needed to check all parents when almost a child were checked, and uncheck all parent when any child were checked, here is the modification:
/////////////////////////////////////////////////////////////////////////////////////
function CheckUncheckParents(srcChild, check){
var parentDiv = GetParentByTagName("div", srcChild);var parentNodeTable = parentDiv.previousSibling;
if(parentNodeTable){
var checkUncheckSwitch;
if(!check) //checkbox unchecked{
var isAllSiblingsUnChecked = AreAllSiblingsUnChecked(srcChild); if(isAllSiblingsUnChecked) checkUncheckSwitch = false; else return; //do not need to uncheck parent if any(one or more) child checked}
else //checkbox checked{
checkUncheckSwitch = true;}
var inpElemsInParentTable = parentNodeTable.getElementsByTagName("input");if(inpElemsInParentTable.length > 0){
var parentNodeChkBox = inpElemsInParentTable[0];parentNodeChkBox.checked = checkUncheckSwitch;
//do the same recursivelyCheckUncheckParents(parentNodeChkBox, checkUncheckSwitch);
}
}
}
function AreAllSiblingsUnChecked(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 checked, return false if(prevChkBox.checked){
return false;}
}
}
}
return true;}
/////////////////////////////////////////////////////////////////////////////////////
None
0 Points
2 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Oct 21, 2007 02:48 PM|forumaic|LINK
thanks very good piece of code, this yours treeView works fine, but I have one question:
Where I could change a little bit your code, I need to have that if child node is selected then automatically parient node is selected. Now it is like if all childes nodes are selected then parient node is selected automatically.
thanks in advance.
Member
5 Points
64 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Oct 30, 2007 09:05 PM|wizzkidd07|LINK
Wow, that looks like the (almost) ultimate answer. Apart from one thing i've noticed, the parent will not populate the child nodes unless the parent has been maximized (at least once).
For example, this is what the tree looks when ExpandDepth = 1:
+ [ ] NodeA
+ [ ] Node1
+ [ ] Node2
+ [ ] Node3
If I tick Node1, and then expand it afterwards, I notice that the child nodes have not been ticked, ie:
Ticked Node First...
- [ ] NodeA
+ [x] Node1
+ [ ] Node2
+ [ ] Node3
Then expand...
- [ ] NodeA
+ [x] Node1
- [ ] Node1.1
- [ ] Node1.2
- [ ] Node1.3
- [ ] Node1.4
+ [ ] Node2
+ [ ] Node3
But, if I expand Node1 first and then tick on it, it'll tick all the child nodes as expected. Or even, if I expand Node1 first, and then minimize it again, then clicking on Node1, it will still tick all the child nodes:
- [ ] NodeA
+ [x] Node1
- [x] Node1.1
- [x] Node1.2
- [x] Node1.3
- [x] Node1.4
+ [ ] Node2
+ [ ] Node3
I've noticed that this problem occurs for every parent node. But if I was to fully expand my tree too its deepest leaf at first, the parent checkboxes will then tick the child tickboxes too (this is also true if i fully expand and then fully minimize, which is why quoted earlier that it needs maximizing "at least once".
My tree is only 3 levels deep, so I tried some hacks such as setting TreeView1.ExpandDepth = 3 in the Page_Load, and then immediatly on the next line set it to TreeView1.ExpandDepth = 1 (or 0, but i prefer 1). The page load does set the ExpandDepth property, but it seems like its happening too fast, for my hack to work, it would need to ExpandDepth = 3 on page_load, and then perhaps on another call (i dont know if there is a call that follows the Page_Load by any chace), set ExpandDepth = 1. - So I need some assistance trying to get the hack to work, or some assistance modifying the javascript.
Any ideas? (is it me, or has nonoe spotted this bug)?
- http://www.PromotionCity.co.uk
Member
17 Points
251 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Nov 26, 2007 06:44 AM|chekuriraju|LINK
i have used the code given by pushp_aspnet.
the code
<script language="javascript" type="text/javascript"> 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;if
(check) //checkbox checked{
var
isAllSiblingsChecked = AreAllSiblingsChecked(srcChild); if(isAllSiblingsChecked)checkUncheckSwitch =
true;else
return
; //do not need to check parent if any(one or more) child not checked}
else
//checkbox unchecked{
checkUncheckSwitch = false;}
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 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;}
</
script>My question is i need the functionality of the above code which i am getting ,added to it i want to select "Only" the parent nodes by using some kind of key press(ex:Ctrl+) function or any other function for multiple selection of that particular selected parent nodes.(no need of selection of child nodes in this case.
I am in urgent need of it.Please Help me out.
Participant
791 Points
439 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Nov 26, 2007 10:13 AM|pushp_aspnet|LINK
Hi,
Try the following script:
----------------------------------------------------------------------
function CheckLevelZeroNodes(treeId) //function to be called on some event
{
var tree = document.getElementById(treeId);
if(tree)
{
var firstNode = GetFirstNode(tree);
CheckLevelZeroNodesRecursive(firstNode);
}
}
function GetFirstNode(tree)
{
var firstNode = tree.firstChild;
while(firstNode.nodeType != 1)
firstNode = firstNode.nextSibling;
return firstNode;
}
function CheckLevelZeroNodesRecursive(node)
{
var chkBox = node.getElementsByTagName("input")[0];
if(chkBox)
chkBox.checked = true;
node = GetNextLevelZeroNode(node);
if(node)
CheckLevelZeroNodesRecursive(node);//call recursive
}
function GetNextLevelZeroNode(node)
{
node = node.nextSibling;
if(node)
while(node.tagName.toLowerCase() != 'table')
{
node = node.nextSibling;
if(!node)
break;
}
return node;
}
---------------------------------------------------
You can call the 'CheckLevelZeroNodes' function on some event passing it the tree id and you r done. Could be something like:
<a href='javascript:CheckLevelZeroNodes("<%=TreeView1.ClientID %>")'>Check Nodes</a> Hope this helps.pushp
Selecting only first level nodes in a treeview
http://pushpontech.blogspot.com
Member
17 Points
251 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Nov 26, 2007 12:37 PM|chekuriraju|LINK
i used the above given code.when i click on the anchor tag the root node is being selected.I should be able to select specified parent nodes that to when clicked i don't need child nodes to be selected.
Member
17 Points
251 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Nov 27, 2007 03:50 AM|chekuriraju|LINK
</form>
Participant
791 Points
439 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Nov 27, 2007 04:06 AM|pushp_aspnet|LINK
Ok, I misunderstood your requirement. Try the below code. I hope this would solve your problem.
-------------------------------------------------------------------------
var isCtrlPressed; //global variable document.onkeyup = OnKeyUp; document.onkeydown = OnKeyDown; function OnKeyDown(evt){ if(!evt) evt = window.event; if(evt.keyCode == 17) { isCtrlPressed = true; } } function OnKeyUp(evt){ if(!evt) evt = window.event; if(evt.keyCode == 17) { isCtrlPressed = false; } }function OnTreeClick(evt) { if(isCtrlPressed) { return; }//your check all script goes here }http://pushpontech.blogspot.com
Member
78 Points
454 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Feb 05, 2008 11:29 PM|den2005|LINK
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.
Member
78 Points
454 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Feb 11, 2008 08:40 PM|den2005|LINK
I have solved the problem.[:D]
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; }Member
1 Points
20 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Mar 04, 2008 06:04 AM|pedro.gmr|LINK
Hi den2005,
I try tu use your code in my page but it it gives me an error in the for cycles.
I don't understand what "iif" do.
There is another way of doing this cycle?
Thanks.
iff
Member
80 Points
86 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Apr 01, 2008 02:54 AM|lokanadham|LINK
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.
Hyderabad.
Participant
1460 Points
604 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Apr 01, 2008 03:07 AM|GillouX|LINK
the treeview structure is made with a table
Member
80 Points
86 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Apr 01, 2008 03:25 AM|lokanadham|LINK
Thank you so much.
Can we access the treeview with that TABLE and How do we access it?
Can you please explain me this?
Hyderabad.
Member
78 Points
454 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Apr 01, 2008 03:34 AM|den2005|LINK
Sorry about that pedro,
I just post it without checking..[:D]
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;
}
Member
1 Points
20 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Apr 01, 2008 07:00 AM|pedro.gmr|LINK
Hi den2005,
First, thanks for your help.
<div id="result_box" dir="ltr">But, as I was with some hurry, I resolve by anotherway.</div><div id="result_box" dir="ltr">Here you can see my post: http://forums.asp.net/t/1241344.aspx</div><div id="result_box" dir="ltr"> </div><div id="result_box" dir="ltr">Anyway, I apreciate your concern. Thanks again. </div>
None
0 Points
1 Post
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Apr 11, 2008 05:21 AM|mandar44|LINK
=============================
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
None
0 Points
3 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
May 27, 2008 10:20 AM|wizhack|LINK
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.
None
0 Points
3 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
May 27, 2008 11:04 AM|wizhack|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.
Member
86 Points
63 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Aug 11, 2008 12:48 PM|Mike.Borozdin|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.
None
0 Points
1 Post
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Sep 28, 2008 08:56 AM|LKManyam|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
Member
79 Points
100 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check/Uncheck child and parent - Javascript
Oct 10, 2008 05:13 AM|TheRed|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)
None
0 Points
4 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Oct 14, 2008 07:41 AM|mohammedgharieb|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