Hrlp with making image cells in DataGridView look like hyperlinks using VB.NET

Good day..Victor..
Take a look at DataGridViewLinkColumn Class
http://msdn.microsoft.com/en-us/library/system.windows.forms.datagridviewlinkcolumn(v=vs.90).aspx

Yiannis

One option is to add text on header column such as "click to enlarge". Other option, though requires more work, is to add a small indication to the image itself (such as drawing a hand icon in corner of the image) on the fly when rendering.

Hi,

Thank you for your comments and the link, I will first try to solution from the link from the first post.


Victor

Try this ..
You have already a column with the images files
Add a new LinkColumn ->Copy the "Values" from the Images Column to the new Link Column and then make the first images Column invisible.(Visible=False)
And then use the LinkColumn Index for the CellContentClick
So after populating the DatagridView

  Dim links As New DataGridViewLinkColumn()
        With links
            .Name = "Link"
            .HeaderText = "Image"
            .ActiveLinkColor = Color.Red
            .LinkBehavior = LinkBehavior.SystemDefault
            .LinkColor = Color.Blue
            .VisitedLinkColor = Color.YellowGreen
        End With
        DataGridView1.Columns.Insert(Me.DataGridView1.ColumnCount, links)
    
    Dim row As DataGridViewRow
        For Each row In Me.DataGridView1.Rows
            row.Cells(Me.DataGridView1.Columns.Count - 1).Value = row.Cells("MyImageFileColumn").Value
        Next
    End Sub

Select allOpen in new window

Yiannis

Hi,

I just read your post, was just about to send you the message below, not sure if I will still have the same issue, will try your approach and get back to you later.

Thanks,

V.

Message intended prior to readind your post:

Hi,

I used Imports System.Windows.Forms.DataGridViewLinkColumn

And

Private Sub AddLinkColumn()
        Dim links As New DataGridViewLinkColumn()
        With links
            .UseColumnTextForLinkValue = True
            .HeaderText = ColumnName.ReportsTo.ToString()
            .DataPropertyName = ColumnName.ReportsTo.ToString()
            .ActiveLinkColor = Color.White
            .LinkBehavior = LinkBehavior.SystemDefault
            .LinkColor = Color.Blue
            .TrackVisitedState = True
            .VisitedLinkColor = Color.YellowGreen
        End With
        C1Screen1.Columns.Add(links)
    End Sub


But  I received  errors on ColumName (Not declared) and Linkbehavior (ambegious). I am trying to set a link to column 6 of C1Screen1. How do I fix these errors?

Thanks,

Victor

try the code i post you .

Hi,

I tried your code, but when I click on the link, the image does not appear. Below is the code I used in the cell click event to see the image. How do I modify it to see the image when I click on the new colum containing the links? Also, is it possible to see only the image name in the new column instead of the full path?

 Private Sub C1Screen1_CellClick1(sender As Object, e As System.Windows.Forms.DataGridViewCellEventArgs) Handles C1Screen1.CellClick
        Dim imgStr As String = Nothing

        If e.ColumnIndex = Me.C1Screen1.Columns("Image").Index Then
            imgStr = Me.C1Screen1.Rows(e.RowIndex).Cells("Image").Value
            imgStrAA = Me.C1Screen1.Rows(e.RowIndex).Cells(1).Value
            If ObjFrm Is Nothing Then ObjFrm = New FormImage(imgStr)
            ObjFrm.ShowDialog()
            ObjFrm = Nothing
        End If
End Sub

Thanks,

Victor

Based on information in question,  I assumed that image is already clickable but you need to indicate that to user. Is that not right? Is the image not clickable currently?

change
  If e.ColumnIndex = Me.C1Screen1.Columns("Image").Index Then
            imgStr = Me.C1Screen1.Rows(e.RowIndex).Cells("Image").Value\
With
  If e.ColumnIndex = Me.C1Screen1.Columns("Link").Index Then
            imgStr = Me.C1Screen1.Rows(e.RowIndex).Cells("Link").Value

@CodeCruiser
These are not Images but Path Actually..

Hi Codecruiser,

There are no images in the image colum, just the image's filename.

John,

The last change did not work, when I click on the link I still don't see the image.

