Example E3193
Visible to All Users

WinForms Data Grid - Display colored progress bars

There are several ways to display colored progress bars within grid cells.

Use RepositoryItemProgressBar objects and handle events

Handle the CustomRowCellEdit event to assign different repository items (RepositoryItemProgressBar) to data cells. Supports printing and data export.

C#
void View_CustomRowCellEdit(object sender, DevExpress.XtraGrid.Views.Grid.CustomRowCellEditEventArgs e) { if (e.Column == _Column) { int percent = Convert.ToInt16(e.CellValue); if (percent < 25) e.RepositoryItem = _prbLess25; else if (percent < 50) e.RepositoryItem = _prbLess50; else if (percent < 75) e.RepositoryItem = _prbLess75; else if (percent <= 100) e.RepositoryItem = _prbLess100; } }

Manually draw progress bars in cells

Custom painting allows you to draw cell content (progress bars) as needed. Note that the Grid control cannot print and export custom painted content out of the box.

C#
void View_CustomDrawCell(object sender, DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgs e) { if (e.Column == _Column) { DrawProgressBar(e); e.DefaultDraw(); e.Handled = true; } } void DrawProgressBar(DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgs e) { int percent = Convert.ToInt16(e.CellValue); int v = Convert.ToInt32(e.CellValue); v = v * e.Bounds.Width / 100; Rectangle rect = new Rectangle(e.Bounds.X, e.Bounds.Y, v, e.Bounds.Height); Brush b = Brushes.Green; if (percent < 25) b = Brushes.Red; else if (percent < 50) b = Brushes.Orange; else if (percent < 75) b = Brushes.YellowGreen; e.Cache.FillRectangle(b, rect); }

Files to Review

Documentation

See Also

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)

Example Code

ColoredProgressBar/DifferentRepositoriesProgressBar.cs(vb)
C#
using DevExpress.XtraEditors.Repository; using DevExpress.XtraGrid.Columns; using DevExpress.XtraGrid.Views.Grid; using System; using System.Drawing; namespace ColoredProgressBar { class DRProgressBarHelper { GridColumn _Column; GridView _View; RepositoryItemProgressBar _prbLess25; RepositoryItemProgressBar _prbLess50; RepositoryItemProgressBar _prbLess75; RepositoryItemProgressBar _prbLess100; public DRProgressBarHelper(GridColumn column) { PrbInit(); _Column = column; _View = _Column.View as GridView; _View.CustomRowCellEdit += new CustomRowCellEditEventHandler(View_CustomRowCellEdit); } void PrbInit() { _prbLess25 = new RepositoryItemProgressBar(); _prbLess25.StartColor = Color.Red; _prbLess25.EndColor = Color.Red; _prbLess25.ShowTitle = true; _prbLess25.ProgressViewStyle = DevExpress.XtraEditors.Controls.ProgressViewStyle.Solid; _prbLess25.LookAndFeel.Style = DevExpress.LookAndFeel.LookAndFeelStyle.Flat; _prbLess25.LookAndFeel.UseDefaultLookAndFeel = false; _prbLess50 = new RepositoryItemProgressBar(); _prbLess50.StartColor = Color.Orange; _prbLess50.EndColor = Color.Orange; _prbLess50.ShowTitle = true; _prbLess50.ProgressViewStyle = DevExpress.XtraEditors.Controls.ProgressViewStyle.Solid; _prbLess50.LookAndFeel.Style = DevExpress.LookAndFeel.LookAndFeelStyle.Flat; _prbLess50.LookAndFeel.UseDefaultLookAndFeel = false; _prbLess75 = new RepositoryItemProgressBar(); _prbLess75.StartColor = Color.YellowGreen; _prbLess75.EndColor = Color.YellowGreen; _prbLess75.ShowTitle = true; _prbLess75.ProgressViewStyle = DevExpress.XtraEditors.Controls.ProgressViewStyle.Solid; _prbLess75.LookAndFeel.Style = DevExpress.LookAndFeel.LookAndFeelStyle.Flat; _prbLess75.LookAndFeel.UseDefaultLookAndFeel = false; _prbLess100 = new RepositoryItemProgressBar(); _prbLess100.StartColor = Color.Green; _prbLess100.EndColor = Color.Green; _prbLess100.ShowTitle = true; _prbLess100.ProgressViewStyle = DevExpress.XtraEditors.Controls.ProgressViewStyle.Solid; _prbLess100.LookAndFeel.Style = DevExpress.LookAndFeel.LookAndFeelStyle.Flat; _prbLess100.LookAndFeel.UseDefaultLookAndFeel = false; } private void View_CustomRowCellEdit(object sender, DevExpress.XtraGrid.Views.Grid.CustomRowCellEditEventArgs e) { if (e.Column == _Column) { int percent = Convert.ToInt16(e.CellValue); if (percent < 25) e.RepositoryItem = _prbLess25; else if (percent < 50) e.RepositoryItem = _prbLess50; else if (percent < 75) e.RepositoryItem = _prbLess75; else if (percent <= 100) e.RepositoryItem = _prbLess100; } } } }
ColoredProgressBar/CustomPaintedProgressBarHelper.cs(vb)
C#
using DevExpress.XtraGrid.Columns; using DevExpress.XtraGrid.Views.Grid; using System; using System.Drawing; namespace ColoredProgressBar { public class CustomPaintedProgressBarHelper { GridColumn _Column; GridView _View; public CustomPaintedProgressBarHelper(GridColumn column) { _Column = column; _View = _Column.View as GridView; _View.CustomDrawCell += new DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventHandler(View_CustomDrawCell); } private void View_CustomDrawCell(object sender, DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgs e) { if (e.Column == _Column) { DrawProgressBar(e); e.DefaultDraw(); e.Handled = true; } } void DrawProgressBar(DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgs e) { int percent = Convert.ToInt16(e.CellValue); int v = Convert.ToInt32(e.CellValue); v = v * e.Bounds.Width / 100; Rectangle rect = new Rectangle(e.Bounds.X, e.Bounds.Y, v, e.Bounds.Height); Brush b = Brushes.Green; if (percent < 25) b = Brushes.Red; else if (percent < 50) b = Brushes.Orange; else if (percent < 75) b = Brushes.YellowGreen; e.Cache.FillRectangle(b, rect); } } }
ColoredProgressBar/Form1.cs(vb)
C#
using System; using System.Data; using System.Windows.Forms; namespace ColoredProgressBar { public partial class Form1 : Form { DataTable dt = new DataTable(); public Form1() { InitializeComponent(); dt.Columns.Add("Column"); for (int i = 0; i <= 100; i += 10) dt.Rows.Add(i); } private void Form1_Load(object sender, EventArgs e) { gridControl1.DataSource = dt; CustomPaintedProgressBarHelper customPaintedProgressBarHelper = new CustomPaintedProgressBarHelper(col4); DRProgressBarHelper drHelper = new DRProgressBarHelper(col5); } } }

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.