# Add a DataGridView

{% embed url="<https://youtu.be/N241PvR3fMI>" %}

Now that we've added a button with a click event, let's add a more advanced control: a [DataGridView.](https://docs.wisej.com/docs/controls/lists/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"

<figure><img src="/files/7MxTUUYzwKKdyH74ZTYa" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/2ev8sdAvfGC3q2gHgQiH" alt=""><figcaption></figcaption></figure>

Your DataGridView should now look like this:

<figure><img src="/files/CnibX7Vqc0xVEkZ3RswC" alt=""><figcaption></figcaption></figure>

## 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.

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

<figure><img src="/files/vzvqpI6rfJawd2BLyaCO" alt=""><figcaption></figcaption></figure>

## 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:

<figure><img src="/files/mbKIDohyKXgCaWVfu6MT" alt=""><figcaption></figcaption></figure>

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

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

```csharp
namespace WisejWebPageApplication1
{
	public class Person
	{
	}
}

```

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

```csharp
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.&#x20;

### 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:

```csharp
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.&#x20;

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.

<figure><img src="/files/N4TKscmzIxeiGv90jTUa" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/62mYKexojCAyWXVtyjOR" alt=""><figcaption></figcaption></figure>

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.learnwisej.net/wisej.net-tutorial/next-steps-with-wisej.net/add-a-datagridview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.