We help IT Professionals succeed at work.

Adding an image to a datagridview DataGridViewImageColumn

si2030
si2030 asked
on
Medium Priority
7,105 Views
Last Modified: 2012-05-06
Hi Experts

I have a datagridview with columns being add manually. One of the columns needs have an image which you click on and as a result display a form.

How do I add the image programmatically?

The image at the moment is in a folder called resources one level below the "sln" file and is called "Search16.png"... can I use a .png image??

I used:

Dim btnSelectAsset As New DataGridViewImageColumn

to create the image column for the datagridview...

I will use an event handler to show the form.


If you have better way perhaps using a datagridviewbutton with an image etc I am all ears!




Could someone add a few lines of code to show how to add the image into this unbound column.

Simon
Comment
Watch Question

Jorge PaulinoIT Pro/Developer
CERTIFIED EXPERT
Top Expert 2008

Commented:
You can add tha pnd file to the resources and do something like this:
            Dim btnSelectAsset As New DataGridViewImageColumn
            btnSelectAsset.DefaultCellStyle.Alignment = DataGridViewContentAlignment.TopCenter
            btnSelectAsset.Image = My.Resources.Search16

Open in new window

Author

Commented:
Hi there thanks for getting back...

I am having trouble with the last line.

All I have is a folder I created and named "resources" with all my images in it one of which is search16.png.

Its not a resources file.
Jorge PaulinoIT Pro/Developer
CERTIFIED EXPERT
Top Expert 2008

Commented:
Go to My Project - Resources Tab and add your image. You will be able then to use My namespace like the example above.

Author

Commented:
I must be missing something.  I added the resource as a png file and it worked in that there were no errors but I am gettng an "X" where the picture is suppose to go.

 I added an existing file in this case... my initial image.

I then created the image in a bmp and then a gif format still with the same results...

Not sure why the image is not getting through...




 With imgSelectAsset
 
     .DefaultCellStyle.Alignment =  DataGridViewContentAlignment.TopCenter
     .Image = My.Resources.Search16
 
        End With
 
'Add the reference button column.
     .Columns.Add(imgSelectAsset)

Open in new window

Jorge PaulinoIT Pro/Developer
CERTIFIED EXPERT
Top Expert 2008

Commented:
Try with another image just to test if that is valid

Author

Commented:
Hi there,

Yes I did that.  Still get the red cross. I created the new image from the IDE this time.

I have included all the code for the subroutine and a picutre of the DGV and a picture of the resources.
Public Sub initaliseDGV()
 
        Presenter.loadAccountDataGridViewCombbox()
        Presenter.loadTypeDataGridViewCombbox()
 
        'Create the DGVComboBoxes.
        Dim accountComboBox As New DataGridViewComboBoxColumn
        Dim typeComboBox As New DataGridViewComboBoxColumn
 
        'Create the DGVButtons.
        'Dim btnSelectAsset As New DataGridViewButtonColumn
 
        'Dim imgSelectAsset As New DataGridViewImageColumn
        'imgSelectAsset.Image= Resources.
        
        Dim imgSelectAsset As New DataGridViewImageColumn
 
        'Create the binding sources.
        Dim BSAccountComboBox As New BindingSource
        Dim BSTypeComboBox As New BindingSource
 
        With accountComboBox
 
            .DataSource = BSAccountComboBox
            .HeaderText = "Account"
            .DropDownWidth = accComboBoxDropDwnWidth
            .Width = 70
            .FlatStyle = FlatStyle.Flat
            .MaxDropDownItems = 10
 
        End With
 
        With typeComboBox
 
            .DataSource = BSTypeComboBox
            .HeaderText = "Type"
            .DropDownWidth = typeComboBoxDropDwnWidth
            .Width = 80
            .FlatStyle = FlatStyle.Flat
            .MaxDropDownItems = 2
 
        End With
 
        With imgSelectAsset
 
            .DefaultCellStyle.Alignment = DataGridViewContentAlignment.TopCenter
            .Image = My.Resources.Image1
 
        End With
 
        With dgvCreditorInvoiceDetail
 
            'Add the accountComboBox column to the DataGridView control.
            .Columns.Add(accountComboBox)
 
            'Add the Detail column.
            .Columns.Add("detail", "Detail")
            .Columns("detail").Width = 250
 
            'Add the Reference column.
            .Columns.Add("ref", "Ref")
            .Columns("ref").Width = 70
 
            'Add the reference button column.
            .Columns.Add(imgSelectAsset)
 
            'Add the typeComboBox column to the DataGridView control.
            .Columns.Add(typeComboBox)
 
            'Add the Client column.
            .Columns.Add("client", "Client")
            .Columns("client").Width = 70
 
            'Add the Client column.
            .Columns.Add("amount", "Amount")
            .Columns("amount").Width = 100
 
        End With
 
    End Sub

Open in new window

DGV.jpg
images.jpg
Jorge PaulinoIT Pro/Developer
CERTIFIED EXPERT
Top Expert 2008

Commented:
Strange ... if that doesn't work, try this way:
        Dim imgSelectAsset As New DataGridViewImageColumn
        imgSelectAsset.Image = Image.FromFile("c:\path\image.jpg")
        Me.DataGridView1.Columns.Add(imgSelectAsset)

Open in new window

Author

Commented:
Ok tried that. Didnt work. What you have suggested should work... there must be something I have done etc to cause this to fail.

Could it be that I am running Vista x64 and visual basic 2008? Just a thought.

The only other alternative is to add a button that has an image however I dont know how to this...
IT Pro/Developer
CERTIFIED EXPERT
Top Expert 2008
Commented:
Ok, then try this way overriding the DefaultNewRowValue
        Dim imgSelectAsset As New DataGridViewImageColumn
        imgSelectAsset.ImageLayout = DataGridViewImageCellLayout.Normal
        imgSelectAsset.Image = My.Resources.YourImageName
        imgSelectAsset.CellTemplate = New DefaultImageCell
 
        Me.DataGridView1.Columns.Add(imgSelectAsset)
 
 
' In the end of your code or in a new class
Class DefaultImageCell
    Inherits DataGridViewImageCell
 
    Public Overrides ReadOnly Property DefaultNewRowValue() As Object
        Get
            Return My.Resources.YourImageName
        End Get
    End Property
 
End Class

Open in new window

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
Yes that worked.  Could you tell me why (and why the normal approach didnt) and also, perhaps, how in a few words... I will accept the solution no matter what as its worked... just curious...
Jorge PaulinoIT Pro/Developer
CERTIFIED EXPERT
Top Expert 2008

Commented:

I don't know if it's a bug or not, but sometimes the cell is created using the default values and doesn't refresh the images. It works fine if you have any refresh to the grid, like a datasource.

Consider this as an workaround!

Author

Commented:
Excellent.
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.