This example demonstrates how to display ASPxProgressBar controls in the ASPxGridView's data cells. A progress bar indicator's color depends on the bound value.
Declare ASPxProgressBar in a data column's DataItemTemplate to display progress bar controls in column cells. Handle the progress bar's DataBound event and set the IndicatorStyle.BackColor property to a color based on the cell value.
Files to Review
- Default.aspx (VB: Default.aspx)
- Default.aspx.cs (VB: Default.aspx.vb)
Documentation
Example Code
WebSite/Default.aspx
ASPx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web" TagPrefix="dx" %>
<!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">
<dx:ASPxGridView ID="grid" runat="server" AutoGenerateColumns="False" DataSourceID="ads"
KeyFieldName="ProductID">
<Columns>
<dx:GridViewDataTextColumn FieldName="ProductID" ReadOnly="True" VisibleIndex="0">
<EditFormSettings Visible="False" />
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="ProductName" VisibleIndex="1">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="UnitPrice" VisibleIndex="2">
<DataItemTemplate>
<dx:ASPxProgressBar ID="pb" runat="server" Height="21px" OnDataBound="pb_DataBound"
Value='<%# Eval("UnitPrice") %>' Width="200px" DisplayFormatString="$ 0.00" DisplayMode="Position">
</dx:ASPxProgressBar>
</DataItemTemplate>
</dx:GridViewDataTextColumn>
</Columns>
</dx:ASPxGridView>
<asp:AccessDataSource ID="ads" runat="server" DataFile="~/App_Data/nwind.mdb" SelectCommand="SELECT [ProductID], [ProductName], [UnitPrice] FROM [Products]">
</asp:AccessDataSource>
</form>
</body>
</html>
WebSite/Default.aspx.cs(vb)
C#using System;
using DevExpress.Web;
using System.Drawing;
public partial class _Default : System.Web.UI.Page {
protected void pb_DataBound(object sender, EventArgs e) {
ASPxProgressBar progressBar = (ASPxProgressBar)sender;
if(progressBar.Position > 100)
progressBar.Position = 100;
if(progressBar.Position < 40)
progressBar.IndicatorStyle.BackColor = Color.LightGreen;
else if(progressBar.Position >= 40 && progressBar.Position < 75)
progressBar.IndicatorStyle.BackColor = Color.Yellow;
else if(progressBar.Position >= 75)
progressBar.IndicatorStyle.BackColor = Color.Red;
}
}