Using DataTable at DataGridView to display small images(Icon)

Question

[EDIT]

I'd like to use image at Datagridview using DataTable.

RadioButton is just a simple question format for this post.

Let me clear myself for this.

How can I add this "image" or that "image" on the datagridview using the binding style ?

(Because,

I thought, it is faster then the normal ways. I made 500 lines of images and texts -both of them are 16*16 and short words. If I redraw it, it took me 20 seconds. Twenty !!!! This is a nonsense. I have tried "Double buffer" workarounds, but nothing was better.)

---

I made codes.

It is just a start point for RadioButton on DataGridView.

So far so good.

I made five images on it.

Like this.

        dataGridView1.RowCount = 5;
        dataGridView1.Rows[0].Cells[0].Value = Properties.Resources.WhiteBall;
        dataGridView1.Rows[1].Cells[0].Value = Properties.Resources.BlueBall;
        dataGridView1.Rows[2].Cells[0].Value = Properties.Resources.WhiteBall;
        dataGridView1.Rows[3].Cells[0].Value = Properties.Resources.WhiteBall;
        dataGridView1.Rows[4].Cells[0].Value = Properties.Resources.WhiteBall;

Question.

How can I make the same result using "DataTable binding style" ?

I had only error "Needs correct DataType at Rows".

My codes for 2nd try is;

        DataTable myTable = new DataTable();
        DataColumn myCoulmn = new DataColumn();
        myCoulmn.DataType = Type.GetType("System.Drawing.Bitmap");
        myTable.Columns.Add(myCoulmn);
        DataRow myRow = myTable.NewRow();
        myRow[0] = Properties.Resources.WhiteBall;
        myRow[1] = Properties.Resources.BlueBall;
        myRow[2] = Properties.Resources.WhiteBall;
        myRow[3] = Properties.Resources.WhiteBall;
        myRow[4] = Properties.Resources.WhiteBall;
        myTable.Rows.Add(myRow);
        dataGridView1.DataSource = myTable;

Help please.

Answer 1

Using DataTable to Show Images in DataGridView

To have an image column using a DataTable you should use a DataColumn with byte[] data type and a DataGridViewImageColumn in DataGridVide. So you first need to convert images to byte array then set them as value of a data column with byte array data type:

var imageConverter = new ImageConverter();
var b1 = (byte[])imageConverter.ConvertTo(Properties.Resources.Image1, typeof(byte[]));
var b2 = (byte[])imageConverter.ConvertTo(Properties.Resources.Image2, typeof(byte[]));
var dt = new DataTable();
dt.Columns.Add("Column1", typeof(byte[]));
dt.Rows.Add(b1);
dt.Rows.Add(b2);
this.dataGridView1.DataSource = dt;

---

Draw RadioButton for bool Column instead of CheckBox

Using image type is not suitable for a radio button. A suitable data type for such DataColumn is bool and a suitable DataGridViewColumn for column is DataGridViewCheckBoxColumn. Then you can handle CellPainting event of DataGridView and draw a radio button using RadioButtonRenderer this way:

private void Form1_Load(object sender, EventArgs e)
{
    var dt = new DataTable();
    dt.Columns.Add("Column1", typeof(bool));
    dt.Rows.Add(false);
    dt.Rows.Add(true);
    this.dataGridView1.DataSource = dt;
    this.dataGridView1.CellPainting += dataGridView1_CellPainting;
}

void dataGridView1_CellPainting(object sender, DataGridViewCellPaintingEventArgs e)
{
    if (e.ColumnIndex == 0 && e.RowIndex >= 0)
    {
        var value = (bool?)e.FormattedValue;
        e.Paint(e.CellBounds, DataGridViewPaintParts.All &
                                ~DataGridViewPaintParts.ContentForeground);
        var state = value.HasValue && value.Value ?
            RadioButtonState.CheckedNormal : RadioButtonState.UncheckedNormal;
        var size = RadioButtonRenderer.GetGlyphSize(e.Graphics, state);
        var location = new Point((e.CellBounds.Width - size.Width) / 2,
                                    (e.CellBounds.Height - size.Height) / 2);
        location.Offset(e.CellBounds.Location);
        RadioButtonRenderer.DrawRadioButton(e.Graphics, location, state);
        e.Handled = true;
    }
}