Enhancing Inserting Data through the DataGrid FooterBy Scott Mitchell
In a previous article by John Sanborn titled Adding a New Record to the DataGrid, John examined how to use the DataGrid footer as a means for inserting a new record into the DataGrid. For example, as this screenshot shows, the footer can contain a TextBox Web control for each column. To add a new record to the database, the user simply needs to type in the values for each of the columns in the TextBoxes in the footer and click the "Add" button. (Be sure to have read John's article in its entirety before continuing on with this article...)
John's article demonstrates how to create a simple interface for inserting information into the DataGrid via the footer. But what if you need a more complicated footer, one that contains, say, both TextBox Web controls and data-depended DropDownList Web controls? This article examines how to add a data-dependent DropDownList to the footer. Furthermore, it shows how to add two DropDownLists, where one is dependent on the other.
Adding a Data-Dependent DropDownList to the Footer
Adding a data-dependent DropDownList Web control to the DataGrid's footer is similar to adding a DropDownList Web control to the a particular DataGrid column's editing interface. (The steps for adding a DropDownList to the column's editing interface was discussed at length in An Extensive Examination of the DataGrid: Part 7.)
As discussed in Adding a New Record to the DataGrid, when using the DataGrid footer as an interface for inserting new records, each of the DataGrid's columns must be TemplateColumns, so that we can specify the column's footer. For example, a DataGrid with a footer inserting interface and two columns might have the following TemplateColumn contents:
The data displayed in the above DataGrid comes from the ASPFAQs.com database, and displays the
category and the description for the 10 most viewed FAQs. What is important to understand is that
each FAQ has a
CategoryID field, which ties the FAQ to one of several categories
that are listed in the
tblFAQCategory table. Therefore, the
in the table of FAQs is a foreign key. Therefore, we don't want to let the user just type in
a Category name when inserting a new FAQ - rather, we want to restrict the user to choosing the category
from a list of available categories (specifically those categories in the
This exact same problem presented itself in an earlier article, An Extensive Examination of the DataGrid: Part 7.
That article examined how to add editing support to the DataGrid. If you are going to let a user
edit the category of a FAQ through the DataGrid's editing interface, it is important that the
user can only change the category to one of the categories in the
For this reason, we needed to use a data-dependent DropDownList Web control in the editing interface, just
like we will need to use a data-dependent DropDownList in the inserting interface in the footer.
(In this article we will not delve into the specifics of adding a data-dependent DropDownList; please
read An Extensive Examination of the DataGrid: Part 7 for more information on this topic.)
The following source code and live demo illustrates how to add a single data-dependent DropDownList Web control to the footer of the DataGrid:
Now that we've seen how to add a single data-dependent DropDownList, let's turn our attention to adding two such DropDownLists, with the catch that one of the DropDownLists is dependent on the other. For example, the first DropDownList might list a number of FAQ categories. When a FAQ category is chosen, the second DropDownList would then display the various subcategories for the selected category. We'll examine how to accomplish this in Part 2 of this article.