This Way:
First Page HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function Check_Click(objRef) {
//Get the Row based on checkbox
var row = objRef.parentNode.parentNode;
if (objRef.checked) {
//If checked change color to Aqua
row.style.backgroundColor = "aqua";
}
else {
//If not checked change back to original color
if (row.rowIndex % 2 == 0) {
//Alternating Row Color
row.style.backgroundColor = "#C2D69B";
}
else {
row.style.backgroundColor = "white";
}
}
//Get the reference of GridView
var GridView = row.parentNode;
//Get all input elements in Gridview
var inputList = GridView.getElementsByTagName("input");
for (var i = 0; i < inputList.length; i++) {
//The First element is the Header Checkbox
var headerCheckBox = inputList[0];
//Based on all or none checkboxes
//are checked check/uncheck Header Checkbox
var checked = true;
if (inputList[i].type == "checkbox" && inputList[i] != headerCheckBox) {
if (!inputList[i].checked) {
checked = false;
break;
}
}
}
headerCheckBox.checked = checked;
}
function checkAll(objRef) {
var GridView = objRef.parentNode.parentNode.parentNode;
var inputList = GridView.getElementsByTagName("input");
for (var i = 0; i < inputList.length; i++) {
//Get the Cell To find out ColumnIndex
var row = inputList[i].parentNode.parentNode;
if (inputList[i].type == "checkbox" && objRef != inputList[i]) {
if (objRef.checked) {
//If the header checkbox is checked
//check all checkboxes
//and highlight all rows
row.style.backgroundColor = "aqua";
inputList[i].checked = true;
}
else {
//If the header checkbox is checked
//uncheck all checkboxes
//and change rowcolor back to original
if (row.rowIndex % 2 == 0) {
//Alternating Row Color
row.style.backgroundColor = "#C2D69B";
}
else {
row.style.backgroundColor = "white";
}
inputList[i].checked = false;
}
}
}
}
function MouseEvents(objRef, evt) {
var checkbox = objRef.getElementsByTagName("input")[0];
if (evt.type == "mouseover") {
objRef.style.backgroundColor = "orange";
}
else {
if (checkbox.checked) {
objRef.style.backgroundColor = "aqua";
}
else if (evt.type == "mouseout") {
if (objRef.rowIndex % 2 == 0) {
//Alternating Row Color
objRef.style.backgroundColor = "#C2D69B";
}
else {
objRef.style.backgroundColor = "white";
}
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlCountries" runat="server" AutoPostBack="true" OnSelectedIndexChanged="SelectCustomers">
<asp:ListItem Text="SELECT" />
<asp:ListItem Text="USA" />
<asp:ListItem Text="Germany" />
</asp:DropDownList>
<asp:GridView ID="GridView1" runat="server" HeaderStyle-CssClass="header" AutoGenerateColumns="false"
Font-Names="Arial" OnRowDataBound="RowDataBound" Font-Size="11pt" AlternatingRowStyle-BackColor="#C2D69B">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="checkAll" runat="server" onclick="checkAll(this);" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" onclick="Check_Click(this)" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="150px" DataField="CustomerID" HeaderText="CustomerID" />
<asp:BoundField ItemStyle-Width="150px" DataField="City" HeaderText="City" />
<asp:BoundField ItemStyle-Width="150px" DataField="Country" HeaderText="Country" />
<asp:BoundField ItemStyle-Width="150px" DataField="PostalCode" HeaderText="PostalCode" />
</Columns>
</asp:GridView>
<asp:Button ID="btnGetSelected" runat="server" Text="Get selected records and pass to second page"
OnClick="GetSelectedRecords" />
</div>
</form>
</body>
</html>
First Page C#:
private string CustomerId
{
get
{
return Server.UrlDecode(Request.QueryString["Id"]);
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
string strQuery;
SqlCommand cmd = new SqlCommand();
if (Session["Country"] != null)
{
this.ddlCountries.SelectedItem.Text = Session["Country"].ToString();
strQuery = "select top 10 * from customers WHERE Country = @Country";
cmd = new SqlCommand(strQuery);
cmd.Parameters.AddWithValue("@Country", Session["Country"].ToString());
}
else
{
strQuery = "select top 10 * from customers";
cmd = new SqlCommand(strQuery);
}
DataTable dt = GetData(cmd);
GridView1.DataSource = dt;
GridView1.DataBind();
if (this.CustomerId != null)
{
this.Checked();
}
}
}
protected void SelectCustomers(object sender, EventArgs e)
{
string strQuery = "select top 10 * from customers WHERE Country = @Country";
SqlCommand cmd = new SqlCommand(strQuery);
cmd.Parameters.AddWithValue("@Country", this.ddlCountries.SelectedItem.Text);
Session["Country"] = this.ddlCountries.SelectedItem.Text;
DataTable dt = GetData(cmd);
GridView1.DataSource = dt;
GridView1.DataBind();
}
protected void RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "MouseEvents(this, event)");
e.Row.Attributes.Add("onmouseout", "MouseEvents(this, event)");
}
}
private DataTable GetData(SqlCommand cmd)
{
DataTable dt = new DataTable();
String strConnString = System.Configuration.ConfigurationManager.ConnectionStrings["Norhtwind"].ConnectionString;
SqlConnection con = new SqlConnection(strConnString);
SqlDataAdapter sda = new SqlDataAdapter();
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
try
{
con.Open();
sda.SelectCommand = cmd;
sda.Fill(dt);
return dt;
}
catch (Exception ex)
{
//Response.Write(ex.Message);
//return null;
throw ex;
}
finally
{
con.Close();
sda.Dispose();
con.Dispose();
}
}
private void Checked()
{
foreach (GridViewRow row in GridView1.Rows)
{
if (row.RowType == DataControlRowType.DataRow)
{
CheckBox chkRow = (row.Cells[0].FindControl("CheckBox1") as CheckBox);
if (row.Cells[1].Text == this.CustomerId)
{
chkRow.Checked = true;
}
}
}
}
protected void GetSelectedRecords(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[4] { new DataColumn("CustomerID"),
new DataColumn("City"),
new DataColumn("Country"),
new DataColumn("PostalCode") });
foreach (GridViewRow row in GridView1.Rows)
{
if (row.RowType == DataControlRowType.DataRow)
{
CheckBox chkRow = (row.Cells[0].FindControl("CheckBox1") as CheckBox);
if (chkRow.Checked)
{
string customerId = row.Cells[1].Text;
string city = row.Cells[2].Text;
string postalCode = row.Cells[3].Text;
string country = row.Cells[4].Text;
dt.Rows.Add(customerId, city, country, postalCode);
}
}
}
Session["Table"] = dt;
Response.Redirect("GridWithEdit.aspx");
}
Second Page:
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvSelected" runat="server" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
AutoGenerateColumns="false">
<Columns>
<asp:BoundField ItemStyle-Width="150px" DataField="CustomerID" HeaderText="CustomerID" />
<asp:BoundField ItemStyle-Width="150px" DataField="City" HeaderText="City" />
<asp:BoundField ItemStyle-Width="150px" DataField="Country" HeaderText="Country" />
<asp:BoundField ItemStyle-Width="150px" DataField="PostalCode" HeaderText="PostalCode" />
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btnEdit" runat="server" Text="Edit" CommandArgument='<%# Eval("CustomerID") %>'
PostBackUrl='<%# Eval("CustomerId","~/DataContainers/GridViewWithCheckBox.aspx?id={0}") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
Second Page C#:
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
if (Session["Table"] != null)
{
DataTable dt = new DataTable();
dt = (DataTable)Session["Table"];
gvSelected.DataSource = dt;
gvSelected.DataBind();
}
}
}
SQL:
Install Microsoft Northwind and Pubs Sample databases in SQL Server Management Studio
Thank You.