Check All with JQuery and a Asp.Net GridView

If you program with ASP.Net long enough you will have the following requirement:

Display a Grid on the screen with a checkbox in each row.  At the bottom of the page have “Check All” button.

If you haven’t had that, you will.  It is just a matter of time.  The traditional way of getting this to work is to use a post-back, check all of the check boxes, and return them to the browser.  Afterwards you don’t like the browser resetting itself so you wrap it in an AJAX UpdatePanel.  But that still requires a post back!  I don’t wanna post-back.  This should be easily handle-able with client side JavaScript — well, it is with a bit of JQuery.

OK, lets start with the GridView.  I’m a stickler for a few things.  One of them is Template columns.  Typically if I need to do anything interesting I use a template column.  So my GridView will look like the one below (most other columns removed for readability).  The only interesting point to note is the CssClass=”ApprovalCheckBox” in the CheckBox ItemTemplate.  Remember that for later.

GridView:

<asp:GridView ... >
   <Columns>
    <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
    <asp:TemplateField HeaderText="Approved" SortExpression="Approved">
      <ItemStyle HorizontalAlign="Center" />
      <ItemTemplate>
         <asp:CheckBox ID="chkApproved"  CssClass="ApprovalCheckBox" runat="server"  />
      </ItemTemplate>
    </asp:TemplateField>
   </Columns>
</asp:GridView>

And we need to add a Check all check box:

<asp:CheckBox ID="chkSelectAll" runat="server"  Text ="Select All" TextAlign="left"   />

First annoyance with check boxes.  You can’t hook up JavaScript directly to the OnClick event.  But you can do it from the code behind.  My version of this is here:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        chkSelectAll.Attributes.Add("onclick", "JavaScript: checkAll(this.checked);");
    }
}

OK, so now when the web page user check the “Select All” check box it will run the checkAll JavaScript function.  I defined that with JQuery.

function checkAll(isChecked) {
  $(".ApprovalCheckBox > input").each(function() {
   this.checked = isChecked;
  });
}

Now some more back ground, and as I do I will explain that code above.  When you use the Asp.Net check box it creates a span tag that wraps the checkbox’s input tag.  See code below (note: the span tag is my second annoyance with Asp.net. )

<span class="ApprovalCheckBox">
   <input id="ctl00_cphMain_gvApprovals_ctl06_chkApproved" 
          type="checkbox" 
          name="ctl00$cphMain$gvApprovals$ctl06$chkApproved" 
          onclick="JavaScript: valueChanged();" />
</span>

Of note: look where the “ApproveCheckBox” css class name is assigned — to the span, not the input.  (Note: third annoyance with Asp.Net)

One of the great powers of JQuery it to use css as a personal JavaScript select language.  So I could say give me all of the html nodes with “ApproveCheckBox” class assigned to them, and it would.  In this case that would give me a bunch of span tags, and I want input tags. 

So just like with css, if I wanted to assign specific values to the input and not the span, but I could only specify the span directly, I use the “>” operator.  So if you look at the checkAll function above, you will see the line:

$(“.ApprovalCheckBox > input”).each(function()

Which says (in JQuery), give me all the input nodes whose parent has the “ApprovalCheckBox” css class assigned to it.  So now I have just the check box nodes (which is cool).  The “each” initializes a loop to run through all of the check boxes and check/uncheck them all.

So, to everyone out there doing web development: learn JQuery.  And happy hacking.