The ASPxGridView from DevExpress is a powerful control for displaying and manipulating data in ASP.NET applications. One of the common requirements is to apply conditional formatting to the rows of the grid based on the data they contain. This article will guide you through the steps to bind data to the ASPxGridView and dynamically change the row colors.
Binding Data to ASPxGridView
To start, you need to ensure your ASPxGridView is properly bound to a data source. Here's a simple example using a List of objects.
Step 1: Setting Up the ASPxGridView
<dx:ASPxGridView ID="ASPxGridView1" runat="server" OnDataBinding="ASPxGridView1_DataBinding">
<Columns>
<dx:GridViewDataTextColumn FieldName="Name" Caption="Name" />
<dx:GridViewDataTextColumn FieldName="Age" Caption="Age" />
<dx:GridViewDataTextColumn FieldName="Status" Caption="Status" />
</Columns>
</dx:ASPxGridView>
Step 2: Data Binding in the Code-Behind
In your code-behind (C#), you will need to bind the grid to your data source. Here's an example:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ASPxGridView1.DataSource = GetData();
ASPxGridView1.DataBind();
}
}
private List<Person> GetData()
{
return new List<Person>
{
new Person { Name = "John Doe", Age = 30, Status = "Active" },
new Person { Name = "Jane Smith", Age = 25, Status = "Inactive" },
new Person { Name = "Samuel Green", Age = 45, Status = "Active" }
};
}
public class Person
{
public string Name { get; set; }
public int Age { get; set; }
public string Status { get; set; }
}
Coloring Rows Based on Data
To apply colors to the rows based on specific conditions, use the HtmlRowPrepared event. This allows you to customize the appearance of rows dynamically.
Step 1: Handling the HtmlRowPrepared Event
Add the event handler in the ASPX:
<dx:ASPxGridView ID="ASPxGridView1" runat="server" OnHtmlRowPrepared="ASPxGridView1_HtmlRowPrepared">
...
</dx:ASPxGridView>
Step 2: Implementing the Event Handler
In the code-behind, implement the logic to change the row colors:
protected void ASPxGridView1_HtmlRowPrepared(object sender, DevExpress.Web.ASPxGridViewTableRowEventArgs e)
{
if (e.GetValue("Status").ToString() == "Active")
{
e.RowStyle.BackColor = System.Drawing.Color.LightGreen; // Color for active status
}
else if (e.GetValue("Status").ToString() == "Inactive")
{
e.RowStyle.BackColor = System.Drawing.Color.LightCoral; // Color for inactive status
}
}
Explanation of the Code:
- HtmlRowPrepared: This event is triggered for each row before it is rendered.
- GetValue: This method retrieves the value of a specified column for the current row.
- RowStyle.BackColor: This property sets the background color of the row based on the condition.
Conclusion
Using DevExpress ASPxGridView, you can easily bind data and apply conditional formatting to enhance the visual representation of your data. This guide covered how to bind a data source to the grid and how to dynamically color rows based on specific conditions. By following these steps, you can create a more informative and visually appealing grid for your ASP.NET applications.
