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.
- Setting the GridListControl properties to look and feel similar to a ComboBox Dropdown.
C#
// 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;
VB
' 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
- Combining the GridControl, GridListControl, ArrayList, and ImageList.
C#
// 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;
VB
' 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
- The CurrentCellCloseDrop event is used to assign the selected image to the cell of the GridControl.
C#
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; } } }
VB
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
Figure 1: Image ComboBox in the GridControl
Sample Link:
C#: ImageComboBox CS
VB: ImageComboBox VB