Check/Uncheck all checkbox in gridview

The following snippet will demostrate how to check/uncheck all checkboxes in a Gridview. Using javascript will take few lines of code to accomplish the task. But using Jquery minimizes the number of lines to code to implement.

Add reference to the jquery library on the page,

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.min.js" type="text/javascript"></script>

The script to check/uncheck the gridview checkboxes and the html code would be,

<script type="text/javascript">

function ToggleProductSelect(ctrl, chk) {
            $('#<%=gvProducts.ClientID %> :checkbox[id$=' + chk + ']').attr('checked', ctrl.checked);
        }
</script>


<div style="clear:both;">
                <asp:GridView ID="gvProducts" runat="server" AutoGenerateColumns="False"
                    DataKeyNames="ProductId" HeaderStyle-CssClass="header-column">
                    <Columns>
                        <asp:TemplateField>
                            <HeaderTemplate>
                                <input id="cbSelectAll" runat="server" type="checkbox" onclick="javascript:ToggleProductSelect(this,'cbSelect');" />
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:CheckBox ID="cbSelect" runat="server" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:BoundField DataField="ProductName" HeaderText="Product Name" />
                        <asp:BoundField DataField="Category" HeaderText="Category" />
                        <asp:BoundField DataField="Price" HeaderText="Price" />
                        <asp:BoundField DataField="UnitsInStock" HeaderText="Units In Stock" />
                        <asp:BoundField DataField="Supplier" HeaderText="Supplier" />
                        <asp:CommandField SelectText="View" ShowSelectButton="True" />
                    </Columns>
                    <EmptyDataTemplate>
                        <div>No Products found.</div>
                    </EmptyDataTemplate>
                    <HeaderStyle CssClass="header-column" />
                </asp:GridView>
            </div>

C#

protected void Page_Load(object sender, EventArgs e)
{
        gvProducts.DataSource = GetProducts();
        gvProducts.DataBind();
}


public DataTable GetProducts()
        {
            DataTable dtProducts = new DataTable();
            SqlDataAdapter adpProducts = new SqlDataAdapter("GetProducts", sqlcon);
            adpProducts.SelectCommand.CommandType = CommandType.StoredProcedure;
            try
            {
                adpProducts.Fill(dtProducts);
                return dtProducts;
            }
            catch (Exception)
            {
                throw;
            }
            finally
            {
                sqlcon.Close();
            }
        }