Gridx in XPages – 23: Rearranging Columns with Drag and Drop

Gridx can provide users the ability to rearrange content via drag and drop. This can be very handy in making a grid more flexible, which can, in turn, cut down the number of views or grids that you need to provide. In this post, I’ll show how to implement column drag and drop.

Gridx Series

Gridx in XPages — Entire Series

Rearranging Columns

To rearrange columns, do the following:

  1. Select 1 or more columns to move. (Use CTRL+Click or SHIFT+Click to select multiple columns.)
  2. Move the cursor over the data in one of the selected columns. (The cursor changes to 4 arrows.)
  3. (Left) click and drag to move the column(s)

When you click to start moving, you’ll see an icon that shows the number of columns to be moved. It includes a green circle with a plus sign (+) if you’re currently hovered over a valid place to drop the column(s).

Gridx 23a - Move a Column

You can select non-contiguous columns to move. If you do, it will make them contiguous at the place where you drop them.

Before:

Gridx 23b - Move Multiple Columns

After:

Gridx 23c - After Moving Multiple Columns

Implementation

Three modules are required to make this happen:

"gridx/modules/extendedSelect/Column",
"gridx/modules/move/Column",
"gridx/modules/dnd/Column",

These modules provide the ability to select columns, move columns (programmatically), and drag and drop to rearrange, respectively.

All you need to do is add the modules to the require statement and to the grid’s modules list.

Advertisements

Trackbacks / Pingbacks

  1. Gridx in XPages – 26: Column and Row Locking | Xcellerant - January 21, 2015

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: