C# DataGridView Customization Examples

People love displaying data in Grids. This is especially true when it comes to desktop development in languages like C#,VB.NET and Java. In the web, people mostly display blogposts in Lists.

However, in the desktop world you normally need to display alot of data like student or hospital records and these data normally need to be edited, searched and manipulated in various ways. Hence Grids do actually make a lot of sense.

One of the most flexible solutions for rendering list or tabular data is the datagridview. This component has alot of built-in customization options that allows render different data types.

While Java has JTable, C# and VB.NET do have datagridview. This component is one of the most powerful and flexible winforms widgets. Not only does it allow you manipulate and edit data in different ways, it supports embeding other components like CheckBoxes, PictureBox and comboBox inside the DaTaGrirdView cells. In this lesson, we see how to embed a combobox inside the datagridview cell.

Overview

The dataGridView component allows us display data in Grids that are very flexible. The class itself belongs to System.Windows.Forms namespace, meaning it’s a winform widget. Futhermore, it resides inside the System.Windows.Forms.dll assembly. It’s a component that exists for C#, VB.NET, C++ and F#.

In this tutorial we want to look at these customization options as simple howTo Examples.

Example 1: C# DataGridView Columns – Add ComboBox Column

Questions this Examples helps answer.

• How do we use datagridview component?
• How do we render a combobox inside the datagridview cells?
• How to customize datagridview to display a combobox.
• DataGridView ComboBox column example.

Asssumptions.

We assume that you can drag a datagridview component in visual studio onto your winforms.

Screenshot

• Here’s the screenshot of the project.

Source Code

Lets have a look at the source code.

Form1.cs

using System;
using System.Collections;
using System.Windows.Forms;

namespace ComboBox_Column
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            update();
        }

        //UPDATE DGVIEW
        public void update()
        {
            //ADD COLUMNS
            dataGridView1.ColumnCount = 4;
            dataGridView1.Columns[0].Name = "Position";
            dataGridView1.Columns[1].Name = "Team";
            dataGridView1.Columns[2].Name = "Points";
            dataGridView1.Columns[3].Name = "Games";

            //ADD ROWS
            ArrayList row = new ArrayList();
            row.Add("1");
            row.Add("Chelsea");
            row.Add("83");
            row.Add("37");
            dataGridView1.Rows.Add(row.ToArray());

            //ADD 2ND ROW
            row = new ArrayList();
            row.Add("2");
            row.Add("Man City");
            row.Add("79");
            row.Add("37");
            dataGridView1.Rows.Add(row.ToArray());

            //ADD 3rd ROW
            row = new ArrayList();
            row.Add("3");
            row.Add("Man Utd");
            row.Add("76");
            row.Add("37");
            dataGridView1.Rows.Add(row.ToArray());

            //ADD 4th ROW
            row = new ArrayList();
            row.Add("4");
            row.Add("Arsenal");
            row.Add("77");
            row.Add("37");
            dataGridView1.Rows.Add(row.ToArray());

            DataGridViewLinkColumn lnk = new DataGridViewLinkColumn();
            dataGridView1.Columns.Add(lnk);
            lnk.HeaderText = "Links";
            lnk.Name = "http://fifa.com";
            lnk.Text = "http://fifa.com";
            lnk.UseColumnTextForLinkValue = true;

            ////ADD COMOBO COLUMNS
            DataGridViewComboBoxColumn combo = new DataGridViewComboBoxColumn();
            combo.HeaderText = "Year Won";
            combo.Name = "combo";
            row = new ArrayList();
            row.Add("2015");
            row.Add("2014");
            row.Add("2013");
            row.Add("2012");
            combo.Items.AddRange(row.ToArray());
            dataGridView1.Columns.Add(combo);
        }
    }
}

Download

Just copy the above code.

How To Run

1. Drag Drop a datagridview in your Form in visual studio.
2. Copy the Form1 class above into your Form1.

Example 2: C# DataGridView – Show/Hide Rows and Columns

Lets see how to show and hide both rows an columns programmatically. In brief this is what we do :

• Populate datagridview with data,both rows and columns.
• When hide button is clicked,we hide either the row or column that's selected.
• When show button is clicked, we show either the row or column that's selected.

Here's the code :

