{Programming} & Life

I stumbled upon a great article which describes how to create an inherited DataGridViewImageCell and inherited DataGridViewColumn control to achieve an image per row in your DataGridView.

In summary here is the custom control you will need, place in a DataGridViewCustomCell.cs or the like in your UI app or class library:

    namespace DataGridViewCustomCell
    {
        ///
        /// Available status images.
        ///
        public enum StatusImage
        {
            Green,
            Yellow,
            Red
        }

        ///
        /// Column which will be attached to the DataGridView.
        ///
        public class ImageStatusColumn : DataGridViewColumn
        {
            public ImageStatusColumn()
                : base(new StatusCell())
            {
            }
            private StatusImage m_DefaultStatus = StatusImage.Red;

            public StatusImage DefaultStatus
            {
                get { return m_DefaultStatus; }
                set { m_DefaultStatus = value; }
            }

            public override object Clone()
            {
                ImageStatusColumn col = base.Clone() as ImageStatusColumn;
                col.DefaultStatus = m_DefaultStatus;
                return col;
            }

            public override DataGridViewCell CellTemplate
            {
                get { return base.CellTemplate; }
                set
                {
                    if ((value == null) || !(value is StatusCell))
                    {
                        throw new ArgumentException(
                            "Invalid cell type, StatusColumns can only contain StatusCells");
                    }
                }
            }
        }

        ///
        /// Cell which is attached to the ImageStatusColumn.
        ///
        public class StatusCell : DataGridViewImageCell
        {
            public StatusCell()
            {
                this.ImageLayout = DataGridViewImageCellLayout.Zoom;
            }

            protected override object GetFormattedValue(object value,
               int rowIndex, ref DataGridViewCellStyle cellStyle,
               TypeConverter valueTypeConverter,
               TypeConverter formattedValueTypeConverter,
               DataGridViewDataErrorContexts context)
            {

                Bitmap resource = Properties.Resources.bullet_ball_red;
                StatusImage status = StatusImage.Red;
                // Try to get the default value from the containing column
                ImageStatusColumn owningCol = OwningColumn as ImageStatusColumn;
                if (owningCol != null)
                {
                    status = owningCol.DefaultStatus;
                }
                if (value is StatusImage || value is int)
                {
                    status = (StatusImage)value;
                }
                switch (status)
                {
                    case StatusImage.Green:
                        resource = Properties.Resources.bullet_ball_green;
                        break;
                    case StatusImage.Yellow:
                        resource = Properties.Resources.bullet_ball_yellow;
                        break;
                    case StatusImage.Red:
                        resource = Properties.Resources.bullet_ball_red;
                        break;
                    default:
                        break;
                }
                cellStyle.Alignment = DataGridViewContentAlignment.TopCenter;
                return resource;
            }
        }

    }

All you then need to do is rename the resources I have listed above to match ones of your own and set your ImageStatusColumn like so:

It seems you can typically get an image in a DataGridView if you are happy to keep the same image for the entire column, but this custom control allows for you to set the image you require by selecting an enum. This could no doubt be easily extended to take an image path.

Results in:

Nothing to it!

For more information see: http://www.informit.com/articles/article.aspx?p=446453&seqNum=14