would it be easier to keep the original Image colum and somehow change its text color to blue and underline the text? That way we can use the same code  that worked before.

Thanks,

Victor

can you post your code?

Hi,

I'm sorry for the late reply, just got home, will get back to you with the code shortly.

Victor

Hi,

Below is the code I am using.

Button click event.

            'new link column
            Dim links As New DataGridViewLinkColumn()
            With links
                .Name = "Link"
                .HeaderText = "Image"
                .ActiveLinkColor = Color.Red
                .LinkBehavior = LinkBehavior.SystemDefault
                .LinkColor = Color.Blue
                .VisitedLinkColor = Color.YellowGreen
            End With
            C1Screen1.Columns.Insert(Me.C1Screen1.ColumnCount, links)

            Dim row As DataGridViewRow
            For Each row In Me.C1Screen1.Rows
                row.Cells(Me.C1Screen1.Columns.Count - 1).Value = row.Cells("Image").Value
            Next

            '******************************************************************************************

 Private Sub C1Screen1_CellClick1(sender As Object, e As System.Windows.Forms.DataGridViewCellEventArgs) Handles C1Screen1.CellClick
        Dim imgStr As String = Nothing

        '  If e.ColumnIndex = Me.C1Screen1.Columns("Image").Index Then
        'imgStr = Me.C1Screen1.Rows(e.RowIndex).Cells("Image").Value

        If e.ColumnIndex = Me.C1Screen1.Columns("Link").Index Then
            imgStr = Me.C1Screen1.Rows(e.RowIndex).Cells("Link").Value
            imgStrAA = Me.C1Screen1.Rows(e.RowIndex).Cells(1).Value
            If ObjFrm Is Nothing Then ObjFrm = New FormImage(imgStr)
            ObjFrm.ShowDialog()
            ObjFrm = Nothing
        End If
End Sub

Hi,

It works! Is it still possible to only show the image's file name instead of the entire path?

Thank You!

Victor

yes it is but you are already have this piece of code..adjust it ..

Ok, I  will work on that part.

Thank You.

Victor

Glad Victor...

Hi,

I removed the path with the following code.

 row.Cells(Me.C1Screen1.Columns.Count - 1).Value = Path.GetFileName(row.Cells("Image").Value.ToString).

I will post another related question, just for addtional knowledge using another approach with your previous solution.

Is it possible to change the mouse icon when you place the cursor on a particular column
to make it appear as a link and to change the text color and underline the text?

Thanks,

V.

Yes  i think you can .....I got it...

Hi John,

I am trying the code below for another image column in C1Scree1 but now the link works for the ImageA column but not the Image column. Can you please help me fix the code two work with another Image column.

Button Click event:

 Dim links As New DataGridViewLinkColumn()
            With links
                .Name = "Link"
                .HeaderText = "Image"
                .ActiveLinkColor = Color.Red
                .LinkBehavior = LinkBehavior.SystemDefault
                .LinkColor = Color.Blue
                .VisitedLinkColor = Color.YellowGreen
            End With
            C1Screen1.Columns.Insert(Me.C1Screen1.ColumnCount, links)
            C1Screen1.Columns("Image").Visible = False    '<-This is the Column With the Paths.The initial one
            Dim row As DataGridViewRow
            For Each row In Me.C1Screen1.Rows
                '  row.Cells(Me.C1Screen1.Columns.Count - 1).Value = row.Cells("Image").Value
                row.Cells(Me.C1Screen1.Columns.Count - 1).Value = Path.GetFileName(row.Cells("Image").Value.ToString)

            Next
            '*******************************************


            '****************************************************
            Dim linksA As New DataGridViewLinkColumn()
            With linksA
                .Name = "LinkA"
                .HeaderText = "ImageA"
                .ActiveLinkColor = Color.Red
                .LinkBehavior = LinkBehavior.SystemDefault
                .LinkColor = Color.Blue
                .VisitedLinkColor = Color.YellowGreen
            End With
            C1Screen1.Columns.Insert(Me.C1Screen1.ColumnCount, linksA)
            C1Screen1.Columns("ImageA").Visible = False    '<-This is the Column With the Paths.The initial one
            Dim rowA As DataGridViewRow
            For Each rowA In Me.C1Screen1.Rows
                '  rowA.Cells(Me.C1Screen1.Columns.Count - 1).Value = rowA.Cells("Image").Value
                rowA.Cells(Me.C1Screen1.Columns.Count - 1).Value = Path.GetFileName(rowA.Cells("ImageA").Value.ToString)

            Next


