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

controls inside cell

I  havent found any sample regarding to put an image and text inside a cell, is it posible to achieve this on the grid?

Thank you

5 Replies

HN Harikrishnan N Syncfusion Team September 18, 2015 03:34 PM UTC

Hi Ricardo,

Thank you for using Syncfusion products.

In SfDataGrid, you can put an image and text inside a GridCell by customizing the GridCell. You can add views inside the GridCell and layout it from the sample side based on your requirement. Please refer the below code example to know about “how to customize a GridCell”.

GridTextColumn customColumn = new GridTextColumn();

customColumn.UserCellType = typeof(GridImageCell);

customColumn.MappingName = "ImageColumn";

public class GridImageCell : GridCell


            private ImageView customerImage;

            private TextView textView;

            Bitmap bitmap;

            public GridImageCell (Context context) : base (context)


                        customerImage = new ImageView (context);

                        textView = new TextView(context) { Gravity = GravityFlags.Center };

                        this.CanRenderUnLoad = false;

                        this.AddView (customerImage);

                        this.AddView (textView);


            public MemoryStream LoadResource (String name)


                        MemoryStream aMem = new MemoryStream ();

                        var assm = Assembly.GetExecutingAssembly ();

                        var path = String.Format ("DataGrid.Resources.drawable.{0}", name);

                        var aStream = assm.GetManifestResourceStream (path);

                        aStream.CopyTo (aMem);

                        return aMem;


            protected override void UnLoad ()


                        if (this.Parent != null)

                                    (this.Parent as VirtualizingCellsControl).RemoveView (this);


            protected override void OnLayout (bool changed, int left, int top, int right, int bottom)


                        textView.Layout(0, 0, this.Width, 40);

                        customerImage.Layout (0, 45, this.Width, this.Height - 40);


            public override void Draw (Canvas canvas)


                        base.Draw (canvas);

                        textView.Text = "Image" + DataColumn.RowIndex;

                        bitmap = (Bitmap)DataColumn.RowData.GetType ().GetProperty ("CustomerImage").GetValue (DataColumn.RowData);

                        customerImage.SetImageBitmap (bitmap);


            protected override void Dispose (bool disposing)


                        if (bitmap != null) {

                                    this.customerImage.Dispose ();

                                    this.customerImage = null;

                                    this.textView = null;


                        base.Dispose (disposing);


Like this you can customize the GridCell to have more than one view inside based on your requirements and layout it inside the GridCell from the sample. For more details about customizing the GridCell in SfDataGrid, please refer the Formatting sample in our Demo samples.

Please let us know if this helps.


GL Guillaume Levasseur January 11, 2016 11:02 PM UTC

Hi Harikrishnan,

In our project, we are using a dynamic object and we generate the columns dynamically. We don't know in advance what the columns will be. (see this post for the approach we are using)

Is it still possible to use a custom cell when the column are generated based on a dynamic data structure?

Thank you,

PK Prasanth Karthikeyan Syncfusion Team January 12, 2016 03:27 PM UTC

Hi Guillaume,

To load a custom grid cell in SfDataGrid you need to create a column specifying the mapping name and the type of custom grid cell during creation itself. Hence this cannot be used for the dynamic columns as we do not know the property name that is bound with the column during the compile time. 



GL Guillaume Levasseur January 12, 2016 03:50 PM UTC

Thanks Prashant!

Is it possible to handle events at the cell level without using a custom cell? We would like to have a long press on the first column's cell and on the column headers.


DD Dharmendar Dhanasekar Syncfusion Team January 14, 2016 09:30 AM UTC

Hi Guillaume

We considered this 'LongPressEvent' as an feature request and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.


Dharmendar D.

Live Chat Icon For mobile
Up arrow icon