Skip to main content
All docs
V25.1
  • DevExpress v25.1 Update — Your Feedback Matters

    Our What's New in v25.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

    Take the survey Not interested

    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