How to Change the color of gridview rows on basis of Click?


Step1: Write this javascript code in Default.aspx page

<script language=”javascript”>

function ChangeStyle(rowId, linkId)
{
switch (document.getElementById(linkId).innerHTML)
{
case “Select”:

document.getElementById(rowId).style.background = “#CCFFCC”;
document.getElementById(linkId).innerHTML = “DeSelect”;

break;

case “DeSelect”:

document.getElementById(rowId).style.background = “#FFFFFF”;
document.getElementById(linkId).innerHTML = “Select”;

break;
}

return false;
}

</script>

Step 2: Click on RowDataBound Event and write this code in code behind file

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
//refrence control inside gridview
LinkButton LinkButton1 = (LinkButton)e.Row.FindControl(“LinkButton1”);

//add onclick attributes to linkbutton
LinkButton1.Attributes.Add(“onclick”, “return ChangeStyle(‘” + e.Row.ClientID + “‘,'” + LinkButton1.ClientID + “‘)”);
}
}

Complete Html code is like this

<%@ Page Title=”” Language=”C#” MasterPageFile=”~/MasterPage.master” AutoEventWireup=”true” CodeFile=”Default2.aspx.cs” Inherits=”Default2″ %>

<asp:Content ID=”Content2″ ContentPlaceHolderID=”ContentPlaceHolder1″ Runat=”Server”>

<center>

<asp:GridView ID=”GridView1″ runat=”server” AutoGenerateColumns=”False”
onrowdatabound=”GridView1_RowDataBound” Width=”70%”>
<Columns>
<asp:TemplateField HeaderText=”Select”>
<ItemTemplate>
<asp:LinkButton ID=”LinkButton1″ runat=”server”>Select</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”Name”>
<ItemTemplate>
<asp:Label ID=”Label1″ runat=”server” Text='<%# Eval(“EmpName”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”Checkbox”>
<ItemTemplate>
<asp:CheckBox ID=”CheckBox1″ runat=”server” />
</ItemTemplate>
<ItemStyle HorizontalAlign=”Center” />
</asp:TemplateField>

</Columns>
</asp:GridView>
</center>

<script language=”javascript”>

function ChangeStyle(rowId, linkId)
{
switch (document.getElementById(linkId).innerHTML)
{
case “Select”:

document.getElementById(rowId).style.background = “#CCFFCC”;
document.getElementById(linkId).innerHTML = “DeSelect”;

break;

case “DeSelect”:

document.getElementById(rowId).style.background = “#FFFFFF”;
document.getElementById(linkId).innerHTML = “Select”;

break;
}

return false;
}

</script>

</asp:Content>

Complete Code behind is like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;

public partial class Default2 : System.Web.UI.Page
{
SqlConnection con = new SqlConnection(“Data Source=Test;Initial Catalog=Test;Integrated Security=True”);
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{

fillGrid();
}
}

protected void fillGrid()
{
SqlDataAdapter da = new SqlDataAdapter(“Select EmpName from tblEmp1”, con);
DataTable dt = new DataTable();
da.Fill(dt);
GridView1.DataSource = dt;
GridView1.DataBind();

}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
//refrence control inside gridview
LinkButton LinkButton1 = (LinkButton)e.Row.FindControl(“LinkButton1”);

//add onclick attributes to linkbutton
LinkButton1.Attributes.Add(“onclick”, “return ChangeStyle(‘” + e.Row.ClientID + “‘,'” + LinkButton1.ClientID + “‘)”);
}
}
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: