The GridView Control

One of the most useful controls introduced with ASP.NET 1.0 is the DataGrid . This control makes it easy to display rowsets of data, provides plenty of opportunities for formatting the output, and even supports in-line editing of the data. However, to use a DataGrid you still have to write code that generates the rowset and then bind it to the DataGrid control at runtime.

As you saw in Chapter 3, the new data source controls in ASP.NET 2.0 remove the need to write data access code and can also expose various kinds of data as rowsets suitable for data binding to any of the ASP.NET server controls. However, to take maximum advantage of these data source controls, Microsoft added a new grid control in version 2.0. The GridView control enables data to be displayed, sorted, and edited without having to write any code at all. It can even provide a paging facility andwhen combined with the DetailsView control that you'll read more about later in this chapterenables you to create pages that allow new data rows to be inserted.

An Overview of the GridView Control

In basic terms, the GridView is similar to the version 1.0 DataGrid (which is, of course, still provided within the Framework). It exposes many of the same features for formatting the data content using style attributes and templates. However, it also adds a few extra features, such as support for multiple primary keys, extra opportunities for customizing the appearance, and new column types and templating options. There is also a new model for handling or canceling events. The aims of the GridView and DetailsView control combination are the following:

  • To support the new data source controls by exposing a binding model that allows developers to display data without the need to write any code

  • To provide features such as sorting, paging, editing, and updating of the data without requiring any code to be written

  • To support the adaptive page rendering approach used in other controls in version 2.0, providing output that is compatible with mobile devices and other user agents

  • To add features requested by users of the version 1.0 DataGrid control, such as multiple-field primary keys, hyperlink columns that have more than one data field, columns with checkboxes, and columns with standard buttons

  • To provide better templating options to support custom paging and better support for null values

While the GridView control does have an object model similar to that of the DataGrid , it is not 100% backward compatible. You can't just switch from a DataGrid to a GridView in your pages without some reworking of the attributes and code. In general, you may find that it's better to use the GridView when you build new pages that take advantage of its capabilities, rather than trying to retrofit it into existing pages.

Also note that the GridView does not support automatic insert operations for new rows. The associated DetailsView control is used to provide this feature, andin some casesyou have to write at least a few lines of code to achieve this.

Declaring a GridView Control

The GridView is obviously quite a complex control and has a correspondingly large number of properties and events. Listing 4.1 shows the general declaration of a GridView control and the types of values used for the attributes. The tables in the following subsections list and describe all of the properties, except for the generic styling properties (which are familiar from the DataGrid control).

Listing 4.1 The General Declaration of a GridView Control
 <asp:GridView id="  String  " runat="server"   DataSourceID="  String  "   DataKeyNames="[  column-name  [,  column-name  ]]"   AutoGenerateColumns="[TrueFalse]"   RowStyle-[  PropertyName  ]="[  value  ]"   AlternatingRowStyle-[  PropertyName  ]="[  value  ]"   AllowSorting="[TrueFalse]"   AllowPaging="[TrueFalse]"   PageSize="  Integer  "   PageIndex="  Integer  "   PagerStyle-[  PropertyName  ]="[  value  ]"   AutoGenerateSelectButton="[TrueFalse]"   SelectedIndex="  Integer  "   SelectedRowStyle-[  PropertyName  ]="[  value  ]"   AutoGenerateDeleteButton="[TrueFalse]"   AutoGenerateEditButton="[TrueFalse]"   EditIndex="  Integer  "   EditRowStyle-[  PropertyName  ]="[  value  ]"   ShowHeader="[TrueFalse]"   HeaderStyle-[  PropertyName  ]="[  value  ]"   ShowFooter="[TrueFalse]"   FooterStyle-[  PropertyName  ]="[  value  ]"   SummaryViewColumn="  String  "   SummaryTitleStyle-[  PropertyName  ]="[  value  ]"   DetailNextRowText="  String  "   DetailPreviousRowText="  String  "   DetailSummaryText="  String  "   DetailLinkStyle-[  PropertyName  ]="[  value  ]"   DetailTitleStyle-[  PropertyName  ]="[  value  ]"   NullText="  String  "   BackImageUrl="  String  "   CellPadding="  Integer  "   CellSpacing="  Integer  "   Enabled="[TrueFalse]"   GridLines="[BothHorizontalVerticalNone]"   HorizontalAlign="[CenterJustifyLeftRightNotSet]"   OnRowDeleting="  GridViewDeleteEventHandler  "   OnRowDeleted="  GridViewStatusEventHandler  "   OnRowUpdating="  GridViewUpdateEventHandler  "   OnRowUpdated="  GridViewStatusEventHandler  "   OnRowEditing="  GridViewEditEventHandler  "   OnRowCancellingEdit="  GridViewCancelEditEventHandler  "   OnPageIndexChanging="  GridViewPageEventHandler  "   OnPageIndexChanged="  EventHandler  "   OnSelectedIndexChanging="  GridViewSelectEventHandler  "   OnSelectedIndexChanged="  EventHandler  "   OnSort="  GridViewSortEventHandler  "   OnRowCommand="  GridViewCommandEventHandler  "   OnRowCreated ="  GridViewRowEventHandler  "   OnRowDataBound="  GridViewRowEventHandler  " >     <[...  TableItemStyle  ...] />     <[...  Style  ...] />     <PagerStyle />     <PagerSettings />     <ColumnFields>       <...[  column  -  definition  ]... />     </ColumnFields> </asp:GridView> 

As with the DataGrid control, the GridView contains nested elements that further define the appearance and behavior of the control. We'll examine these later.

The Properties and Attributes of the GridView Control

The attributes shown in Listing 4.1 are documented in Tables 4.1, 4.2, and 4.3. These attributes set the corresponding properties of the control, though (as with other server controls) you can read and set these properties at runtime as well. Table 4.1 lists the properties that correspond to attributes in the same order as in the control declaration shown in Listing 4.1. (Note that style- related properties and attributes are not included in this table.)

The attributes shown in Listing 4.1 that do not appear in Table 4.1, such as RowStyle-[ PropertyName ] and PagerStyle-[ PropertyName ] , are used to specify the style of various sections of the output generated by the GridView . As with other Web Forms controls, the attribute sets a property of the object that generates that specific section of the output. For example, the following code sets the foreground color of the rows in the output to red:

 RowStyle-ForeColor="Red" 
Table 4.1. The Properties and Attributes of the GridView Control

Property/Attribute

Description

DataSourceID

