Skip to main content
All docs
V23.2

How to: Display Images from a Data Field with Image Paths

  • 3 minutes to read

This example demonstrates how to display images within grid cells when a data source contains the file names of images stored on a local disk. The grid obtains the file names from the ImagePath data source field. If the file doesn’t exist, the grid displays a generic picture.

The screenshot below shows the result.

WinForms Data Grid with Images

Create an Unbound Column

using DevExpress.Data;
using DevExpress.XtraGrid.Columns;
using DevExpress.XtraGrid.Views.Grid;

void AddUnboundColumn(GridView view) {
    // Create an unbound column.
    GridColumn colImage = new GridColumn();
    colImage.FieldName = "Image";
    colImage.Caption = "Image";
    colImage.UnboundType = UnboundColumnType.Object;
    colImage.OptionsColumn.AllowEdit = false;
    colImage.Visible = true;

    // Add the Image column to the grid's Columns collection.
    view.Columns.Add(colImage);
}

Create and Assign the PictureEdit to the Image Column

using DevExpress.XtraEditors.Repository;
using DevExpress.XtraEditors.Controls;

void AssignPictureEdittoImageColumn(GridColumn column) {
    // Create and customize the PictureEdit repository item.
    RepositoryItemPictureEdit riPictureEdit = new RepositoryItemPictureEdit();
    riPictureEdit.SizeMode = PictureSizeMode.Zoom;

    // Add the PictureEdit to the grid's RepositoryItems collection.
    gridControl1.RepositoryItems.Add(riPictureEdit);

    // Assign the PictureEdit to the 'Image' column.
    column.ColumnEdit = riPictureEdit;
}

Load and Display Images

Handle the GridView’s CustomUnboundColumnData event to populate the unbound column with data. The event handler loads images, caches them in a dictionary, and displays them within appropriate cells.

using System.IO;
using System.Collections;
using  DevExpress.XtraGrid.Views.Base;

Dictionary<string, Image> imageCache = new Dictionary<string, Image>(StringComparer.OrdinalIgnoreCase);

void gridView1_CustomUnboundColumnData(object sender, CustomColumnDataEventArgs e) {
    if(e.Column.FieldName == "Image" && e.IsGetData) {
        GridView view = sender as GridView;
        string fileName = view.GetRowCellValue(view.GetRowHandle(e.ListSourceRowIndex), "ImagePath") as string ?? string.Empty;
        if(!imageCache.ContainsKey(fileName)) {
            Image img = GetImage(fileName);
            imageCache.Add(fileName, img);
        }
        e.Value = imageCache[fileName];
    }
}

void GetImage(string path) {
    // Load an image by its local path, URL, etc.
    // The following code loads the image from te specified file.
    Image img = null;
    if(File.Exists(path))
        img = Image.FromFile(path);
    else
        img = Image.FromFile(@"c:\images\no-photo.jpg");
}
See Also