using System;
using System.Collections;
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 Add_n_Hide
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            update();
        }

        public void update()
        {
            //ADD COLUMN
            dataGridView1.ColumnCount = 3;
            dataGridView1.Columns[0].Name = "Position";
            dataGridView1.Columns[1].Name = "Team";
            dataGridView1.Columns[0].Name = "Points";

            //ADD ROWS
            ArrayList row = new ArrayList();
            row.Add("1");
            row.Add("Real Madrid");
            row.Add("90");
            dataGridView1.Rows.Add(row.ToArray());

            row = new ArrayList();
            row.Add("2");
            row.Add("Barcelona");
            row.Add("88");
            dataGridView1.Rows.Add(row.ToArray());

            row = new ArrayList();
            row.Add("3");
            row.Add("Atletico Madrid");
            row.Add("79");
            dataGridView1.Rows.Add(row.ToArray());

            //ADD BUTTON COLUMN
            DataGridViewButtonColumn button = new DataGridViewButtonColumn();
            button.HeaderText = "Click Me";
            button.Name = "myButton";
            button.Text = "Click Me";
            button.UseColumnTextForButtonValue=true;
            dataGridView1.Columns.Add(button);
        }

        private void hideColumnBtn_Click(object sender, EventArgs e)
        {
            dataGridView1.Columns[0].Visible = false;

        }

        private void showColumnBtn_Click(object sender, EventArgs e)
        {
            dataGridView1.Columns[0].Visible = true;
        }

        private void hideRowBtn_Click(object sender, EventArgs e)
        {
            dataGridView1.Rows[0].Visible = false;
        }

        private void showRowBtn_Click(object sender, EventArgs e)
        {
            dataGridView1.Rows[0].Visible = true;
        }

        private void dataGridView1_CellClick(object sender, DataGridViewCellEventArgs e)
        {
            if(e.ColumnIndex==3)
            {
                MessageBox.Show((e.RowIndex+1).ToString()+" clicked");
            }
        }
    }
}

Example 3: C# DataGridView – With CheckBoxes

Making a custom DataGridView with CheckBoxes and handle their events.

For the CheckBox column we shall be using DataGridViewCheckBoxColumn class.We also see how to find the current position of the checkbox and check it. Here's the code.

using System;
using System.Collections;
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 CheckBox_Column
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            update();
        }

        //UPDATE DATAGRIDVIEW
        public void update()
        {
            //ADD COLUMNS
            dataGridView1.ColumnCount = 3;
            dataGridView1.Columns[0].Name = "Position";
            dataGridView1.Columns[1].Name = "Team";
            dataGridView1.Columns[2].Name = "Points";

            //ADD ROWS
            ArrayList row = new ArrayList();
            row.Add("1");
            row.Add("PSG");
            row.Add("78");
            dataGridView1.Rows.Add(row.ToArray());

            //2ND ROW
            row = new ArrayList();
            row.Add("2");
            row.Add("LYON");
            row.Add("72");
            dataGridView1.Rows.Add(row.ToArray());

            //3RD ROW
            row = new ArrayList();
            row.Add("3");
            row.Add("Marseille");
            row.Add("70");
            dataGridView1.Rows.Add(row.ToArray());

            //ADD CHECKBOX COLUMN
            DataGridViewCheckBoxColumn chk = new DataGridViewCheckBoxColumn();
            chk.HeaderText = "Qualified";
            chk.Name = "CheckBox";
            dataGridView1.Columns.Add(chk);

        }

        private void dataGridView1_CellClick(object sender, DataGridViewCellEventArgs e)
        {
            if(e.ColumnIndex==3)
            {
                MessageBox.Show((e.RowIndex+1).ToString()+" Row Clicked");

            }
        }
    }
}

Example 4: C# DataGridView Columns – Add Link Column

Here is a C# DataGridView Link Column example tutorial.

DataGridView can be used to display several types of data. These different types shall correspond to different DataGridView columns.

DataGridViewLinkColumn

• To Show links in row cells.
• Manual data binding.
• You can respond to user clicks on links by handling the CellContent
• But be aware this event is distinct from the CellClick and CellMouseClick events, which normally occur whenever a user clicks anywhere in a cell.

using System;
using System.Collections;
using System.Windows.Forms;

