How to check all checkboxes in Repeater Control?
The following code will demonstrate how to check all checkboxes in a Repeater control. A very simple way by using codebehind and javascript. You can download a complete example of it.
CS File:
using System;
CS File:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class ToggleCheckBoxes : System.Web.UI.Page
{
// Declare two global variables
// It will contain the concatenated string of all checkbox controls' names, which will be used at client side
string childControlArray = string.Empty;
// It is the reference to the checkbox which we have placed in the header template of Repeater which will toggle all checkboxes
CheckBox chkSelect = null;
///<summary>
/// Bind Datasouce to the Repeater
///</summary>
///<param name="sender"></param>
///<param name="e"></param>
protected void Page_Load(object sender, EventArgs e)
{
rptItems.DataSource = CreateDatasouce();
rptItems.DataBind();
}
///<summary>
/// Datasource which we will bind to the Repeater Control
///</summary>
///<returns></returns>
private ICollection CreateDatasouce()
{
// Create sample data for the Repeater control.
DataTable dt = new DataTable();
DataRow dr;
// Define the columns of the table.
dt.Columns.Add(new DataColumn("ItemName", typeof(String)));
dt.Columns.Add(new DataColumn("Qty", typeof(Int32)));
// Populate the table with sample values.
for (int i = 0; i < 9; i++)
{
dr = dt.NewRow();
dr[0] = "item " + i.ToString();
dr[1] = i;
dt.Rows.Add(dr);
}
return dt.DefaultView;
}
protected void rptItems_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Header)
{
// Get the checkbox which we have placed in the Header Template
chkSelect = e.Item.FindControl("chkSelect") as CheckBox;
}
else if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
// Get each checkbox control's ClientID and build a concatenated string
childControlArray = childControlArray + e.Item.FindControl("chkSelect").ClientID + "|";
}
else if (e.Item.ItemType == ListItemType.Footer)
{
// Add the onclick event and pass the concatenated string of controls' ClientIDs
chkSelect.Attributes.Add("onclick", "ToggleAllCheckBoxes(this,'" + childControlArray + "')");
}
}
}
ASPX File:
ASPX File:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ToggleCheckBoxes.aspx.cs"
Inherits="ToggleCheckBoxes" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<style type="text/css">
</style>
<script type="text/javascript" language="javascript">
function ToggleAllCheckBoxes(mainControl,childControlString)
{
var childControlArray = childControlString.split("|");
for(var i=0; i < childControlArray.length-1; i++)
{
document.getElementById(childControlArray[i]).checked=document.getElementById(mainControl.id).checked;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Repeater ID="rptItems" runat="server" OnItemDataBound="rptItems_ItemDataBound"
>
<HeaderTemplate>
<table style="border-right: lightseagreen 1px solid; border-top: lightseagreen 1px solid;
border-left: lightseagreen 1px solid; border-bottom: lightseagreen 1px solid">
<tr style="font-weight: bold; color: white; height: 21px; background-color: lightseagreen">
<td>
<asp:CheckBox runat="server" ID="chkSelect" Text="Select All" Font-Bold="true" />
</td>
<td>
<strong>Item Name </strong>
</td>
<td>
<strong>Quantity </strong>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:CheckBox ID="chkSelect" runat="server" />
</td>
<td>
<%# Eval("ItemName") %>
</td>
<td>
<%# Eval("Qty") %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
2 comments:
I need to add dynamic check boxes and display selected record
Just Gr8..Thanks
Post a Comment
Thank you for your Comment!