Adding the Database

To demonstrate how we will nest drop down lists within a grid view, we will need to create a simple web site with a database and a form that will contain our grid view. For this example, we will be using the Northwind SQL sample database that will be available with the source of this project. To begin, create a new ASP.NET Empty Web Site and:

  1. Right click the project in your solution explorer.
  2. Select Add ASP.NET Folder.
  3. Select App_Data.
  4. Right click the App_Data folder.
  5. Select add existing item…
  6. Select the NORTHWND.MDF database.
  7. Click add.

Next, we need to add a connection string that will allow us to connect to our database. To do this, open up the Web.Config file for editing and add in the following code:

This simply directs the web site to our database.

Creating The Form
Next we need to create a simple web form with a grid view on it that we will use to display our nested drop down lists. For this example we will be selecting some specific data from the products table that we will display in our grid view in specific columns. To begin:

  1. Right click the project in your solution explorer.
  2. Select add new item…
  3. Select a web form.
  4. Name it ‘Default.aspx’.
  5. Click add.
  6. Open Default.aspx up to source mode.
  7. Drag and drop a gridview onto the web form.
  8. Change the AutoGenerateColumns property to ‘False’.
  9. Add the following columns to the gridview:

This sets up our grid view with four different columns. The first three are bound fields that will display simple data, while the fourth is a template field to which we have added an item template with our drop down list in it. Next, we need to add in some code that will bind some data from our database to our grid view and will populate these drop down lists with the appropriate data. To begin, we will add a method that will return a data set that contains the specific data we want from our database. To do this, open Default.aspx.vb up for editing and add in the following method:

This method establishes a connection to the database and executes a SQL query that selects the four columns from the products table that we will display in our grid view. Next we will add the code to bind the data we have selected to our grid view. To do this, open Default.aspx.vb up for editing and add the following code to the Page_Load event method:

Next, we need to add the code that will populate our drop down lists with the products of their category. To do this, open Default.aspx up to design mode. Select our gridview and click the events icon in the properties window. Then, double click the RowDataBound event to generate that event method. Add the following code to that event method:

This will populate each drop down list appropriately in the event that a new row of data is bound to the grid view.

Testing

To test this out load up the web site. Ensure that the data we selected from the database is being displayed in our gridview and that each drop down list contains the correct list of products based on the category of that specific row.

Download Source Files