namespace Link_Column
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            update();
        }

        //UPDATE DGVIEW
        public void update()
        {
            //ADD COLUMNS
            dataGridView1.ColumnCount = 4;
            dataGridView1.Columns[0].Name = "Position";
            dataGridView1.Columns[1].Name = "Team";
            dataGridView1.Columns[2].Name = "Points";
            dataGridView1.Columns[3].Name = "Games";

            //ADD ROWS
            ArrayList row = new ArrayList();
            row.Add("1");
            row.Add("Man Utd");
            row.Add("80");
            row.Add("38");
            dataGridView1.Rows.Add(row.ToArray());

            //ADD 2ND ROW
            row = new ArrayList();
            row.Add("2");
            row.Add("Man City");
            row.Add("78");
            row.Add("38");
            dataGridView1.Rows.Add(row.ToArray());

            //ADD 3rd ROW
            row = new ArrayList();
            row.Add("3");
            row.Add("Arsenal");
            row.Add("76");
            row.Add("38");
            dataGridView1.Rows.Add(row.ToArray());

            ////ADD LINK COLUMN
            DataGridViewLinkColumn link = new DataGridViewLinkColumn();
            dataGridView1.Columns.Add(link);
            link.HeaderText = "Link";
            link.Name = "http://fifa.com";
            link.Text = "Fifa";
            link.UseColumnTextForLinkValue = true;

        }
    }
}

Reminders

• Please add a DataGridView to your form.
• In this case I have called it datagridview1.

Example 5: C# DataGridView Columns – Add Button Column

Here is a C# DataGridView Button Column example tutorial.

DataGridView can be used to display several types of data. These different types shall correspond to different DataGridView columns.

DataGridViewButtonColumn

• To Show buttons in row cells.
• Obviously is an unbound column.
• Useful way of providing action buttons to users, e.g. delete, edit etc.
• Handle Clicks using DataGridView,CellClick events.

Today we see an example involving CheckBox column.To have an overview of DataGridView Columns,see DataGridView Column Types.

Otherwise let's see a Button example below :

using System;
using System.Collections;

using System.Windows.Forms;

namespace Button_Column
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            update();
        }

        //UPDATE DGVIEW
        public void update()
        {
            //ADD COLUMNS
            dataGridView1.ColumnCount = 3;
            dataGridView1.Columns[0].Name = "Position";
            dataGridView1.Columns[1].Name = "Team";
            dataGridView1.Columns[2].Name = "Points";

            //ADD ROWS
            ArrayList row = new ArrayList();
            row.Add("1");
            row.Add("Man Utd");
            row.Add("78");
            dataGridView1.Rows.Add(row.ToArray());

            //2ND ROW
            row = new ArrayList();
            row.Add("2");
            row.Add("Man City");
            row.Add("77");
            dataGridView1.Rows.Add(row.ToArray());

            //3rd ROW
            row = new ArrayList();
            row.Add("3");
            row.Add("Chelsea");
            row.Add("74");
            dataGridView1.Rows.Add(row.ToArray());

            ////ADD BUTTON COLUMN
            DataGridViewButtonColumn btn = new DataGridViewButtonColumn();
            btn.HeaderText = "Buttons";
            btn.Name = "button";
            btn.Text = "Click Me";
            btn.UseColumnTextForButtonValue = true;
            dataGridView1.Columns.Add(btn);

        }

        private void dataGridView1_CellClick(object sender, DataGridViewCellEventArgs e)
        {
            if(e.ColumnIndex==3)
            {
                MessageBox.Show((e.RowIndex+1).ToString() +" Row Clicked");
            }
        }
    }
}

Reminders

• Please add a DataGridView to your form.
• In this case I have called it datagridview1.

Example 6: C# DataGridView – Load Images In Grid

This is a simple example where we load images from our file system using the Image class.This is what we do in short :

• We populate our datagridview with images from our local file system.
• We render the images using DataGridViewImageColumn.
• We show 3 columns of images.

