Enhancing Inserting Data through the DataGrid Footer

By Scott Mitchell

---

Introduction

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:

<asp:datagrid id="dgPopularFAQs" runat="server" AutoGenerateColumns="False" ShowFooter="True" ...> <Columns> <asp:TemplateColumn HeaderText="Category"> <ItemTemplate> <%# DataBinder.Eval(Container.DataItem, "CategoryName") %> </ItemTemplate> <FooterTemplate> <asp:TextBox id="txtNewCatName" runat="server" /> </FooterTemplate> </asp:TemplateColumn> <asp:TemplateColumn HeaderText="FAQ Question"> <ItemTemplate> <%# Container.DataItem("Description") %> </ItemTemplate> <FooterTemplate> <asp:TextBox id="txtNewDescription" runat="server" /> </FooterTemplate> </asp:TemplateColumn> </Columns> </asp:datagrid>

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 CategoryID 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 tblFAQCategory table).

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 tblFAQCategory table. 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:

<% @Import Namespace="System.Data" %> <% @Import Namespace="System.Data.SqlClient" %> <script language="vb" runat="server"> 'Create a connection Dim myConnection as New _ SqlConnection(ConfigurationSettings.AppSettings("connectionString")) Dim ddlDataSet as DataSet = New DataSet() Sub Page_Load(sender as Object, e as EventArgs) If Not Page.IsPostBack then BindData() End If End Sub Sub BindData() 'Lines omitted for brevity... 'See the live demo for the full source code! End Sub Function GetCategories() as DataSet 'Populate the ddlDataSet Const strSQLDDL as String = _ "SELECT FAQCategoryID, Name FROM tblFAQCategory ORDER BY Name" Dim myDataAdapter as SqlDataAdapter = New _ SqlDataAdapter(strSQLDDL, myConnection) myDataAdapter.Fill(ddlDataSet, "Categories") Return ddlDataSet End Function Sub dgPopFAQs_Insert(sender as Object, e As DataGridCommandEventArgs) If e.CommandName = "Insert" then Dim txtNewDescription as TextBox = _ e.Item.FindControl("txtNewDescription") Dim lstCategoriesInsert as DropDownList = _ e.Item.FindControl("lstCategoriesInsert") ... 'The values the user wants to insert into the Database are: ' txtNewDescription.Text and lstCategoriesInsert.SelectedItem.Value 'Here you would want to insert the data into the Database and 'then rebind the data to the DataGrid by calling BindData() End If End Sub </script> <form runat="server"> <asp:datagrid id="dgPopularFAQs" runat="server" AutoGenerateColumns="False" OnItemCommand="dgPopFAQs_Insert" ShowFooter="True" ...> <Columns> <asp:TemplateColumn ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Center" HeaderText="FAQ ID" FooterStyle-HorizontalAlign="Center"> <ItemTemplate> <%# Container.DataItem("FAQID") %> </ItemTemplate> <FooterTemplate> <asp:Button Text="Add" CommandName="Insert" runat="server" /> </FooterTemplate> </asp:TemplateColumn> <asp:TemplateColumn HeaderText="Category"> <ItemTemplate> <%# DataBinder.Eval(Container.DataItem, "CategoryName") %> </ItemTemplate> <FooterTemplate> <asp:DropDownList runat="server" id="lstCategoriesInsert" DataValueField="FAQCategoryID" DataTextField="Name" DataSource='<%# GetCategories() %>' /> </FooterTemplate> </asp:TemplateColumn> <asp:TemplateColumn HeaderText="FAQ Question"> <ItemTemplate> <%# Container.DataItem("Description") %> </ItemTemplate> <FooterTemplate> <asp:TextBox id="txtNewDescription" runat="server" Columns="80" /> </FooterTemplate> </asp:TemplateColumn> </Columns> </asp:datagrid> </form>

[View a Live Demo!]

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.

Read Part 2!