Hi lingers,
As already said you can't access the checkbox in code behind as GridView populated in client side.
You have to use HiddenField to set the values and access in code behind.
Check the example.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src=" https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="ASPSnippets_Pager.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
GetEmployees(1);
var checked = [];
$('[id*=chkSelect]').on('click', function () {
if ($(this).is(":checked")) {
checked.push($(this).closest('tr').find('td').eq(1).html());
} else {
checked.pop($(this).closest('tr').find('td').eq(1).html());
}
$('[id*=hfCheckedIds]').val(checked.join(','));
});
});
$(document).on("click", '.Pager .page', function () {
GetEmployees(parseInt($(this).attr('page')));
});
$(document).on('click', '.view', function () {
$('[id*=hfId]').val($(this).closest('tr').find('td').eq(1).html());
});
var i = 0;
function GetEmployees(pageIndex) {
$.ajax({
type: "POST",
url: "Default.aspx/GetEmployees",
data: '{pageIndex: ' + pageIndex + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
$('[id$=gvDetails]').prepend($("<thead></thead>").append($('[id$=gvDetails]').find("tr:first"))).DataTable().destroy();
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var Employees = xml.find("job");
var row = $("[id$=gvDetails] tbody tr:last-child").eq(0).clone(true);
$("[id$=gvDetails] tbody tr").not($("[id$=gvDetails] tbody tr:first-child")).remove();
$.each(Employees, function () {
$("td", row).eq(0).find('[id*=chkSelect]').prop("checked", false);
$("td", row).eq(1).html($(this).find("EmployeeID").text());
$("td", row).eq(2).html($(this).find("TitleOfCourtesy").text());
$("td", row).eq(3).html($(this).find("FirstName").text());
$("td", row).eq(4).html($(this).find("LastName").text());
$("td", row).eq(5).html($(this).find("Title").text());
$("td", row).eq(6).html($(this).find("Address").text());
$("td", row).eq(7).html($(this).find("City").text());
$("td", row).eq(8).html($(this).find("Region").text());
$("td", row).eq(9).html($(this).find("PostalCode").text());
$("td", row).eq(10).html($(this).find("Country").text());
$("td", row).eq(11).html($(this).find("HomePhone").text());
$("[id$=gvDetails]").append(row);
row = $("[id$=gvDetails] tbody tr:last-child").eq(0).clone(true);
});
$("[id$=gvDetails] tbody tr:first-child").remove();
if (i != 0) {
$('[id$=gvDetails]').DataTable({
"paging": false,
"info": false
});
} else {
$('[id$=gvDetails]')
.prepend($("<thead></thead>").append($('[id$=gvDetails]').find("tr:first")))
.DataTable({
"paging": false,
"info": false
});
}
i++;
var pager = xml.find("Pager");
$(".Pager").ASPSnippets_Pager({
ActiveCssClass: "current",
PagerCssClass: "pager",
PageIndex: parseInt(pager.find("PageIndex").text()),
PageSize: parseInt(pager.find("PageSize").text()),
RecordCount: parseInt(pager.find("RecordCount").text())
});
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
}
</script>
<script type="text/javascript">
function ShowPopup() {
setTimeout(function () {
$("#dialog").dialog({
title: "VIEW JOB DETAILS",
width: 300,
height: 200,
buttons: {
Close: function () {
$(this).dialog('close');
}
},
modal: true
});
$("#dialog").parent().appendTo($("form:first"));
}, 2000);
};
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:HiddenField ID="hfId" runat="server" />
<asp:HiddenField ID="hfCheckedIds" runat="server" />
<asp:GridView ID="gvDetails" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="EmployeeID" HeaderText="ID" />
<asp:BoundField DataField="TitleOfCourtesy" HeaderText="Title" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="Title" HeaderText="Title" />
<asp:BoundField DataField="Address" HeaderText="Address" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:BoundField DataField="Region" HeaderText="Region" />
<asp:BoundField DataField="PostalCode" HeaderText="Code" />
<asp:BoundField DataField="Country" HeaderText="Country" />
<asp:BoundField DataField="HomePhone" HeaderText="Phone" />
<asp:TemplateField>
<ItemTemplate>
<asp:Button CssClass="view" Text="View" ID="Inkview" runat="server" OnClick="Inkview_Click" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Button Text="Edit" ID="lnkView1" runat="server" OnClick="Inkview_Click1" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<div class="Pager">
</div>
<div id="dialog" style="display: none;">
<asp:Label ID="lblId" runat="server" />
</div>
<asp:Button Text="Save" runat="server" OnClick="ImageButton4_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
GetEmployees(1);
}
});
};
</script>
</form>
</body>
</html>
Code
private static int PageSize = 5;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindDummyRow();
}
}
private void BindDummyRow()
{
DataTable dummy = new DataTable();
dummy.Columns.Add("EmployeeID");
dummy.Columns.Add("TitleOfCourtesy");
dummy.Columns.Add("FirstName");
dummy.Columns.Add("LastName");
dummy.Columns.Add("Title");
dummy.Columns.Add("Address");
dummy.Columns.Add("City");
dummy.Columns.Add("Region");
dummy.Columns.Add("PostalCode");
dummy.Columns.Add("Country");
dummy.Columns.Add("HomePhone");
dummy.Rows.Add();
gvDetails.DataSource = dummy;
gvDetails.DataBind();
}
[WebMethod]
public static string GetEmployees(int pageIndex)
{
string query = "[GetEmployeePageWise]";
SqlCommand cmd = new SqlCommand(query);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
cmd.Parameters.AddWithValue("@PageSize", PageSize);
cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
return GetData(cmd, pageIndex).GetXml();
}
private static DataSet GetData(SqlCommand cmd, int pageIndex)
{
string strConnString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
using (SqlConnection con = new SqlConnection(strConnString))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
sda.Fill(ds, "job");
DataTable dt = new DataTable("Pager");
dt.Columns.Add("PageIndex");
dt.Columns.Add("PageSize");
dt.Columns.Add("RecordCount");
dt.Rows.Add();
dt.Rows[0]["PageIndex"] = pageIndex;
dt.Rows[0]["PageSize"] = PageSize;
dt.Rows[0]["RecordCount"] = cmd.Parameters["@RecordCount"].Value;
ds.Tables.Add(dt);
return ds;
}
}
}
}
protected void Inkview_Click(object sender, EventArgs e)
{
int id = 0;
int.TryParse(hfId.Value, out id);
Session["DatakeyValue"] = id;
lblId.Text = "Select Employee ID : " + Session["DatakeyValue"].ToString();
ScriptManager.RegisterStartupScript((sender as Control), this.GetType(), "Popup", "ShowPopup();", true);
}
protected void Inkview_Click1(object sender, EventArgs e)
{
string[] ids = hfCheckedIds.Value.Split(',');
Session["id"] = ids.ToList();
Response.Redirect("Send.aspx");
}
protected void ImageButton4_Click(object sender, EventArgs e)
{
string ids = hfCheckedIds.Value;
foreach (string id in ids.Split(','))
{
// Do rest of task.
}
ClientScript.RegisterClientScriptBlock(this.GetType(), "", "alert('" + ids + "')", true);
}