Here's the code :

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_Grid
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            fillData();

        }

        private void fillData()
        {
            //CONSTRUCT FIRST COLUMN
            DataGridViewImageColumn imgCol = new DataGridViewImageColumn();
            imgCol.HeaderText = "Photo";
            imgCol.Name = "Photo";
            dataGridView1.Columns.Add(imgCol);

            //CONSTRUCT 2ND COLUMN
            DataGridViewImageColumn imgCol1 = new DataGridViewImageColumn();
            imgCol1.Name = "Album";
            dataGridView1.Columns.Add(imgCol1);

            //CONSTUCT 3RD COLUMN
            DataGridViewImageColumn imgCol2 = new DataGridViewImageColumn();

            imgCol.Name = "Me";
            dataGridView1.Columns.Add(imgCol2);

            //DATA
            //FIRST ROW
            Image img = Image.FromFile(@"C:/Imgs/vanpersie.jpg");
            Image img1 = Image.FromFile(@"C:/Imgs/mata.jpg");
            Image img2 = Image.FromFile(@"C:/Imgs/costa.jpg");
            Object[] row = new Object[] { img, img1, img2 };
            dataGridView1.Rows.Add(row);

            //2nd row
            img = Image.FromFile(@"C:/Imgs/herera.jpg");
            img1 = Image.FromFile(@"C:/Imgs/carrick.jpg");
            img2 = Image.FromFile(@"C:/Imgs/scream.jpg");
             row = new Object[] { img, img1, img2 };
            dataGridView1.Rows.Add(row);

            //3rd row
            img = Image.FromFile(@"C:/Imgs/hazard.jpg");
            img1 = Image.FromFile(@"C:/Imgs/degea.jpg");
            img2 = Image.FromFile(@"C:/Imgs/thibaut.jpg");
            row = new Object[] { img, img1, img2 };
            dataGridView1.Rows.Add(row);

            //4th ROW
            img = Image.FromFile(@"C:/Imgs/ramsey.jpg");
            img1 = Image.FromFile(@"C:/Imgs/ozil.jpg");
            img2 = Image.FromFile(@"C:/Imgs/sanchez.jpg");
            row = new Object[] { img, img1, img2 };
            dataGridView1.Rows.Add(row);

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

    }
}

Example 7: C# DataGridView – ComboBox Column Selection Event

We are using a datagridview with combobox column.

Our purpose here is to see how to handle the selectedIndex changed of a combobox in our combobox column.

First obviously is to fill our datagridview and combobox with some data.Right now our data source is a simple arraylist. Here's the code :

using System;
using System.Collections;
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 Combo_Column_Events
{
    public partial class Form1 : Form
    {
        ComboBox combo;

        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            adddata();

        }

        private void adddata()
        {
            //ADD COLUMNS
            dataGridView1.ColumnCount = 3;
            dataGridView1.Columns[0].Name = "Position";
            dataGridView1.Columns[1].Name = "Team";
            dataGridView1.Columns[2].Name = "Points";

            //ADD ROWS
            ArrayList row = new ArrayList();
            row.Add("1");
            row.Add("PSG");
            row.Add("78");
            dataGridView1.Rows.Add(row.ToArray());

            //2ND ROW
            row = new ArrayList();
            row.Add("2");
            row.Add("LYON");
            row.Add("72");
            dataGridView1.Rows.Add(row.ToArray());

            //3RD ROW
            row = new ArrayList();
            row.Add("3");
            row.Add("Marseille");
            row.Add("70");
            dataGridView1.Rows.Add(row.ToArray());

            //ADD COMBOBOX COLUMN
            DataGridViewComboBoxColumn combo = new DataGridViewComboBoxColumn();
            combo.HeaderText = "Years Won";
            combo.Name = "combo";
            row = new ArrayList();
            row.AddRange(new String[] { "2015", "2012", "2010", "1999" });
            combo.Items.AddRange(row.ToArray());

            //ADD THE COLUMN  TO DATAGRIDVIEW
            dataGridView1.Columns.Add(combo);
        }

        private void dataGridView1_EditingControlShowing(object sender, DataGridViewEditingControlShowingEventArgs e)
        {
            //GET OUR COMBO OBJECT
            combo = e.Control as ComboBox;
            if(combo != null)
            {
                // AVOID ATTACHMENT TO MULTIPLE EVENT HANDLERS
                combo.SelectedIndexChanged -= new EventHandler(combo_SelectedIndexChanged);

                //THEN NOW ADD
                combo.SelectedIndexChanged +=combo_SelectedIndexChanged;
            }
        }

        private void combo_SelectedIndexChanged(object sender, EventArgs e)
        {
            string selected = (sender as ComboBox).SelectedItem.ToString();
            MessageBox.Show(selected);
        }

    }
}

Cheers.