C# – DataGridView with Byte Array Image

Gridview with image in C# byte array

In this post I will be showing how you can display images stored in MS SQL DATABASE TABLE in byte format to C# gridview. (This is Windows form application example and not asp.net)
To see the Image to byte conversion and database information view my previous post on
C# Image to byte array and byte array to image

Declaring the connection string for sql connection :
Open App.config and add your connection string to it :

<appSettings>
    <add key="connectionString" value="Data Source=H-PC;Initial Catalog=mydatabase;User ID=sa;Password=123" />
  </appSettings>

First make a new windows form and add a GridView control in it from the Properties window.

And in its code page add the following code :

First import the following :

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using System.Data.SqlClient;
using System.Data.Sql;
using System.Configuration;
using System.IO;

And declare following :

namespace Examples
{
    public partial class ImageGrid : Form
    {
        SqlConnection con;
        SqlCommand cmd;
        SqlDataAdapter adapter;
        DataSet ds;
        String connectionString = ConfigurationSettings.AppSettings["connectionString"].ToString();
        byte[] imgByteArr;

Now in its public constructor call this method :

public ImageGrid()   
// this the autogenerated method for my ImageGrid page you will be having your method with the name you created the // form
        {
            InitializeComponent();
            fillGrid();   // so that is method will be called when you run the form.
        }

Now declare the method fillGrid()

public void fillGrid()
        {
            try
            {
                con = new SqlConnection(connectionString);
                cmd = new SqlCommand("select * from ProductTable", con);
                con.Open();
                adapter = new SqlDataAdapter(cmd);
                ds = new DataSet();
                adapter.Fill(ds, "ProductTable");
                DataGridViewImageColumn photoColumn = new DataGridViewImageColumn();
                dataGridView1.DataSource = null;
                dataGridView1.DataSource = ds.Tables[0];
                photoColumn.DataPropertyName = "ProductImage";
                photoColumn.Width = 200;
                
                photoColumn.HeaderText = "Image";
                photoColumn.ReadOnly = true;
                photoColumn.ImageLayout = DataGridViewImageCellLayout.Stretch;
                dataGridView1.Columns.Insert(0, photoColumn);
                dataGridView1.Columns[4].Visible = false;
                dataGridView1.Columns[1].Visible = false;
                dataGridView1.Columns[3].Width = 300;
                con.Close();
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message.ToString());
            }
        }

Here what is being done is GridView is filled from the DATABASE table (ProductTable) and the column with the image info is hidden
dataGridView1.Columns[4].Visible = false;

And a custom column with custom width is added at run time so that data is displayed perfectly in a good format.

                DataGridViewImageColumn photoColumn = new DataGridViewImageColumn();
                photoColumn.DataPropertyName = "ProductImage";  
                // Column name of the table where image byte is stored
                photoColumn.Width = 200;
                photoColumn.HeaderText = "Image";  // Header  text displayed to the user
                photoColumn.ReadOnly = true;
                photoColumn.ImageLayout = DataGridViewImageCellLayout.Stretch;
                dataGridView1.Columns.Insert(0, photoColumn);  // column is added here
                

If you like my work, please click the like button and like my page on facebook. You can also comment below…I will try my best to help you out.