Replacing DataGridView words and numbers with images

Question

Hi,

I am creating an application which displays some messages and its directions in the DataGridView. I would like to replace some columns content with pictures. For example I would like to replace number 0 which represents the incoming call with a green arrow (some .jpg image).

Does anyone know how this could be achieved?

Thanks!

Answer 1

GridViews have the ability to use an image field as opposed to a data bound field. This sounds like it would do the trick.

Answer 2

Look at creating a custom datagridviewCell datagridviewColumn and/or dataGridViewEditingControl.

Answer 3

If you want to replace all values in that column, use ImageField.

<asp:GridView runat="server">
   <asp:ImageField DataImageUrlField="Status" 
     DataImageUrlFormatString="~/Images/{0}.gif" />
</asp:GridView>

Answer 4

We stored the images in the resource file as BMP files. Then, we handle the CellFormatting event in the DataGridView like this:

    private void messageInfoDataGridView_CellFormatting(object sender, DataGridViewCellFormattingEventArgs e)
    {
        // Is this the correct column? (It's actually a DataGridViewImageColumn)
        if (messageInfoDataGridView.Columns[e.ColumnIndex] == messageSeverityDataGridViewTextBoxColumn)
        {
            // Get the row we're formatting
            DataGridViewRow row = messageInfoDataGridView.Rows[e.RowIndex];
            // Get the enum from the row.
            MessageSeverity severity = ((MessageInfo)row.DataBoundItem).MessageSeverity;
            Bitmap cellValueImage;
            // Map the enumerated type to an image...
            // SeverityImageMap is a Dictionary<MessageSeverity,Bitmap>.
            if (ReferenceTables.SeverityImageMap.ContainsKey(severity))
                cellValueImage = ReferenceTables.SeverityImageMap[severity];
            else
                cellValueImage = Resources.NoAction;

            // Set the event args.
            e.Value = cellValueImage;
            e.FormattingApplied = true;
        }
    }