How to change gridview row color in c# / asp.net

ONLINECAST

2 min read

·

05-10-2024

8

0

Share

Alternating Row Colors in ASP.NET GridView: A Simple Guide

The ASP.NET GridView control is a powerful tool for displaying data in a tabular format. One common requirement is to visually differentiate rows, making the data easier to scan. This is often achieved by alternating row colors, creating a visually appealing and user-friendly presentation.

The Problem:

You want to make your ASP.NET GridView more visually appealing by applying alternating colors to its rows.

The Solution:

We can achieve this using the GridView's RowDataBound event. This event is triggered for each row as it is bound to data. We can then use the e.Row object to access the properties of the row and apply the desired styling.

Here's how to implement alternating row colors:

1. Create a GridView in your ASP.NET page:

   <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="true" OnRowDataBound="GridView1_RowDataBound">
   </asp:GridView>
   

2. Implement the RowDataBound event handler:

   protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
   {
       // Check if the current row is a data row (not header or footer)
       if (e.Row.RowType == DataControlRowType.DataRow)
       {
           // Alternate row colors
           if (e.Row.RowIndex % 2 == 0) 
           {
               e.Row.BackColor = System.Drawing.Color.LightGray; // Even row
           }
           else
           {
               e.Row.BackColor = System.Drawing.Color.White; // Odd row
           }
       }
   }
   

Explanation:

• The code checks if the current row is a DataRow type.
• It then uses the RowIndex property to determine whether the row is even or odd.
• Based on the row's parity, it sets the BackColor property of the row to either LightGray for even rows or White for odd rows.

Alternative Approaches:

• CSS Styling: You can achieve the same effect using CSS. Apply a class to even rows and another class to odd rows in your GridView markup. Then style these classes in your CSS file with the desired background colors.

• GridView Templates: Use the AlternatingItemTemplate property of the GridView to specify different templates for even and odd rows. This gives you more control over the layout and styling of each row.

Example with CSS Styling:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="true">
    <AlternatingRowStyle BackColor="LightGray" />
</asp:GridView>

.GridRow {
  background-color: white;
}

Benefits of Alternating Row Colors:

• Enhanced readability: Makes data easier to scan and digest.
• Improved aesthetics: Adds visual appeal and professionalism to your application.
• Better user experience: Improves the overall experience for users.

Additional Tips:

• Consider color contrast: Ensure the chosen colors have sufficient contrast for accessibility purposes.
• Experiment with different color schemes: Try out different color combinations to find what works best for your application.
• Use CSS for greater flexibility: CSS styling allows for more complex and customizable row styling.

By implementing alternating row colors in your ASP.NET GridView, you can enhance the visual appeal and usability of your application, improving the experience for your users.