Summary

PRPC V6.2 SP2 provides many ways to use actions and events within grids to build powerful, dynamic user interfaces that can improve user productivity and accuracy. For example, you can use grids to enable users to sort, filter, select, and build a list of multiple items.

You may choose to use a grid layout if you have advanced requirements, such as displaying more than one value in a column, requiring grid actions, such as Run Data Transform, Refresh Section, or Run Flow in Modal, or if you want to take advantage of the flexibility inherent in grids, for example, including a section within a grid row.

To interact with a sample, select > User Interface> UI Gallery, and select Build A List in the Combinations group.

This sample demonstrates configuring a grid so that users can click items in one list and automatically move them to another.

This article shows you how the Build A List sample is configured using the following features:

• Progressive Paging
• Filtering
• Sorting

• Run Data Transform
• Refresh Section
• Delete Item

• Row Hover
• Fixed Height
• Freeze Row Pane

• Run Data Transform
• Refresh Section
• Delete Item

Formatting the Grid

• Row Hover
• Fixed Height
• Freeze Row Pane

Viewing Data in the Grid

• Progressive Paging
• Filtering
• Sorting

Suggested Approach

Overview

In the Build A List sample, make sure that Click A Row is selected, as shown here. Users click a row in the grid on the left to move the item to the grid on the right.

The row background color changes to light blue, based on the cursor’s position, to indicate the row to be clicked. You can set the text and background color that is applied on Row Hover in the Branding Wizard.

Users can also filter and sort the lists by clicking the icons at the top of the columns. Note that the Available column filter displays only the search box because each employee name, the value of the .pyEmployee property, is a unique text string. The Role column filter displays both checkboxes for selecting individual .pyRole property list values and a search box for searching the text values.

Note: The Build A List sample demonstrates two ways for users to build a list: by clicking a row in a grid or selecting from an AutoComplete. A Visible When condition indicates which sample to display: Click A Row or Using AutoComplete. This article describes the Click A Row configuration. For information on using AutoComplete to build a list, see How to use the AutoComplete control to build a list.

Configuration

Configuring the Repeating Grid

This sample uses a Repeat Grid with an Edit Mode configured to execute three actions in sequence: run a data transform, refresh another section, and delete an item. To view the configuration of the grid on the left:

1. In the Build A List sample, click open.
   
2. The pxBuildList section rule opens. On the Layout tab, click to display the wireframe.
3. Click the magnifying glass in the Section Include to open the Section Include panel, and then click to open the pxBuildListRow section.
   
4. In the pxBuildListRow section, click the magnifying glass  in the Available cell to open the Cell Properties panel, and then click to open the pxBuildListRowAvail section.
   
5. Notice that this section contains a Repeat Grid. Repeat grids provide options to resize, reorder, sort, and filter, as well as specify row hover and row numbering. Click the magnifying glass  in the Repeat Grid. This repeating grid, the source of which is a page list property, is configured with Row Hover, Sorting, and Filtering.
   
   
6. Click the magnifying glass beside the Edit Modeto view the click actions configured for this grid. Each grid has an edit mode that sets the default presentation and behavior configuration for the grid, determining how users view and edit properties. Each of the six edit modes is configured with grid actions — click and double-click actions. You can add, delete, or edit grid actions as desired. This grid edit mode is configured to execute three click actions in sequential order:

    

   • Run Data Transform. This pre-processing data transform appends the selected employee name to the grid on the right.
   • Refresh Section. Refreshes another section, the grid on the right, pxBuildListRowTarget.
   • Delete Item. Deletes the item from the grid on the left.
   
7. In the Behaviors area, double-click Run Data Transform.
   
8. The data transform runs in the context of the selected row, so this data transform copies the current page (which is the currently selected row in the grid), the Primary Source, to the Target, the Employee Grid, EmpGrid.pyEmployeeSelect. It then runs a function which sorts the results in alphabetical order.
   
9. Close the data transform and double-click Refresh Section.
   
10. This Refresh Section click action refreshes another section, the grid on the right, pxBuildListRowTarget.
    
11. Close the Refresh Section and double-click Delete Item. The Delete Item click action deletes the selected item from the grid on the left.
    

This sample also contains links to add or remove the entire list, Add All and Remove All.

Configuring the Add All/Remove All Links

Add All and Remove All are links that add or remove all the items from one grid and move them to the other grid.

To view the configuration of these links:

1. In the Build A List sample, click open.
   
2. The pxBuildList section rule opens. On the Layout tab, click to display the wireframe.
3. Click the magnifying glass  beside Add All to open the Properties panel.
   
4. Click the magnifying glass  beside the Control field. Add All is a pxLink Control configured with a click event to refresh a section.
   
5. Double-click Refresh Section. In the Behavior dialog, notice that clicking Add All refreshes another section, the parent section that includes both the Available and Selected Grids, pxBuildList.
   
    

   This Control is also configured to run a data transform, prior to refreshing the section.
   

   The data transform appends all the employees in the Available Grid (EmpGrid.pyEmployeeAvailable) to the Selected Grid (EmpGrid.pyEmployeeSelect), sorts them in alphabetical order, and then removes all employees from the Available Grid. Note that because this data transform is operating outside the context of the grid, each grid is specified explicitly as a Target.
   

Additional Information

The UI Gallery contains additional samples of many features available in grids, including: Paging, Filtering, Click Actions, Row Editing, and Expand Pane. To access these and other samples, select  > User Interface> UI Gallery > Repeating Layouts.