Gridx in XPages – 22: Row Selection

Gridx in XPages – 22: Row Selection

In order to take action on data in the grid, you need to be able to select one or more rows. In this post, I’ll show 3 different modules that provide grid row selection and highlight the differences between them.

Gridx Series

Gridx in XPages — Entire Series

Simple Selection

The first option is simple selection. It allows you to programmatically select/deselect rows, and check row selection status.

It requries adding the gridx/modules/select/Row module to the grid.

Then, you can use javascript to work with the rows by ID.

Select a row by ID:
grid.select.row.selectById('FCE');

Deselect a row by ID:
grid.select.row.deselectById('FCE');

Clear all selections:
grid.select.row.clear();

Check whether a row is selected:
grid.select.row.isSelected('FCE');

Indirect Selection

Indirect selection is more user-oriented. It adds a checkbox to the left of each row in order to allow selection.

It requires 3 modules in order to work:

"gridx/modules/RowHeader",
"gridx/modules/select/Row",
"gridx/modules/IndirectSelect",


If you want to limit the selection to only 1 row, you can add this property to the grid object:

selectRowMultiple: false

Note: When combined with extended selection, allows for SHIFT+CLICK to select multiple rows.

Row Selection by Clicking on a Cell

By default, you have to click on the checkbox or radio button to select the row. But if you’d like the user to be able to click any cell in the row to goggle selection, you can add a property to the grid:

selectRowTriggerOnCell: true,


Unselectable Rows

If there are any rows in the grid that you do not want to be selectable, you can set a grid attribute that defines the rows by ID (in my example, I’m using

the NoteID for the row ID):

selectRowUnselectable:{
  'FCE': true,
  '9F6': true
},

You can also check whether a row is selectable or and programmatically change whether a row is selectable.

This will get a list of all unselectable rows:
grid.select.row._getUnselectableRows()

Extended Selection

Extended selection allows the user to select one or more rows at a time, using CTRL and SHIFT to span multiple rows for selection.

It requries 2 modules:


"gridx/modules/RowHeader",
"gridx/modules/extendedSelect/Row",


This adds a solid row header to each row where you can click to select that row.

You can also SHIFT+CLICK to select a range of rows or CTRL+CLICK to select non-contiguous rows.

There are a number of methods to work with the selection programmatically; take a look at this page for more examples.