asp.net.ph

Skip Navigation Links

Introduction to the DetailsView Control

Controls You Can Use on Web Forms   ASP.NET Data Controls   DetailsView Control


The DetailsView Web server control is a full-featured data-bound control that provides the ability to display, insert, edit, or delete a single record at a time from its associated data source.

The DetailsView control can automatically page over the data, if the underlying data source supports paging.

By default, the DetailsView control displays each field of a record on its own line.

The DetailsView control is typically used in a master/detail scenario where the selected record of the master control determines the record to display or update in the DetailsView control.

The following sections briefly introduce the main features of the DetailsView control.

Binding Data to the Control

NOTE: The DetailsView control must be bound to a data source; otherwise, the control will not render on the page.

The DetailsView control provides the following options for binding to data:

  • Data binding using the DataSourceID property, which allows binding the DetailsView control to a data source control. This is the recommended approach as it enables the DetailsView control to take advantage of the capabilities of the data source control, and provide built-in functionality for paging and updating.
  • Data binding using the DataSource property, which allows binding to any data source that implements the ICollection or IEnumerable interface, including ADO.NET datasets and datareaders. This approach, though, requires coding for any additional functionality such as paging and updating.

NOTE: The DetailsView control renders only a single row of data at a time, even if its data source exposes multiple records.

When binding to a data source using the DataSourceID property, the DetailsView control supports two-way data binding. In addition to displaying data, the control automatically supports insert, update, and delete operations on the bound data. For more information, see Binding to Data Using a Data Source Control.

When using the control to allow users to insert, edit, or delete data, you have to set the DataKeyNames property to specify the name(s) of the primary key field(s) that uniquely identify each record in the data source. This information is needed for the automatic update features to work, but does not have to be part of the information displayed in the form.

For details on using the DetailsView control for updating data, see Allowing Users to Edit Rows in a DetailsView Control. For general information about data binding in server controls, see Data Binding in Web Forms.

Customizing the DetailsView Control User Interface

The DetailsView control supports a Fields collection property, that is similar in function to the Columns collection of the GridView control, except that the DetailsView control renders each field as a row instead of a column.

The following table lists the different row field types you can specify for the DetailsView.

Column field type Description
BoundField Displays the value of a field in a data source as text.
ButtonField Displays a command button in the DetailsView control. This allows you to display a row with a custom button control, such as an Add or a Remove button.
CheckBoxField Displays a check box in the DetailsView control. This row field type is commonly used to display fields with a Boolean value.
CommandField Displays built-in command buttons to perform edit, insert, or delete operations in the DetailsView control.
HyperLinkField Displays the value of a field in a data source as a hyperlink. This row field type allows you to bind a second field to the hyperlink’s URL.
ImageField Displays an image in the DetailsView control.
TemplateField Displays user-defined content for a row in the DetailsView control according to a specified template. This row field type allows you to create a custom row field.

Templates for Control Layout

The DetailsView control supports additional customization through templates, which offer more control over the rendering of certain elements. The following table lists the template types you can specify for the DetailsView.

Template type Description
EmptyDataTemplate Defines the content for the empty data row displayed when the DetailsView control is bound to a data source that does not contain any records. This template usually contains content to alert the user that the data source does not contain any records.
FooterTemplate Defines the content for the footer row. This template usually contains any additional content you would like to display in the footer row.

NOTE: As an alternative, you can simply specify text to display in the footer row by setting the FooterText property.

HeaderTemplate Defines the content for the header row. This template usually contains any additional content you would like to display in the header row.

NOTE: As an alternative, you can simply specify text to display in the header row by setting the HeaderText property.

PagerTemplate Defines the content for the pager row displayed when the paging feature is enabled (when the AllowPaging property is set to true). This template usually contains controls with which the user can navigate to another record.

NOTE: The DetailsView control has a built-in pager row user interface (UI). You need to create a pager template only if you want to create your own custom pager row.

NOTE: You can also create a template for an individual field by adding a TemplateField object to the Fields collection.

Styles

The DetailsView control also supports additional customization of the user interface by using style properties. The following table lists the style properties you can specify for the DetailsView.

Style property Description
AlternatingRowStyle The style settings for the alternating data rows in the DetailsView control. When this property is set, the data rows are displayed alternating between the RowStyle settings and the AlternatingRowStyle settings.
CommandRowStyle The style settings for the row containing the built-in command buttons in the DetailsView control.
EditRowStyle The style settings for the data rows when the DetailsView control is in edit mode.
EmptyDataRowStyle The style settings for the empty data row displayed in the DetailsView control when the data source does not contain any records.
FieldHeaderStyle The style settings for the header column of the DetailsView control.
FooterStyle The style settings for the footer row of the DetailsView control.
HeaderStyle The style settings for the header row of the DetailsView control.
InsertRowStyle The style settings for the data rows when the DetailsView control is in insert mode.
PagerStyle The style settings for the pager row of the DetailsView control.
RowStyle The style settings for the data rows in the DetailsView control. When the AlternatingRowStyle property is also set, the data rows are displayed alternating between the RowStyle settings and the AlternatingRowStyle settings.

For more information, see Web Forms Server Controls and CSS Styles.

See Also

Adding DetailsView Controls to a Web Forms Page



© 2025 Reynald Nuñez and asp.net.ph. All rights reserved.

If you have any question, comment or suggestion
about this site, please send us a note