Skip to main content
All docs
V25.1
  • How to: Display Images from a Data Field with Image Paths

    • 3 minutes to read

    This example displays 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 does not 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];
        }
    }
    
    Image 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");
        return img;
    }
    
    See Also