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

• Jun 06, 2023
• 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.

Create an Unbound Column

C#

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);
}

VB.NET

Imports DevExpress.Data
Imports DevExpress.XtraGrid.Columns
Imports DevExpress.XtraGrid.Views.Grid

Private Sub AddUnboundColumn(ByVal view As GridView)
    ' Create an unbound column.
    Dim colImage As 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)
End Sub

Create and Assign the PictureEdit to the Image Column

C#

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

VB.NET

Imports DevExpress.XtraEditors.Repository
Imports DevExpress.XtraEditors.Controls

Private Sub AssignPictureEdittoImageColumn(ByVal column As GridColumn)
    ' Create and customize the PictureEdit repository item.
    Dim riPictureEdit As 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
End Sub

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.

C#

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");
}

VB.NET

Imports System.IO
Imports System.Collections
Imports DevExpress.XtraGrid.Views.Base

Private imageCache As New Dictionary(Of String, Image)(StringComparer.OrdinalIgnoreCase)

Private Sub gridView1_CustomUnboundColumnData(ByVal sender As Object, ByVal e As CustomColumnDataEventArgs)
    If e.Column.FieldName = "Image" AndAlso e.IsGetData Then
        Dim view As GridView = TryCast(sender, GridView)
        Dim fileName As String = If(TryCast(view.GetRowCellValue(view.GetRowHandle(e.ListSourceRowIndex), "ImagePath"), String), String.Empty)
        If Not imageCache.ContainsKey(fileName) Then
            Dim img As Image = GetImage(fileName)
            imageCache.Add(fileName, img)
        End If
        e.Value = imageCache(fileName)
    End If
End Sub

Private Sub GetImage(ByVal path As String)
    ' Load an image by its local path, URL, etc.
    ' The following code loads the image from te specified file.
    Dim img As Image = Nothing
    If File.Exists(path) Then
        img = Image.FromFile(path)
    Else
        img = Image.FromFile("c:\images\no-photo.jpg")
    End If
End Sub