Link to home
Start Free TrialLog in
Avatar of TLevin10
TLevin10

asked on

Update DataGridView image column

Hello experts,

I'm working with .NET 2.0 and using the imageColumn in a DataGridView.  if I upload an image to the database initially, then the column easily displays the image.  However, there doesn't seem to be any runtime support if I want to allow the user to choose an image and insert it into the datagrid column at runtime.  

As an example, I have a grid which contains 3 columns: ID, Name, and Image.  At runtime, both ID and name are editable via a textbox, but there is no way to change the image column.  What I am looking for is some sort of solution to allow the user to update the image column as well (simply, and easily, like using a textbox or an OpenFile dialog ).  Any ideas how to best implement this solution?

Thanks
Avatar of Bob Learned
Bob Learned
Flag of United States of America image

>>if I upload an image to the database initially
How are you doing this?

Bob
Avatar of TLevin10
TLevin10

ASKER

I wrote a small script which takes an image file and assigns it to the cell in question.  its a fairly simple script which takes a dataset and just manually assigns images based on the "Name" column of each row (the data table in question is a series of "categories" for a larger application, since I'm only populating a few values initially, this isn't a problem, but I want the user to be able to assign an infinite number of categories once the application disseminates).

I know I can extend this script by creating a dialog which allows the user to select an image and then assigning that image to a column (I would call the dialog from a context menu attached to the DataGridView) but I am hoping that maybe there is an easier solution than performing all the actions myself.  As an example, maybe there is a way to access the built-in VS2005 "Image Select" dialog to return an image, so I don't write the entire solution myself?
Confusion abounds:

1) Small script?

2) "Image Select" dialog?

Bob

Hi Bob,

Sorry for the confusion.

(1)  The "small script" I'm talking about is just a foreach loop:

Load the dataset from the database and attach to the dataSource of the grid...

Run this little script:

            foreach (DataGridViewRow row in dataGridView1.Rows)
            {
                string name = row.Cells["NameColumn"].Value.ToString();

                if (name == "Stop")
                    row.Cells["ImageColumn"].Value = imageList1.Images[0];
                else if (name == "Go")
                    row.Cells["ImageColumn"].Value = imageList1.Images[1];
                else if ...etc.
            }

Save the dataset back the database...etc.

This is clearly a skinned out version, but its the basic premise for what I'm doing.  When I talk about extending the script, I mean allowing the user to select an image when they attempt to "edit" an image cell, rather than assigning it from an imageList and a for loop...

(2) When I mention the "Image Select" dialog I mean the dialog which VS2005 calls up when you use the property grid to edit the image for an object (such as a picturebox) which allows you to select an image from the resources file or to import from a file.  

Hopefully that clarifies what I am talking about?
ASKER CERTIFIED SOLUTION
Avatar of Bob Learned
Bob Learned
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
So I guess that means no automatic / built-in way to enter images into the column :)

A long answer for a short question, but I hope that it can help others who run into the same question - I decided to go with a custom solution similar to what you came up with, using a method to call the OpenFileDialog from a context menu and then inserting the chosen image back into the selected cell.

It does sadden me that Microsoft didn't build some of this functionality into the DataGridView in the first place, but leaving it open does keep the solution open to endless posibilities.
Also just a note to other EE users, Bob's solution is only a partial class and doesn't include the UI components such as the DataGridView definition nor the context menu definition - the "menuInsertImage_Click" method is called from the context menu attached to the DGV.
Yeah, not used to copying/pasting code from 2005 yet :(  

Here is Form1.Designer:

partial class Form1
{
    /// <summary>
    /// Required designer variable.
    /// </summary>
    private System.ComponentModel.IContainer components = null;

    /// <summary>
    /// Clean up any resources being used.
    /// </summary>
    /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
    protected override void Dispose(bool disposing)
    {
        if (disposing && (components != null))
        {
            components.Dispose();
        }
        base.Dispose(disposing);
    }

    #region Windows Form Designer generated code

    /// <summary>
    /// Required method for Designer support - do not modify
    /// the contents of this method with the code editor.
    /// </summary>
    private void InitializeComponent()
    {
        this.components = new System.ComponentModel.Container();
        this.gridImages = new System.Windows.Forms.DataGridView();
        this.contextImages = new System.Windows.Forms.ContextMenuStrip(this.components);
        this.menuInsertImage = new System.Windows.Forms.ToolStripMenuItem();
        ((System.ComponentModel.ISupportInitialize)(this.gridImages)).BeginInit();
        this.contextImages.SuspendLayout();
        this.SuspendLayout();
        //
        // gridImages
        //
        this.gridImages.ColumnHeadersHeightSizeMode = System.Windows.Forms.DataGridViewColumnHeadersHeightSizeMode.AutoSize;
        this.gridImages.Location = new System.Drawing.Point(12, 75);
        this.gridImages.Name = "gridImages";
        this.gridImages.Size = new System.Drawing.Size(500, 307);
        this.gridImages.TabIndex = 0;
        this.gridImages.CellMouseDown += new System.Windows.Forms.DataGridViewCellMouseEventHandler(this.gridImages_CellMouseDown);
        //
        // contextImages
        //
        this.contextImages.Items.AddRange(new System.Windows.Forms.ToolStripItem[] {
            this.menuInsertImage});
        this.contextImages.Name = "contextImages";
        this.contextImages.Size = new System.Drawing.Size(175, 26);
        //
        // menuInsertImage
        //
        this.menuInsertImage.Name = "menuInsertImage";
        this.menuInsertImage.Size = new System.Drawing.Size(174, 22);
        this.menuInsertImage.Text = "Insert Image...";
        this.menuInsertImage.Click += new System.EventHandler(this.menuInsertImage_Click);
        //
        // Form1
        //
        this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
        this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
        this.ClientSize = new System.Drawing.Size(550, 486);
        this.Controls.Add(this.gridImages);
        this.Name = "Form1";
        this.Text = "Form1";
        this.Load += new System.EventHandler(this.Form1_Load);
        ((System.ComponentModel.ISupportInitialize)(this.gridImages)).EndInit();
        this.contextImages.ResumeLayout(false);
        this.ResumeLayout(false);

    }

    #endregion

    private System.Windows.Forms.DataGridView gridImages;
    private System.Windows.Forms.ContextMenuStrip contextImages;
    private System.Windows.Forms.ToolStripMenuItem menuInsertImage;
}
Definitely takes some getting used to :)