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;
}
}
cj2210
Member
15 Points
3 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Apr 26, 2006 07:37 PM|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
Kiks
Member
85 Points
17 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Apr 26, 2006 10:19 PM|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...
ranganh
Star
12085 Points
2435 Posts
Microsoft
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Apr 28, 2006 09:10 AM|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
Ran Davidovi...
Member
64 Points
12 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
May 05, 2006 04:38 PM|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
akjoshi
Contributor
3636 Points
615 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
May 06, 2006 01:26 PM|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
Ran Davidovi...
Member
64 Points
12 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
May 07, 2006 06:52 PM|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
akjoshi
Contributor
3636 Points
615 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
May 08, 2006 07:38 AM|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
Ran Davidovi...
Member
64 Points
12 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
May 10, 2006 04:38 AM|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
kvraju
Member
27 Points
7 Posts
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
May 10, 2006 05:00 AM|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]
Hockey_Scott
Member
5 Points
1 Post
Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript
Jul 06, 2006 04:10 PM|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;
}
}