Set Row and Alternate Row Color in ASP.NET GridView

In web development, presenting tabular data in an organized and visually appealing manner is crucial for user experience. ASP.NET provides the GridView control, a powerful tool for displaying data in a tabular format. One common requirement is to apply alternate row colors to improve readability and aesthetics. In this blog post, we'll explore 3 different methods to achieve alternate row colors in an ASP.NET GridView control, catering to various preferences and scenarios.

1. Using AlternatingRowStyle Property: The simplest method is to utilize the AlternatingRowStyle property of the GridView control. By setting the BackColor property, you can specify the background color for alternating rows directly in the markup. This method requires minimal code and is ideal for quick implementations.

Method 1:

<asp:GridView ID="GridView1" runat="server" AlternatingRowStyle-BackColor="#9be0ad" RowStyle-BackColor="#e1f5e6" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Email" HeaderText="Email" />
        <asp:BoundField DataField="Age" HeaderText="Age" />
        <asp:BoundField DataField="Country" HeaderText="Country" />
    </Columns>
</asp:GridView>
    

Method 2:

 <asp:GridView ID="GridView1" runat="server" CssClass="gridview" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Email" HeaderText="Email" />
        <asp:BoundField DataField="Age" HeaderText="Age" />
        <asp:BoundField DataField="Country" HeaderText="Country" />
    </Columns>
    <AlternatingRowStyle BackColor="Red" />
    <RowStyle BackColor="GreenYellow" />
</asp:GridView>
    

2. Using ItemDataBound Event: For more flexibility and customization, you can handle the ItemDataBound event of the GridView control in the code-behind. By checking the row type and index, you can dynamically set the background color for both alternate and non-alternate rows. This method allows for fine-grained control over row styling and is suitable for complex scenarios.

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound">
        <Columns>
            <asp:BoundField DataField="Name" HeaderText="Name" />
            <asp:BoundField DataField="Email" HeaderText="Email" />
            <asp:BoundField DataField="Age" HeaderText="Age" />
            <asp:BoundField DataField="Country" HeaderText="Country" />
        </Columns>
    </asp:GridView>
    

         protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                if (e.Row.RowIndex % 2 == 0)
                {
                    e.Row.BackColor = System.Drawing.Color.FromName("#f2f2f2");
                }
                else
                {
                    e.Row.BackColor = System.Drawing.Color.FromName("#f5e1e1");
                }
            }
        }
    

3. Using CSS: Another approach is to leverage cascading style sheets (CSS) to define alternating row colors. By targeting specific rows using CSS selectors, such as :nth-child, you can apply alternate row styles directly in the stylesheet. This method separates presentation from content and offers easy maintenance and scalability.

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="gridview">
        <Columns>
            <asp:BoundField DataField="Name" HeaderText="Name" />
            <asp:BoundField DataField="Email" HeaderText="Email" />
            <asp:BoundField DataField="Age" HeaderText="Age" />
            <asp:BoundField DataField="Country" HeaderText="Country" />
        </Columns>
    </asp:GridView>
    

     <style>
    .gridview tr:nth-child(even) {
        background-color: #85f296;
    }

    .gridview tr:nth-child(odd) {
        background-color: #e2e1f5;
    }
    </style>
    

protected void Page_Load(object sender, EventArgs e)
{
        if (!IsPostBack)
        {
            // Sample data
            List<Person> people = new List<Person>()
            {
            new Person() { Name = "John", Email = "[email protected]", Age = 30, Country = "USA" },
            new Person() { Name = "Alice", Email = "[email protected]", Age = 25, Country = "Canada" },
            new Person() { Name = "Bob", Email = "[email protected]", Age = 35, Country = "UK" },
            new Person() { Name = "Emily", Email = "[email protected]", Age = 28, Country = "Australia" }
            };

            // Bind data to GridView
            GridView1.DataSource = people;
            GridView1.DataBind();
        }
    }
}
    

Conclusion: Alternate row colors enhance the readability and visual appeal of ASP.NET GridView controls, making them more user-friendly and engaging.