Change color of alternate rows of Data GridView in Asp.Net

In this article, I will show you how to set alternative color for gridview rows and columns in asp.net.


Introduction

Sometime we may have a cosmetic requirement in gridview control to set alternative row and column color in asp.net applications while displaying the data to the user. It’s easy and simple way to set alternative color in gridview control, follow the below steps and code snippets for this.

Create Asp.Net project


Create an asp.net project and format the aspx page as like below. I have added two gridview controls to show this sample. One for gridview alternative row color changes and other one is alternative column color change.

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

<!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div><br />
    <asp:GridView ID="GridVwColcolorchange" runat="server" AutoGenerateColumns="False"
            Font-Names="Verdana" PageSize="5" Width="75%" BorderColor="#CCCCCC" BorderStyle="Solid"
            BorderWidth="1px">
            <PagerStyle BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px" />
            <HeaderStyle Height="30px" Font-Size="15px" BorderColor="#CCCCCC" BorderStyle="Solid"
                BorderWidth="1px" />
            <RowStyle Height="20px" Font-Size="13px" BorderColor="#CCCCCC" BorderStyle="Solid"
                BorderWidth="1px" />
            <Columns>
                <asp:BoundField DataField="UserId" HeaderText="Employee ID" HeaderStyle-BackColor="#C4C4C4"
                    ItemStyle-BackColor="#E2E2E2" />
                <asp:BoundField DataField="Name" HeaderText="Employee Name" HeaderStyle-BackColor="#FFB07F"
                    ItemStyle-BackColor="#FFCAA8" />
                <asp:BoundField DataField="Designation" HeaderText="Job title" HeaderStyle-BackColor="#C4C4C4"
                    ItemStyle-BackColor="#E2E2E2" />
                <asp:BoundField DataField="Department" HeaderText="Department" HeaderStyle-BackColor="#FFB07F"
                    ItemStyle-BackColor="#FFCAA8" />
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>
</html>


Alternative coloumn color


Above second gridview name would be GridVwColcolorchange, in this gridview i have added HeaderStyle-BackColor and ItemStyle-BackColor properties in boundfield. The HeaderStyle-BackColor property will be used to change specific header background color and ItemStyle- BackColor would be used to change specific column backgrounf color.
<asp:BoundField DataField="Emp_Name" HeaderText="Employee Name" HeaderStyle-BackColor="#C4C4C4"
ItemStyle-BackColor="#E2E2E2" />
<asp:BoundField DataField="Emp_id" HeaderText="Employee ID" HeaderStyle-BackColor="#FFB07F"
ItemStyle-BackColor="#FFCAA8" />
Here alternatively I have changed specific header and associated column color. This is the one of way to set alternative header and column color in the gridview control.

Code behind part


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

public partial class ValueAgainstNull : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindData();
        }
    }
    protected void BindData()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("UserId", typeof(Int32));
        dt.Columns.Add("Name", typeof(string));
        dt.Columns.Add("Designation", typeof(string));
        dt.Columns.Add("Department", typeof(string));

        DataRow dr = dt.NewRow();
        dr["UserId"] = 1;
        dr["Name"]="Aayush";
        dr["Designation"] = "Associate Technical Consultant";
        dr["Department"] = null;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["UserId"] = 2;
        dr["Name"] = "Anish";
        dr["Designation"] = null;
        dr["Department"] = null;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["UserId"] = 3;
        dr["Name"] = "Manish";
        dr["Designation"] = null;
        dr["Department"] = "Navision";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["UserId"] = 4;
        dr["Name"] = "Ravish";
        dr["Designation"] = "Tech Lead";
        dr["Department"] = "CRM";
        dt.Rows.Add(dr);

        for (int i = 0; i < dt.Rows.Count; i++)
        {
            for (int j = 0; j < dt.Columns.Count; j++)
            {
                if (string.IsNullOrEmpty(dt.Rows[i][j].ToString()))
                {
                    dt.Rows[i][j] = "Data Not Available";
                }
            }
        }
        GridVwColcolorchange.DataSource = dt;
        GridVwColcolorchange.DataBind();
    }
}

Above code behind part would be used to bind the few sample records with gridview control.



Comments

Popular posts from this blog

How to show enlarge image when mouse hover on image or link in Asp.Net(c#) using JavaScript

StateCode and StatusCode Values for mostly used entities in Microsoft Dynamics CRM 2013

How to add custom filter lookup field based on OptionSet field selection in Dynamics CRM.

go to top image