display the retrieved image URL from the SQL to the DataGridView

Question

Hello .

I set all the codes to retrieve the information from the SQL table , now i only need to convert the retrieved image URL to Image in the DataGridView

here is the codes i am using now :

    namespace LamasoDemo  
    {  
             public partial class FormOrders : Form  
             {  
                      public FormOrders()  
                 {  
                   InitializeComponent();  
                    FillGridView();  
                 }  

      
    void FillGridView()  
    {  
        List<Products> productsList = new List<Products>();  
        Products products = new Products();  
        productsList = products.GetProducts();  
        dataGridViewProducts.DataSource = productsList;  
    }  

and on the class here is the codes :

             public class Products  
                      {  
                           public int Id { get; set; }  
                           public string? Date { get; set; }  
                           public string? Customer { get; set; }  
                           public string? Product { get; set; }  
                           public int Qty { get; set; }  
                           public decimal Price { get; set; }  
                           public decimal Selling { get; set; }  
                           public string? Image { get; set; }  
                           public string? Status { get; set; }  
      

                         string connectionString = "Data Source=AHMEDBABAJAN;Initial Catalog=Lamaso1;Integrated Security=True;Trust Server Certificate=true";  


      
    public List<Products> GetProducts()  
    {  
        List<Products> ProductsList = new List<Products>();  
        SqlConnection con = new SqlConnection(connectionString);  

        string selectSQL = "select Id, Date, Customer, Product, Qty, Price, Selling, Image, Status From GetProductsData";  
        con.Open();  

        SqlCommand cmd = new SqlCommand(selectSQL, con);  
        SqlDataReader dr = cmd.ExecuteReader();  

        if (dr != null)  
        {  
            while (dr.Read())  
            {  
                Products Products = new Products();  

                Products.Id = Convert.ToInt32(dr["Id"]);  
                Products.Date = dr["Date"].ToString();  
                Products.Customer = dr["Customer"].ToString();  
                Products.Product = dr["Product"].ToString();  
                Products.Qty = Convert.ToInt32(dr["Qty"]);  
                Products.Price = Convert.ToInt64(dr["Price"]);  
                Products.Selling = Convert.ToInt64(dr["Selling"]);  
                Products.Image = dr["Image"].ToString();  
                Products.Status = dr["Status"].ToString();  



                ProductsList.Add(Products);  
            }  
        }  

        return ProductsList;  

    }  

Answer 1

@Ahmed Babajan , Welcome to Microsoft Q&A, I recommend that you re-add the column one by one instead of using dataGridViewProducts.DataSource = productsList;, which may force your Image column is string type. We need to add the DataGridViewImageColumn to your current datagirdview. Here is a code example you could refer to. First method:

code.txt Second method: We need to change Image type in your model class:

public class Products
{
    ...
    public Image? img { get; set; }

}

  {
                         Products Products = new Products();
                         Products.Id = Convert.ToInt32(dr["Id"]);
                         Products.Date = dr["Date"].ToString();
                         Products.Customer = dr["Customer"].ToString();
                         Products.Product = dr["Product"].ToString();
                         Products.Qty = Convert.ToInt32(dr["Qty"]);
                         Products.Price = Convert.ToInt64(dr["Price"]);
                         Products.Selling = Convert.ToInt64(dr["Selling"]);
                         string imageurl =dr["Image"].ToString();
                         var request = WebRequest.Create(imageurl);
                         Image im = null;
                         using (var response = request.GetResponse())
                         using (var stream = response.GetResponseStream())
                         {
                         im = Bitmap.FromStream(stream);
                         }
                         Products.img= im;
                         Products.Status = dr["Status"].ToString();
        
        
                         ProductsList.Add(Products);
                     }

Result:

Best Regards, Jack

---

If the answer is the right solution, please click "Accept Answer" and upvote it.If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

You already have an answer for your question that you asked in stackoverflow:

• How to display the Image From the retrieved image URL in the DataGridView

In the code example, I've handled the CellFormatting event, considering the following points:

• The code loads images lazily, once requested in CellFormattings using HttpClient, so it doesn't load the images which are not in viewport, but as soon as the come to viewport, it downloads them.
• The code load images using task-based API, so the app will not freeze.
• It stores image in the cell value, to avoid loading it again.

Here's a modified version based on your new question here, which uses a POCO as model.

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Net.Http;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace WindowsFormsApp1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
            httpClient.DefaultRequestHeaders.TryAddWithoutValidation(
                "User-Agent", "Mozilla/5.0 (Windows NT 6.2; " +
                "WOW64; rv:19.0) Gecko/20100101 Firefox/19.0");

            //Load data
            var data = GetData();

            //Set up dataGridView 
            dgv1.RowTemplate.Height = 100;
            dgv1.DataSource = data;
            dgv1.Columns.Add(new DataGridViewImageColumn()
            {
                Name = "ImageColumn",
                HeaderText = "Image",
                ImageLayout = DataGridViewImageCellLayout.Zoom,
                Width = 150
            });
            dgv1.CellFormatting += dgv1_CellFormatting;
        }
        private async void dgv1_CellFormatting(object sender,
            DataGridViewCellFormattingEventArgs e)
        {
            if (e.RowIndex >= 0 && e.RowIndex != dgv1.NewRowIndex &&
                dgv1.Columns[e.ColumnIndex].Name == "ImageColumn")
            {
                var item = (Product)dgv1.Rows[e.RowIndex].DataBoundItem;
                var uri = item.ImageUri;
                if (e.Value == null)
                {
                    dgv1.Rows[e.RowIndex]
                        .Cells["ImageColumn"].Value = await DownloadImage(uri);
                }
            }
        }
        List<Product> GetData()
        {
            var data = new List<Product>();
            data.Add(new Product() { Name = "Lorem", ImageUri = $"https://picsum.photos/300/200?1" });
            data.Add(new Product() { Name = "Lorem", ImageUri = $"https://picsum.photos/300/200?2" });
            data.Add(new Product() { Name = "Lorem", ImageUri = $"https://picsum.photos/300/200?3" });
            data.Add(new Product() { Name = "Lorem", ImageUri = $"https://picsum.photos/300/200?4" });
            data.Add(new Product() { Name = "Lorem", ImageUri = $"https://picsum.photos/300/200?5" });
            return data;
        }
        HttpClient httpClient = new HttpClient();
        async Task<Image> DownloadImage(string uri)
        {
            return Image.FromStream(await httpClient.GetStreamAsync(uri));
        }
    }
    public class Product
    {
        public string Name { get; set; }
        public string ImageUri { get; set; }
    }
}