Creating a Custom Row in a DetailsView Web Server Control

Creating a Custom Row in a DetailsV...

Switch on low bandwidth view

Collapse All

Language Filter

This page is specific to

Microsoft Visual Studio 2008/.NET Framework 3.5

Other versions are also available for the following:

ASP.NET

Creating a Custom Row in a DetailsView Web Server Control

The DetailsView control can automatically generate rows from the fields provided by the data source. In addition, you can specifically identify a collection of rows to be displayed instead of automatically generating them. However, you might encounter a scenario where you need to customize how an individual row is displayed. In that case, you can create a TemplateField to specify a custom layout.

Creating Templates

A TemplateField object enables you to specify templates that contain markup and controls to customize the layout and behavior of a row in a DetailsView control. Using an ItemTemplate, you can specify the layout to be used when the DetailsView control displays a row. To specify a custom layout for when users insert a new data row, you can create a InsertItemTemplate. To specify a custom layout for when users edit a data row, you can create an EditItemTemplate.

Your template can contain markup, Web server controls, and command buttons. For more information on templates, see ASP.NET Web Server Controls Templates.

Data Binding in a Template

In a template, you can bind controls to data using the Eval and Bind methods. You use the Eval method when the control will only display values. You use the Bind method when users can modify a data value—that is, for data-update scenarios. You can use the Eval method in any of the templates to display data. You use the Bind method in a template with controls in which users might change values, such as TextBox and CheckBox controls, or a template that allows a record to be deleted. For more information, see Data-Binding Expressions Overview.

Example

The following example shows the Fields collection of a DetailsView control. The collection contains a TemplateField object, which in turn contains ItemTemplate, InsertItemTemplate, EditItemTemplate objects. To display a date, the ItemTemplate includes a Label control that uses the Eval method. To insert or edit a date, the other templates use a Calendar control that uses the Bind method.

Visual Basic

<Fields>                  
  <asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" InsertVisible="False" ReadOnly="true"/>                    
  <asp:BoundField DataField="FirstName"  HeaderText="First Name"/>
  <asp:BoundField DataField="LastName"   HeaderText="Last Name"/>                    
  <asp:TemplateField HeaderText="Birth Date">
    <ItemTemplate> 
      <asp:Label ID="BirthDateLabel" Runat="Server" 
                 Text='<%# Eval("BirthDate", "{0:d}") %>' />
    </ItemTemplate>
    <InsertItemTemplate>
      <asp:Calendar ID="InsertBirthDateCalendar" Runat="Server"
                    SelectedDate='<%# Bind("BirthDate") %>' />
    </InsertItemTemplate>
    <EditItemTemplate>
      <asp:Calendar ID="EditBirthDateCalendar" Runat="Server"
                    VisibleDate='<%# Eval("BirthDate") %>'
                    SelectedDate='<%# Bind("BirthDate") %>' />
    </EditItemTemplate>
  </asp:TemplateField>                    
</Fields>

<Fields>                  
  <asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" InsertVisible="False" ReadOnly="true"/>                    
  <asp:BoundField DataField="FirstName"  HeaderText="First Name"/>
  <asp:BoundField DataField="LastName"   HeaderText="Last Name"/>                    
  <asp:TemplateField HeaderText="Birth Date">
    <ItemTemplate> 
      <asp:Label ID="BirthDateLabel" Runat="Server" 
                 Text='<%# Eval("BirthDate", "{0:d}") %>' />
    </ItemTemplate>
    <InsertItemTemplate>
      <asp:Calendar ID="InsertBirthDateCalendar" Runat="Server"
                    SelectedDate='<%# Bind("BirthDate") %>' />
    </InsertItemTemplate>
    <EditItemTemplate>
      <asp:Calendar ID="EditBirthDateCalendar" Runat="Server"
                    VisibleDate='<%# Eval("BirthDate") %>'
                    SelectedDate='<%# Bind("BirthDate") %>' />
    </EditItemTemplate>
  </asp:TemplateField>                    
</Fields>

Concepts

ASP.NET Data-Bound Web Server Controls Overview

Data Source Controls Overview

Reference

DetailsView Web Server Control Overview