Changing the row color of thr gridview

Nov 4 2011 12:36 AM

Hi,
I am developing an application in that grid view with checkbox and textbox controls are there. after selecting checkbox the corresponding row will activated and after click on update button it will updates the recordes in database if click on delete button the records in that row get deleted.

Now i have a change color button, after selecting ckeckbox and click on change color button the color of the selected row should change. iam not getting how to do this. update and delete process is happening but color changing not happening. please help me how to change the color of the gridview row after clicking a button.

my .aspx code is

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="Default6" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!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>Multiple or bulk Edit update and delete using checkbox in gridview </title>

<script type="text/javascript" language="javascript">
function DeleteConfirmation() {
if (confirm("Are you sure, you want to delete selected records ?") == true)
return true;
else
return false;

function ChangeRowColor(row) {
//If last clicked row and the current clicked row are same
if (previousRow == row)
return; //do nothing
//If there is row clicked earlier
else if (previousRow != null)
//change the color of the previous row back to white
document.getElementById(previousRow).style.backgroundColor = "#ffffff";

//change the color of the current row to light yellow

document.getElementById(row).style.backgroundColor = "#ffffda";
//assign the current row id to the previous row id
//for next row to be clicked
previousRow = row;
}

}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" DataSourceID="SqlDataSource1" AutoGenerateColumns="false" DataKeyNames="ID" OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" AutoPostBack="true" OnCheckedChanged="chkSelect_CheckedChanged"/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID"/>
<asp:TemplateField HeaderText="Name" SortExpression="Name">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:TextBox ID="txtName" runat="server" Text='<%# Bind("Name") %>' ReadOnly="true" ForeColor="Blue" BorderStyle="none" BorderWidth="0px"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Location" SortExpression="Location">
<EditItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Location") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:TextBox ID="txtLocation" runat="server" Text='<%# Bind("Location") %>' ReadOnly="true" ForeColor="Blue" BorderStyle="none" BorderWidth="0px"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MBOMexcelConnectionString4 %>"
SelectCommand="SELECT [ID], [Name], [Location] FROM [Test]" DeleteCommand="DELETE FROM Test WHERE (ID = @ID)" UpdateCommand="UPDATE [test] SET [Name] = @Name, [Location] = @Location WHERE [ID] = @ID">
<DeleteParameters>
<asp:Parameter Name="ID" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="Name" />
<asp:Parameter Name="Location" />
<asp:Parameter Name="ID" />
</UpdateParameters>
</asp:SqlDataSource>
<br />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
                                                                        
<br />
<asp:Button ID="btnUpdate" runat="server" OnClick="btnUpdate_Click" Text="Update" />
<asp:ConfirmButtonExtender ID="btnUpdate_ConfirmButtonExtender" runat="server"
ConfirmText="Are you sure you want to update?" Enabled="True" TargetControlID="btnUpdate">
</asp:ConfirmButtonExtender>
                     
<asp:Button ID="btnDelete" runat="server" OnClick="btnDelete_Click" OnClientClick="return DeleteConfirmation();" Text="Delete" />
                   
<asp:Button ID="Button1" runat="server" Text="Change color" />
<br /><br />
</div>
</form>
</body>
</html>

my .aspx.cs code is

using System;
using System.Data;
using System.Configuration;
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;
using System.Data.SqlClient;
using System.Collections.Specialized;
using System.Text;
using System.Web.UI.WebControls;

public partial class Default6 : System.Web.UI.Page
{
string strConnection = ConfigurationManager.ConnectionStrings["MBOMexcelConnectionString4"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{

}

private bool tableCopied = false;
private DataTable originalTable;

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{

if (!tableCopied)
{
originalTable = ((System.Data.DataRowView)e.Row.DataItem).Row.Table.Copy();
ViewState["originalValues"] = originalTable;
tableCopied = true;
}
}
}
protected void btnUpdate_Click(object sender, EventArgs e)
{
originalTable = (DataTable)ViewState["originalValues"];
foreach (GridViewRow row in GridView1.Rows)
if (IsRowModified(row))
{
GridView1.UpdateRow(row.RowIndex, false);
}
tableCopied = false;
GridView1.DataBind();
}

protected bool IsRowModified(GridViewRow row)
{
int currentID;
string currentName;
string currentLocation;

currentID = Convert.ToInt32(GridView1.DataKeys[row.RowIndex].Value);

currentName = ((TextBox)row.FindControl("txtName")).Text;
currentLocation = ((TextBox)row.FindControl("txtLocation")).Text;

System.Data.DataRow newRow = originalTable.Select(String.Format("ID = {0}", currentID))[0];

if (!currentName.Equals(newRow["Name"].ToString())) { return true; }
if (!currentLocation.Equals(newRow["Location"].ToString())) { return true; }

return false;

}
protected void chkSelect_CheckedChanged(object sender, EventArgs e)
{
CheckBox chkTest = (CheckBox)sender;
GridViewRow grdRow = (GridViewRow)chkTest.NamingContainer;
TextBox txtname = (TextBox)grdRow.FindControl("txtName");
TextBox txtlocation = (TextBox)grdRow.FindControl("txtLocation");
if (chkTest.Checked)
{
txtname.ReadOnly = false;
txtlocation.ReadOnly = false;
txtname.ForeColor = System.Drawing.Color.Black;
txtlocation.ForeColor = System.Drawing.Color.Black;
}
else
{
txtname.ReadOnly = true;
txtlocation.ReadOnly = true;
txtname.ForeColor = System.Drawing.Color.Blue;
txtlocation.ForeColor = System.Drawing.Color.Blue;
}
}
protected void btnDelete_Click(object sender, EventArgs e)
{

originalTable = (DataTable)ViewState["originalValues"];
foreach (GridViewRow row in GridView1.Rows)
{

bool result = ((CheckBox)row.FindControl("chkSelect")).Checked;

//int choreID = Convert.ToInt32(row.Cells[0].Text);
//UpdateChores(choreID, result);

CheckBox chkDelete = (CheckBox)row.FindControl("chkSelect");
if (chkDelete.Checked)
{
GridView1.DeleteRow(row.RowIndex);
}
}
tableCopied = false;
GridView1.DataBind();
}

}

Answers (12)

Formview control

How can we handle concurreny in asp.net web application?