Practical ASP.NET
Updating Multiple GridView Rows
Putting updateable controls in the ItemTemplate in a GridView gives developers what they want: the ability for users to change more than one row at a time. The cost is writing some extra code.
By default, in a GridView users can only put one row at a time into edit mode. When users are updating multiple rows they get saddled with a very repetitious workflow: Click the Edit button for the first row...Make the change...Click the Update button...Click the Edit button for the next row...Make the change...Click the Update button...Click the Edit button...
You get the picture. This workflow is especially frustrating if the user is updating a single field in the GridView (for example, a checkbox that supports a "Delete all selected rows" button).
As an example, I recently had a question from a developer who was creating a survey. All the developer wanted to do was give the user the ability to work down one column in the GridView that contained a RadioButtonList, checking off a choice in each row. The DataGrid was driven by a DataTable in a DataSet that held all the rows for the survey, along with the current user's response.
The goal was to let users check off the radio buttons without having to put the row in edit mode. While this is possible, it's not in the "natural" design of the GridView. The trick is to populate the ItemTemplate -- normally reserved for displaying data -- with controls that allow the user to enter data.
Editing Data in the ItemTemplate
The first step in the solution was to convert the column that would contain the RadioButtonList into a Template column. The second step was to edit that Template column and replace the default control in the column with an updateable control. In this case, we replaced the default Label with a RadioButtonList that had its DataSource set to a table that listed the user's choices.
When the user finished making their changes, they clicked an "Update Survey" button on the page. In the Click event of that button, we needed to capture the user's entries in each row and update the DataSet with the Survey data.
In the Click event of the update button, we iterated through the GridView and moved data from the control in the GridView to the corresponding row in the DataSet. This is easiest if paging isn't turned on. Without paging, all we'd need to do is move the value from row i in the GridView to row i in the table in the DataSet. (For a detailed discussion on how to access controls in a GridView, see my column "Getting Data Out of the GridView.")
Fortunately, supporting paging isn't all that more difficult. The solution is to use the DataTable's Select method to find the row in the DataTable that matches the row in the GridView. In this example, I'm searching the DataSet using the table's primary key -- a column called "Id" -- that's displayed in the first column in the GridView. While I'll only ever find one matching record, the DataSet's Select method returns an array of DataRows, so I have to access the first row in the result (drs[0]). The field that's being updated from the RadioButtonList is the third field in the row, so the code updates the row in position zero and the column in position two (as shown in Listing 1).
After updating the DataSet, we still needed to call the TableAdapter's Update method to move the updates back to the database. However, while we had to do more work, the result was a much simpler workflow for the users working with the GridView.
About the Author
Peter Vogel is a system architect and principal in PH&V Information Services. PH&V provides full-stack consulting from UX design through object modeling to database design. Peter tweets about his VSM columns with the hashtag #vogelarticles. His blog posts on user experience design can be found at http://blog.learningtree.com/tag/ui/.