C# DataGridView Master Detail Images Text [Open Detail Form]

June 23, 2017 Oclemy C# DataGridView, C# Form 2 minutes, 14 seconds

Hello guys.Lets see a basic ,master detail example with a datagridview and two forms.This is what we do :

  • Our first master form has a datagridview with both images and text.
  • When the user clicks a single row in our datagridview,we handle the row click event handler of our datagridview and open a new form,our detail form.
  • In the process we pass data or user details to that particular form.
  • We are using DataGridViewImageColumn to render image in our datagridview.
  • We are loading images from file system.

FORM 1

Our Master form with a datagridview with images and text.  

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace DGView_Images
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            fillData();

            dataGridView1.SelectionMode = DataGridViewSelectionMode.FullRowSelect;
        }

        private void fillData()
        {
           //CONSTRUCT TEXT COLUMNS
            dataGridView1.ColumnCount = 3;
            dataGridView1.Columns[0].Name = "Name";
            dataGridView1.Columns[1].Name = "Position";
            dataGridView1.Columns[2].Name = "Team";

            //CONSTRUCT THE IMAGE COLUMN
            DataGridViewImageColumn imgCol = new DataGridViewImageColumn();
            imgCol.HeaderText = "Photo";
            imgCol.Name = "Photo";
            dataGridView1.Columns.Add(imgCol);

            //DATA
            //FIRST row
            Image img=Image.FromFile(@"C:/Imgs/vanpersie.jpg");
            //THEN AD ROW DATA
            Object[] row = new Object[] { "Van Perise", "Striker", "Man Utd", img };
            dataGridView1.Rows.Add(row);

            //2nd ROW
            img = Image.FromFile(@"C:/Imgs/herera.jpg");
            row = new Object[] { "Ander Herera", "Midfielder", "Man Utd", img };
            dataGridView1.Rows.Add(row);

            //3rd ROW
            img = Image.FromFile(@"C:/Imgs/hazard.jpg");
            row = new Object[] { "Eden Hazard", "Winger", "Chelsea", img };
            dataGridView1.Rows.Add(row);

            //4th ROW
            img = Image.FromFile(@"C:/Imgs/ramsey.jpg");
            row = new Object[] { "Aaron Ramsey", "Midfielder", "Arsenal", img };
            dataGridView1.Rows.Add(row);

            //5th ROW
            img = Image.FromFile(@"C:/Imgs/oscar.jpg");
            row = new Object[] { "Oscar", "Midfielder", "Chelsea", img };
            dataGridView1.Rows.Add(row);

        }

        private void dataGridView1_CellClick(object sender, DataGridViewCellEventArgs e)
        {
            string name = dataGridView1.SelectedRows[0].Cells["Name"].Value.ToString();
            string position = dataGridView1.SelectedRows[0].Cells["Position"].Value.ToString();
            string team = dataGridView1.SelectedRows[0].Cells["Team"].Value.ToString();
            Image img = (Image)dataGridView1.SelectedRows[0].Cells["Photo"].Value;

            Form2 f = new Form2(name,position,team,img);
            f.Show();

        }

    }
}

FORM 2

This is our Form 2,our detail form.It receives data from form one and displays in textboxes and the image in picturebox.  

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace DGView_Images
{
    public partial class Form2 : Form
    {
        public Form2(string name, string position, string team, Image img)
        {
            InitializeComponent();
            //GET DATA AND ASSIGN THEM TO FIELDS WHEN FORM IS INITIALIZED

            headerLabel.Text = name + " Details";
            nameTxt.Text = name;
            positionTxt.Text = position;
            teamTxt.Text = team;
            pictureBox1.Image = img;

        }
    }
}

Best Regards.

Comments