C# Tutorial - Binding a DataGridView to a Collection [Intermediate]

This tutorial is kind of a follow-up to my previous tutorial about binding a DataGridView to an access database. In this tutorial, I'm going to demonstrate how to bind a DataGridView to a regular old .NET collection.

Before we can build a collection of objects, we first need an object. I tend to use a Car object for most of my examples. The car object simply holds some information about a typical car - make, model, and year. Below is the object I'm going to use.

public class Car
{
  private string _make;
  private string _model;
  private int _year;

  public Car(string make, string model, int year)
  {
    _make = make;
    _model = model;
    _year = year;
  }

  public string Make
  {
    get { return _make; }
    set { _make = value; }
  }

  public string Model
  {
    get { return _model; }
    set { _model = value; }
  }

  public int Year
  {
    get { return _year; }
    set { _year = value; }
  }
}

All right, now that we've got an object, we need a collection to hold them. One of my favorite collection objects is the List, located in the System.Collections.Generic namespace, so we'll start with that.

List<Car> cars = new List<Car>();
cars.Add(new Car("Ford", "Mustang", 1967));
cars.Add(new Car("Shelby AC", "Cobra", 1965));
cars.Add(new Car("Chevrolet", "Corvette Sting Ray", 1965));

Binding this to a DataGridView is painfully easy. Simply set the DataSource property of the DataGridView to the List.

_dgCars.DataSource = cars;

What will happen is that the DataGridView will automatically create columns for each property in the Car object, then create a row for each Car in the List. What we've created here is one-way binding. Any changes made by the user in the DataGridView will also take place in the List. If we want changes made to a Car to update the DataGridView, the Car object will have to implement the INotifyPropertyChanged interface.

public class Car : INotifyPropertyChanged
{
  private string _make;
  private string _model;
  private int _year;

  public event PropertyChangedEventHandler PropertyChanged;

  public Car(string make, string model, int year)
  {
    _make = make;
    _model = model;
    _year = year;
  }

  public string Make
  {
    get { return _make; }
    set
    {
      _make = value;
      this.NotifyPropertyChanged("Make");
    }
  }

  public string Model
  {
    get { return _model; }
    set
    {
      _model = value;
      this.NotifyPropertyChanged("Model");
    }
  }

  public int Year
  {
    get { return _year; }
    set
    {
      _year = value;
      this.NotifyPropertyChanged("Year");
    }
  }

  private void NotifyPropertyChanged(string name)
  {
    if(PropertyChanged != null)
      PropertyChanged(this, new PropertyChangedEventArgs(name));
  }
}

Unfortunately, this won't be enough. The List class does not support notifications from objects within its collection. Fortunately, there is an object that does - the BindingList. For the most part, the BindingList is used exactly like a List.

BindingList<Car> cars = new BindingList<Car>();

cars.Add(new Car("Ford", "Mustang", 1967));
cars.Add(new Car("Shelby AC", "Cobra", 1965));
cars.Add(new Car("Chevrolet", "Corvette Sting Ray", 1965));

_dgCars.DataSource = cars;

Now, if any external process, like a network thread, makes a change to a Car object, the DataGridView will automatically update to reflect the change.

Now we've got data in the DataGridView and any changes to the UI or the List will automatically update the other. Usually my properties aren't named something that are so user friendly. What happens when I want my columns named something else? This can be easily accomplished by disabling the AutoGenerateColumns property and by setting up the columns ourselves.

_dgCars.AutoGenerateColumns = false;

DataGridViewTextBoxColumn makeColumn = new DataGridViewTextBoxColumn();
makeColumn.DataPropertyName = "Make";
makeColumn.HeaderText = "The Car's Make";

DataGridViewTextBoxColumn modelColumn = new DataGridViewTextBoxColumn();
modelColumn.DataPropertyName = "Model";
modelColumn.HeaderText = "The Car's Model";

DataGridViewTextBoxColumn yearColumn = new DataGridViewTextBoxColumn();
yearColumn.DataPropertyName = "Year";
yearColumn.HeaderText = "The Car's Year";

_dgCars.Columns.Add(makeColumn);
_dgCars.Columns.Add(modelColumn);
_dgCars.Columns.Add(yearColumn);

BindingList<Car> cars = new BindingList<Car>();

cars.Add(new Car("Ford", "Mustang", 1967));
cars.Add(new Car("Shelby AC", "Cobra", 1965));
cars.Add(new Car("Chevrolet", "Corvette Sting Ray", 1965));

_dgCars.DataSource = cars;

Setting up the columns is pretty straight forward. There's all types of DataGridViewColumns, but I went with the basic TextBox version. All you have to do it set the HeaderText, which is what the user will see, and the DataPropertyName, which is the name of the property of the object that is bound to the DataGridView. Here's what our DataGridView looks like now:

I think that does it for binding a collection to a DataGridView. Data binding is a very powerful tool and we haven't even begun scratching the surface.