Different Ways to Display Images in ASPxGridView

Suppose you have a C# class for storing images, such as

public class MyClass
  public int ID { get; set; }
  public byte[] MyImage { get; set; }

which is a wrapper class for a table storing images as binary blobs (MS SQL image or varbinary(max), Oracle BLOB etc.)

I found 4 different ways (that is, “simple ways”; certainly there are countless other more complex alternatives) to display the binary data as images, using DevExpress’ ASPxImage and ASPxBinaryImage controls inside a ASPxGridView:

<dx:ASPxGridView ID="gridImages" runat="server"
  AutoGenerateColumns="False" KeyFieldName="ID">
    <dx:GridViewDataTextColumn Caption="ID" FieldName="ID">

using a query like

var images = database.Query<MyImages>().OrderBy(r => r.ID);
gridImages.DataSource = images;

Using GridViewDataBinaryImageColumn

    <dx:GridViewDataBinaryImageColumn FieldName="MyImage">

Using ASPxBinaryImage inside a DataItemTemplate

    <dx:GridViewDataColumn FieldName="MyImage" >
        <dx:ASPxBinaryImage ID="img" runat="server"
          Value='<%# Eval("MyImage") %>'>

ASPxBinaryImage uses the Value property to store a byte array, which the DevExpress framework translates into <img src> where src requests a DevExpress-implemented URL to serve the byte stream.

If you prefer ASP:Image or ASPxImage to ASPxBinaryImage, you need to write an .ashx handler to retrieve the image data:

public class MyImageHandler : IHttpHandler
  public void ProcessRequest(HttpContext context)
    int id = 0;
    int.TryParse(context.Request["id"], out id);

    var image = database.FirstOrDefault<MyClass>(c => c.ID == id);

    if (image == null)

    context.Response.ContentType = "image/png";

This .ashx handler is invoked by setting the ImageUrlFormatString of a GridViewDataImageColumn

    <dx:GridViewDataImageColumn FieldName="ID">
      <PropertiesImage ImageUrlFormatString="myimage.ashx?id={0}">

or by setting the ImageUrl property of an ASPxImage:

    <dx:GridViewDataColumn >
        <dx:ASPxImage runat="server" ID="imgTemplate"
          ImageUrl='<%#  "myimage.ashx?id=" + Eval("ID")  %>'>

2 Responses to Different Ways to Display Images in ASPxGridView

  1. safwan says:

    A demo of what you are demonstrating here would have been useful for beginners like me… Thanks anyway

  2. Tatamovitch says:

    Great and simple… Thank’s !!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: