Data Navigation

In order to provide the best usability, data in a grid is divided into pages containing a reasonable number of records. This feature noticeably improves the performance of the DataGrid widget. Paging settings are specified by the fields of the paging configuration object.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    paging: {
        // Paging settings are specified here
    }
});

To specify the number of records one page contains, assign an integer number to the pageSize field of this object.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    paging: {
        pageSize: 10
    }
});

A grid can start displaying data from a particular page. To specify the page, use the pageIndex field of the paging object. Note that the page index is zero-based. Thus, page 1 has index 0, page 2 - index 1, etc. For example, the following code specifies the page 10 to be displayed initially.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    paging: {
        pageIndex: 9
    }
});

When you do not need paging, disable it by setting the paging | enabled field to false. Note that in this case, all data will be loaded at once, which may affect grid performance.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    paging: {
        enabled: false
    }
});

In the following subtopics, you will learn to configure and use scrolling and pager navigation.

Pager Navigation

A user can navigate through data using a pager consisting of a page navigator and a page selector. To switch between pages, the user must choose a required page number from the page navigator. To change the page size at runtime, the user can choose one of predefined page sizes from the page size selector.

See Also

NOTE: In order to use the pager, data paging must be enabled.

Show Example:
AngularJS
Knockout
jQuery

Scrolling

Scrolling allows an end-user to browse through grid records without being distracted by the necessity of switching pages. Vertical and horizontal scrolling may be present in a grid. Moreover, vertical scrolling can function in several modes. Scrolling cannot be performed in code.

NOTE: In DataGrid documentation, the word "scrolling" without specification refers to vertical scrolling. When horizontal scrolling is in question, this fact is stressed.

See the following subtopics to learn how to specify the required mode of vertical scrolling and discover settings that may lead to the appearance of horizontal scrolling.

Vertical Scrolling

Vertical scrolling is the main type of scrolling that enables a user to navigate through grid records. To scroll, the user can drag a scroll bar, which is located on the right side of a grid, or use the mouse wheel.

DataGrid supports three modes of vertical scrolling: standard, virtual and infinite. To specify the scrolling mode, set the mode option of the scrolling object.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    scrolling: {
        mode: 'standard' // 'virtual' || 'infinite'
    }
});
  • Standard Mode
    In a standard scrolling mode, the grid loads one page at once. This operation may affect grid performance as the loaded page may contain many grid records. Moreover, if the pager is disabled, a user can see only the first page. Thus, using this mode is recommended only when you have a small data source or display a large data source using the pager for navigation purposes.

  • Virtual Mode
    In a virtual scrolling mode, the grid loads pages at runtime when they get into its field of vision. Once a page is out of the field of vision, it is removed from the grid. This behavior allows an end-user to scroll through large amounts of grid records without notable lags. To specify the size of loaded pages, use the paging | pageSize option. Note that in this scrolling mode, the scroll bar is positioned considering the total number of grid records. This feature allows the user to move from the first to the last grid record promptly even when there are thousands of records between them.
    View Virtual Scrolling Demo

  • Infinite Mode
    If it is necessary to move gradually from the beginning to the end of the grid, use scrolling in the infinite mode. Grid pages in this mode are loaded when the scroll bar reaches the end of its scale. This scrolling mode requires paging to be enabled. The size of a page is specified by the pageSize option as well.
    View Infinite Scrolling Demo

    NOTE: When you use infinite scrolling in conjunction with grouping, consider making groups noncollapsible.

To spot the difference between those scrolling modes, see the example below.

Show Example:
AngularJS
Knockout
jQuery

Horizontal Scrolling

In addition to the vertical scrolling, an end-user may encounter horizontal scrolling, which allows users to browse columns that are concealed because they extend beyond the borders of the widget container. This type of scrolling is rather rare and cannot be configured by any options. It appears when the total width of grid columns exceeds the width of the widget container, which might occur in two cases:

  • when you have specified constant widths for all grid columns;
  • when the width of columns is calculated on the base of their content. It is the result of setting the columnAutoWidth option to true.

Switching Pages in Code

Regardless of the way you choose to browse data in your grid, switching between pages is available in code. DataGrid provides the pageIndex method for this purpose. Being called without arguments, this method returns the index of the current page. To switch the grid to a required page, pass the index of this page to this method. Note that the page index is zero-based. Thus, page 1 has index 0, page 2 - index 1, etc. For example, the following code switches the grid to page 10.

JavaScript
dataGridInstance.pageIndex(9);