Data Paging

• Aug 01, 2019
• 3 minutes to read

The ASPxDataView control automatically splits its content in multiple pages and allows end-users to navigate through them using the built-in pager. If you want to disable paging, set the ASPxDataViewBase.AllowPaging property value to false.

Pager Settings

The ASPxDataView.PagerSettings property provides an access to the pager-related settings. They are stored in an object of the DataViewPagerSettings type. Each pager UI element can be configured with the corresponding property of this object.

To control the pager’s visibility, use the PagerSettingsEx.Visible property. By default, the pager is displayed both above and below data items. Using the PagerSettingsEx.Position property, you can also make the pager to appear only on the top or only on the bottom.

The number of pages can be obtained by the ASPxDataViewBase.PageCount property. It is automatically calculated based on the total number of items and the number of items displayed by every page. The individual page size is set in different ways depending on the layout mode.

• In the Table layout mode, the number of items on a single page is calculated automatically based on the specified table dimensions (the DataViewTableLayoutSettings.RowsPerPage and DataViewTableLayoutSettings.ColumnCount properties).
• In the Flow layout mode, the number of items on a single page is defined by the CardViewFlowLayoutSettings.ItemsPerPage property.

To enable the endless paging feature, use the DataViewPagerSettings.EndlessPagingMode property.

To make the data paging SEO-friendly, enable the DataViewPagerSettings.SEOFriendly property.

Paging in Code

In addition to navigating through available pages with the pager UI elements, the ASPxDataView control allows you to change the active page programmatically.

• On the server-side.

  Use the ASPxDataViewBase.PageIndex property to get or set the currently active page index.

• On the client-side.

  The ASPxClientDataView object provides various methods allowing you to manipulate the pager from the client-side. These methods are listed in the table below.

  Method name	Method description
  ASPxClientDataView.FirstPage	Activates the first page.
  ASPxClientDataView.GotoPage	Activates the specified page.
  ASPxClientDataView.LastPage	Activates the last page.
  ASPxClientDataView.NextPage	Activates the next page.
  ASPxClientDataView.PrevPage	Activates the previous page.

Events Related to Data Paging

• When the active page index is changed (either by an end-user, or programmatically), the ASPxDataViewBase.PageIndexChanging event is raised allowing you to prevent the page from changing if necessary.

  C#

  
  protected void DataView_PageIndexChanging(object source, DataViewPageEventArgs e) {
          // Cancels the page index changing if the new page index equals 2
          if (e.NewPageIndex == 2)
              e.Cancel = true;
      }
  

• After the page index is successfully changed, the ASPxDataViewBase.PageIndexChanged is raised allowing you to respond to the page’s changes.

  C#

  
  protected void DataView_PageIndexChanged(object sender, EventArgs e) {
          // Set the custom JavaScript property to indicate that the page index has been changed
          DataView.JSProperties["cpPageChanged"] = true;
      }
  

  JS

  
  // Handle the client-side EndCallback event
  function OnEndCallback(s, e) {
              // Check the previously set custom JS property to ensure that the page index has been changed
              if (s.cpPageChanged) {                    
                  alert("The page index has been changed");
                  s.cpPageChanged = false;
              }