Skip to main content Skip to footer

Display Image Along with Text in ComboBoxCellType

Spread control provides a number of Graphical Cell Types, the one which have some control or form to interact with the cell. For instance you can use a button in the cell using the ButtonCellType, or display color dialog using the ColorPickerCellType. One of the Graphical cell types is ComboBoxCellType. A combo box cell displays an editable text box with a drop‑down list of items when the cell is selected. The user may either type in the editable box (which searches for the item in the list) or select an item from the drop‑down list. Following three different properties determine what would be displayed in the drop down list of the ComboBoxCellType:

  1. Items: The Items property is an array of strings that are displayed in the combo box drop-down . These are the items in the list that the user sees.
  2. ItemData: This property lets you set item data, which is different from the items that are displayed, for the drop-down list in the combo box.
  3. ImageList: This property lets you set an image list for displaying icons along with text in the drop-down list in the combo box.

Using the above properties, you can display images or icons along with the text in the drop down list. However, this cell type does not allow you to display images or icons along with the text in the cell after user has made the selection. This blog implementation shows how you can display images along with the text in the cell. To implement this feature, you can create a custom celltype inherited from the ComboBoxCellType which overrides the PaintCell method. The PaintCell method is overridden to paint the image along with the text in the cell. Following code snippet shows the overriding implementation.



public class ImageCombo : FarPoint.Win.Spread.CellType.ComboBoxCellType  
{  
  public override void PaintCell(Graphics g, Rectangle r, FarPoint.Win.Spread.Appearance appearance, object value, bool isSelected, bool isLocked, float zoomFactor)  
  {  
       if (value != null)  
       {  
         int ind =0;  
         for (int i = 0; i < base.Items.Length; i++)  
          {  
            if (base.Items[i] == value.ToString()  
             {  
               ind = i;  
               break;  
             }  
         }  
         Image img = base.ImageList.Images[ind];  
         g.DrawImage(img, new Rectangle(new Point(r.X, r.Y), new Size(20, 20)));  
         g.DrawString(value.ToString(), appearance.Font, new SolidBrush(Color.Black), new PointF(r.X + 20, r.Y-10 + 10));  
         ControlPaint.DrawComboButton(g, new Rectangle(r.Right - 17, r.Y, 17, r.Height), ButtonState.Normal);  
       }  
       else  
       {  
         base.PaintCell(g, r, appearance, value, isSelected, isLocked, zoomFactor);  
       }  
  }  
}  

Please note that when the user performs a selection, the cell shows only the text in the editor region. However as soon as you leave the editing mode and the cell is repainted, it displays both the image and the text. Refer to the attached samples for complete implementation. Images In Combo C# Images in Combo Vb

MESCIUS inc.

comments powered by Disqus