Create GridView / Repeater Control and bind data

Go through Repeater control with custom paging which creates a Repeater control, read data from Northwind database Customer table. We will add Header and ItemTemplate checkbox to this repeater. If you do not want to use Repeater you can use ASP.NET GridView. You can also try with jQuery AutoComplete TextBox to find customers from specific country.

Add HeaderTemplate and ItemTemplate Checkbox in GridView / Repeater control

Open solution created in previous step and open Customers.aspx page. Add CheckBox chkCheckAll to repCustomers GridView / Repeater control. Checking or unchecking this checkbox will change the ItemTemplate check box status.

Add ASP.NET CheckBox control to Repeater repCustomers's ItemTemplate.

Your HTML for Repeater will look like this.

<asp:Repeater ID="repCustomers" runat="server" EnableViewState="false"> <HeaderTemplate> <table> <tr> <th> <asp:CheckBox ID="chkCheckAll" runat="server" CssClass="chkHeader" /> </th> <th> CustomerID </th> <%-- other column fields--%> </tr> </HeaderTemplate> <ItemTemplate> <tr> <td> <asp:CheckBox ID="chkCustomer" runat="server" CssClass="chkItem" /> </td> <td> <%# ((NorthwindApp.Customer)Container.DataItem).CustomerID %> </td> <%-- other column fields--%> </tr> </ItemTemplate> </asp:Repeater>

jQuery function for check or uncheck all

Create new JavaScript file with name Customer.js. Write a function which will catch chkCheckAll click event. It will do the necessary check / uncheck operation depending on chkCheckAll status.

Below jQuery function will evaluate chkCheckAll and if its checked then other ItemTemplate CheckBoxes will be checked.

$(document).ready(function () { $('#MainContent_repCustomers_chkCheckAll').click(function () { if ($(this).is(':checked')) { $("div#customer table tbody tr td input:[type='checkbox']:not(:checked)").each(function () { $(this).attr('checked', true); }); } else { $("div#customer table tbody tr td input:[type='checkbox']:checked").each(function () { $(this).attr('checked', false); }); } }); });

Check / uncheck all by using CssClass: As we have set CssClass property to Header and ItemTemplate checkboxes. We can use jQuery selectors to select controls and check / uncheck all ItemTemplate checkboxes.

Below jQuery function select CheckBox control with CssClass chkHeader and if it is checked then selects all CheckBox with CssClass chkItem else it will make all CheckBoxes uncheck.

$(document).ready(function () { $('.chkHeader input').click(function () { $(".chkItem input").each(function () { $(this).attr('checked', $('.chkHeader input').attr('checked')); }); }); });

Add Reference to JavaScript File

Your Customers.js file is ready. Open Site.Master file and below reference to JavaScript file.

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="Scripts/Customer.js" type="text/javascript"></script>

Download source code