To read the article online, visit

An Extensive Examination of the DataGrid Web Control: Part 16

By 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 onclick event. In Part 9 we examined how to enhance the DataGrid's editing interface by having the editing interface's TextBox receive focus when the page is loaded. In Part 10 we looked at how to (automatically) add filtering buttons so that one can filter the data in a DataGrid. In Part 11 we examined how to create a DataGrid Web control with a column of related radio buttons. In Part 12 we examined how to create a sortable DataGrid that can be sorted in ascending and descending order. Part 13 examined how to sum up a DataGrid column and have the sum displayed in the footer. Part 14 looked at how to build a master/detail DataGrid. Part 15 looked at adding paging support to a DataGrid. This 16th part examines how to create an editable DataGrid with two data-dependent DropDownLists.

  • Read Part 17
  • Read Part 18
  • Introduction

    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 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 Employees table, which includes a foreign key to the Departments table, 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 Divisions table and the foreign key from Departments to Divisions.

    DepartmentIDint (FK)
    DivisionIDint (FK)

    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
        • Scott
        • Sam
        • Jisun
      • Department: eCommerce Security Team
        • Ben
        • Dave
        • Chris
        • Bruce
    • Division: Sales
      • ...

    (At the end of this article you'll find a download that contains a Microsoft Access database with the Employees, Departments, and 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 Departments and Divisions table for each employee. The SQL query might look something like:

    SELECT EmployeeID, e.Name,                  -- Employee info
           d.DepartmentID, d.Name as DeptName,   -- Department info
           dv.DivisionID, dv.Name as DivName    -- Division info
    FROM (Employees e
       INNER JOIN Departments d ON
          d.DepartmentID = e.DepartmentID)
       INNER JOIN Divisions dv ON
          dv.DivisionID = d.DividsionID
    ORDER BY e.Name

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

    <asp:DataGrid runat="server" ... AutoGenerateColumns="False">
        <asp:EditCommandColumn ... />
        <asp:BoundColumn DataField="Name" HeaderText="Name" />
        <asp:TemplateColumn HeaderText="Division">
            <%# DataBinder.Eval(Container.DataItem, "DivName") %>
        <asp:TemplateColumn HeaderText="Department">
            <%# DataBinder.Eval(Container.DataItem, "DeptName") %>

    Such a DataGrid would have output like:

     Name Division Department
    EditBenI.T.eCommerce Security Team
    EditCharlesSalesSales Force Management Team
    EditChrisI.T.eCommerce Security Team
    EditScottI.T.Internet 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.

  • Read Part 2!

  • Article Information
    Article Title: ASP.NET.An Extensive Examination of the DataGrid Web Control: Part 16
    Article Author: Scott Mitchell
    Published Date: May 19, 2004
    Article URL:

    Copyright 2021 QuinStreet Inc. All Rights Reserved.
    Legal Notices, Licensing, Permissions, Privacy Policy.
    Advertise | Newsletters | E-mail Offers