Grid layout - Operations tab

Click the View properties icon in the Grid Repeat Layout header to display the Properties panel, and then select the Operations tab.

Row Operations  
Row editing The row editing mode sets the default presentation and behavior configuration for a grid, determining how users view and edit properties.

Select one of the following row editing options, each of which are described below: None , Inline , Master-detail .

Default behaviors, configured on the Actions tab,are defined for Inline and Master-detail row editing formats. See About Grid Actions and the Actions tab for more information.

When the Optimize for mobile option is selected on the General tab, the row editing options available are Read-only and Editable in modal.

None Select this option if the row's data cannot be edited. You can allow the user to display the flow action's fields (read only) by selecting the Show Details option on this tab, under Grid Operations.
Note: If the data source is a Report Definition, this is the default value and cannot be edited. You can add action buttons to the grid, which gives the user access to actions on the object represented by that row, such as opening a work item or a local flow action.
Inline Select to enable inline editing of the row's data.
Inline edit mode Appears when you select Inline . Select an inline edit mode:

Click a row to edit : When the user double-clicks a row, the editable fields in that row display as editable.

Rows always editable Editable fields display the data in input boxes.
Master-detail

Editable in modal

Editable in modal options are available when the Optimize for mobile check box is selected on the General tab.
Display of details Select to display row details in:
  • Modal dialog : When the user clicks a row, the editable fields for the flow action appear in a modal window on top of the data display. When the modal window is dismissed, the edits are applied.
  • Expandable rows : When the user clicks a row, the flow action's editable fields populate a detail area below the selected row. When the user saves the edits or selects another row, the edits are applied.
  • Embedded elsewhere : When the user clicks a row, editable fields for the flow action populate a detail area below the grid. When the user saves the edits or selects another row, the edits are applied.

Click Open template to open the section used to render the layout. When the Optimize for mobile option is selected on the General tab, the pyNextGenGridModalTemplate will open.

By default, the templates are standard rules .pyGridModalTemplate, .pyGridRowDetails, and .pyGridDetails, respectively. To create custom templates, copy these rules into your Applies To class. Do not change the Purpose .

Modal Format Available only when the When the Optimize for mobile option is selected on the General tab. Select a format for the modal dialog. The default is Standard. To specify a custom format defined in the skin, select Other. Press the down arrow in the field that displays to select the format that you want to use.

Detail flow action Appears if you select Master-detail as the Row editing operation or you select None as the Row editing operation and you select the Show Details check box, under Grid Operations.

Select or create the flow action that will provide the form for the modal dialog or detail area that appears when the user clicks a row.
Display details read-only

Appears if you select Master-detail as the Row editing operation. Not available when Editable in modal is selected in conjunction with the Optimize for mobile check box on the General tab.

Select to allow the user to view the flow action details in read-only mode, which prevents locking the work item ( Work- or Assign- item) when it opens.

Do not select this option if the flow action contains an editable grid. The user will be unable to perform work in it.
Run activity on row add When you select this option, the grid does not add rows automatically. You will need to select an activity to associate with this action.
Run activity on row delete When you select this option, the grid does not delete rows automatically. You will need to select an activity to associate with this action.
Display an expand/collapse icon per row Appears if you select Master-detail as the Row editing operation and select to display details in Expandable rows . Also displays if you select None as the Row editing operation and you select the Show Details check box, under Grid Operations.

Select to display an Expand/Collapse column at the far left of the grid at runtime. The column displays an icon in each row of the grid.

The Expand/Collapse column is optional; users can click in the row to expand or collapse the pane, or you can insert a button, icon, or link anywhere in the row to enable expand and collapse. If you deleted the default Edit Item action from the Expand Pane edit mode, then select this column to use Expand Pane.
Details location Appears if you select Master-detail as the Row editing operation and select to display details in Expandable rows .

Select Default , to display details after the grid, or select In place of a section to specify the section in which you want the details to appear. For example, assume you want the detail area to appear to the right of the grid instead of below it (default). Create a section (named gridResults ) containing a two-column layout. Embed the grid in the first column and an empty section in the second column. Specify the name of the empty section here.

Grid Operations  
Allow column sorting (Additional settings on column) Select to allow users to sort the rows on a column in the grid. This setting applies to all columns. You can disable sorting for individual columns by clearing the Enable Sorting check box in a column's Cell Properties panel. Sorting is not available for columns containing images, or controls such as buttons (but can include links). This setting overrides the Sort Type settings on Report Definition form's Design tab. For instance, if there are no settings that form, the Sorting selection here enables sorting on the grid.

A tool tip appears at runtime when the user hovers the mouse pointer over the column header. Clicking the header sorts the rows in the column. When sorted, an icon indicating an ascending or descending sort order appears to the right of the header label text. The user can alternate the sort order by clicking the header again. You can use the Skin rule to replace the default icons.

Sorting is performed on all rows in the grid. If Paging is enabled and the user changes the sort order, the grid view returns to the first page.
Allow filtering (Additional settings on column) Select to allow users to show only those rows that match a column value filter. This setting enables filtering for all columns that include a property. You can set filter types or disable filtering for individual columns using the Filtering options in the Column Properties panel.

If a column can be filtered, a filter icon appears on the right side of the column's header cell. The user clicks the icon to display the filter pop-up menu.

The menu contains a check box for each property that the user can select to include in the filter in addition to a text field where the user can enter text on which to filter. If the user enters text and selects properties, the results will include items that match both the text and the selected properties.

When finished, the user clicks Apply. The filter icon changes to a filter-on icon indicating that a filter is applied to the column.

