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:
- Select 1 or more columns to move. (Use CTRL+Click or SHIFT+Click to select multiple columns.)
- Move the cursor over the data in one of the selected columns. (The cursor changes to 4 arrows.)
- (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).
Image may be NSFW.
Clik here to view.
You can select non-contiguous columns to move. If you do, it will make them contiguous at the place where you drop them.
Before:
Image may be NSFW.
Clik here to view.
After:
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
