Articles in this section
Category / Section

How to make an ImageCombobox?

2 mins read

To have an Image ComboBox, descriptions of the images are added into an arraylist and the images in the imagelist 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 


  1. 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


  1. 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


Showing image ComboBox in GridControl

Figure 1: Image ComboBox in the GridControl

Sample Link:


C#: ImageComboBox CS

VB: ImageComboBox VB

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment