How to make an ImageCombobox in WinForms GridControl?

To have an Image ComboBox, descriptions of the images are added into an array list and the images in the image list are bound with the Dropdown, that is, the GridListControl. The GridListControl’s look and feel are created in such a manner that it looks like a list box containing the images. The following code examples explain how to create it.

1. Setting the GridListControl properties to look and feel similar to a ComboBox Dropdown.

// GridListControl - Dropdown Style Properties.
GridDropDownGridListControlCellRenderer renderer = (GridDropDownGridListControlCellRenderer) this.gridControl1.CellRenderers["GridListControl"];

// Hiding Column Headers.
renderer.ListControlPart.Grid.Properties.ColHeaders = false;

// Hiding GridLines.
renderer.ListControlPart.Grid.Properties.DisplayHorzLines = false;

// Hiding GridLines.
renderer.ListControlPart.Grid.Properties.DisplayVertLines = false;

' GridListControl - Dropdown Style Properties.
Dim renderer As GridDropDownGridListControlCellRenderer = CType(Me.gridControl1.CellRenderers("GridListControl"), GridDropDownGridListControlCellRenderer)

' Hiding Column Headers.
renderer.ListControlPart.Grid.Properties.ColHeaders = False 

' Hiding GridLines.
renderer.ListControlPart.Grid.Properties.DisplayHorzLines = False

' Hiding GridLines.
renderer.ListControlPart.Grid.Properties.DisplayVertLines = False

2. Combining the GridControl, GridListControl, ArrayList, and ImageList.

// Binding DataSource,GridListControl and GridControl.
GridStyleInfo dropdownstyle = this.gridControl1.ColStyles[2];
dropdownstyle.CellType = "GridListControl";   
dropdownstyle.DataSource = icons;     
                
// ArrayList as DataSource.
dropdownstyle.DisplayMember = "ShortName";   
dropdownstyle.ImageList = myimageList;

' Binding DataSource,GridListControl and GridControl.
Dim dropdownstyle As GridStyleInfo = Me.gridControl1.ColStyles(2)
dropdownstyle.CellType = "GridListControl"

' ArrayList as DataSource.
dropdownstyle.DataSource = icons 
dropdownstyle.DisplayMember = "ShortName"
dropdownstyle.ImageList = myimageList

3. The CurrentCellCloseDrop event is used to assign the selected image to the cell of the GridControl.

private void gridControl1_CurrentCellCloseDropDown(object sender, Syncfusion.Windows.Forms.PopupClosedEventArgs e)
{
  GridCurrentCell cc = this.gridControl1.CurrentCell;
  if(cc.Renderer is GridDropDownGridListControlCellRenderer)
  {
    GridDropDownGridListControlCellRenderer renderer = (GridDropDownGridListControlCellRenderer) cc.Renderer;
    renderer.ListControlPart.Grid.Properties.ColHeaders = false;
    if(e.PopupCloseType == PopupCloseType.Done && renderer.ToString() == "GridDropDownGridListControlCellRenderer")
    {
      // Set the Image to the currentcell .   
      this.gridControl1[cc.RowIndex, cc.ColIndex].ImageIndex = renderer.ListControlPart.SelectedIndex;
    }
  }
}

Private Sub gridControl1_CurrentCellCloseDropDown(ByVal sender As Object, ByVal e As Syncfusion.Windows.Forms.PopupClosedEventArgs)
   Dim cc As GridCurrentCell = Me.gridControl1.CurrentCell
   If TypeOf cc.Renderer Is GridDropDownGridListControlCellRenderer Then
       Dim renderer As GridDropDownGridListControlCellRenderer = CType(cc.Renderer, GridDropDownGridListControlCellRenderer)
 renderer.ListControlPart.Grid.Properties.ColHeaders = False
 If e.PopupCloseType = PopupCloseType.Done AndAlso renderer.ToString() = "GridDropDownGridListControlCellRenderer" Then
    ' Set the Image to the currentcell.    
    Me.gridControl1(cc.RowIndex, cc.ColIndex).ImageIndex = renderer.ListControlPart.SelectedIndex
 End If
   End If
End Sub