Sets or returns a String value that is the id of the data source control that supplies the data for the GridView and through which any updates will be processed .

DataKeyNames

Sets or returns a String Array that specifies the primary key fields/columns for the rows. It is set in a control declaration attribute as a comma-delimited list. These keys are used to uniquely identify each row when performing updates or deletes in the source data. By default, the specified columns are displayed as read-only when in edit mode.

AutoGenerateColumns

Sets or returns a Boolean value that specifies whether the control should create columns based on the structure of the source rows ( True , the default) or use the column definitions declared in a <ColumnFields> element ( False ).

AllowSorting

Sets or returns a Boolean value that indicates whether the grid will support sorting and display the column headings as hyperlinks . The default is False . If the CanSort property of the data source is True , the sorting process is handled automatically.

AllowPaging

Sets or returns a Boolean value that indicates whether the grid will support paging and display controls for navigating from one page to another. The default is False . A SqlDataSource must have its DataSource Mode property set to DataSet for this to work.

AllowPaging

Sets or returns a Boolean value that indicates whether the grid will support paging and display controls for navigating from one page to another. The default is False . A SqlDataSource must have its DataSourceMode property set to DataSet for this to work.

PageSize

Sets or returns an Integer value that indicates the number of rows to be displayed on each page when paging is enabled.

PageIndex

Sets the current page number for the grid to display, or returns the current page number as an Integer value, when paging is enabled for the grid. This is the ordinal index of the page, starting from .

AutoGenerateSelectButton

Sets or returns a Boolean value that indicates whether a column containing a Select button will appear in the output.

SelectedIndex

Sets or returns the index of the row that will be displayed in selected mode as an Integer value.

AutoGenerateDeleteButton

Sets or returns a Boolean value that indicates whether a column containing a Delete button will appear in the output.

AutoGenerateEditButton

Sets or returns a Boolean value that indicates whether a column containing an Edit button will appear in the output.

EditIndex

Sets or returns the index of the row that will be displayed in edit mode as an Integer value.

ShowHeader

Sets or returns a Boolean value that indicates whether a header row will be included in the output from the control.

ShowFooter

Sets or returns a Boolean value that indicates whether a footer row will be included in the output from the control.

SummaryViewColumn

Sets or returns a String value that indicates the name of the column that will be shown when the control renders output to a mobile device. By default this is the first column. See Chapter 3 for more details of how tables are displayed on mobile devices.

DetailNextRowText

Sets or returns a String value that is the text to display for the link to the next column when the control renders output to a mobile device. The default is Next Row .

DetailPreviousRowText

Sets or returns a String value that is the text to display for the link to the previous column when the control renders output to a mobile device. The default is Previous Row .

DetailSummaryText

Sets or returns a String value that is the text to display for the link from details view back to summary view when the control renders output to a mobile device. The default is Summary View .

NullText

Sets or returns a String value that will appear in the output of the control where a null value occurs in the source data.

The GridView also supports theming, so it accepts attributes and exposes properties such as SkinID and EnableTheming that you can use to specify the theme for the control. See Chapter 7 for more details of the themes feature in ASP.NET 2.0.

Declarative and Dynamic Version 1.xStyle Data Source Assignment

Two properties of the GridView control can be used to specify data binding to a rowset that you generate in code, in the same way that you had to do with the DataGrid and other list controls in ASP.NET 1.x (see Table 4.2). You won't use these properties if you take advantage of the no-code approach to displaying datayou'll just use the DataSourceID instead.

Read-Only Properties

The GridView exposes a series of properties that are read-only at runtime and can be used to get information about the control or to get a reference to the various objects that together generate the control output (see Table 4.3). Again, if you use the no-code approach you won't need to access these properties.

Table 4.2. Data Binding Properties and Attributes of the GridView Control

Property/Attribute

Description

DataSource

Sets or returns a reference to an Object that exposes the data rows or collection members that the GridView control will display.

DataMember

Sets or returns a String value that indicates the specific item within an IListSource instance that will be used as the data source for the control. For example, when the DataSource is a DataSet (which could contain more than one table), this property is the table name.

Table 4.3. The Read-Only Properties of the GridView Control

Property/Attribute

Description

BindingContainer

Returns a reference to the Control instance that represents the control performing the binding of the values.

DataKeys

Returns a DataKeyArray , which is a collection of DataKey instancesone for each row in the GridView . Each DataKey instance contains a name/value pair for each key listed in the DataKeyNames property and the corresponding value for the current row. In other words, it exposes the primary key value(s) for each row in the grid.

SelectedDataKey

Returns a DataKey instance that exposes the primary key values for the row that is in selected mode.

SelectedValue

Returns an Object containing the current value of the DataKey for the current row.

SortExpression

Returns a String value that contains the current sort expression for the control.

SortDirection

Returns a value from the SortDirection enumeration that indicates the direction of the current sort expression. Valid values are Ascending or Descending .

PageCount

Returns an Integer value that indicates the number of pages available when paging is enabled, based on the number of rows in the data source and the setting of the PageSize property.

ColumnFields

Returns a DataControlFieldCollection that represents all of the columns (all the xxx Fields ) in the grid control.

Rows

Returns a GridViewRowCollection that represents all of the data-bound rows in the grid control, excluding any header, footer, or pager rows and excluding the null row if the data source returns no rows.

SelectedRow

Returns a reference to the GridViewRow instance that represents the row in the grid control output that is currently in selected mode.

HeaderRow

Returns a reference to the GridViewRow instance that represents the header row of the grid control output.

FooterRow

Returns a reference to the GridViewRow instance that represents the footer row of the grid control output.

TopPagerRow

Returns a reference to the GridViewRow instance that represents the row at the top of the grid control output that contains the pager controls.

BottomPagerRow

Returns a reference to the GridViewRow instance that represents the row at the bottom of the grid control output that contains the pager controls.

PagerSettings

Returns a reference to the PagerSettings instance that represents the appearance of the pager rows. The PagerSettings options are described later in this chapter.

The DataBind Method of the GridView Control

When a data source control and a GridView are combined (as shown in Chapter 3), there is no need to write code to initiate data binding, as you would with other data-bound controls such as the DataGrid . The DataBind method of the GridView is called automatically. However, this method is also declared as Public and so is exposed for use in your own code if required. If you bind a GridView to a source of data other than a data source control, using the DataSource and DataMember properties, you must call the DataBind method yourself.

The Events of the GridView Control

The GridView control raises a series of events as it binds to a data source, generates the output, and in response to user interaction (see Table 4.4). You can handle these events to provide custom output, interact with the output process, and execute code in response to user actions.

