This content has been archived and is no longer being maintained.

Table of Contents

Article

Introducing PRPC 6.2 SP2 - Grids and Trees

Design grids that are more powerful, specifying grid actions and passing parameters to the Report Definition sourcing a grid. Improve user experience, using progressive paging and new options for width, borders, filtering, sorting, and on-hover display.

 

Configure Multiple Click Actions

By default, grids have edit modes. The edit mode sets the default presentation and behavior configuration for the repeating Grid, determining how users view and edit properties. Each edit mode is configured with Grid edit actions — events and associated actions. You can easily modify these click and double-click actions, if desired. You can add, delete, or edit within a Grid, configuring click and double-click actions to occur in sequence.

The following sample from the UI Gallery demonstrates some of the many ways you can configure Grid actions. To view and interact with these samples, select  > User Interface User Interface > UI GalleryUI Gallery , and select Click Actions in the Repeating Layouts group.

Click Actions

 

Progressively Load Data in Grids

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 in the user interface when the user scrolls through the list. When a user drags the scrollbar down and then releases it, rows in the Grid load.

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. For details, see When and how to use progressive paging to load data in grids.

Progressive Paging


Progressive Paging sample

 

 

Pass Parameters to the Report Definition Sourcing a Grid

Dynamically change the rows in a Grid by passing parameters to the Report Definition data source. For example, you can have a single worklist that provides a variety of ways to change/filter the content without creating additional rules.

Pass Parameters to Report Definition

 

Refresh a Grid using the Refresh List action

Use the new Refresh List action to refresh a Grid based on the clipboard data while maintaining the current state of the UI (for example, sort order, filtering).

Refresh List

 

Style Grids using Row Hover and Grid Borders

Using the Row Hover style, you can change the appearance of a row when the cursor hovers over it. This makes it easier for users to scan a grid horizontally and clearly identify the row to be clicked. You can set the hover text and background color in the Branding wizard.

The following sample demonstrates Row Hover when set to a light blue background color. To interact with this sample, access the UI Gallery, select  > User InterfaceUser Interface  > UI GalleryUI Gallery , and select Tree or Row Editing in the Repeating Layouts group.

Row Hover

 

Set Column Filtering Options

You can use a new Column Filtering option to display only the Range/Search input field. This simplified UI is useful for filtering columns in which the value of each row is unique (for example, a Description).

Column Filtering

 

Set Grid Width Options

Enjoy the full complement of Grid functionality with any of the Width options, enabling you to use features like freezing the heading row and column resizing anywhere in your application.

Grid Width options

The following Grid is configured with Fixed Height, Freeze Header, Column Resize.

Sample Grid

 

Adjust the Height of Tree Grid Rows

Make Trees and Tree Grid rows more vertically compact by reducing the height of the row.

Sample with reduced Row Height

Published January 31, 2012 — Updated October 9, 2015

Have a question? Get answers now.

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