Question

I am building a small application. This application stores customer information and customer pictures.
Here I have a problem where I want to show data from datatable to datagridview with pictures. My application does not store the image in a database, but stored in a folder.

So in my database just store image path. But not full path, only the name of the folder or file. I use combine path on each name. It is easier to manage folders if the root directory has been changed compared to if I keep the full path.

For example, if I want to display the image in picture box, I’ll do this.

//consider the record has been selected from table

classDirectory cd = new classDirectory();

// it will check current directory combine application name folder and branch name folder.

string branchFolderPath = cd.getBranchFolderPath(branchName); 

string branchPanelPath = cd.getPanelFolderPath(branchFolderPath,panelName);

string customerPath = cd.getCustomerFolderPath(branchPanelPath,customerID + " - " + customerName);

string customerImage = path.Combine(customerPath,customerPicPath);

picCustomer.Image = new Bitmap(customerImage);

After combine, it will return string “C:\Users\My Name\Documents\My Application Name\Branch Name\Panel Name\1235 – HIDAYAH\Pictures\HIDAYAH – Picture.jpg”

So I can see the pictures.

But, I do not know how to display the data in grid view.

So only so far I’ve just made.

Customer.classDataBinding cdb = new Customer.classDataBinding();

DataTable dataCustomer = cdb._listOfCustomer();

dgvCustomer.DataSource = dataCustomer;

this.dgvCustomer.Columns["Customer Image"].Width = 120; //For a while, this code return the string only.
this.dgvCustomer.Columns["Customer ID"].Width = 120;
this.dgvCustomer.Columns["Name"].Width = 120;
this.dgvCustomer.Columns["Branch"].Width = 120;
this.dgvCustomer.Columns["Panel"].Width = 120;

Code in cdb._listOfCustomer()

  public DataTable _listOfCustomer()
    {
        cs.testConnection();

        DataTable dtCustomer = new DataTable();

        using (SqlConnection conn = new SqlConnection(cs.connString))
        {
            string query = "SELECT tbl_customer.customerPicPath as [Customer Image], tbl_customer.customerID as [Customer ID],tbl_customer.customerName as Name, tbl_branch.branchName as Branch, tbl_panel.panelName as Panel FROM (tbl_branch INNER JOIN tbl_panel ON tbl_branch.branchID = tbl_panel.branchID) INNER JOIN tbl_customer ON tbl_panel.panelID = tbl_customer.panelID;";

            using (SqlDataAdapter adap = new SqlDataAdapter(query, conn))
            {
                adap.Fill(dtCustomer);

            }
        }

        return dtCustomer;

Any suggestion? Hope someone can help me to resolve this problem. Thanks a lot!

Answer 1

Are you using the Telerik grid? If so, after you bind the grid, you can hide the column displaying tha path, add a GridViewImageColumn and assign its values by creating the correct path.

Give this approach a try.

UPDATE1: here is an example:

 public Form1()
    {
        InitializeComponent();

        Random r = new Random();
        DataTable table = new DataTable();
        table.Columns.Add("ID", typeof(int));
        table.Columns.Add("Name", typeof(string));
        table.Columns.Add("ImageName", typeof(string));

        table.Rows.Add(1, "Row 1", "copy.png");
        table.Rows.Add(2, "Row 2", "cut.png");
        table.Rows.Add(3, "Row 3", "folder.png");
        table.Rows.Add(4, "Row 4", "help.png");

        this.radGridView1.DataSource = table;

        radGridView1.Columns["ImageName"].IsVisible = false;

        GridViewImageColumn col = new GridViewImageColumn("Image");
        radGridView1.Columns.Add(col);

        foreach (GridViewRowInfo row in radGridView1.Rows)
        {
            string path = "..\\..\\"; //here you set your path
            row.Cells["Image"].Value = Image.FromFile( Path.Combine(path, row.Cells["ImageName"].Value.ToString()));

        }
    }