Table of Contents

Article

When and how to use progressive paging to load data in grids

Summary

Progressive paging — progressively loading rows of data in grids — provides users with a superior experience when compared with traditional paging. If you are displaying data in a repeating Grid, and the data comprises more than a single page (approximately 20 rows of data), you may want to use progressive paging.

Progressive paging limits the number of rows initially loaded in the user interface, to render the page more quickly. The clipboard is loaded with all the data during the initial load. Remaining items are loaded only when the user scrolls through the list. When a user drags the scrollbar down and then releases it, additional rows are loaded in the grid.

Unlike traditional paging, in which users can access specific pages of data using paging controls, progressive paging enables users to access the entire data set by scrolling. Users can act on the full data set; for example, dragging and dropping to re-order the list or sorting and filtering the entire list.

Progressive paging is available for all data sources, including Report Definition, and can be used with grids. It is not available for tree or tree grids.

Suggested Approach

To configure progressive paging in a repeating Grid:

  1. Create a repeating Grid by:
  • On the Layout tab, click Wireframes icon to display the wireframe.
  • On the Grid Repeat Layout header, click the magnifying glass icon Magnifying glass icon.
    The Grid Repeat Layout properties panel displays.

  • On the General tab, select ProgressivePaging and specify the number of Items per Page.

    Select Progressive Paging

  • Save the rule.

  • Run the rule to preview, if desired. Click Run. Notice the scrollbar on the right.
    Preview the Grid

    At runtime, the grid displays with 10 rows of data, as specified in the number of Items per Page. The scrollbar appears on the right. As the user drags the scrollbar and releases, all rows above that point in the grid are loaded.
    Scroll down to load additional rows

    The user can scroll to access the entire data set and re-order, sort, and filter the entire list.

    Scroll down to load additional rows
  • To view and interact with a working example of progressive paging in the UI Gallery select > User InterfaceUser Interface > UI GalleryUI Gallery and then select Paging in the Repeating Layouts group.

    Note: Performance with large data sets is influenced by a variety of factors including the row contents and the end-user’s system. Sorting and filtering can provide alternate ways for a user to access a specific set of rows.

     

    Additional information

    articleHow to add a Grid layout to a section
    articleUsing a report definition rule as a Grid layout data source

    Tags:

    Published February 3, 2012 — Updated October 9, 2015


    100% found this useful

    Have a question? Get answers now.

    Visit the Pega Support Community to ask questions, engage in discussions, and help others.