ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript

Rate It (7)

Last post 01-06-2009 2:18 PM by atarikg. 95 replies.

Sort Posts:

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

    03-27-2006, 6:38 AM
    • Star
      12,063 point Star
    • ranganh
    • Member since 02-11-2004, 11:35 PM
    • India
    • Posts 2,428

    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.

    regards,
    Harish

    http://geekswithblogs.net/ranganh
  • Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript

    03-29-2006, 6:07 PM
    • Member
      85 point Member
    • Kiks
    • Member since 03-14-2006, 8:54 PM
    • Posts 17

    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

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

    03-30-2006, 2:08 AM
    • Star
      12,063 point Star
    • ranganh
    • Member since 02-11-2004, 11:35 PM
    • India
    • Posts 2,428

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

    Write back if you need further help.

    Thanks.

     

    regards,
    Harish

    http://geekswithblogs.net/ranganh
  • Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript

    03-30-2006, 2:00 PM
    • Member
      85 point Member
    • Kiks
    • Member since 03-14-2006, 8:54 PM
    • Posts 17

    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

     

     

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

    03-30-2006, 6:05 PM
    • Member
      85 point Member
    • Kiks
    • Member since 03-14-2006, 8:54 PM
    • Posts 17

    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

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

    03-31-2006, 10:48 AM
    • Star
      12,063 point Star
    • ranganh
    • Member since 02-11-2004, 11:35 PM
    • India
    • Posts 2,428

    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.

    regards,
    Harish

    http://geekswithblogs.net/ranganh
  • Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript

    03-31-2006, 6:22 PM
    • Member
      85 point Member
    • Kiks
    • Member since 03-14-2006, 8:54 PM
    • Posts 17

    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

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

    04-18-2006, 5:09 AM

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

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

    04-18-2006, 5:36 AM
    • Member
      10 point Member
    • gareths
    • Member since 04-18-2006, 9:31 AM
    • Posts 2
    I found that this works fine in IE but not in Firefox?

    It seems that the OnClick event isn't firing the client_OnTreeNodeChecked() script.

    Anyone got any ideas why \ a work around for this?
  • Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript

    04-25-2006, 4:17 AM
    • Member
      23 point Member
    • rcerff
    • Member since 04-25-2006, 8:00 AM
    • Posts 10

    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

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

    04-25-2006, 5:54 AM
    • Member
      10 point Member
    • gareths
    • Member since 04-18-2006, 9:31 AM
    • Posts 2

    Thanks Rolf,

    That did the trick. 

    It's certainly something I'll be aware of when developing pages for both browsers.

    Gareth

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

    04-26-2006, 3:37 PM
    • Member
      15 point Member
    • cj2210
    • Member since 04-26-2006, 7:33 PM
    • Posts 3

    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

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

    04-26-2006, 6:19 PM
    • Member
      85 point Member
    • Kiks
    • Member since 03-14-2006, 8:54 PM
    • Posts 17

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

     

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

    04-28-2006, 5:10 AM
    • Star
      12,063 point Star
    • ranganh
    • Member since 02-11-2004, 11:35 PM
    • India
    • Posts 2,428

    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.

    regards,
    Harish

    http://geekswithblogs.net/ranganh
  • Re: ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript

    05-05-2006, 12:38 PM
    • Member
      64 point Member
    • Ran Davidovitz
    • Member since 04-14-2006, 2:20 PM
    • Israel
    • Posts 12

    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;
        }
    }
     
    -Davidovitz
    http://davidovitz.blogspot.com
Page 1 of 7 (96 items) 1 2 3 4 5 Next > ... Last ยป