Handling a GridView Event

The example of editing rows shown at the start of Chapter 3 (Listing 3.4) contains a Delete link for each row displayed in the GridView control. However, in the sample Northwind database that the page uses, rows cannot be deleted from the Shippers table because there are related child rows in other tables. As an example of handling the events raised by the GridView control, the page prevents these existing rows from being deleted by checking the value of the primary key.

The declaration of the GridView includes the OnRowDeleting attribute, which specifies that an event handler named CheckDelete will be executed when the RowDeleting event is raised (see Listing 4.2). This occurs just before the GridView control instructs the data source control to delete the row. There is also a Label control on that page where the event handler will display any error message.

Table 4.4. The Data Binding Events of the GridView Control

Event

Description

PageIndexChanging

Raised when a pager navigation control is activated, before the grid changes to the new page. Passes a GridView PageEventArgs instance to the event handler, which exposes the following properties:

  • Cancel : A Boolean property that can be set to True to prevent the page changing.

  • NewPageIndex : An Integer that is the ordinal index of the page that will be shown next.

PageIndexChanged

Raised when a pager navigation control is activated, after the grid has displayed the new page. Passes a standard EventArgs instance to the event handler.

RowCancellingEdit

Raised when the Cancel command is activated for a row that is in edit mode. Passes a GridViewCancelEditEventArgs instance to the event handler, which exposes the following properties:

  • Cancel : A Boolean property that can be set to True to prevent the edit operation from being canceled .

  • RowIndex : An Integer value indicating the index of the row within the data source.

RowCommand

Raised when a control in the rows of the grid causes a postback. This command may be one of the predefined buttons such as Edit, Cancel, Delete , or Update , or it may be a custom command. Passes a GridViewCommandEventArgs instance to the event handler, which exposes the following properties:

  • CommandArgument : The value of the CommandArgument property of the button that raised the event.

  • CommandName : The value of the CommandName property of the button that raised the event.

  • CommandSource : A reference to the button that raised the event.

RowCreated

Raised when a new row is created in the source rowset for the grid. Passes a GridViewRowEventArgs instance to the event handler, which exposes the Row property that returns a reference to the new row.

RowDataBound

Raised for each row in the grid after it has been bound to its data source row, allowing the output for the row to be modified. Passes a GridViewRowEventArgs instance to the event handler, which exposes the Row property that returns a reference to the row.

RowDeleting

Raised before the data source control deletes a row in the data source. Passes a GridViewDeleteEventArgs instance to the event handler, which exposes the following properties:

  • Cancel : A Boolean property that can be set to True to cancel the delete operation.

  • Keys : An IOrderedDictionary instance containing the primary key values for the row.

  • RowIndex : An Integer value indicating the index of the row within the data source rowset.

  • Values : An IOrderedDictionary instance containing the values currently in the row. These values will not be passed to the DataSource control unless you move them into the Keys IOrderedDictionary .

RowDeleted

Raised after the data source control has deleted a row from the data source. Passes a GridViewStatusEventArgs instance to the event handler, which exposes the AffectedRows property, indicating the number of rows affected by the delete operation.

RowEditing

Raised when an Edit command in the grid is activated, before a row changes into edit mode. Passes a GridViewEditEventArgs instance to the event handler, which exposes the following properties:

  • Cancel : A Boolean property that can be set to True to prevent the row from entering edit mode.

  • NewEditIndex : An Integer you can set to the index of the row that will be placed in edit mode, or 1 if no row will be in edit mode.

RowUpdating

Raised before the data source control updates a row in the data source. Passes a GridViewUpdateEventArgs instance to the event handler, which exposes the following properties:

  • Cancel : A Boolean property that can be set to True to cancel the update operation.

  • CommandArgument : The value of the CommandArgument property of the button that raised the event.

  • Keys : An IOrderedDictionary containing the primary key values for the row.

  • NewValues : An IOrderedDictionary containing the values that will be placed into the row.

  • OldValues : An IOrderedDictionary containing the values currently in the row. These values will not be passed to the DataSource control unless you move them into the Keys IOrderedDictionary .

RowUpdated

Raised after the data source control has updated a row in the data source. Passes a GridViewStatusEventArgs instance to the event handler, which exposes the AffectedRows property, indicating the number of rows affected by the update command.

SelectedIndexChanging

Raised when a Select command in the grid is activated, before the row is placed into selected mode. Passes a GridViewSelectEventArgs instance to the event handler, which exposes the following properties:

  • Cancel : A Boolean property that can be set to True to prevent the row from being placed into selected mode.

  • NewSelectedIndex : An Integer you can set to the index of the row that will be placed in selected mode, or 1 if no row will be in selected mode.

SelectedIndexChanged

Raised after a row has been placed into selected mode. Passes a standard EventArgs instance to the event handler.

Sorting

Raised when a column heading is activated to sort the rows in the grid. Passes a GridViewSortEventArgs instance to the event handler, which exposes the following properties:

  • Cancel : A Boolean property that can be set to True to prevent the sort.

  • SortExpression : A String containing the sort expression that will be applied.

Sorted

Raised after the sorting process has completed. Passes a standard EventArgs instance to the event handler.

Listing 4.2 Using the RowDeleting Event
 <asp:GridView id="grid1" DataSourceID="ds1" runat="server"      DataKeyNames="ShipperID"      AutoGenerateEditButton="True"      AutoGenerateDeleteButton="True"  OnRowDeleting="CheckDelete"  /> <asp:Label id="lblError" EnableviewState="False" runat="server" /> 

The event handler is shown in Listing 4.3. It simply extracts the value of the primary key from the Keys array passed to the event handler within the GridViewDeleteEventArgs instancethere is only one column in the primary key, so the code just accesses Keys(0) . Then, if this key value is less than 4 (in other words, this is one of the existing rows in the table), it sets the Cancel property to True to prevent the GridView from continuing with the delete operation, and it displays a message in the Label control.

Listing 4.3 The Event Handler for the RowDeleting Event
 <script runat="server"> Sub CheckDelete(oSender As Object, oArgs As GridViewDeleteEventArgs)   Dim iKey As Integer = oArgs.Keys(0)   If iKey < 4 Then     oArgs.Cancel = True     lblError.Text = "Cannot delete the original rows from the table"   End If End Sub </script> 

Figure 4.1 shows the result. An attempt to delete the first row causes the event handler to display the error message below the grid. If you want to try deleting a row, use Enterprise Manager or type a SQL statement into Query Analyzer to insert a new row into the Shippers table, then run the page to delete the new row.

