In addition to the GridView control, the DetailsView control also allows you to create Web Forms with a minimum of code. The DetailsView control allows you to view and edit the details of a particular row. The DetailsView control is in the Data section of the Toolbox, just as the GridView control is. When you drag a DetailsView control onto the form, the DetailsView Tasks menu appears, as shown in Figure 5-31.
Figure 5-31: Default.aspx in Design view, with the DetailsView control added and the DetailsView Tasks menu visible
The first item on the DetailsView Tasks menu is Auto Format, which works exactly the same way that Auto Format works for the GridView control. Here I selected Slate, the same scheme that I used for the GridView control. I also selected the same data source (SqlDataSource1) that I used for the GridView control. The Configure Data Source and Refresh Schema menu options are the same as for the GridView control, as are Edit Fields and Add New Fields.
As with the GridView Tasks menu, there are several check boxes on the menu. For the DetailsView control, these are:
Enable Paging Allows the user to page through multiple pages when there is a large number of columns (because the DetailsView control shows one column per line).
Enable Inserting Allows the user to insert new data. The data source must be set to allow insertions.
Enable Editing Allows the user to edit existing data. The data source must be set to allow editing.
Enable Deleting Allows the user to delete existing data. The data source must be set to allow deletion.
The final option on the DetailsView Tasks menu is Edit Templates. Several templates can be edited in the DetailsView control:
FooterTemplate Template for the footer of the DetailsView control
HeaderTemplate Template for the header of the DetailsView control
EmptyDataTemplate Template for the page appearance when there is no data for the DetailsView control
PagerTemplate Template for the pager, when paging is enabled
To view the DetailsView control in a reasonable format, I set the Width property of the DetailsView control to 100%. When I ran the page, it appeared as shown in Figure 5-32. (I also set the PageSize property of GridView1 to 2 so that more of the DetailsView control appeared.)
Figure 5-32: Default.aspx running, showing the DetailsView control
Selecting a Row in the GridView Control to View in the DetailsView Control
The DetailsView control is commonly used in conjunction with a GridView control. They are a natural fit: the GridView control provides the big picture, and the DetailsView control allows you to drill down into a particular record.
The DetailsView control could be used in ReadOnly mode to allow viewing of details that are not in the GridView control. For example, with selection enabled, we might want to have the DetailsView control show the details of a selected row. So far, there has been no coding at all; one line of code will be required to have the DetailsView control navigate to the correct row.
The DetailsView control has a large number of events that can be handled to manage the way that the control works. Two events are associated with the SelectedIndex property changing. (The SelectedIndex property tracks which row of the data source is currently selected.) The first is the SelectedIndexChanging event, which is fired before the index is actually changed. It accepts two parameters. The first is Sender, of type Object. The second, e, is of type GridViewSelectEventArgs. GridViewSelectEventArgs has one property that is particularly useful in this case, NewSelectedIndex. This property is the index of the newly selected row. One other property of GridViewSelectEventArgs that can be useful is Cancel, which allows you to cancel the selection.
The second SelectedIndex-related event occurs after the selected index has actually changed, named SelectedIndexChanged. This event handler has a signature similar to the SelectedIndexChanging event handler, with a second parameter of type EventArgs.
For the purpose of moving the DetailsView control to the selected row, the SelectedIndexChanging event is most useful. To add the SelectedIndexChanging event, click the GridView control in Design view. In the Properties window, click the Events button (which looks like a lightning bolt), and then double-click in the field next to SelectedIndexChanging in the list of events. This opens the code page, where you will add one line to the event handler so that it looks like this.
The naming of properties is unfortunately a little unclear here. You might guess that the DataItemIndex property would set the location of the row to be displayed in the DetailsView control. Not so. The DataItemIndex property is read-only. The PageIndex property sets the location in the data source.
When you run the page and click the second row in the grid view (blog number 6), that entry appears in the details view, as shown in Figure 5-33.
Figure 5-33: Default.aspx running, with blog 6 selected in the grid view and shown in the details view
Selecting a Row in the GridView Control to Edit in the DetailsView Control
A more common use of the DetailsView control is to allow editing of a single row. In Design view, with the application not running, selecting the Enable Editing check box on the DetailsView Tasks menu enables editing. One other property that must be set to allow editing to occur is the DefaultMode property. In the Properties window, the DefaultMode property is set to ReadOnly by default. Setting the DefaultMode property to Edit causes the DetailsView control to default to Edit mode. When the application is run and blog number 6 is selected, the screen looks like Figure 5-34.
Figure 5-34: Default.aspx running, with blog 6 selected in the grid view and shown in Edit mode in the details view
Once again, the data entry fields are not set up ideally. This problem can be overcome by creating a custom template for one or more of the fields in the DetailsView control. The easiest way to do this is to click the Edit Fields option on the DetailsView Tasks menu, select the field that needs a non-default appearance, and click the Convert This Field Into A TemplateField link in the bottom right of the Fields dialog box, as shown in Figure 5-35.
Figure 5-35: The Fields dialog box, set to convert the Subject field to a template field
A template field is different from the other field types in a DetailsView control (for instance, a bound field) in that the developer can provide a markup template that will be used to render the field. In the example shown in Figure 5-33, the Subject and Message fields are the obvious choices for converting to a template field, just as they were in the previous EditTemplate.aspx example. The markup shown in Listing 5-1 shows the default template created for the Subject and Message fields (in bold).
Listing 5-1: Markup for the DetailsView Control after Converting Subject and Message Fields to TemplateFields
By default, the DetailsView control renders the edit controls as single-line text boxes with the default width. To modify the appearance of the Subject and Message fields in the DetailsView control and make data entry of large blocks of text easier, I made the following changes in the EditItemTemplate markup block:
Added Width=80% to the EditItemTemplate and InsertItemTemplate markup blocks for the Subject field.
Added Width=80%, Height=200px, and TextMode=MultiLine to the EditItemTemplate and InsertItemTemplate markup blocks for the Message field.
Running the modified code results in a page like that shown in Figure 5-36.
Figure 5-36: Default.aspx after converting Subject and Message fields to template fields and modifying templates
One problem with the page shown in Figure 5-36 is the appearance of the text in the Message field. The font in the Message field is different from the font in the other text boxes because, when a TextMode property in a text box is set to MultiLine, the HTML is rendered not as a normal INPUT tag, but as a TEXTAREA tag. To make the text in the TextArea control appear similar to the text in the other edit controls, I added a new style to the style sheet (StyleSheet.css).
textarea { font-family:Arial; font-size:12px; }
This style sets the font of a TextArea control to be Arial 12 px (which is 12 points, not pixels), and the result is shown in Figure 5-37. Another consequence of a multiline text box being rendered as a TEXTAREA tag is that the MaxLength property is ignored. If you need to limit the length of a multiline text box, you must do so by using JavaScript.
Figure 5-37: Default.aspx after adding the textarea style to StyleSheet.css
