Not logged in

How to put icons in grid cells

Article Details

ID:	A900
Version(s):	6.x, 7.x, 8.x, 9.x
Updated:	10/25/2011

Product Group:	.NET
Product:	XtraGrid Suite

Description:

I'm trying to get an image to appear in a cell when a certain condition is satisfied. I have assigned an image to the GridColumn.CellAppearance.Image property, but the image doesn't appear in column cells when I populate the GridView with data. Any suggestions?

Solution

Applies to:
XtraGrid, XtraTreeList, XtraVerticalGrid

The Image property of an AppearanceObject is not use by the GridControl. Images (icons, glyphs, pictures) can be shown in grid cells via inplace editors.

The easiest solution to put an icon in a cell is to use the Check or the ImageComboBox editor.

The Check editor allows you to specify images via the PictureChecked, PictureUnchecked, and PictureGrayed properties; the CheckStyle property must be set to UserDefined.

[C#]

using DevExpress.XtraEditors.Repository;



// CheckEdit

RepositoryItemCheckEdit checkEdit = gridControl1.RepositoryItems.Add("CheckEdit") as
RepositoryItemCheckEdit;

checkEdit.PictureChecked = Image.FromFile("..\\..\\read.bmp");

checkEdit.PictureUnchecked = Image.FromFile("..\\..\\unread.bmp");

checkEdit.CheckStyle = DevExpress.XtraEditors.Controls.CheckStyles.UserDefined;

gridView1.Columns["IsRead"].ColumnEdit = checkEdit;

[VB.NET]

' CheckEdit

Dim checkEdit As RepositoryItemCheckEdit = TryCast(gridControl1.RepositoryItems.Add("CheckEdit"),
RepositoryItemCheckEdit)

checkEdit.PictureChecked = GetImageFromResource("read.bmp")

checkEdit.PictureUnchecked = GetImageFromResource("unread.bmp")

checkEdit.CheckStyle = DevExpress.XtraEditors.Controls.CheckStyles.UserDefined

column = gridView1.Columns("IsRead")

column.ColumnEdit = checkEdit

The ImageComboBox editor is linked with an ImageList or ImageCollection. It substitutes cell values with images according to the Items property.

[C#]

// ImageComboBox

RepositoryItemImageComboBox imageCombo = gridControl1.RepositoryItems.Add("ImageComboBoxEdit") as
RepositoryItemImageComboBox;

DevExpress.Utils.ImageCollection images = new DevExpress.Utils.ImageCollection();

images.AddImage(Image.FromFile("..\\..\\Minor.png"));

images.AddImage(Image.FromFile("..\\..\\Moderate.png"));

images.AddImage(Image.FromFile("..\\..\\Severe.png"));

imageCombo.SmallImages = images;

imageCombo.Items.Add(new ImageComboBoxItem("Minor", (short)1, 0));

imageCombo.Items.Add(new ImageComboBoxItem("Moderate", (short)2, 1));

imageCombo.Items.Add(new ImageComboBoxItem("Severe", (short)3, 2));

imageCombo.GlyphAlignment = DevExpress.Utils.HorzAlignment.Center;

gridView1.Columns["Severity"].ColumnEdit = imageCombo;

[VB.NET]

' ImageComboBox

Dim imageCombo As RepositoryItemImageComboBox =
TryCast(gridControl1.RepositoryItems.Add("ImageComboBoxEdit"), RepositoryItemImageComboBox)



Dim images As DevExpress.Utils.ImageCollection = New DevExpress.Utils.ImageCollection()

images.ImageSize = New Size(12, 12)

images.AddImage(GetImageFromResource("Error.png"))

images.AddImage(GetImageFromResource("Warning.png"))

images.AddImage(GetImageFromResource("Info.png"))

imageCombo.SmallImages = images

imageCombo.Items.Add(New ImageComboBoxItem("Error", 1, 0))

imageCombo.Items.Add(New ImageComboBoxItem("Warning", 2, 1))

imageCombo.Items.Add(New ImageComboBoxItem("Info", 3, 2))

imageCombo.GlyphAlignment = DevExpress.Utils.HorzAlignment.Center

column = gridView1.Columns("Type")

column.ColumnEdit = imageCombo

column.ShowButtonMode = DevExpress.XtraGrid.Views.Base.ShowButtonModeEnum.ShowOnlyInEditor

If you need to fill a cell with an image entirely, please use the PictureEdit or draw an image yourself via the CustomDrawCell event.

[C#]

// PictureEdit

RepositoryItemPictureEdit pictureEdit = gridControl1.RepositoryItems.Add("PictureEdit") as
RepositoryItemPictureEdit;

pictureEdit.SizeMode = PictureSizeMode.Zoom;

pictureEdit.NullText = " ";

gridView1.Columns["Picture"].ColumnEdit = pictureEdit;

[VB.NET]

' PictureEdit

Dim pictureEdit As RepositoryItemPictureEdit = TryCast(gridControl1.RepositoryItems.Add("PictureEdit"),
RepositoryItemPictureEdit)

pictureEdit.SizeMode = PictureSizeMode.Zoom

pictureEdit.NullText = " "

column = gridView1.Columns("Picture")

column.ColumnEdit = pictureEdit

Example: How to put icons to grid cells

ID:

E605

Supported IDEs:

Microsoft Visual Studio 2005, Microsoft Visual Studio 2008, Microsoft Visual Studio 2010

Supported Version(s):

v2007 vol 1.10 - v2011 vol 2.8

Programming Language:

Product:	XtraGrid Suite
Control:	n/a
Updated:	9/18/2011

Description:

This example demonstrates how you can display icons in grid cells.
For more information, please see the following KB article: How to put icons in grid cells

Do you have any comments? We are eager to hear them!

How would you rate the quality of this content?

Average rating: 4.34 out of 9
41 people have rated this page

Post Your Vote (Login Required)

If you need any clarification with regards to the contents of this article, please don't hesitate to contact our Support Team.

Product Group:

Product:

Keywords:

Searching Tips

Suggestions
Active: 1,163
Processed: 31,202
Questions & Issues
Active: 941
Processed: 256,387 + 101,114
2,126 Knowledge Base Articles
3,463 Code Central Examples