An Extensive Examination of the DataGrid Web Control: Part 7, Part 3

By Scott Mitchell and Matthew Rouse

---

Read Part 1

Read Part 2

---

In Part 2 of this article, we looked at the nity-grity details of the DataGrid, and how to apply this low-level knowledge to allow for a databound DropDownList in the EditItemTempalte. In this part we'll examine how to set the DropDownList's SelectedIndex property, as well as how to read the user-selected value of the DropDownList in the DataGrid's OnUpdateCommand event handler.

Ensuring that the DropDownList has the Correct Selected Item

In order to ensure that the DropDownList has the correct selected item when it enters edit mode, we need to programmatically set the DropDownList's SelectedIndex property. For this we (again) have to use the databinding syntax we used to specify the DataSource property. Specifically, we need to call a function and pass in the value of the selected FAQ's FAQCategoryID. This is accomplished by using the following markup in the EditItemTempalte:

<asp:TemplateColumn HeaderText="Category"> <ItemTemplate> <%# DataBinder.Eval(Container.DataItem, "CategoryName") %> </ItemTemplate> <EditItemTemplate> <asp:DropDownList runat="server" id="lstCategories" DataValueField="FAQCategoryID" DataTextField="Name" DataSource="<%# GetCategories() %>" SelectedIndex='<%# GetSelIndex(Container.DataItem("FAQCategoryID")) %>' /> </EditItemTemplate> </asp:TemplateColumn>

The GetSelIndex function, which we've yet to write, accepts the FAQCategoryID value from the row that's being edited. (This is why in our SQL statement that populates the DataGrid we get the FAQCategoryID column from the tblFAQ table, even though we don't display it in the DataGrid.) Realize that the SelectedIndex property of the DropDownList needs to be an integer value between 0 and the number of items in the DropDownList. To make the 5^th item in the DropDownList the selected one, we'd simply set the SelectedIndex property to 4 (since the first item has an index value of 0).

Hence, the GetSelIndex function needs to return an integer that corresponds to the item in the DropDownList that needs to be selected. Since we know that the DataSet ddlDataSet is used to populate the DropDownList, we know that there is a one-to-one correspondence between the index of the rows in the ddlDataSet DataSet and the item indexes in the DropDownList. Therefore, our GetSelIndex function simply needs to iterate through this DataSet, comparing each DataSet row's value to the passed in FAQCategoryID. Once it finds a match, it can then return the row's index, which will then be assigned to the DropDownList's SelectedIndex property. This may sound a bit confusing, but hopefully a code example will help clear things up!

Function GetSelIndex(CatID as String) as Integer Dim iLoop as Integer 'Loop through each row in the DataSet Dim dt as DataTable = ddlDataSet.Tables("Categories") For iLoop = 0 to dt.Rows.Count - 1 If Int32.Parse(CatID) = _ Int32.Parse(dt.Rows(iLoop)("FAQCategoryID")) then Return iLoop End If Next iLoop End Function

[View a Live Demo!]

The above code simply iterates through the rows in the DataSet ddlDataSet, comparing the current DataSet row's FAQCategoryID value to the value of the passed in FAQCategoryID. (Recall that the passed in FAQCategoryID corresponds to the FAQCategoryID of the row being edited.) Once a match is found, the index of the row where it was found is returned (that's what the Return iLoop does...). The value returned is then set to the DropDownList's SelectedIndex property, and then, when the row is edited, the value in the DropDownList that is displayed by default will be the category of the FAQ being edited! Check out the live demo to see the code in action!

Retrieving the Value of the DropDownList in the OnUpdateCommand Event Handler

Recall that when the user edits a row, an "Update" and "Cancel" button appear. (In the live demos for this article I've been using the text "OK" for the "Update" button.) When the user clicks the "Update" button the OnUpdateCommand event fires. As we discussed in Part 6, in order to update the database with the changes made during the editing phase you will need to provide an event handler for the OnUpdateCommand event that updates the database with the values entered by the user.

To retrieve the user-entered value from the DropDownList we need to get an instance of the DropDownList control using the FindControl method. We then need to cast it to a DropDownList instance; at this point we can access the SelectedItem.Value property, which has the FAQCategoryID of the DropDownList option selected by the user. You'll likely note that the code is very similar to the code used for extracting the value out of the default editing interface TextBoxes. (To brush up on this code, be sure to (re)read Part 6.)

The code for the OnUpdateCommand event handler can be as follows:

Sub dgPopFAQs_Update(sender As Object, e As DataGridCommandEventArgs) 'Determine what category was selected Dim strCategoryID as String, strCategoryName as String strCategoryID = CType(e.Item.FindControl("lstCategories"), _ DropDownList).SelectedItem.Value strCategoryName = CType(e.Item.FindControl("lstCategories"), _ DropDownList).SelectedItem.Text ... Make a SQL call to update the database ... 'Return the DataGrid to its pre-editing state dgPopularFAQs.EditItemIndex = -1 BindData() End Sub

[View a Live Demo!]

Note that you will also need to add a line to your DataGrid Web control to wire up the OnUpdateCommand to the above event handler.

Using the EditItemTemplate for Other Edit Interface Customizations

In this article we examined how to use the EditItemTemplate for adding a DropDownList. You can, however, use it for any other customization to the editing interface for a DataGrid column. For example, you may find the default TextBox generated by the DataGrid to be too small; one could use the EditItemTemplate to increase the TextBox size. Another very practical application would be if you had a Yes/No type of field - it would make much more sense to add a "Yes" / "No" DropDownList or set of radio buttons than to present the user with a TextBox.

In the last live demo note that the "Description" editing interface has been enhanced to allow for a 75-column width TextBox.

Conclusion

In this article we examined how to extend the lessons learned in Part 6 as to allow for customization of the DataGrid's editing interface. We first looked at how to specify a custom editing interface using the EditItemTemplate tag in the TemplateColumn tag. Next, we examined how to bind the contents of the tblFAQCategory table to the DropDownList, and how to have the correct item automatically selected by default. Finally, we studied how to have read in the value selected by the user from the DropDownList; this step is vital for storing the user's desired edits to the row back into the database.

Keep in mind that the EditItemTemplate allows for (essentially) infinite possibilities for the editing interface - you are only limited by your creativity!

Happy Programming!

By Scott Mitchell and Matthew Rouse