How to put an image in a grid cell

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?

Answer:
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.

1) You can use the ContextImageOptions property to set the context image for the cell
editor. Also, this approach allows you to display both an image and the editable
text within a single cell.

RepositoryItemTextEdit textEdit = new

RepositoryItemTextEdit();
 textEdit.ContextImageOptions.Image =

Image.FromFile("..\\..\\img.bmp");

gridView1.Columns["ContextImage"].ColumnEdit =

textEdit;

gridControl1.RepositoryItems.Add(textEdit);

Dim textEdit As New RepositoryItemTextEdit()

textEdit.ContextImageOptions.Image =

GetImageFromResource("img.bmp")
 gridView1.Columns("ContextImage").ColumnEdit =

textEdit

gridControl1.RepositoryItems.Add(textEdit)

2) 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.

using DevExpress.XtraEditors.Repository;

// CheckEdit
RepositoryItemCheckEdit checkEdit =

gridControl1.RepositoryItems.Add("CheckEdit") as

RepositoryItemCheckEdit;

checkEdit.ImageOptions.ImageChecked =

Image.FromFile("..\\..\\read.bmp");

checkEdit.ImageOptions.ImageUnchecked =

Image.FromFile("..\\..\\unread.bmp");

checkEdit.CheckStyle =

DevExpress.XtraEditors.Controls.CheckStyles.UserDefined;
gridView1.Columns["IsRead"].ColumnEdit = checkEdit;

gridControl1.RepositoryItems.Add(checkEdit);

' CheckEdit

Dim checkEdit As RepositoryItemCheckEdit =

TryCast(gridControl1.RepositoryItems.Add("CheckEdit")

, RepositoryItemCheckEdit)

checkEdit.ImageOptions.ImageChecked =

GetImageFromResource("read.bmp")
 checkEdit.ImageOptions.ImageUnchecked =

GetImageFromResource("unread.bmp")

checkEdit.CheckStyle =

DevExpress.XtraEditors.Controls.CheckStyles.UserDefined

column = gridView1.Columns("IsRead")

column.ColumnEdit = checkEdit

gridControl1.RepositoryItems.Add(checkEdit)

3) The ImageComboBox editor is linked with an ImageList or ImageCollection. It

substitutes cell values with images according to the Items property.

// 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;

gridControl1.RepositoryItems.Add(imageCombo);

' ImageComboBox
Dim imageCombo As RepositoryItemImageComboBox =

TryCast(gridControl1.RepositoryItems.Add("ImageComboB

oxEdit"), 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.ShowOnl

yInEditor

gridControl1.RepositoryItems.Add(imageCombo)

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

// PictureEdit
RepositoryItemPictureEdit pictureEdit =

gridControl1.RepositoryItems.Add("PictureEdit") as

RepositoryItemPictureEdit;

pictureEdit.SizeMode = PictureSizeMode.Zoom;

pictureEdit.NullText = " ";

gridView1.Columns["Picture"].ColumnEdit =

pictureEdit;

gridControl1.RepositoryItems.Add(pictureEdit);

' PictureEdit
 Dim pictureEdit As RepositoryItemPictureEdit =

TryCast(gridControl1.RepositoryItems.Add("PictureEdit

"), RepositoryItemPictureEdit)

pictureEdit.SizeMode = PictureSizeMode.Zoom

pictureEdit.NullText = " "

column = gridView1.Columns("Picture")

column.ColumnEdit = pictureEdit

gridControl1.RepositoryItems.Add(pictureEdit)

5)  HTML formatting allows you to set a cell image. To set an image by using

the HTML formatting enable theAllowHtmlDraw property and fill
the HtmlImages collection. See HTML Text Formatting to learn more.
RepositoryItemButtonEdit buttonEdit = new

RepositoryItemButtonEdit();

buttonEdit.TextEditStyle =

TextEditStyles.DisableTextEditor;

buttonEdit.AllowHtmlDraw =

DevExpress.Utils.DefaultBoolean.True;

var collection = new

DevExpress.Utils.ImageCollection(this.components);
collection.AddImage(Image.FromFile("..\\..\\

show_16x16.png"));

collection.Images.SetKeyName(0, "show_16x16.png");

buttonEdit.HtmlImages = collection;

gridView1.Columns["HTMLImage"].ColumnEdit =

buttonEdit;

gridControl1.RepositoryItems.Add(buttonEdit);

Dim buttonEdit As New RepositoryItemButtonEdit()

buttonEdit.TextEditStyle =

TextEditStyles.DisableTextEditor

buttonEdit.AllowHtmlDraw =

DevExpress.Utils.DefaultBoolean.True

Dim collection = New

DevExpress.Utils.ImageCollection(Me.components)

collection.AddImage(GetImageFromResource("show_16x16.

png"))

collection.Images.SetKeyName(0, "show_16x16.png")
 buttonEdit.HtmlImages = collection

gridView1.Columns("HTMLImage").ColumnEdit =

buttonEdit

gridControl1.RepositoryItems.Add(buttonEdit)

Review the**Cell Icons**help article, to find more information on the above approaches.