Reference: “ASP.NET 2.0 Illustrated” by Alex Homer and Dave Sussman. -ch3 illustrated book

Data Binding to Data Source Controls Along with the declarative style of setting the SqlDataSource control, the new grid and edit controls provide a DataSourceID property, which can be set to the ID of the data source. This automatically links the two controls, so that when the page is loaded, the data is fetched and displayed automatically. For example: <asp:SqlDataSource ID="SqlDataSource1" runat="server“...

Data Binding to Data Source Controls The DataKeyNames property identifies the unique key of the underlying data; it isn't required for displaying data, but it is required when you use the grid for updating data. The GridView will automatically display all columns supplied to it, but by default provides a read-only view. To enable modification, you can use the properties on the GridView Tasks pane, as shown in Figure 3.8.Figure 3.8

Figure 3.8. GridView Tasks pane

Data Binding to Data Source Controls Enabling editing and deleting adds a custom column to the grid.

Data Binding to Data Source Controls There is a ShowInsertButton property, the grid itself doesn't support the notion of a new row; you don't get a blank row into which you can add your new data. There are ways to overcome this with the grid if required you can solved these issues by setting the ShowInsertButton to false and creating a Command Button to fire the insert event, but a far better solution is to use a DetailsView or FormView control, which is where the ShowInsertButton is primarily used.

Setting the ShowInsertButton to false and creating a Command Button to fire the insert event.

Data Binding to Data Source Controls Setting the ShowDeleteButton and ShowEditButton to true automatically gives edit and delete functionality, as shown in Figure 3.9.Figure 3.9 When the Edit button is selected, the row automatically switches to edit mode, with text boxes for editing the columns. Clicking Update automatically sends the changes back to the data source, which in turn sends them back to the SQL table.

Figure 3.9. A GridView in edit mode

Data Binding to Data Source Controls No code is required to enable editing and deleting within a grid. When the Update link is clicked, the column values are passed into the parameters of the SqlDataSource and the UpdateCommand is executed. If the Cancel link is clicked, the current values are ignored and the Update-Command is not run.

Customizing the GridView Control The look shown in Figure 3.9 is the default look and behavior for a GridView control, but you can achieve complete flexibility by customizing the control.Figure 3.9

Adding a Custom Pager Having a lot of rows is always a problem, especially when displaying tables of data. This is solved by paging the data, so that a limited number of rows are shown at once. Paging is easily achieved by setting the AllowPaging property to true, and optionally the PageSize property to the number of rows to show (this defaults to 10). Adding paging will, by default, place an additional row at the bottom of the grid with the page numbers, as shown in Figure 3.10.Figure 3.10

Figure The default pager

Defining Columns If you don't want to accept the automatic generation of columns, you can set the AutoGenerateColumns property to False and use the Columns subelement to define your own. The advantage of this is that you can define how the columns appear in both display and edit modes, as opposed to the default types used by the grid. In default mode, labels are used for displaying data, and a TextBox is used in edit mode for strings, and a CheckBox for bit columns.

Defining Columns Instead of using this default, you can use the following controls: 1. BoundField, which acts like a default column, displaying text in display mode, and a TextBox in edit mode 2. ButtonField, which displays a button in each row. The button can be a standard Button, a LinkButton, or an ImageButton 3. CheckBoxField, which displays bit data as a CheckBox

Defining Columns 4. CommandField, which can display a text link, buttons, or image buttons to use for issuing commands on the grid. The commands can be standard ones to switch between display and edit mode, in which case the standard set of commands are displayed (Select, Edit, Delete, Insert, and Cancel), or custom commands to perform custom actions in the button event handler. 5. HyperLinkField, which displays a HyperLink control 6. ImageField, which displays an Image control 7. TemplateField, which provides a custom area for content

The BoundField Control The BoundField control displays as text in display mode, and as a TextBox in edit mode. The field to display is set with the DataField property, while the DataFormatString property can be used to format the value. Listing 3.7 shows the outline syntax for the BoundField control. Listing 3.7

Table 3.4. Properties of the BoundField Control

The ButtonField Control The ButtonField control is for when you need a button or link in the column to cause a page postback, perhaps to indicate that more details for the row are to be shown, or to perform an action on the row, such as editing. A ButtonField control can be a standard button, a link button, or an image button. Listing 3.8 shows the outline syntax of the ButtonField control. Listing 3.8

Table 3.5. Properties of the ButtonField Control

The CheckBoxField Control The CheckBoxField control is used to display a checkbox, which reflects the Boolean value from the underlying data, such as a bit column from SQL Server. Listing 3.9 shows the outline syntax for the CheckBoxField control. Listing 3.9

