how to change row background color of gridview


Create DataBase as follows:

Design .aspx as follows:

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head id="Head1" runat="server">
<title>Gridview onmouseover and onmouseout</title>
<script type="text/javascript">
var oldgridcolor;
function SetMouseOver(element) {
oldgridcolor = element.style.backgroundColor;
element.style.backgroundColor = '#FF9966';
element.style.cursor = 'pointer';
element.style.textDecoration = 'underline';
}
function SetMouseOut(element) {
element.style.backgroundColor = oldgridcolor;
element.style.textDecoration = 'none';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView runat="server" ID="gvrecords" AutoGenerateColumns="False"
HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="White"
onrowdatabound="gvrecords_RowDataBound" BackColor="#DEBA84" BorderColor="#DEBA84"
BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2">

<Columns>
<asp:BoundField DataField="UserName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="Location" HeaderText="Location" />
</Columns>
<FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />

<HeaderStyle BackColor="#A55129" ForeColor="White" Font-Bold="True"></HeaderStyle>
<PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
<RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#FFF1D4" />
<SortedAscendingHeaderStyle BackColor="#B95C30" />
<SortedDescendingCellStyle BackColor="#F1E5CE" />
<SortedDescendingHeaderStyle BackColor="#93451F" />
</asp:GridView>
</div>
</form>
</body>
</html>

Then write Following Code in CodeBehind:

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindGridview();
        }
    }
    protected void gvrecords_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes["onmouseover"] = "javascript:SetMouseOver(this)";
            e.Row.Attributes["onmouseout"] = "javascript:SetMouseOut(this)";
        }
    }
    protected void BindGridview()
    {
        SqlConnection con = new SqlConnection("Data Source=server2;user id=sa;password=123;Initial Catalog=MySampleDB");
        con.Open();
        SqlCommand cmd = new SqlCommand("select * from UserDetails", con);
        cmd.ExecuteNonQuery();
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        da.Fill(ds);
        gvrecords.DataSource = ds;
        gvrecords.DataBind();
    }

OutPut:

DownLoadSampleCode

Advertisements

One thought on “how to change row background color of gridview

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