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 > UI Gallery , and select Click Actions in the Repeating Layouts group.

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.

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.

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).

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 Interface  > UI Gallery , and select Tree or Row Editing in the Repeating Layouts group.

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).

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.

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

Adjust the Height of Tree Grid Rows

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