The HyperLinkField Control The HyperLinkField control is used to display a clickable link in each row using a standard HTML element. The text and link reference can be set as static text or bound to columns from the underlying data. Listing 3.10 shows the outline syntax for the HyperLinkField control. Listing 3.10

The ImageField Control The ImageField control is used to display images, using the underlying data to provide the URL for the image. Listing 3.11 shows the outline syntax for the ImageField control. Listing 3.11

Table 3.8. Properties of the ImageField Control

Command Columns Earlier in the chapter, you saw that a column can be added that can issue commands to the grid. These commands can take the form of selecting rows, deleting rows, switching between display and edit mode, or a custom command. To add these commands to a grid, you use a CommandField control, the outline syntax of which is shown in Listing 3.12.Listing 3.12

Command Columns You can use a CommandField control to provide automatic management of data editing. For example, setting the ShowEditButton property to true will display an Edit link in the column. Clicking this link will switch the row into edit mode, which automatically shows Update and Cancel links. The former will update the underlying data with your changes, while the latter will cancel your changes. Both return the row to display mode. The ShowDeleteButton property will show a Delete link, which deletes the underlying row with no user confirmation.

Styling Columns You can style columns in a number of ways, either using properties on the columns themselves, or by setting general column properties in the grid, which can be done in two ways. The first way is to set the properties on the GridView declaration, like this: <asp:GridView ID="grid1" runat="server" DataSourceID="ds1" RowStyle-BackColor="Aqua" HeaderStyle-Font-Bold="True“ Alternatively, you can set the styling as separate elements, like this:

Styling Columns There is no practical difference between the two methods, although the latter style is easier to read and keeps the styling separate from the rest of the grid declaration. Styles can also be set on columns, like this: As well as using the individual style elements, you can use CSS to style elements by using the CssClass property.

Custom GridView Commands Each submit-style button has two properties, CommandName and CommandArgument, which can be set to a specific command. When an appropriately set button is clicked within the context of a grid row, the command is executed. For example, consider the following: If this is placed in a column, then clicking the link will execute the Edit command, switching the row into edit mode, exactly as it would be done through a standard edit Command button. You can set the CommandName property to any of the following: Insert, Cancel, Delete, New, or Select.

The DetailsView Control The DetailsView control provides a view of a single row of the data, in a form style rather than a grid style. The DetailsView can be used stand-alone, or in combination with a GridView, for showing and editing individual rows. This works well when combining the selection from a grid and a SelectParameters on a SqlDataSource control, as shown in Listing 3.16.Listing 3.16

The DetailsView Control By default the DetailsView does not show any edit commands, but these can be added in one of two ways. The first is by properties on the control itself, like this: This would add the commands at the bottom of the control, as shown in Figure 3.12.Figure 3.12

The DetailsView Control Alternatively, a CommandField can be explicitly defined, like this:

Defining Fields The DetailsView automatically generates the fields based upon the underlying data. Like the GridView though, automatic generation of fields can be turned off and the fields specified directly. This is done with the AutoGenerateRows property and the Fields subelement, as shown in Listing 3.17.Listing 3.17

You can see that these are the same fields as used in the GridView, so you can use TemplateField controls to provide customization, such as displaying drop-down lists for supplier and category when editing data, as shown Listing 3.18 with the supplier and figure 3.13.Listing 3.18

Using a Stand-Alone DetailsView The DetailsView doesn't have to be used in conjunction with another control, displaying details for a selection, but can be used stand-alone. While it still only displays one row at a time, it can step through rows in a set of data, as shown in Figure 3.14, where three records have been stepped through.Figure 3.14 The navigation buttons are intelligent, so they only show when required; for the first record, only the Next and Last buttons are visible, while for the last record on, the First and Previous buttons are visible.

Custom DetailsView Commands Like the GridView, any button can emulate the standard button commands by use of the CommandName and CommandArgument properties. For the standard commands, the CommandName would be set to one of: Insert, Cancel, Delete, New, or Select. To emulate the paging buttons, you set the CommandName to Page and the CommandArgument to one of First, Last, Prev, or Next. For example:

The FormView Control If more flexibility is required than the DetailsView provides, then a FormView can be used. This is very similar in action to a DetailsView, displaying a single row at a time, but it provides no default user interface; you have to provide the entire interface via templates. Most of the properties and usage of the FormView are the same as for the DetailsView, but conceptually it differs in one major way. When using custom columns on the DetailsView, you define the fields, and then within the fields, you define the templates. With the FormView, because there is no default interface, you define the templates, and then within the templates, you put all of the content to be displayed when that template is visible. For example, consider Figure 3.15, which shows three states of a FormView.Figure 3.15