Mengisi DataGrid dengan Gambar

Kontrol DataGrid digunakan untuk menampilkan data dari sebuah database pada VB.NET. Karena ini merupakan satu-satunya komponen grid yang dipunyai Microsoft, umumnya programmer tidak mempunyai banyak pilihan selain memanfaatkan kontrol DataGrid ini untuk menampilkan data atau query pada aplikasi database yang dibuatnya.

Ketika harus menampilkan data, tentunya tidak semua data berupa teks. Bisa jadi data adalah berupa gambar. Apakah DataGrid dapat digunakan untuk menampilkan gambar? Tip berikut adalah salah satu cara untuk menampilkan gambar pada kontrol DataGrid.

Langkah-langkah untuk membuatnya adalah:

1. Buat New Project (Windows Application) dengan sebuah form baru yang didalamnya terdapat sebuah command button yang bernama btnRefresh dan sebuah DataGrid yang bernama DataGrid1.

2. Deklarasi awal dari aplikasi ini adalah sebagai berikut:

Imports System.IO
imports System.Data.OleDb
Public Class Form1
    Inherits System.Windows.Forms.Form

    Dim ItemPicture As System.Windows.Forms.PictureBox
    Dim dgCell As DataGridCell
    Dim colStyle As GridColumnStylesCollection
    Dim dgStyle As New DataGridTableStyle
    Dim dgTable As DataGridTextBoxColumn
    Dim blnNew As Boolean = False
    Dim intRow As Integer, intCol As Integer

3. Event-event yang perlu dicegat

Private Sub Form1_Load(ByVal sender As System.Object, _
   ByVal e As System.EventArgs) Handles MyBase.Load
        intRow = 0

        ItemPicture = New PictureBox
        ItemPicture.Width = 148
        ItemPicture.Height = 124
        ItemPicture.Cursor = System.Windows.Forms.Cursors.Arrow
        ItemPicture.Dock = DockStyle.Fill

        ItemPicture.SizeMode = PictureBoxSizeMode.StretchImage

        AddHandler ItemPicture.Click, AddressOf ClickCBO
        RefereshRec()

End Sub

Private Sub ClickCBO(ByVal sender As System.Object, ByVal e As System.EventArgs)
  ItemPicture.ContextMenu = (ImageMenu)
End Sub

Private Sub btnReferesh_Click(ByVal sender As System.Object, _
  ByVal e As System.EventArgs) Handles btnReferesh.Click
        RefereshRec()
End Sub

Private Sub DataGrid1_CurrentCellChanged(ByVal sender As Object, _
  ByVal e As System.EventArgs) Handles DataGrid1.CurrentCellChanged
        RetreiveImages()
End Sub

4. Subrutin untuk menampilkan gambarnya adalah:

Private Sub RetreiveImages()
  Try
    Dim MyData As Byte() = Nothing
    Dim crPosition As Integer

    crPosition = Me.BindingContext(dt).Position

    If blnNew = True Then ItemPicture.Image.Dispose()
    blnNew = True
    MyData = CType(ds.Tables(0).Rows(crPosition)("ItemPicture"), Byte())

    Dim intData As New Integer
    intData = MyData.GetUpperBound(0)
    Dim fs As New FileStream("c:\tempimage.jpg", _
              FileMode.OpenOrCreate, FileAccess.Write)
    fs.Write(MyData, 0, intData)
    fs.Close()
    MyData = Nothing
    ItemPicture.Image = Image.FromFile("c:\tempimage.jpg")

  Catch ex As Exception
    '  MessageBox.Show(ex.Message.ToString)
    Finally
        cn.Close()
    End Try

End Sub

Private Sub RefereshRec()
  cmd.CommandText = "SELECT ItemsID, Item as Item, _
      ItemPicture FROM tblPicture ORDER BY ItemsID"
        cmd.CommandType = CommandType.Text
     cmd.Connection = cn
     da.SelectCommand = cmd
     ds.Clear()
     da.Fill(ds, "tblPicture")
     dt = ds.Tables("tblPicture")

     dgStyle.MappingName = dt.TableName
     DataGrid1.TableStyles.Add(dgStyle)
     dgStyle.PreferredRowHeight = 135
     dgStyle.PreferredColumnWidth = 205

     colStyle = DataGrid1.TableStyles(0).GridColumnStyles
     DataGrid1.DataSource = dt
     colStyle(0).Width = 150
     colStyle(1).Width = 150
     colStyle(2).Width = 150

     dgTable = CType(DataGrid1.TableStyles(0).GridColumnStyles(2), _
                      DataGridTextBoxColumn)
     ItemPicture.Visible = True
     ItemPicture.Focus()
     dgTable.TextBox.Controls.Add(ItemPicture)

     Dim dgCell As DataGridCell
     dgCell = New DataGridCell(intRow, 2)
     DataGrid1.CurrentCell = dgCell
End Sub

5. Tampilan yang didapatkan untuk aplikasi di atas adalah: