vb.net - Sort DataGridViewImage Column

Question

I need to be able to sort a DataGridViewImageColumn by clicking on its header. I set the sort mode to automatic in the designer, but when I click on the header nothing happens.

Are these columns sortable?

If so, what do I need to do?

Thanks!

Answer 1

I did an example showing how to sort a dataGridView by using a custom comparer class. As @Andrew Morton posted there are some ressources on the net, that may be helpful

1. Sorting a dataGridView image Column
2. Sorting DGV image Column
3. DataGridView.Sort Method
4. ColumHeaderCell.SortingGlyphDirection

Personally I looked into 1./3. and 4. combined them all and here we are. I tested it with two pics (100x100 and 200x200px) and sorted by width. Of course you may change this to whatever you want.

First I created a form frmImateColumnSort.vb

Dim colName As New DataGridViewTextBoxColumn
Dim colImage As New DataGridViewImageColumn

Private Sub frmImageColumnSort_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    ' create columns (or create them with designer)
    colName.Name = "colName"
    colName.HeaderText = "Name"
    DataGridView1.Columns.Add(colName)

    colImage.Name = "colImage"
    colImage.HeaderText = "Image"
    ' we are going to set sortMode in source 
    ' so we can show a sortGlyph
    colImage.SortMode = DataGridViewColumnSortMode.Programmatic
    DataGridView1.Columns.Add(colImage)

    ' add some demo data
    DataGridView1.Rows.Add("imageA", Image.FromFile("imageA.jpg"))
    DataGridView1.Rows.Add("imageB", Image.FromFile("imageB.jpg"))
End Sub
Private Sub DataGridView1_ColumnHeaderMouseClick(sender As Object, e As DataGridViewCellMouseEventArgs) Handles DataGridView1.ColumnHeaderMouseClick
    ' in case imageColumnHeader is clicked
    If DataGridView1.Columns(e.ColumnIndex).Name = colImage.Name Then
        ' show correct sortingGlyph
        Dim currentSortOrder = DataGridView1.Columns(e.ColumnIndex).HeaderCell.SortGlyphDirection
        If currentSortOrder = SortOrder.None OrElse currentSortOrder = SortOrder.Descending Then
            currentSortOrder = SortOrder.Ascending
        Else
            currentSortOrder = SortOrder.Descending
        End If
        DataGridView1.Columns(e.ColumnIndex).HeaderCell.SortGlyphDirection = currentSortOrder
        ' use a custom comparerClass to provide sorting abilities for images
        DataGridView1.Sort(New ImageComparer(currentSortOrder))
    End If
End Sub

Afterwards I created an ImageComparer.vb class and implemented IComparer.

Public Class ImageComparer
  Implements System.Collections.IComparer

  Private sortOrderModifier As Integer = 1

  Public Sub New(ByVal sortOrder As SortOrder)
    If sortOrder = sortOrder.Descending Then
        sortOrderModifier = -1
    ElseIf sortOrder = sortOrder.Ascending Then
        sortOrderModifier = 1
    End If
  End Sub

  Public Function Compare(ByVal x As Object, ByVal y As Object) As Integer _
    Implements System.Collections.IComparer.Compare

    Dim DataGridViewRow1 As DataGridViewRow = CType(x, DataGridViewRow)
    Dim DataGridViewRow2 As DataGridViewRow = CType(y, DataGridViewRow)

    ' sort according to eg. Width by accessing column 1 - containing the image
    ' you may access any cell here. You might even sort imageColumn on any other colum
    Dim img1 As Image = CType(DataGridViewRow1.Cells(1).Value, Image)
    Dim img2 As Image = CType(DataGridViewRow2.Cells(1).Value, Image)
    Dim CompareResult As Integer = img1.Width.CompareTo(img2.Width)

    Return CompareResult * sortOrderModifier
  End Function
End Class

This results in following screenshots

In case you are working with a dataSource bound to your dataGridView, you will have to sort your DataSource! Eg. Sorting a dataTable image column q&a

hth

Answer 2

You're meant to do some research (e.g. a search on google) before asking here.

You would have found things like http://www.vbforums.com/showthread.php?559639-RESOLVED-Sorting-a-DataGridView-image-column.