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.
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).
You can select non-contiguous columns to move. If you do, it will make them contiguous at the place where you drop them.
Three modules are required to make this happen:
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