An Extensive Examination of the DataGrid Web Control: Part 7, Part 3By Scott Mitchell and Matthew Rouse
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
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
SelectedIndexproperty. For this we (again) have to use the databinding syntax we used to specify the
DataSourceproperty. 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:
GetSelIndex function, which we've yet to write, accepts the
from the row that's being edited. (This is why in our SQL statement that populates the DataGrid we
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 5th
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).
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
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,
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
property. This may sound a bit confusing, but hopefully a code example will help clear things up!
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
(Recall that the passed in
FAQCategoryID corresponds to the
the row being edited.) Once a match is found, the index of the row where it was found is returned (that's
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
OnUpdateCommandevent 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
OnUpdateCommandevent 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
instance; at this point we can access the
SelectedItem.Value property, which has the
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:
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.
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
tblFAQCategorytable 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!