How to display a image and text in a cell in GridControl?

3 mins read

The grid does not have the build in support of image with text cell type. It can be achieved by creating the custom cell renderer and cell model. For more information about to create custom cell model and renderer, refer this article.

Creating GridCellButton

Code snippet

public class ImagewithTextCell : GridCellButton
{
    public Image image = null;
    public ImagewithTextCell(GridCellRendererBase control)
        : base(control)
    { }
 
    //Draw the image after the text by calculating the text width.
    public override void Draw(Graphics g, int rowIndex, int colIndex, bool bActive, GridStyleInfo style)
    {
        Point pt = Point.Empty;
        Rectangle bound = Rectangle.FromLTRB(base.Bounds.Left, base.Bounds.Top, base.Bounds.Right, base.Bounds.Bottom);
        Bitmap bmp = this.image as Bitmap;
        int textWidth = (int)g.MeasureString(style.Text, style.GdipFont).Width;
        Rectangle r = this.Grid.RangeInfoToRectangle(GridRangeInfo.Cell(rowIndex, colIndex));
        if (textWidth > r.Width - bound.Width)
        {
            g.DrawImage(image, bound.X, bound.Y);
        }
        else
        {
            //Draw the image after the text
            g.DrawImage(image, r.X + textWidth + 3, r.Y + 2);
        }
    }
}

Public Class ImagewithTextCell
    Inherits GridCellButton
    Public image As Image = Nothing
    Public Sub New(ByVal control As GridCellRendererBase)
        MyBase.New(control)
    End Sub
 
    'Draw the image after the text by calculating the text width.
    Public Overrides Sub Draw(ByVal g As Graphics, ByVal rowIndex As Integer, ByVal colIndex As Integer, ByVal bActive As Boolean, ByVal style As GridStyleInfo)
        Dim pt As Point = Point.Empty
        Dim bound As Rectangle = Rectangle.FromLTRB(MyBase.Bounds.Left, MyBase.Bounds.Top, MyBase.Bounds.Right, MyBase.Bounds.Bottom)
        Dim bmp As Bitmap = TryCast(Me.image, Bitmap)
        Dim textWidth As Integer = CInt(Fix(g.MeasureString(style.Text, style.GdipFont).Width))
        Dim r As Rectangle = Me.Grid.RangeInfoToRectangle(GridRangeInfo.Cell(rowIndex, colIndex))
        If textWidth > r.Width - bound.Width Then
            g.DrawImage(image, bound.X, bound.Y)
        Else
            'Draw the image after the text
            g.DrawImage(image, r.X + textWidth + 3, r.Y + 2)
        End If
    End Sub
End Class

Creating CellModel

Code snippet

//Cell model
public class ImagewithCellModel : GridTextBoxCellModel
{
    protected ImagewithCellModel(SerializationInfo info, StreamingContext context)
        : base(info, context)
    {
    }
 
    public ImagewithCellModel(GridModel grid)
        : base(grid)
    {
 
        AllowFloating = false;
        ButtonBarSize = new Size(20, 20);
    }
 
    public override GridCellRendererBase CreateRenderer(GridControlBase control)
    {
        return new ImagewithTextCellRenderer(control, this);
    }
}

'Cell model
Public Class ImagewithCellModel
    Inherits GridTextBoxCellModel
    Protected Sub New(ByVal info As SerializationInfo, ByVal context As StreamingContext)
        MyBase.New(info, context)
    End Sub
 
    Public Sub New(ByVal grid As GridModel)
        MyBase.New(grid)
 
        AllowFloating = False
        ButtonBarSize = New Size(20, 20)
    End Sub
 
    Public Overrides Function CreateRenderer(ByVal control As GridControlBase) As GridCellRendererBase
        Return New ImagewithTextCellRenderer(control, Me)
    End Function
End Class

Creating CellRenderer

Code snippet

//Cell renderer
public class ImagewithTextCellRenderer : GridTextBoxCellRenderer
{
    ImagewithTextCell mybutton;
 
    public ImagewithTextCellRenderer(GridControlBase grid, GridCellModelBase cellModel)
        : base(grid, cellModel)
    {
        mybutton = new ImagewithTextCell(this);
        AddButton(mybutton);
    }
 
    public override void Draw(Graphics g, Rectangle cellRectangle, int rowIndex, int colIndex, GridStyleInfo style)
    {
        if (style.ImageList != null && style.ImageIndex >= 0)
        {
            this.mybutton.image = style.ImageList.Images[style.ImageIndex];
            style.ImageList = null;
        }
        base.Draw(g, cellRectangle, rowIndex, colIndex, style);
    }
}

'Cell renderer
Public Class ImagewithTextCellRenderer
    Inherits GridTextBoxCellRenderer
    Private mybutton As ImagewithTextCell
 
    Public Sub New(ByVal grid As GridControlBase, ByVal cellModel As GridCellModelBase)
    MyBase.New(grid, cellModel)
        mybutton = New ImagewithTextCell(Me)
        AddButton(mybutton)
    End Sub
 
    Public Overrides Sub Draw(ByVal g As Graphics, ByVal cellRectangle As Rectangle, ByVal rowIndex As Integer, ByVal colIndex As Integer, ByVal style As GridStyleInfo)
        If style.ImageList IsNot Nothing AndAlso style.ImageIndex >= 0 Then
            Me.mybutton.image = style.ImageList.Images(style.ImageIndex)
            style.ImageList = Nothing
        End If
           MyBase.Draw(g, cellRectangle, rowIndex, colIndex, style)
    End Sub
End Class

Adding CellModel and Assigning CellType

Code snippet

//Register the custom cell model
this.gridControl1.Model.CellModels.Add("TextWithImageCell", new ImagewithCellModel(this.gridControl1.Model));
 
//Set the cell type as TextImageCell
gridControl1[4, 2].CellType = "TextWithImageCell";

'Register the custom cell model
Me.gridControl1.Model.CellModels.Add("TextWithImageCell", New ImagewithCellModel(Me.gridControl1.Model))
 
'Set the cell type as TextImageCell
gridControl1(4, 2).CellType = "TextWithImageCell"

Screenshot

Showing text with image in a cell