Paging in a DetailsView Web Server Control

  • Article

The ASP.NET DetailsView control has built-in support to enable users to page through records one at a time. The control also supports customizing the paging user interface (UI). In the DetailsView control, a page of data is a single bound row.

How Paging Works in the DetailsView Control

The DetailsView control supports paging over the records in its data source. To enable paging behavior, you set the AllowPaging property to true. The page size requested by the DetailsView control is always one row.

If the DetailsView control is bound to a data source control or to any data structure that implements the ICollection interface (including datasets), the control gets all the records from the data source, displays the record for the current page, and discards the rest. When the user moves to another page, the DetailsView control repeats the process, displaying a different record.

Note

If the data source does not implement the ICollection interface, the DetailsView control cannot page. For example, if you are using a SqlDataSource control and have set its DataSourceMode property to DataReader, the DetailsView control cannot implement paging.

Some data sources, such as the ObjectDataSource control, offer more advanced paging capabilities. In these cases the DetailsView control takes advantage of the data source's more advanced capabilities to gain better performance and flexibility while paging. The number of rows requested may vary depending on whether the data source supports getting the total row count.

Note

If you are creating a data source (such as implementing a SelectCountMethod method in the source object for the ObjectDataSource control), it is strongly recommended that your data source return the total row count when supplying pages of data. This minimizes the number of records that the DetailsView control must request in order to retrieve a page of data. If the total row count is supplied by the source data object, the DetailsView control will request only a single row at a time for each page. If the total row count is not supplied, the DetailsView control must request all rows from the data source (starting with the row that represents the requested page of data) and discard all rows except the row being displayed.

Customizing the Paging Settings and User Interface

You can customize the user interface (UI) of the DetailsView paging in a number of ways.

Paging Modes

The PagerSettings property enables you to customize the appearance of the paging user interface (UI) generated by the DetailsView control when you set the AllowPaging property to true. The DetailsView control can display direction controls that enable forward and backward navigation as well as numeric controls that enable a user to move to a specific page.

The PagerSettings property of the DetailsView control is set to a PagerSettings class. You can customize the paging mode by setting the Mode property of the DetailsView control to a PagerButtons value. For example, you can customize the paging UI mode by setting it as follows:

DetailsView1.PagerSettings.Mode = PagerButtons.NextPreviousFirstLast

The available modes are:

Pager Control Appearance

The DetailsView control has numerous properties that you can use to customize the text and images for different pager modes. For example, if you set the paging mode of a DetailsView control to NextPrevious and want to customize the text that is displayed, you can set the NextPageText and PreviousPageText properties to your own values. By default, the PreviousPageText and NextPageText properties are set to "<" and ">", respectively.

You can also use images to customize the appearance of your paging controls. The PagerSettings class includes image URL properties for the first, last, previous, and next page command buttons.

Finally, you can control the appearance of the paging commands by setting the PagerStyle property of the DetailsView control to a TableItemStyle value.

Data Paging Template

If you set the AllowPaging property of the DetailsView control to true, the DetailsView control automatically adds user interface (UI) controls for paging. You can customize the UI for paging by adding a PagerTemplate template. To specify which paging operation to perform, add a Button control to the template, and then set its CommandName property to Page and its CommandArgument property to one of the following values:

  • First   To navigate to the first page.

  • Last   To navigate to the last page.

  • Prev   To navigate to the previous page.

  • Next   To navigate to the next page of data

  • A number   To indicate a specific page.

The following code example shows a DetailsView control configured to provide paging.

<%@ Page language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" >
  <head runat="server">
    <title>DetailsView Example</title>
</head>
<body>
    <form id="form1" runat="server">
      <h3>DetailsView Example</h3>
        <table cellspacing="10"> 
          <tr>               
            <td valign="top">

              <asp:DetailsView ID="EmployeesDetailsView"
                DataSourceID="EmployeesSqlDataSource"
                AutoGenerateRows="false"
                AllowPaging="true"
                DataKeyNames="EmployeeID"     
                runat="server">

                <HeaderStyle forecolor="white" backcolor="Blue" />                

                <Fields>
                  <asp:BoundField Datafield="EmployeeID" HeaderText="Employee ID" ReadOnly="true"/>                    
                  <asp:BoundField Datafield="FirstName"  HeaderText="First Name"/>
                  <asp:BoundField Datafield="LastName"   HeaderText="Last Name"/>                    
                </Fields>

                <PagerSettings Mode="NextPreviousFirstLast"
                               FirstPageText="<<"
                               LastPageText=">>"
                               PageButtonCount="1"  
                               Position="Top"/> 
              </asp:DetailsView>

            </td>
          </tr>
        </table>


        <asp:SqlDataSource ID="EmployeesSqlDataSource" 
          SelectCommand="SELECT * FROM [Employees]" 
          connectionstring="<%$ ConnectionStrings:NorthwindConnection %>" 
          RunAt="server"/>

      </form>
  </body>
</html>

<%@ Page language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" >
  <head runat="server">
    <title>DetailsView Example</title>
</head>
<body>
    <form id="form1" runat="server">
      <h3>DetailsView Example</h3>
        <table cellspacing="10"> 
          <tr>               
            <td valign="top">

              <asp:DetailsView ID="EmployeesDetailsView"
                DataSourceID="EmployeesSqlDataSource"
                AutoGenerateRows="false"
                AllowPaging="true"
                DataKeyNames="EmployeeID"     
                runat="server">

                <HeaderStyle forecolor="white" backcolor="Blue" />                

                <Fields>
                  <asp:BoundField Datafield="EmployeeID" HeaderText="Employee ID" ReadOnly="true"/>                    
                  <asp:BoundField Datafield="FirstName"  HeaderText="First Name"/>
                  <asp:BoundField Datafield="LastName"   HeaderText="Last Name"/>                    
                </Fields>

                <PagerSettings Mode="NextPreviousFirstLast"
                               FirstPageText="<<"
                               LastPageText=">>"
                               PageButtonCount="1"  
                               Position="Top"/> 
              </asp:DetailsView>

            </td>
          </tr>
        </table>


        <asp:SqlDataSource ID="EmployeesSqlDataSource" 
          SelectCommand="SELECT * FROM [Employees]" 
          connectionstring="<%$ ConnectionStrings:NorthwindConnection %>" 
          RunAt="server"/>

      </form>
  </body>
</html>

See Also

Reference

DetailsView Web Server Control Overview