Section 3.18. Add Images and Controls to the DataGridView

3.18. Add Images and Controls to the DataGridView

To create a custom column with the DataGrid, you needed to implement the functionality yourself by deriving a custom DataGridColumnStyle class that would need dozens of lines of code. The DataGridView provides a much simpler model. In fact, you can add new columns right alongside your data-bound columns!

---

Note: There's a lot more that you can do with theDataGridView, including adding static buttons and images.

---

3.18.1. How do I do that?

In many scenarios, it's useful to display a button next to each row in a grid. Clicking this button can then remove a record, add an item to a shopping cart, or call up another window with more information. The DataGridView makes this easy with the DataGridViewButtonColumn class. You simply need to create a new instance, specify the button text, and add it to the end of the grid:

' Create a button column. Dim Details As New DataGridViewButtonColumn( ) Details.Name = "Details"      ' Turn off data-binding and show static text. ' (You could use a property from the table by setting ' the DataPropertyName property instead.) Details.UseColumnTextForButtonValue = False Details.Text = "Details..."      ' Clear the header. Details.HeaderText = ""      ' Add the column. DataGridView1.Columns.Insert(DataGridView1.Columns.Count, Details)

Once you've performed this easy task, you can intercept the CellClick event to perform another action (Figure 3-14 shows the result of this simple test):

Private Sub DataGridView1_CellClick(ByVal sender As System.Object, _   ByVal e As System.Windows.Forms.DataGridViewCellEventArgs) _   Handles DataGridView1.CellClick          If DataGridView1.Columns(e.ColumnIndex).Name = "Details" Then         MessageBox.Show("You picked " & _         DataGridView1.Rows(e.RowIndex).Cells("CustomerID").Value)     End If      End Sub

Figure 3-14. Using a button column

Creating an image column is just as easy. In this case, you simply create and add a new DataGridViewImageColumn object. If you want to show the same static image in each cell, simply set the Image property with the Image object you want to use.

A more sophisticated technique is to show a separate image for each record. You can draw this record from a binary field in the database, or read it from a file specified in a string field. In either case, the technique is basically the same. First of all, you hide the column that contains the real data (the raw binary information for the picture, or the path to the file) by setting its Visible property to False. Then, you create a new DataGridViewImageColumn:

DataGridView1.DataSource = ds DataGridView1.DataMember = "pub_info"      ' Hide the binary data. DataGridView1.Columns("logo").Visible = False      ' Add an image column. Dim ImageCol As New DataGridViewImageColumn( ) ImageCol.Name = "Image" ImageCol.Width=200 DataGridView1.Columns.Add(ImageCol)

Finally, you can set the binary picture data you need:

For Each Row As DataGridViewRow In DataGridView1.Rows     ' First, you must convert the binary data to a memory stream.     ' Then, you can use the memory stream to create an Image object.     Try         Dim ImageBytes( ) As Byte = Row.Cells("logo").Value              Dim ms As New MemoryStream(ImageBytes)         Dim img As Image = Image.FromStream(ms)              ' Finally, bind the image column.         Dim ImageCell As DataGridViewImageCell = CType(Row.Cells("Image"), _           DataGridViewImageCell)         ImageCell.Value = img              ' Now you can release the original information to save space.         Row.Cells("logo").Value = New Byte( ) {  }              Row.Height = 100     Catch         ' Ignore errors from invalid images.     End Try      Next

Figure 3-15 shows the DataGridView with image data.

Figure 3-15. Using an image column

---

Note: In many cases, DataGridView is intelligent enough to recognize image data types and use them seamlessly in image columns, with no conversion required. However, if any extra work is required (e.g., converting or removing extra header information), you need to use the technique shown here.

---

3.18.2. Where can I learn more?

So, you want to do even more with the DataGridView control? Because it is one of the key showpieces of the new .NET Windows Forms toolkit, there's a lot of online documentation for the DataGridView. Look up the index entry "DataGridView control (Windows Forms)" in the MSDN help, and you'll find nearly 100 entries detailing distinct features you can add to solutions that use the DataGridView!