An Extensive Examination of the DataGrid Web Control: Part 16By Scott Mitchell
|The 16th Part in a Multi-Part Series|
This article is the fifteenth piece of a multi-part series on using the DataGrid Web control that will span
several months. The ASP.NET DataGrid Web control, which displays database information in an HTML table, is
highly versatile. The basics of the DataGrid were discussed in Part 1;
information on specifying display properties of the DataGrid was discussed in
Part 2. In Part 3
we examined how to associate custom events with the DataGrid.
In Part 4 we looked at how to extend
Part 3 to provide custom sorting on the results of a DataGrid. In
Part 5 we examined how to use templates to further customize
the DataGrid's appearance. Part 6 examined how to use the
DataGrid's built-in editing capabilities, while Part 7 looked at
customizing the editing interface using the EditItemTemplate. In Part 8
we looked at how to add client-side code to a ButtonColumn's client-side |
In Part 6 of this article series we looked at how to build an editable DataGrid, which allows the end user to edit the grid's data one row at a time. When a row is edited, each BoundColumn turns into a TextBox, allowing the end user to modify the value. This works well if the data bound to the DataGrid consists of only text data, but is insufficient if the DataGrid has lookup columns. For example, imagine that we needed to display information about products for sale. Each product likely belongs to a category of products, and the association between products and product categories is implemented as a foreign key in the products table. When editing a product, we don't want the end user to have to type in the name of the category, but rather select a category from a list of applicable categories. Thankfully, the editing interface for the DataGrid can be customized by using TemplateColumns. In Part 7 we saw precisely how to use a TemplateColumn to display a DropDownList of values. (See this live demo for an example of an editable DataGrid that uses a DropDownList in its editable row.)
Another common question I am asked is how to create an editable DataGrid where the editing interface provides a number of data-dependent DropDownLists. Returning to our products example, imagine that there were thousands of potential product categories, organized into various categories and subcategories. For example, a book on ASP.NET being sold at Amazon.com might belong in the Books > Computer and Technical > Web Development > ASP.NET category. When editing this information, rather than present all of the categories, it might make sense to first have the user choose the top-level category (Books, Electronics, DVDs, etc.), then, based on that selection, the second-level selection would be populated: Non-Fiction, Romance, Computer and Technical, Mystery, etc.; and so on, until the user has selected the most distinct category.
In this article we'll examine how to create an editable DataGrid that has two columns with data-dependent values. When a row is edited, these two columns will display DropDownLists, and we'll see how the user's choice in the first DropDownList affects the choices in the second. (If you haven't yet read Part 7, please take a minute to do so, as this article assumes you are familiar with the basics of creating an editable DataGrid with a DropDownList.)
Examining a Sample Data Model
Before we look at the specifics of displaying an editable DataGrid with two data-dependent DropDownLists, let's first take a look at a data model that could be used in such a scenario. Imagine that there exists a
Employeestable, which includes a foreign key to the
Departmentstable, which lists all of the departments in the company, and associates each employee with a single department. Now, since there may be hundreds of departments in a large company, the company is arranged into a number of divisions. Each division is comprised of a number of departments. This is modeled in the database via the
Divisionstable and the foreign key from
For example, the company might have three divisions: I.T., Sales, and Marketing. Each division would have multiple departments, and each department would have multiple employees.
- Division: I.T.
- Department: Internet Team
- Department: eCommerce Security Team
- Department: Internet Team
- Division: Sales
(At the end of this article you'll find a download that contains a Microsoft Access database with the
Divisions tables, along with an ASP.NET
Web page that illustrates these concepts.)
Displaying Employee Information in a DataGrid
Our next task is to create a DataGrid that displays information about the employees in the company. Each row of the DataGrid will need to contain information about a single employee, including the division and department they work for. To get all employees, along with their division and department names, we'll need to use a SQL query that performs an inner join, connecting the correct rows from the
Divisionstable for each employee. The SQL query might look something like:
Since we'll need to use a DropDownList when editing the division and department columns in the DataGrid, we'll need to use TemplateColumns rather than BoundColumns for these two columns. The column displaying the employee's name, however, can be a BoundColumn. The following shows what the DataGrid's declarative syntax might look like (we'll look at adding the EditItemTemplate portions of the two TemplateColumns shortly).
Such a DataGrid would have output like:
|Edit||Ben||I.T.||eCommerce Security Team|
|Edit||Charles||Sales||Sales Force Management Team|
|Edit||Chris||I.T.||eCommerce Security Team|
The next challenge is to create the EditItemTemplate for the division and department columns. We'll accomplish this is Part 2 of this article.