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.

Gridx 22 - Indirect Select

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

Gridx 22b - Indirect Select

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
},

Gridx 22c - Indirect Select

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.

Gridx 22d - Extended Select

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.

Advertisements

2 responses to “Gridx in XPages – 22: Row Selection”

  1. jamessealite says :

    in the enhanced grid, even i added the 3 modules
    “gridx/modules/RowHeader”,
    “gridx/modules/select/Row”,
    “gridx/modules/IndirectSelect”,
    with
    selectable = true
    selection mode = multible
    i still cannot find the check box in the selection pane on the left.

    the selection was done properly. i can still delete the document. did i get anything wrong? if i removed the enhanced grid feature, then thing works alright.

    thanks for your help

    • Brad Balassaitis says :

      It sounds like you’re using the standard Dojo data grid (adding the EnhancedGrid features), but this blog series is dealing with Gridx, which is a separate, next-generation Dojo grid.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: