Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
Question
Saturday, April 23, 2016 3:19 PM
Hello, I have a Database (mysql) with the following information: "ID", "PICTURE URL", "NAME".
I want to start the form, and datagridview load all the data, including the image of the database (url) and display it in the datagridview.
Looking for information I found something about pictures "blob" but I do not know if I can use a URL to display an image in a datagridview. Here is the code im using (without add images):
mysqlcon.Open()
With mysqlcmd
.Connection = mysqlcon
.CommandText = "SELECT id, cover, name FROM gamelist WHERE name like '%" & TextBox1.Text & "%'"
End With
da.SelectCommand = mysqlcmd
dt.Clear()
da.Fill(dt)
DataGridView1.DataSource = dt
mysqlcon.Close()
To add images I've tried the following:
Private Sub BindGrid()
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New MySqlConnection(constr)
Using cmd As New MySqlCommand()
cmd.CommandText = "SELECT ID, cover, name Content FROM gamelist"
cmd.Connection = con
Using sda As New MySqlDataAdapter(cmd)
Dim dt As New DataTable()
sda.Fill(dt)
gvImages.DataSource = dt
gvImages.DataBind()
End Using
End Using
End Using
End Sub
I got this code from an internet guide (URL), but can not add to my project the second part of the code:
Protected Sub OnRowDataBound(sender As Object, e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
Dim bytes As Byte() = TryCast(TryCast(e.Row.DataItem, DataRowView)("Content"), Byte())
Dim base64String As String = Convert.ToBase64String(bytes, 0, bytes.Length)
TryCast(e.Row.FindControl("Image1"), Image).ImageUrl = Convert.ToString("data:image/png;base64,") & base64String
End If
End Sub
Because it does not recognize the function:
GridViewRowEventArgs
What I can do to fix this and display the images (url) in my datagridview?
Thanks to all!
All replies (18)
Saturday, April 23, 2016 11:04 PM âś…Answered | 1 vote
I have no words, for the help I am receiving.
@Frank L. Smith That's just what I like to do, fortunately, the images of my database are even smaller. Thank you very much for the incredible work you've done, and I hope to see the project.
And also, thanks everyone for the cooperation.
Sorry for be slow to respond, and not see the other answers at the time, I did not expect to find a solution so quickly.
Ehh, just call me Frank. :)
*****
First, please download this zip file then extract the contents (one .xml file) to your desk"http://www.fls-online.com/VBNet_Forum/04-23-16/UploadResults.zip" target="_blank">http://www.fls-online.com/VBNet_Forum/04-23-16/UploadResults.zip
That's actually from that other thing that was talking about for uploading/downloading, but it has the remote file names so I used it. There's a method in one of the classes which will use that xml information (although when we get to your data, you won't use it at all).
Then download this please:
http://www.fls-online.com/VBNet_Forum/04-23-16/Test_ImageInDGV_FromURL.zip
That's the project folder. Extract it somewhere then open the solution with VisualStudio and it will prompt you to convert it to your version. Follow the prompts and it should all work.
Following that - run it and hopefully it'll all work like I showed above.
Let me know how you fare please?
*****
I don't know what the deal is ... it won't let me add that link, but it's here:
http://www.fls-online.com/VBNet_Forum/04-23-16/UploadResults.zip
In the middle of difficulty ... lies opportunity. -- Albert Einstein
Saturday, April 23, 2016 3:31 PM | 1 vote
Soubhy,
I think you'll likely need to do this at runtime by casting the column of the DGV to a DataGridViewImageColumn.
For example (from something I did a few years ago):
Dim dgvImageColumn As DataGridViewImageColumn = _
DirectCast(.Columns(1), DataGridViewImageColumn)
dgvImageColumn.ImageLayout = _
DataGridViewImageCellLayout.Zoom
From there you'll need to work with the properties of the DataGridViewImageColumn. Have a look at the link for more information on that.
In the middle of difficulty ... lies opportunity. -- Albert Einstein
Saturday, April 23, 2016 4:59 PM | 1 vote
Hello, I have a Database (mysql) with the following information: "ID", "PICTURE URL", "NAME".
I want to start the form, and datagridview load all the data, including the image of the database (url) and display it in the datagridview.
Looking for information I found something about pictures "blob" but I do not know if I can use a URL to display an image in a datagridview. Here is the code im using (without add images):
mysqlcon.Open() With mysqlcmd .Connection = mysqlcon .CommandText = "SELECT id, cover, name FROM gamelist WHERE name like '%" & TextBox1.Text & "%'" End With da.SelectCommand = mysqlcmd dt.Clear() da.Fill(dt) DataGridView1.DataSource = dt mysqlcon.Close()To add images I've tried the following:
Private Sub BindGrid() Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString Using con As New MySqlConnection(constr) Using cmd As New MySqlCommand() cmd.CommandText = "SELECT ID, cover, name Content FROM gamelist" cmd.Connection = con Using sda As New MySqlDataAdapter(cmd) Dim dt As New DataTable() sda.Fill(dt) gvImages.DataSource = dt gvImages.DataBind() End Using End Using End Using End SubI got this code from an internet guide (URL), but can not add to my project the second part of the code:
Protected Sub OnRowDataBound(sender As Object, e As GridViewRowEventArgs) If e.Row.RowType = DataControlRowType.DataRow Then Dim bytes As Byte() = TryCast(TryCast(e.Row.DataItem, DataRowView)("Content"), Byte()) Dim base64String As String = Convert.ToBase64String(bytes, 0, bytes.Length) TryCast(e.Row.FindControl("Image1"), Image).ImageUrl = Convert.ToString("data:image/png;base64,") & base64String End If End SubBecause it does not recognize the function:
GridViewRowEventArgsWhat I can do to fix this and display the images (url) in my datagridview?
Thanks to all!
GridView is not DataGridView. GridView is System.Web.UI control, DataGridView is Windows Forms control. Events and other things are different for each.
What does "the image of the database (url)" mean? Please be explicit. Does this mean the Database is returning some relative path where an Image is stored? Does this mean the Database is returning a blob (I suppose that would be a byte array) that needs to be converted to an image? How are you storing images in the Database or providing references to images located somewhere other than the Database?
La vida loca
Saturday, April 23, 2016 5:02 PM
I'm struggling to make it work.. I created 3 column in my datagridview (id, picture, name) and I added the code you provided me, but the images are in the wrong place and besides that are not displayed correctly, instead appears an image of error an 'x'. Here I show the error of the photos, shown with an 'x':
In the text camp "cover" in my database, the image is in text format (URL) should change the type to "blob", or which is the best way to do it?..
Saturday, April 23, 2016 5:07 PM | 1 vote
I'm struggling to make it work.. I created 3 column in my datagridview (id, picture, name) and I added the code you provided me, but the images are in the wrong place and besides that are not displayed correctly, instead appears an image of error an 'x'. Here I show the error of the photos, shown with an 'x':
In the text camp "cover" in my database, the image is in text format (URL) should change the type to "blob", or which is the best way to do it?..
I'm not a database guy, but no - it's not a BLOB (Binary Large Object) type.
In the middle of difficulty ... lies opportunity. -- Albert Einstein
Saturday, April 23, 2016 5:13 PM | 1 vote
I'm struggling to make it work.. I created 3 column in my datagridview (id, picture, name) and I added the code you provided me, but the images are in the wrong place and besides that are not displayed correctly, instead appears an image of error an 'x'. Here I show the error of the photos, shown with an 'x':
In the text camp "cover" in my database, the image is in text format (URL) should change the type to "blob", or which is the best way to do it?..
I'm not a database person. I just read that you can store images as base64 strings or directly as Blobs whatever blobs are. However you keep mentioning you store them as URL's.
To me a URL represents either a location on the internet or LAN or network being basically a path to an image rather than the image itself. If that is the case then I suspect that you will need to use code to get the image at the location specified by the URL so that it can be retrieved for placing as an image in the DataGridView Image Column.
Can you display what the text of a retrieved URL for an image from your database looks like if the URL is in fact a string? If so then it should be simple to figure out how to retrieve the image the URL refers to in order to display the image in a DataGridView Image Column.
La vida loca
Saturday, April 23, 2016 5:20 PM
@Mr. Monkeyboy The database only stores the image url in plain text format. And my intention is to show the images of each row in my database in the datagridview, loading them from the url stored in the database.
@Frank L. Smith Yes, the image is saved in plain text format, but it is a url to access the image, but shown with an 'x', I will continue testing the code you provided me, thank you
example of my db (picture url's): 
Saturday, April 23, 2016 5:37 PM | 1 vote
@Mr. Monkeyboy The database only stores the image url in plain text format. And my intention is to show the images of each row in my database in the datagridview, loading them from the url stored in the database.
@Frank L. Smith Yes, the image is saved in plain text format, but it is a url to access the image, but shown with an 'x', I will continue testing the code you provided me, thank you
example of my db (picture url's):
I have an idea but it'll take a few hours to work out.
I won't be working with a database, but hopefully it'll give you the general idea anyway.
I'll be back in a few hours...
In the middle of difficulty ... lies opportunity. -- Albert Einstein
Saturday, April 23, 2016 5:53 PM | 1 vote
For this code you will need to add an imports statement for System.Net "Imports System.Net" I believe.
The code will download the image from the URL to a Bitmap. The Bitmap will be set as the DataGridView Image Columns Cell value for the cell you want to place the image in. The top line of the below code is from the link Frank provided. How you actually access the Cell to provide it a Value may be different. However the bottom line of code is how you will set the cells value.
The WebClient will take time to access the internet in order to download the image to be assigned to a Cell. This may cause a lengthy time for your code to run trying to provide images to numerous cells. There could be better methods for doing this that would work much faster such as an asynchronous environment or threading or downloading all the images into a List(Of Bitmap) or List(Of Image) in a separate thread and then once that thread ends loading the DGV with the images.
The bottom line of code should probably be altered in some fashion to dispose of the Memory Stream once it is used really. I believe the WebClient will self dispose. It may be good to Clone the Bitmap and dispose of it too.
Dim cell As DataGridViewImageCell = CType(dataGridView1.Rows(e.RowIndex).Cells(e.ColumnIndex), DataGridViewImageCell)
cell.Value = New System.Drawing.Bitmap(New IO.MemoryStream(New System.Net.WebClient().DownloadData("HTTP://i.imgur.com/WjneGBt.Png")))
La vida loca
Saturday, April 23, 2016 6:33 PM
First of all thank you very much for your time and the support that you are giving me. Im trying to do this with part of your code but I cant understand part of your code, and throws me the following errors:
I must be doing something wrong, but I do not know why that is. Besides that I have doubts about how to do that with every item in the database, I think I should run sql reader and from this send picture url's to "New System.Net.WebClient().DownloadData("HTTP://i.imgur.com/WjneGBt.Png"))".
But I do not think it's possible, because the database must handle many items, and not think of any way to do this lightly for the system. I'll keep digging until I find the best solution anyway, thank you very much.
Saturday, April 23, 2016 6:35 PM | 1 vote
Soubhy,
What I'm working on is something that you can use, even with your Database - it might be tomorrow showing you anything though, but I've changed my mind on what to do so it won't just be an example.
Be patient please.
In the middle of difficulty ... lies opportunity. -- Albert Einstein
Saturday, April 23, 2016 6:43 PM
@Frank L. Smith Take all the time you need, I keep trying just to try to expand my knowledge about databases in vb, because I do not understand almost nothing about this. I have tried to do this for quite some time and have not made progress, hopefully with your help can get it and all this can serve someone else.
If you need any information concerning data in my database or my application code just let me know if that makes work easier.
And sorry to repeat, but thanks you very much both for your time and help.
Saturday, April 23, 2016 6:47 PM | 1 vote
@Frank L. Smith Take all the time you need, I keep trying just to try to expand my knowledge about databases in vb, because I do not understand almost nothing about this. I have tried to do this for quite some time and have not made progress, hopefully with your help can get it and all this can serve someone else.
If you need any information concerning data in my database or my application code just let me know if that makes work easier.
And sorry to repeat, but thanks you very much both for your time and help.
Tomorrow I'll have the entire project folder zipped up and uploaded so you can try it for real, but my part of it, in and of itself, won't deal with your database; instead, you'll iterate through your database and for each image URL, you'll then use a method that I've built in to add that URL and it'll then do the rest.
I'll explain more tomorrow.
In the middle of difficulty ... lies opportunity. -- Albert Einstein
Saturday, April 23, 2016 7:08 PM | 2 votes
@Frank L. Smith Take all the time you need, I keep trying just to try to expand my knowledge about databases in vb, because I do not understand almost nothing about this. I have tried to do this for quite some time and have not made progress, hopefully with your help can get it and all this can serve someone else.
If you need any information concerning data in my database or my application code just let me know if that makes work easier.
And sorry to repeat, but thanks you very much both for your time and help.
I don't know anything about database. However this code will retrieve an image from a direct URL link (Not a redirecting URL link or some other type URL link) to an image file and place the image in a DataGridView rows Image Column.
Public Class Form1
Dim MyUrls As New List(Of String)
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
Me.Location = New Point(CInt((Screen.PrimaryScreen.WorkingArea.Width / 2) - (Me.Width / 2)), CInt((Screen.PrimaryScreen.WorkingArea.Height / 2) - (Me.Height / 2)))
Dim ImgColumn As New DataGridViewImageColumn()
ImgColumn.Width = 250
ImgColumn.Image = Nothing
ImgColumn.ImageLayout = DataGridViewImageCellLayout.NotSet
ImgColumn.Description = "Some Images"
DataGridView1.Columns.Add(ImgColumn)
DataGridView1.Rows.Add()
For Each Item As DataGridViewRow In DataGridView1.Rows
Item.Height = 250
Next
MyUrls.Add("https://c2.staticflickr.com/4/3113/2701222270_cf158e7720.jpg")
MyUrls.Add("http://ladiesswimwear.weebly.com/uploads/9/4/3/7/9437395/4083900.jpg?376")
End Sub
Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
For i = 0 To MyUrls.Count - 1
Using WC As New WebClient
Using SR As New IO.MemoryStream(WC.DownloadData(MyUrls(i)))
Using Bmp As New Bitmap(SR)
Dim cell As DataGridViewImageCell = CType(DataGridView1.Rows(i).Cells(0), DataGridViewImageCell)
cell.ImageLayout = DataGridViewImageCellLayout.Stretch
cell.Value = CType(Bmp.Clone, Image)
End Using
End Using
End Using
Next
End Sub
End Class
I believe I saw the 4 girls in the 2nd pics, top DGV image, at WalMart the other day buying a 2 dozen count box of donuts, 1 for each of them. Yum.
The real issue I see with using URL's for image links is the link could be broken, the site could be down, the network could be down between your system and the site, the file at the site could be deleted, any number of things. If any of those cases occured the code I provided could crash or something. I believe you should save the images in your database directly (by getting the images from the URL's) however that is performed and backup your database in a timely manner.
It would probably be good if a database knowledgable person like DA924x (who I think knows databases pretty much inside and out) or somebody could advise you on that.
La vida loca
Saturday, April 23, 2016 8:05 PM | 2 votes
Hello,
The following is a generic example where I used a MS-Access database, access data via OleDb managed data provider. For you, the MySql data provider would replace the OleDb data provider.
All columns were created in the IDE, column name, column title and data member, the rest is in code. You can play with the row height and text alignment via properties I have used in the code below.
Imports System.Data.OleDb
''' <summary>
''' Three columns are created in the DataGridView
''' Field - Column type Data Member
''' * CategoryName - DataGridViewTextColumn - CategoryName
''' * Description - DataGridViewTextColumn - Description
''' * Picture - DataGridViewImageColumn - Picture
'''
''' The data provider is OleDb but the code shown works for all managed data providers
''' </summary>
Public Class Form1
Private bsCategories As New BindingSource
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
Dim dt As New DataTable
Using cn As New OleDbConnection With
{
.ConnectionString =
"Provider=Microsoft.ACE.OLEDB.12.0;Data Source=NorthWind.accdb"
}
Using cmd As New OleDbCommand With {.Connection = cn}
cmd.CommandText =
"SELECT CategoryID, CategoryName, Description, Picture FROM Categories;"
cn.Open()
dt.Load(cmd.ExecuteReader)
End Using
End Using
bsCategories.DataSource = dt
DataGridView1.AutoGenerateColumns = False
' set image layout
CType(DataGridView1.Columns("PictureColumn"), DataGridViewImageColumn).ImageLayout =
DataGridViewImageCellLayout.Normal
' set all columns to show on top of cells
DataGridView1.Columns.Cast(Of DataGridViewColumn).Select(Function(col) col) _
.ToList.ForEach(
Sub(col) col.CellTemplate.Style.Alignment = DataGridViewContentAlignment.TopLeft)
' auto adjust column widths
DataGridView1.AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.AllCells
' set according to largest image height, you could get fancy and query the height but
' for this demo I am keeping things simple
DataGridView1.RowTemplate.Height = 122
' Set the data source to the BindingSource where the BindingSource DataSource is our
' DataTable which retrieved data from out database
DataGridView1.DataSource = bsCategories
' here I have a binding to show the underlying primary key
' generally done on a label but this keeps it simple.
Me.DataBindings.Add("Text", bsCategories, "CategoryID")
End Sub
End Class
Please remember to mark the replies as answers if they help and unmark them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.
VB Forums - moderator
Saturday, April 23, 2016 8:46 PM | 2 votes
@Frank L. Smith Take all the time you need, I keep trying just to try to expand my knowledge about databases in vb, because I do not understand almost nothing about this. I have tried to do this for quite some time and have not made progress, hopefully with your help can get it and all this can serve someone else.
If you need any information concerning data in my database or my application code just let me know if that makes work easier.
And sorry to repeat, but thanks you very much both for your time and help.
Ok, I have something for you now.
I'd like to do this in steps - what I don't want you to do is to use code that you don't *really* understand (whether it from this forum or some site on the internet somewhere), so we'll do it bit at a time and eventually we'll arrive where we want to be.
*****
In this first part, I just want to show you what I have along with an overview of the "what" and "why". Following that I'll upload the project folder and get you to use it (with my data), then we'll go from there.
*****
For something else entirely (it has to do with uploading/downloading via FTP) I have 61 images in an area on my website. They're images that a friend sent me years ago when he and his girlfriend went to Hawaii.
Anyway, that makes for decent data to work with and it also led me to how I've changed this:
One problem with using the DataGridViewImageColumn is that unlike a normal PictureBox, it has no built-in methods for showing an image from a URL. Another problem though - or potentially so - is just how large that image is, at least when you account for ALL of the images that are to be displayed.
With my data, there are 61 images total which range between two to four megs. That's not a huge lot, but I can definitely see a potential issue with the program possibly running into an OOM exception.
Even if it never threw that exception, why have all of that huge image data? You can't show the images that large anyway!
So here's the basis of what the class library I've built does:
There are two "main" classes; one is a collection class which has the image URLs along with a name for each, and the other is primarily used to download those images to a temporary directory that's created on the user's computer - downsized.
Yes, the images created are thumbnail images (and you set the maximum dimension for those) and that's what's actually saved to the user's computer.
That means that now you're dealing with much smaller files and everything runs more quickly.
I hope you agree with my thinking here?
*****
When you first start the program, you'll see this:
After a few seconds though, you'll see actual progress:
Once they've all downloaded, they're displayed in the DGV:
I also have it set up so that if the user resizes either the column or the row, ALL of the columns or ALL of the rows are resized to match:
*****
Let me know when you're this far and we'll go to the next step of you getting the project folder and trying it out.
:)
In the middle of difficulty ... lies opportunity. -- Albert Einstein
Saturday, April 23, 2016 10:52 PM
I have no words, for the help I am receiving.
@Frank L. Smith That's just what I like to do, fortunately, the images of my database are even smaller. Thank you very much for the incredible work you've done, and I hope to see the project.
And also, thanks everyone for the cooperation.
Sorry for be slow to respond, and not see the other answers at the time, I did not expect to find a solution so quickly.
Sunday, April 24, 2016 12:16 AM | 2 votes
The way i see it, it is going to be a bit slow no mater what when using Urls. You have to first get the Url from the DataBase, then download the image from the Url, and finally set the DataGridView Cell to that Image. The part that is going to slow it down the most i believe is having to download each of the images from the Url one at a time.
If the Images where stored in the DataBase as an Image type (Byte Array), the speed would be increased quite a bit but, would mean the DataBase would grow in Size by quite a bit because it would take more space to store the Bytes of the Image than the String Url.
This would be the toss up, having a bigger DataBase size or a Slower Loading time. 8)
EDIT: Who`s Images are these? Are they actually images that belong to you or are they images that you found the url addresses to?
If you say it can`t be done then i`ll try it