We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: WinForms |
Control: GridControl
Tags: celltype, image

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);
            //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)
    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)
            '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)
        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);
    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)
    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"




Showing text with image in a cell


Sample Link:

C#: Display image with text CS

VB: Display image with text VB

2X faster development

The ultimate WinForms UI toolkit to boost your development speed.
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile