Add a DataGridView

Now that we've added a button with a click event, let's add a more advanced control: a DataGridView. The DataGridView control offers a flexible, customizable grid for presenting data in a tabular format.

Just like with the button, you can add a DataGridView in the designer by searching the toolbox for "DataGridView" and then dragging and dropping it into the designer.

Adding columns

Once the DataGridView has been added, click on the arrow in the upper right hand corner and choose "Edit Columns"

Once the dialog opens, click on the + icon and choose Wisej.Web.DataGridViewTextBoxColumn. Repeat this so that there are 2 columns. Click OK

Your DataGridView should now look like this:

Adding unbound data to the DataGridView

Now we need to add some data to the DataGridView. There are two ways to do this: You can bind the DataGridView to a an object such as a list, or you can add unbound data. Let's add unbound data first since it is simpler.

Click on the designer and look at the Page in the properties window. Click on the lightning bolt to open the events window, then double-click to attach to the "Load" event. The page load event happens when the page is loaded. This means this code will be called when the page is loaded. Note that the data won't show up in the designer- you'll need to run the program in order to see it.

private void Page1_Load(object sender, System.EventArgs e)
{
	dataGridView1.Rows.Add(1, "Alice");
	dataGridView1.Rows.Add(2, "Bob");
}

Add bound data to the DataGridView

Add a new class (Person)

In the Solution Explorer, right-click on WisejWebPageApplication1 and choose Add -> New Item. A popup will appear:

In the "Name" textbox type "Person.cs" and click "Add"

A new code file will open up that looks like this:

namespace WisejWebPageApplication1
{
	public class Person
	{
	}
}

Go ahead and add an ID and a Name property to the class. It should now look like this:

namespace WisejWebPageApplication1
{
	public class Person
	{
		public int ID { get; set; }
		public string Name { get; set; }
	}
}

Now that we have our person class, we can create a List full of Person objects and then bind that list to the DataGridView.

Create a List and bind it to the DataGridView

Open Page1.cs. You can do this by right-clicking on it and choosing "View Code" so as not to open it in the designer. Delete the previous code from Page1_Load and add this code:

BindingList<Person> PeopleList = new BindingList<Person>();
private void Page1_Load(object sender, System.EventArgs e)
{
	dataGridView1.DataSource = PeopleList;
	PeopleList.Add(new Person() { Name = "Alice", ID = 1 });
	PeopleList.Add(new Person() { Name = "Bob", ID = 2 });
}

Let's break down what this code does. BindingList<Person> PeopleList = new BindingList<Person>(); creates a new BindingList which can contain objects of type Person. Why use a BindingList? Why not a regular list? When you add, remove, or edit items in the BindingList, the DataGridView updates immediately without extra code. However, with a regular list it won't update automatically. Notice that here we actually added items to the BindingList after assigning it as the datasource- with a regular list, those items wouldn't show up in the DataGridView.

dataGridView1.DataSource = PeopleList; assigns the datasource of the DataGridView to be PeopleList.

And finally PeopleList.Add(new Person() { Name = "Alice", ID = 1 }); PeopleList.Add(new Person() { Name = "Bob", ID = 2 });adds two Person objects to the BindingList. Delete the two columns from the DataGridView- you won't need them as they will be automatically generated. You can delete the columns by opening the designer, clicking on the arrow in the upper right hand corner and choosing "Edit Columns". Then select each column and click on the - icon. Click OK to close the dialog.

When you run your project, it should look like this:

Note the the columns are named "ID" and "Name" automatically.