You can use the Skin rule to replace the default icons.

  • Columns containing images, most action controls such as buttons or icons, hidden controls ( pxHidden ), prompt select controls, and subsections cannot be filtered. Columns can include links.
  • Filtering on Text properties that are obfuscated in edit-mode return results based on unfiltered data. Filtering should be disabled.
  • For date types, leaving a From or To field blank means to include everything preceding or following the single limit. For example, if you enter From 12/15/2011 and leave To blank, all dates on or after 12/15/2011 are included.
  • For numeric types, leaving a greater than or less than field blank means to include everything preceding or following the single limit. For example, if you enter less than 500 and leave greater than blank, all numbers less than 500 are included.
  • The following property types cannot be filtered:
    • TextEncrypted
    • Password
    • TimeOfDay
    • Identifier

If the filter does not produce results, a message appears. You can modify the message text in the section pyGridNoResultsMessage.

Allow filtering on unexposed properties Appears if you select Allow filtering. Select to allow filtering on unexposed columns.
Display selected filter values first Appears if you select Allow filtering. When selected, the names of the columns selected for filtering are listed at the top of the filter panel.

This option is enabled by default when the Optimize for mobile option is selected on the General tab although this check box will not appear.

Allow row reordering Select to allow users to move objects higher or lower on the display by dragging and dropping individual rows. Depending on the properties of the objects the rows represent, rows may be moved above or below other rows, or dropped into a row that can receive them to become child entries of that row.
Note: Unavailable if source is Report Definition.

Visual indicators give clues about the process: a line appears between two rows in the list if that is where the row you have started dragging will appear if you release it. A row that can receive the row you have selected as a child will change background color. If your mouse pointer is over an area where you cannot drop the row you have selected, an indicator will remind you that the area is not a valid target. If you attempt to drop the row there, the display will remain unchanged.
Allow column resizing Select to allow users to adjust the width of columns on the display by dragging individual columns to the left or right.
Categorize grid rows (Additional settings on column) Appears if the source of the grid (specified on the General tab) is a Report Definition and the Row editing operation on the Operations tab is None.

Select if you want categorize grid rows based on columns within the grid. You can select the columns by which you want to categorize the grid, and specify sorting and ascending or descending order on the column properties panel of the column within the grid.

Note: Categorizing all columns within a grid would not yield any data columns at runtime.
Use custom category template Appears if you select the Categorize grid rows check box. By default, the pzGridCategoryHeader template is applied.

Select this check box if you want to specify a custom category template in the field that displays.
Show Details Select to allow the user to click a row and display its flow action details beneath the row in read-only mode. The user can expand multiple rows. Enter the flow action in the Flow Action field.
Allow refresh on update When checked, the entire layout is refreshed each time data is updated or submitted.
Select first row on initial load Appears if you select Master-detail as the Row editing operation and select to display details in Embedded elsewhere .

Select this check box if you want the first row to display as selected when the grid initially loads.
Enable displaying details on multiple rows Appears if you select Master-detail as the Row editing operation and select to display details in Expandable rows .

Select to enable users to expand more than one row at a time.
Expand all Appears if Show Details is selected. Select to display details for all rows when the user opens the form.

About Grid Actions

Depending upon the Row editing format you choose, you may see actions defined by default, on the Actions tab. These actions determine how users view and edit data in the grid.

If you select Master-detail as the Row editing option, the following actions are defined by default:

 
Row editing Description Default Actions
Modal dialog The displayed data appears as in read-only mode. When the user clicks a row, the editable fields for the flow action appear in a modal window on top of the data display. When the modal window is dismissed, the edits are applied.
Event Action
Click Set Focus
Double Click Edit Item
Embedded elsewhere The displayed data appears as in read-only mode. When the user clicks a row, editable fields for the flow action populate a detail area below the grid. When the user saves the edits or selects another row, the edits are applied.
Event Action
Click Set Focus
Click Edit Item
Expandable rows The displayed data appears as in read-only mode. When the user clicks a row, the flow action's editable fields populate a detail area below the selected row. When the user saves the edits or selects another row, the edits are applied.
Event Action
Click Set Focus
Click Edit Item
The system uses existing grid actions to determine whether to set focus to new rows.
> When adding a new row, if focus is... > then the system...
configured for the grid sets focus to the new row
not configured for the grid does not set focus within the grid

If you select Edit in modal as the row editing option when the Optimize for mobile check box is selected on the General tab, the following actions are defined by default:

Row editing Description Default Actions
Modal dialog The displayed data appears as in read-only mode. When the user clicks a row, the editable fields for the flow action appear in a modal window on top of the data display. When the modal window is dismissed, the edits are applied.
Event Action
Click Set Focus
Edit Edit Item

When configuring actions in a repeating grid, on the Actions tab, select actions from the List category.

You can configure sequential actions based on a single event for a repeating grid; for example, Click to Set Focus and Click to Edit Item. The actions are acted upon in the order specified. You can set multiple actions based on different events; for example, Click to Set Focus and Double Click to Edit Item.

You can also configure Keyboard actions to enable users to navigate and access items in a repeating grid. For example, you can configure the Up and Down arrows to set focus to the previous and next rows in a grid, and the Enter key to open the selected item.

If you want to set focus from within a row in a repeating grid to an editable control outside of the grid, provide the full path to the property, beginning with the parent page, and represent it on the Pages & Classes tab of the layout containing the repeating grid.

> UI Gallery

The UI Gallery landing page contains a working example of this element. To display the gallery, click Designer Studio > User Interface > Gallery > UI elements.