Checking all checkboxes in ASP.NET Gridview, multiple tables on the same page

Question

Alright, so there is tons of documentation out there that I have filed through and attempted many times throughout the day and can not seem to nail this issue down. I have multiple Gridviews on one page (inside of collapsible panels), of which two have a column (the 7th column, from 0) that contains checkboxes. I want to enable the user to select/deselect all of the checkboxes using a checkbox field in the header row. I prefer to accomplish this using Javascript, but can't seem to be able to get there. This is the way I prefer to go since it seems that it would work with multiple tables on the page (correct me if I am wrong). Using Firebug, there were no errors, it just simply isn't working and I can't find out why.

Here is my ASP.NET code:

        <asp:GridView ID="gvSerialNumberDetails" CellPadding="5" runat="server" CssClass="wind" AutoGenerateColumns="false">
            <HeaderStyle CssClass="windHeader" />
            <Columns>
                <asp:BoundField DataField="Description" HeaderText="Description" />
                <asp:BoundField DataField="Serial Number" HeaderText="Serial Number" />
                <asp:BoundField DataField="Facility" HeaderText="Facility" />
                <asp:BoundField DataField="Department" HeaderText="Department" />
                <asp:BoundField DataField="EmpID" HeaderText="EmpID" />
                <asp:BoundField DataField="Configuration" HeaderText="Config" />
                <asp:BoundField DataField="Error" HeaderText="Errors" />
                <asp:TemplateField>
                    <HeaderTemplate> 
                        <asp:CheckBox ID="chkHeader" ToolTip="Select All" runat="server" 
                            onclick="changeAllCheckBoxes(this)" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="chkItem" runat="server" ToolTip="Select this item" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

And here is my Javascript:

<script type="text/javascript" language="javascript">
    function changeAllCheckBoxes(sender) {
    var gridViewRows = GetParentElementByTagName(sender, "table").rows;
        for (var i = 1; i < gridViewRows.length; ++i) {
            gridViewRows[i].cells[7].childNodes[0].checked = sender.checked;
        }
    }

    function GetParentElementByTagName(element, tagName) {
        var element = element;
        while (element.tagName != tagName)
            element = element.parentNode;
        return element;
    }
</script>

UPDATE

Alright, so I AM getting an error now. "TypeError: element is null [Break On This Error] </tr><tr>" How do I go about fixing this? It seems like it should climb up the DOM and find the table element, but doesn't.

I don't think that the parent element of that checkbox is the <tr> - have you made sure that it is? — David Brunow
– David Brunow, Commented Dec 4, 2012 at 5:57
David, the GetParentElementByTagName uses a while loop which is supposed to creep up the DOM from the selected check box until it finds the element with a tagname of "table". — Josh McKearin
– Josh McKearin, Commented Dec 4, 2012 at 6:07
Alright, so I AM getting an error now. "TypeError: element is null [Break On This Error] </tr><tr>" How do I go about fixing this? It seems like it should climb up the DOM and find the table element, but doesn't. — Josh McKearin
– Josh McKearin, Commented Dec 4, 2012 at 6:20

Chirag Babaria · Accepted Answer · 2012-12-04 08:29:29Z

1

Please try below javascript function insdead of yours. I check this functions and it work perfect in my code. Let me know if you find any difficulty.

    function changeAllCheckBoxes(objparentcheckbox)
   {              
      var HeaderCheckboxControl = objparentcheckbox
      var table = getParentByTagName(HeaderCheckboxControl, 'table');

      //get all the control of the type INPUT in the base control.
      var Inputs = table.getElementsByTagName("input"); 

      for(var n = 0; n < Inputs.length; ++n)
         if(Inputs[n].type == 'checkbox')
         {
            Inputs[n].checked = HeaderCheckboxControl.checked;        
         }        
      return false;
   }
function getParentByTagName(obj, tag)
{
    var obj_parent = obj.parentNode;
    if (!obj_parent) return false;
    if (obj_parent.tagName.toLowerCase() == tag) return obj_parent;
    else return getParentByTagName(obj_parent, tag);
}

Jquery Alternation for above method is as below:

function changeAllCheckBoxes(objparentcheckbox)
{
    if(objparentcheckbox.checked)
     $(objparentcheckbox).closest('table').find('input[type=checkbox]').attr('checked', 'checked');        
    else    
     $(objparentcheckbox).closest('table').find('input[type=checkbox]').removeAttr('checked', 'checked');            
}

here i add jsfiddle link for demo : Demo link

edited Dec 4, 2012 at 8:29

answered Dec 4, 2012 at 6:23

Chirag Babaria

1199 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Josh McKearin Over a year ago

Chirag, that works great! However, if you could, explain why this is a better option. Thanks.

Chirag Babaria Over a year ago

Hi In your function you get list of table rows and then inside that you find your column and then node. While in my code i directly get checkbox by input tag name checkbox from table so the chances of error is less Thats why this is the best way to find checkbox. You can also use jquery to simplyfy it. Please mark it as right answer if your find it correct.

Josh McKearin Over a year ago

Marked as answer. Thank you for that explanation as it makes perfect sense.

Josh McKearin Over a year ago

Could you also post the jQuery equivalent to the above as well? It would make this answer perfect for those who come across this post while searching.

Chirag Babaria Over a year ago

you can user below function with jquery. This single function will do the work. function changeAllCheckBoxes(objparentcheckbox) { if(objparentcheckbox.checked) $(objparentcheckbox).closest('table').find('input[type=checkbox]').attr('checked', 'checked'); else $(objparentcheckbox).closest('table').find('input[type=checkbox]').removeAttr('checked', 'checked'); } . here i add jsfiddle link for demo : jsfiddle.net/9KQH7/11

Collectives™ on Stack Overflow

Checking all checkboxes in ASP.NET Gridview, multiple tables on the same page

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related