When
we want to select all check boxes on clicking header checkbox, we have to use
jQuery or Javascript to achieve the same. Please follow image to understand it
better.
In
this article I will explain how to check all check boxes in Repeater Control
using jQuery, ASP.NET (C#).
When
we click on header check box then all checkboxes will got checked and if one of
the checkbox is unchecked then Header will also got unchecked. If we check all
checkboxes then Header checkbox will got checked automatically.
Jquery script to select/
unselect all Items in Repeater in one go:
|
<script type="text/javascript">
$(function () {
$("#tblStudent
[id*=chkHeader]").click(function () {
if ($(this).is(":checked")) {
$("#tblStudent
[id*=chkRow]").attr("checked", "checked");
} else {
$("#tblStudent
[id*=chkRow]").removeAttr("checked");
}
});
$("#tblStudent
[id*=chkRow]").click(function () {
if ($("#tblStudent
[id*=chkRow]").length
== $("#tblStudent
[id*=chkRow]:checked").length)
{
$("#tblStudent
[id*=chkHeader]").attr("checked", "checked");
} else {
$("#tblStudent
[id*=chkHeader]").removeAttr("checked");
}
});
});
</script>
|
Example Using Repeater Data
Control:
|
<fieldset style="width:300px"><legend><strong>Select all Items in Repeater</strong></legend>
<div>
<asp:Repeater ID="rptStudent" runat="server">
<HeaderTemplate>
<table id="tblStudent" style="border:dotted 1px">
<thead>
<tr>
<th><asp:CheckBox ID="chkHeader" runat="server" /></th>
<th>Student Id</th>
<th>Student Name</th>
<th>Age</th>
<th>Class</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tbody>
<tr>
<td><asp:CheckBox ID="chkRow" runat="server" /></td>
<td><%#Eval("Student_Id")%></td>
<td><%#Eval("Student_Name")%></td>
<td><%#Eval("Age")%> </td>
<td><%#Eval("Class")%></td>
</tr>
</tbody>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div></fieldset>
|
Asp.Net Code(c#):
|
//create
connection with database(through web config)
SqlConnection con = new SqlConnection( ConfigurationManager.ConnectionStrings["con"].ConnectionString);
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Fill_ Repeater ();
}
}
//Fetch data from database and bind to gridview
public void Fill_Repeater()
{
if (con.State == ConnectionState.Open)
{
con.Close();
}
con.Open();
DataSet ds = new DataSet();
SqlCommand cmd = new SqlCommand();
cmd.Connection = con;
cmd.CommandText = "Fill_Dataset";
cmd.CommandType = CommandType.StoredProcedure;
SqlDataAdapter dataadapater = new SqlDataAdapter();
dataadapater.SelectCommand = cmd;
dataadapater.Fill(ds);
rptStudent.DataSource = ds;
rptStudent.DataBind();
cmd.Dispose();
con.Close();
}
|
In this article we have learnt how to slect /unselect all
checkboxes in one click using jQuery. If you find it useful please comment. If
you have any query, please feel free to ask through comments.