'************************************

 Private Sub C1Screen1_CellClick1(sender As Object, e As System.Windows.Forms.DataGridViewCellEventArgs) Handles C1Screen1.CellClick

        Dim imgStr As String = Nothing
        If e.ColumnIndex = Me.C1Screen1.Columns(Me.C1Screen1.Columns.Count - 1).Index Then
            imgStr = Me.C1Screen1.Rows(e.RowIndex).Cells(Me.C1Screen1.Columns.Count - 1).Value
            imgStrAA = Me.C1Screen1.Rows(e.RowIndex).Cells(1).Value
            If ObjFrm Is Nothing Then ObjFrm = New FormImage(imgStr)
            ObjFrm.ShowDialog()
            ObjFrm = Nothing
        End If

        Dim imgStrA As String = Nothing
        If e.ColumnIndex = Me.C1Screen1.Columns(Me.C1Screen1.Columns.Count - 1).Index Then
            imgStrA = Me.C1Screen1.Rows(e.RowIndex).Cells(Me.C1Screen1.Columns.Count - 1).Value
            imgStrAA = Me.C1Screen1.Rows(e.RowIndex).Cells(1).Value
            If ObjFrm Is Nothing Then ObjFrm = New FormImage(imgStrA)
            ObjFrm.ShowDialog()
            ObjFrm = Nothing
        End If
End Sub

Thanks,

Victor

you did not change the datagridview you want to add the Column
  C1Screen1.Columns.Insert(Me.C1Screen1.ColumnCount, links)
  C1Screen1.Columns.Insert(Me.C1Screen1.ColumnCount, linksA)

You add it in the same...

John,

Both (Image, ImageA) columns are in C1Screen1. Below is the code without the link that worked.

Button Click:

  Dim ImageRow As DataGridViewRow
        For Each ImageRow In Me.C1Screen1.Rows
            If Not ImageRow.IsNewRow Then
                ImageRow.Cells(9).Value = Path.GetFileName(ImageRow.Cells(9).Value.ToString)
            End If
        Next

        For Each ImageRow In Me.C1Screen1.Rows
            If Not ImageRow.IsNewRow Then
                ImageRow.Cells(10).Value = Path.GetFileName(ImageRow.Cells(10).Value.ToString)
            End If
        Next


CellClick:

 'Dim imgStr As String = Nothing

        If e.ColumnIndex = Me.C1Screen1.Columns("Image").Index Then
        imgStr = Me.C1Screen1.Rows(e.RowIndex).Cells("Image").Value
         imgStrAA = Me.C1Screen1.Rows(e.RowIndex).Cells(1).Value
         If ObjFrm Is Nothing Then ObjFrm = New FormImage(imgStr)
         ObjFrm.ShowDialog()
        ObjFrm = Nothing
        End If

         If e.ColumnIndex = Me.C1Screen1.Columns("ImageA").Index Then
        imgStr = Me.C1Screen1.Rows(e.RowIndex).Cells("ImageA").Value
         imgStrAA = Me.C1Screen1.Rows(e.RowIndex).Cells(1).Value
         If ObjFrm Is Nothing Then ObjFrm = New FormImage(imgStr)
         ObjFrm.ShowDialog()
        ObjFrm = Nothing
         End If

the problem is here ..
Me.C1Screen1.Columns(Me.C1Screen1.Columns.Count - 1).Index
instead of Me.C1Screen1.Columns.Count - 1 use column name...

I tried it but  line

If e.ColumnIndex = Me.C1Screen1.Columns("Image") Then

returns error message:

Operator '=' is not defined for type integer and system.Widows.form.datagridviewcolumn.

e.ColumnIndex = Me.C1Screen1.Columns("Image").index

When i try If e.ColumnIndex = Me.C1Screen1.Columns("ImageA").Index
no error but the link does not work.

Victor..count your indexes..try   If e.ColumnIndex = Me.C1Screen1.Columns(10).Index

Finally, I got it.

Thanks asgain.

V.