Figure 4.1. Handling the RowDeleting event for a GridView control

graphics/04fig01.gif

The Nested TableItemStyle Elements

You can optionally include, within the declaration of a GridView control, nested elements that define the style for various sections of the output generated as HTML table rows. The general declaration of these elements is shown in Listing 4.4.

Listing 4.4 The Nested TableItemStyle Elements
 <[  TableItemStyle  ]   BackColor="  Color  "   BorderColor="  Color  "   BorderStyle="[SolidDashedDottedDoubleGroove                    RidgeInsetOutsetNoneNotSet]"   BorderWidth="  Unit  "   CssClass="  String  "   Font-[BoldItalicNameNamesOverlineSize                          StrikeoutUnderline]="[  value  ]"   ForeColor="  Color  "   Height="  Unit  "   Width="  Unit  "   HorizontalAlign="[CenterJustifyLeftRightNotSet]"   VerticalAlign="[BottomMiddleTopNotSet]"   Wrap="[TrueFalse]" /> 

The seven types of elements you can use (replacing [ TableItemStyle ] in the preceding declaration are shown in Table 4.5.

The Nested Style Elements

Another type of nested element that you can optionally include within the declaration of a GridView control is one that defines the style for the text and links that appear only when the grid is rendered on a small-screen or mobile device, where the output is displayed as separate summary and details views. The general declaration of these elements is shown in Listing 4.5.

Table 4.5. The TableItemStyle Element Types

TableItemStyle

Description

RowStyle

Sets the style and appearance for the data-bound rows within the grid.

AlternatingRowStyle

Sets the style and appearance for alternate data-bound rows within the grid.

SelectedRowStyle

Sets the style and appearance for the selected row within the grid.

EditRowStyle

Sets the style and appearance for the row that is in edit mode within the grid.

NullRowStyle

Sets the style and appearance for data-bound rows that contain null values.

HeaderStyle

Sets the style and appearance for the header row of the grid.

FooterStyle

Sets the style and appearance for the footer row of the grid.

Listing 4.5 The Nested Style Elements
 <[TextStyle]   BackColor="  Color  "   BorderColor="  Color  " BorderStyle="[SolidDashedDottedDoubleGroove                  RidgeInsetOutsetNoneNotSet]" BorderWidth="  Unit  " CssClass="  String  " Font-[BoldItalicNameNamesOverlineSize                        StrikeoutUnderline]="[  value  ]" ForeColor="  Color  " Height="  Unit  " Width="  Unit  " /> 
Table 4.6. The Style Element Types

TextStyle

Description

SummaryTitleStyle

Sets the style and appearance of the title text displayed when the grid is displaying the data in summary view.

DetailTitleStyle

Sets the style and appearance of the title text displayed when the grid is displaying one of the rows in details view.

DetailLinkStyle

Sets the style and appearance of the links included in each row when the grid is displaying the data in summary view.

The three types of elements you can use (replacing [ TextStyle ] in the declaration above) are shown in Table 4.6.

How the GridView Appears on Small-Screen and Mobile Devices

As you will surmise from the previous subsections, the GridView control automatically changes the way it renders the data when viewed on a small-screen or mobile device. When the page first loads, only the column specified by name as the SummaryViewColumn property is displayed. Each value in this single column is a link that changes the display to show all the column values for just that row (see Figure 4.2). These are the summary view and details view mentioned in the property descriptions in this chapter and demonstrated at the start of Chapter 3.

Figure 4.2. The GridView control on small-screen devices

graphics/04fig02.gif

The Nested PagerStyle and PagerSettings Elements

If you specify that the GridView will support paging by including the AllowPaging="True" attribute in the declaration, you can optionally specify in more detail how the section of the output that includes the page navigation controls will appear. You include a nested PagerStyle element, and/or a nested PagerSettings element, within the declaration of the GridView control.

The PagerStyle element is identical to the TableItemStyle elements shown earlier, with one extra attribute supported that indicates where row(s) containing the pager controls will appear:

 Position="[BottomTopTopAndBottom]" 

The PagerSettings element defines the appearance of the paging controls in more detail. It allows you to use images, text links, or page numbers for the navigation controls. The general declaration of this element is shown in Listing 4.6.

Listing 4.6 The PagerSettings Element
 <PagerSettings   Mode="[NextPreviousNextPrevFirstLastNumericNumericFirstLast]"   FirstPageText="  String  "   PrevPageText="  String  "   NextPageText="  String  "   LastPageText="  String  "   FirstPageImageUrl="  url  "   PrevPageImageUrl="  url  "   NextPageImageUrl="  url  "   LastPageImageUrl="  url  "   PageButtonCount="  Integer  " /> 

Defining the Columns in a GridView Control

The GridView control can automatically generate the columns required to display the contents of the source data rows, just as the ASP.NET 1.0 DataGrid control does. The default for the AutoGenerateColumns property is True , indicating that an AutoGeneratedField bound column will be generated for each column in the data rows.

However, as with the DataGrid , you can set this property to False and specify the columns you want instead. This is useful if you want to use any of the special column types, other than the default type that displays the value as a text string (or in a TextBox control when the row is in edit mode) or as a CheckBox control (if the data is a Boolean or bit field). Compared with the DataGrid control, there are some interesting new column types available for the GridView control.

The GridView Column Types

The GridView control supports a range of column types, allowing you to display the data within each column in a range of ways. Note that the controls are named as xxx Field , in order to differentiate them from the xxx Column controls used in a DataGrid control.

  • The AutoGeneratedField column, the default column type, is used when the AutoGenerateColumns property is set to True . It acts like both a BoundField column and a CheckBoxField column. If the data is Boolean , a disabled CheckBox control appears with its Checked property signifying the value of the Boolean data. When the row is in edit mode, the CheckBox becomes enabled and the user can check or uncheck the CheckBox to change its value. If the data is of any other type, the value is displayed as text (in a TextBox control when in edit mode). However, note that the AutoGeneratedField column type should not be declared directly and is used only when the AutoGeneratedFields property is True for the GridView control.

  • The BoundField column works like that in the existing version 1.x DataGrid control. It displays the value from this column for each row as a text string (or in a TextBox control when the row is in edit mode).

  • The ButtonField column displays a Button control in each row of this column. It can be rendered as a standard HTML button, a text LinkButton , or a clickable image. The caption, text, or URL can be set to the value from this column for each current row.

  • The CheckBoxField column displays a CheckBox control in this column of each row. This column type is usually bound to a column in the data source that contains Boolean or bit values, and the checkbox sets or reflects the value of this column for each row.

  • The HyperLinkField column displays a HyperLink control in this column of each row. The value of the column, or other static values, can be used to set the Text and NavigateUrl properties of each HyperLink control.

  • The TemplateField column provides a free-form section where the developer specifies all the details of the required user interface. A range of templates can be specified to display different controls depending on the current mode of the row. This type of column is useful when you need to include validation controls as well as interactive UI controls.

  • The CommandField column displays a series of text links, HTML buttons, or clickable images used to change the mode of the current row for editing. Depending on the current mode and the property settings for the column, these buttons can include Select, Edit, Delete, Insert, and Cancel (or equivalent images provided by the developer).

Other types of columns are scheduled for development with the final release version of ASP.NET 2.0. These include the ImageField and DropDownListField , whose names are self-explanatory.

Declaring a BoundField Column

In a BoundField column, the value in the column is displayed as text, except when the row is in edit mode, in which case it is displayed in a standard ASP.NET TextBox control. The DataFormatString property takes a String value that includes the placeholder {0} where the value should be inserted. And you can add one of the standard formatting characters , for example, using {0:C} to display the value as currency. The outline declaration of a BoundField is shown in Listing 4.7.

Listing 4.7 Declaring a BoundField Column
 <asp:BoundField   DataField="  String  "   DataFormatString="  String  "   TreatEmptyStringAsNull="[TrueFalse]"   NullDisplayText="  String  "   ReadOnly="[TrueFalse]"   InsertVisible="[TrueFalse]"   Visible="[TrueFalse]"   SortExpression="  String  "   ShowHeader="[TrueFalse]"   HeaderText="  String  "   HeaderStyle-[  PropertyName  ]="[  value  ]"   HeaderImageUrl="  String  "   ItemStyle-[  PropertyName  ]="[  value  ]"   FooterText="  String  "   FooterStyle-[  PropertyName  ]="[  value  ]" /> 

The attributes shown in Listing 4.7 correspond to the properties in Table 4.7.

Table 4.7. The Properties and Attributes of the BoundField Control

Property/Attribute

Description

DataField

Sets or returns a String that is the name of the column in the source rows that will provide the data to display in this column of the grid.

DataFormatString

Sets or returns a String that contains the formatting details for the value displayed in this column.

TreatEmptyStringAsNull

Sets or returns a Boolean value that indicates whether an empty string in this column should be treated as null . This is useful when editing the data if the data source expects null values to be used when no value is present.

NullDisplayText

Sets or returns a String that is the text to display in the grid for rows that have a null value in this column.

ReadOnly

Sets or returns a Boolean value that indicates whether the values in this column can be edited. If True , the column will not display a TextBox in edit mode.

InsertVisible

Sets or returns a Boolean value that indicates whether this column will be displayed when inserting a new row into the source rowset.

Visible

Sets or returns a Boolean value that indicates whether this column is visible within the output generated by the grid control.

SortExpression

Sets or returns a String that defines the sort expression for this column, as a comma-delimited list of column names.

ShowHeader

Sets or returns a Boolean value that indicates whether the header for this column will be displayed.

HeaderText

Sets or returns a String that is the text to display in the header row for this column.

HeaderStyle

Returns a reference to a TableItemStyle instance that describes the style and formatting of the header for this column. The TableItemStyle properties were described earlier in this chapter.

HeaderImageUrl

Sets or returns a String that is the relative or absolute URL of an image to display in the header row for this column.

ItemStyle

Returns a reference to a TableItemStyle instance that describes the style and formatting of the values in the data-bound rows in this column.

FooterText

Sets or returns a String that is the text to display in the footer row for this column.

FooterStyle

Returns a reference to a TableItemStyle instance that describes the style and formatting of the footer for this column.

Declaring a ButtonField Column

A ButtonField is used when you want each row in the output to include a button or a clickable link that causes a postback, perhaps to display more details of the row or to open an image or other resource. It can display the link as a standard HTML button control (an <input type="submit"> element), a clickable image (an <input type="image"> element), or a text link (an <a> element with some client-side script to submit the page). The outline declaration of a ButtonField is shown in Listing 4.8.

Listing 4.8 Declaring a ButtonField Column
 <asp:ButtonField  ButtonType="[ButtonImageLink]"   CommandName="   String   "   DataTextField="   String   "   DataTextFormatString="   String   "   CausesValidation="[TrueFalse]"   ValidationGroup="   String   "   Text="   String   "   ImageUrl="   String   "  Visible="[TrueFalse]"   SortExpression="  String  "   ShowHeader="[TrueFalse]"   HeaderText="  String  "   HeaderStyle-[  PropertyName  ]="[  value  ]"   HeaderImageUrl="  String  "   ItemStyle-[  PropertyName  ]="[  value  ]"   FooterText="  String  "   FooterStyle-[  PropertyName  ]="[  value  ]" /> 
Table 4.8. The Properties and Attributes of the ButtonField Control

Property/Attribute

Description

ButtonType

Sets or returns a value from the ButtonType enumeration ( Button , Image , or Link ) that specifies the type of control to create in each row of this column. The default is Link .

CommandName

Sets or returns a String value that is the CommandName property of the button in each row of the output.

DataTextField

Sets or returns a String that indicates the name of the column within the source data that will supply the value for the Text property of the control (the caption of a button or the text of a link).

DataTextFormatString

Sets or returns a String that contains the formatting information for the value in the row. Uses the same syntax as the DataFormatString property described for the BoundField control, using {0} as a placeholder.

CausesValidation

Sets or returns a Boolean value that indicates whether the button will cause any validation controls in the page to validate their values and report any errors. The default is True .

ValidationGroup

Sets or returns a String that is the name of the group of validation controls this button will initiate. See Chapter 9 for more details about validation groups.

Text

Sets or returns a String that will be used in place of DataTextField , in other words, the static value for the caption or text of the link that is the same for every row.

ImageUrl

Sets or returns a String that is the relative or absolute URL of the image to display when the ButtonType property is set to Image .

The attributes shown highlighted in Listing 4.8 correspond to the properties in Table 4.8. The rest are the same as those listed for the BoundField control in Table 4.7.

Declaring a CheckBoxField Column

A CheckBoxField is used when you want every row to display a checkbox in this column, with the checkbox setting reflecting the value in the row. Because an HTML checkbox can be only on or off, this column type really only works with columns in the source data rows that contain Boolean or bit values. The outline declaration of a CheckBoxField is shown in Listing 4.9.

Listing 4.9 Declaring a CheckBoxField Column
 <asp:CheckBoxField  DataField="   String   "   ReadOnly="[TrueFalse]"   Text="   String   "   InsertVisible="[TrueFalse]"  Visible="[TrueFalse]"   SortExpression="  String  "   ShowHeader="[TrueFalse]"   HeaderText="  String  "   HeaderStyle-[  PropertyName  ]="[  value  ]"   HeaderImageUrl="  String  "   ItemStyle-[  PropertyName  ]="[  value  ]"   FooterText="  String  "   FooterStyle-[  PropertyName  ]="[  value  ]" /> 

The attributes shown highlighted in Listing 4.9 correspond to the properties in Table 4.9. The rest are the same as those listed for the BoundField control in Table 4.7.

Declaring a HyperLinkField Column

A HyperLinkField is used to display a clickable link in each row by inserting a standard <a> element into the output. The control allows you to set the text content of the <a> element and the href attribute as either static values or as values from the source data row. You can also specify a value for the target window name, though this can be only static text and not a bound value. The outline declaration of a HyperLinkField is shown in Listing 4.10.

Table 4.9. The Properties and Attributes of the CheckBoxField Control

Property/Attribute

Description

DataField

Sets or returns a String that is the name of the column in the source rows that will provide the data to determine the settings of the checkbox.

ReadOnly

Sets or returns a Boolean value that indicates whether the values in this column can be changed.

Text

Sets or returns a String that will be used as the Text property of the CheckBox control.

InsertVisible

Sets or returns a Boolean value that indicates whether this column will be displayed when inserting a new row into the source rowset.

Listing 4.10 Declaring a HyperLinkField Column
 <asp:HyperLinkField  DataTextField="   String   "   DataTextFormatString="   String   "   Text="   String   "   DataNavigateUrlField="   String   "   DataNavigateUrlFormatString="   String   "   NavigateUrl="   String   "   Target="   String   "  Visible="[TrueFalse]"   SortExpression="  String  "   ShowHeader="[TrueFalse]"   HeaderText="  String  "   HeaderStyle-[  PropertyName  ]="[  value  ]"   HeaderImageUrl="  String  "   ItemStyle-[  PropertyName  ]="[  value  ]"   FooterText="  String  "   FooterStyle-[  PropertyName  ]="[  value  ]" /> 

The attributes shown highlighted in Listing 4.10 correspond to the properties in Table 4.10. The rest are the same as those listed for the BoundField control in Table 4.7.

Table 4.10. The Properties and Attributes of the HyperLinkField Control

Property/Attribute

Description

DataTextField

Sets or returns a String that indicates the name of the column within the source data that will supply the value for the Text property of the control (the visible text of the link).

DataTextFormatString

Sets or returns a String that contains the formatting information for the bound value that is applied to the Text property of the link.

Text

Sets or returns a String that will be used in place of DataTextField , in other words, the static value for the text of the link that is the same for every row.

DataNavigateUrlField

Sets or returns a String that indicates the name of the column within the source data that will supply the value for the NavigateUrl property of the control (the href attribute of the resulting <a> element).

DataNavigateUrlFormatString

Sets or returns a String that contains the formatting information for the bound value that will be applied to the NavigateUrl property.

NavigateUrl

Sets or returns a String that will be used in place of DataNavigateUrlField , in other words, the static value for the href of the link that is the same for every row.

Target

Sets or returns a String that is the name of the target window for the link and will be used as the target attribute of the resulting <a> element.

Declaring a TemplateField Column

When you need to provide output that is not supported by any of the standard column types, you can use a TemplateField . This works just as in the DataGrid from version 1.0 of ASP.NET and is the same approach to generating list output as used by other controls such as the Repeater and DataList . You specify all the content that you want to be output for the column within one or more templates nested within the TemplateField declaration (or added at runtime in code). The control selects the appropriate template depending on which mode the row is currently in. The outline declaration of a TemplateField is shown in Listing 4.11.

Listing 4.11 Declaring a TemplateField Column
 <asp:TemplateField   Visible="[TrueFalse]"   SortExpression="  String  "   ShowHeader="[TrueFalse]"   HeaderText="  String  "   HeaderStyle-[  PropertyName  ]="[  value  ]"   HeaderImageUrl="  String  "   ItemStyle-[  PropertyName  ]="[  value  ]"   FooterText="  String  "   FooterStyle-[  PropertyName  ]="[  value  ]" >  <HeaderTemplate>...</HeaderTemplate>   <ItemTemplate>...</ItemTemplate>   <AlternatingItemTemplate>...</ AlternatingItemTemplate>   <SelectedItemTemplate>...</SelectedItemTemplate>   <EditItemTemplate>...</EditItemTemplate>   <FooterTemplate>...</FooterTemplate>  </asp:TemplateField> 

All the attributes of the control are the same as those listed for the BoundField control in Table 4.7. The six kinds of templates that you can specify, highlighted in Listing 4.11, are documented in Table 4.11.

Declaring a CommandField Column

The final column type for the GridView control is the CommandField column. This is used to switch the row between modes and to confirm updates to the values. When the row is not in edit mode, the column displays one or more of the Select, Insert, Edit, and Delete buttons, depending on the values you've specified for the Show xxx Button properties of the GridView control. When the row is in edit mode, it displays Update and Cancel buttons, again depending on the property settings you make for the GridView control.

Table 4.11. The Templates of the TemplateField Control

Template

Description

HeaderTemplate

The markup, text, controls, and other content required to generate the entire content for the header of this column of the grid.

ItemTemplate

The markup, text, controls, and other content required to generate the entire content for this column in data-bound rows within the grid.

AlternatingItemTemplate

The markup, text, controls, and other content required to generate the entire content for this column in alternating data-bound rows within the grid.

SelectedItemTemplate

The markup, text, controls, and other content required to generate the entire content for this column in the row within the grid that is in selected mode.

EditItemTemplate

The markup, text, controls, and other content required to generate the entire content for this column in the row within the grid that is in edit mode.

FooterTemplate

The markup, text, controls, and other content required to generate the entire content for the footer of this column of the grid.

Clicking on the buttons raises an event that is automatically handled by the data source control to which the GridView is connected, though you can also respond to the events in code yourself by handling the RowCommand event. The outline declaration of a CommandField is shown in Listing 4.12.

Listing 4.12 Declaring a CommandField Column
 <asp:CommandField  ButtonType="[ButtonImageLink]"   UpdateText="   String   "   UpdateImageUrl="   String   "   ShowCancelButton="[TrueFalse]"   CancelText="   String   "   CancelImageUrl="   String   "   ShowSelectButton="[TrueFalse]"   SelectText="   String   "   SelectImageUrl="   String   "   ShowInsertButton="[TrueFalse]"   InsertText="   String   "   InsertImageUrl="   String   "   ShowEditButton="[TrueFalse]"   EditText="   String   "   EditImageUrl="   String   "   ShowDeleteButton="[TrueFalse]"   DeleteText="   String   "   DeleteImageUrl="   String   "   CausesValidation="[TrueFalse]"   ValidationGroup="   String   "  Visible="[TrueFalse]"   SortExpression="  String  "   ShowHeader="[TrueFalse]"   HeaderText="  String  "   HeaderStyle-[  PropertyName  ]="[  value  ]"   HeaderImageUrl="  String  "   ItemStyle-[  PropertyName  ]="[  value  ]"   FooterText="  String  "   FooterStyle-[  PropertyName  ]="[  value  ]" /> 

The attributes shown highlighted in Listing 4.12 correspond to the properties in Table 4.12. The rest are the same as those listed for the BoundField control in Table 4.7.

Using a Mixture of Column Types

To demonstrate some of the column types available for the DataGrid control, Listing 4.13 shows a GridView control that extracts some rows from the Northwind database Products table and displays them with sorting and paging enabled. The data source control declaration contains the commands required to allow updating of the data in the table and caches the data for five minutes to improve performance when just reading the rows.

Table 4.12. The Properties and Attributes of the CommandField Control

Property/Attribute

Description

ButtonType

Sets or returns a value from the ButtonType enumeration ( Button , Image , or Link ) that specifies the type of controls to create in each row of this column. The default is Link .

UpdateText

Sets or returns a String value that is the caption for the button that causes an update process to occur. The default is Update .

UpdateImageUrl

Sets or returns a String that is the relative or absolute URL of the image to display in place of a text Update link.

ShowCancelButton

Sets or returns a Boolean value that indicates whether a Cancel button will be displayed in this column when the row is in edit mode.

CancelText

Sets or returns a String value that is the caption for the button that cancels an update process. The default is Cancel .

CancelImageUrl

Sets or returns a String that is the relative or absolute URL of the image to display in place of a text Cancel link.

ShowSelectButton

Sets or returns a Boolean value that indicates whether a Select button will be displayed in this column.

SelectText

Sets or returns a String value that is the caption for the button that causes the row to be shown in selected mode. The default is Select .

SelectImageUrl

Sets or returns a String that is the relative or absolute URL of the image to display in place of a text Select link.

ShowInsertButton

Sets or returns a Boolean value that indicates whether an Insert button will be displayed in this column.

InsertText

Sets or returns a String value that is the caption for the button that inserts a new row into the grid. The default is Insert .

InsertImageUrl

Sets or returns a String that is the relative or absolute URL of the image to display in place of a text Insert link.

ShowEditButton

Sets or returns a Boolean value that indicates whether an Edit button will be displayed in this column.

EditText

Sets or returns a String value that is the caption for the button that causes the row to be shown in edit mode. The default is Edit .

EditImageUrl

Sets or returns a String that is the relative or absolute URL of the image to display in place of a text Edit link.

ShowDeleteButton

Sets or returns a Boolean value that indicates whether a Delete button will be displayed in this column.

DeleteText

Sets or returns a String value that is the caption for the button that deletes a row. The default is Delete .

DeleteImageUrl

Sets or returns a String that is the relative or absolute URL of the image to display in place of a text Delete link.

CausesValidation

Sets or returns a Boolean value that indicates whether the button will cause any validation controls in the page to validate their values and report any errors. The default is True .

ValidationGroup

Sets or returns a String that is the name of the group of validation controls this button will initiate. See Chapter 9 for more details about validation groups.

Listing 4.13 Using a Mixture of Column Types
 <asp:SqlDataSource id="ds1" runat="server"   ConnectionString="server=localhost;database=Northwind;uid=x;pwd=x;"   SelectCommand="SELECT ProductID, ProductName, QuantityPerUnit,                  Discontinued, UnitPrice FROM Products"   UpdateCommand="UPDATE Products SET QuantityPerUnit=@QuantityPerUnit,                  Discontinued=@Discontinued                  WHERE ProductID=@ProductID"   DeleteCommand="DELETE FROM Products WHERE ProductID=@ProductID"   EnableCaching="True" CacheDuration="300" /> <asp:GridView id="grid1" runat="server" DataSourceID="ds1"   AllowSorting="True" AllowPaging="True" PageSize="5"   DataKeyNames="ProductID"   AutoGenerateColumns="False" OnRowCommand="ShowDetails">   <ColumnFields>     ... column definitions shown later ...   </ColumnFields> </asp:GridView> <asp:Label id="lblInfo" EnableViewState="False" runat="server" /> 

The RowCommand event is raised when any control other than a standard Edit, Delete, Update, or Cancel link in the grid causes a postback. Code in the page will handle this event and display details about a row in a Label control (declared at the end of Listing 4.13) when a button in that row is clicked. The screenshot in Figure 4.3 shows the result; the custom column declarations the GridView uses are discussed afterward.

Figure 4.3. Using a mixture of column types

graphics/04fig03.gif

The GridView control shown in Listing 4.13 and Figure 4.3 contains the attribute AutoGenerateColumns="False" , so it will not automatically generate the columns based on the structure of the data rows. The columns are declared individually within the <ColumnFields> element. The next sections describe each of the columns we've used.

The ButtonField Column

The first column is a ButtonField column that displays a button with the row ID as the caption. The DataTextField attribute causes the values from the ProductID column to be used for the Text property of the button in each row, and the SortExpression attribute allows the rows to be sorted using the values in this column (see Listing 4.14). A header row is displayed for this column, containing the text "ID", and it is styled as bold Verdana font. Finally, the CommandName attribute causes the CommandName property of each button to be set to MyRoutine . This is required to be able to identify which control caused the postback when we handle the RowCommand event.

Listing 4.14 Declaring the ButtonField Column
 <asp:ButtonField ButtonType="Button" DataTextField="ProductID"      SortExpression="ProductID" ShowHeader="True" HeaderText="ID"      CommandName="MyRoutine" HeaderStyle-Font-Name="Verdana"      HeaderStyle-Font-Bold="True" /> 
The HyperLinkField Column

The next column is a HyperLinkField , bound to the ProductName column. The Text property of each hyperlink is set to the value in each row of the ProductName column by the DataTextField attribute (see Listing 4.15). The NavigateUrl ( href ) of each hyperlink is set to a string value such as http://www.mysite.com/products?product=3 by the combination of the DataNavigateUrlField attribute (which specifies the ProductID column) and the DataNavigateUrlFormatString attribute (which supplies the format string with the placeholder {0} for the value from each row).

Listing 4.15 Declaring the HyperLinkField Column
 <asp:HyperLinkField DataTextField="ProductName"      ShowHeader="True" HeaderText="Product"      DataNavigateUrlField="ProductID"      DataNavigateUrlFormatString=                       "http://www.mysite.com/products?product={0}"      SortExpression="ProductName" HeaderStyle-Font-Name="Verdana"      HeaderStyle-Font-Bold="True" ItemStyle-Font-Name="Verdana"      ItemStyle-Font-Bold="True" ItemStyle-BackColor="Yellow" /> 
The BoundField Column

Next comes a BoundField column, bound to the QuantityPerUnit column. It too has a header, and both this and the "item" rows are styled using attributes in the column declaration (see Listing 4.16).

Listing 4.16 Declaring the BoundField Column
 <asp:BoundField DataField="QuantityPerUnit" ShowHeader="True"      HeaderText="Packaging" HeaderStyle-Font-Name="Verdana"      HeaderStyle-Font-Bold="True" ItemStyle-Font-Name="Verdana" /> 
The CheckBoxField Column

The Discontinued column in the data rowset is a Boolean type, so the ideal representation is a checkbox. This is the default for this type of data column anyway. The CheckBoxField column is bound to the Discontinued column in the data rows and the header "N/A" (not available) declared for it (see Listing 4.17).

Listing 4.17 Declaring the CheckBoxField Column
 <asp:CheckBoxField DataField="Discontinued" ShowHeader="True"      HeaderText="N/A" HeaderStyle-Font-Name="Verdana"      HeaderStyle-Font-Bold="True" /> 
The TemplateField Column

The most complex column type is the TemplateField , and this cannot be bound directly to a column in the source data rowset. Instead, it contains individual templates that define the output to be displayed depending on the row location and which mode the row is in. You can see that the eample contains an ItemTemplate and an AlternatingItemTemplate , each containing a Label control that displays the value from the UnitPrice column in each rowand with alternating foreground colors (see Listing 4.18).

Listing 4.18 Declaring the TemplateField Column
 <asp:TemplateField ShowHeader="True" HeaderText="Price"      SortExpression="UnitPrice" HeaderStyle-Font-Name="Verdana"      HeaderStyle-Font-Bold="True" ItemStyle-Font-Name="Verdana"      ItemStyle-Font-Bold="True">   <ItemTemplate>     <asp:Label runat="server"                Text='<%# Eval("UnitPrice", "${0:F2}") %>' />   </ItemTemplate>   <AlternatingItemTemplate>     <asp:Label runat="server" ForeColor="DarkGray"                Text='<%# Eval("UnitPrice", "${0:F2}") %>' />   </AlternatingItemTemplate> </asp:TemplateField> 

It's possible to include an EditItem template that defines the appearance of the row when it is in edit mode, but because this column type cannot be bound to a column in the source data it is not possible to achieve the "no-code" updates we've seen earlier when using a TemplateField . Instead you have to write code that is executed in response to the RowUpdating event and add the value(s) of the fields in the TemplateField to the NewValues dictionary of the GridViewUpdateEventArgs using the value in the column in this case.

The CommandField Column

The final column displays the images for switching to edit mode, updating a row, canceling the changes, and deleting the row. The CommandField column declaration specifies that the links should be images and also declares the relative URL of the images and the text to use as the alt attribute of these images (see Listing 4.19).

Listing 4.19 Declaring the CommandField Column
 <asp:CommandField ButtonType="Image"      UpdateImageUrl="i.gif" UpdateText="Apply these changes"      ShowCancelButton="True" CancelImageUrl="s.gif"      CancelText="Cancel this update"      ShowEditButton="True" EditImageUrl="q.gif"      EditText="Edit this row"      ShowDeleteButton="True" DeleteImageUrl="x.gif"      DeleteText="Delete this row" /> 

As we've seen earlier, the GridView control manages all the mode switching and updates automatically, without requiring any code to be written. The screenshot in Figure 4.4 shows the grid with the third row in edit mode. Notice that the HyperLinkField column does not allow the value to be edited, while the BoundField column does. The CheckBoxField column automatically enables the checkbox in this row to allow the value to be changed. Meanwhile the CommandField column displays the Update and Cancel images. All this happens automatically with the column declarations we used, without any code required.

Figure 4.4. Editing a row with custom column types

graphics/04fig04.gif

Handling the RowCommand Event

The first column (a ButtonField column) contains buttons that raise the RowCommand event when clicked. The declaration of the GridView control includes the attribute OnRowCommand="ShowDetails" , which will execute the only code in the pagean event handler named ShowDetails (see Listing 4.20)when any one of the buttons is clicked.

However, the RowCommand event is also raised for some other actions that cause a postback, including the pager links at the bottom of the grid. So, before processing the row values, the event handler has to check whether it was in fact a button in the first column that caused the postback. The ButtonField column declaration contains the attribute CommandName="MyRoutine" , so the event handler can check the CommandName property of the GridViewCommandEventArgs instance passed to it. If this is a button from the first column, a reference to it is obtained from the CommandSource property of the GridViewCommandEventArgs instance, and the Text property contains the value from the current row.

Listing 4.20 The Event Handler for the RowCommand Event
 Sub ShowDetails(oSender As Object, oArgs As GridViewCommandEventArgs)   If oArgs.CommandName = "MyRoutine" Then     lblInfo.Text = "More details here for product " _                  & oArgs.CommandSource.Text   End If End Sub 

The code in Listing 4.20 simply displays the text "More details here for product x" but could easily go off and query the database or fetch an image of the product to display more information as required. The result of clicking one of the buttons in the first column is shown in Figure 4.5.

Figure 4.5. Handling the RowCommand event

graphics/04fig05.gif



A First Look at ASP. NET v. 2.0 2003
A First Look at ASP. NET v. 2.0 2003
ISBN: N/A
EAN: N/A
Year: 2004
Pages: 90

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net