Gridx in XPages – 30: Getting Started with Inline Editing

Like other modern grids, Gridx can provide the ability for users to edit data inline. This can very handy for making quick changes without having to leave the page or load another one to edit a form. In this post, I’ll show how to get started with editing data in the grid.

Gridx Series

Gridx in XPages — Entire Series

Making a Column Editable

To make a grid column editable, you need to include two modules and set a property in the column definition.

1. Add the ‘Edit’ and ‘CellWidget’ modules

Add the Edit and CellWidget modules to the require statement and to the grid’s modules property

"gridx/modules/Edit",
"gridx/modules/CellWidget",

...

modules: [
  Resizer,
  NestedSort,
  Filter,
  FilterBar,
  QuickFilter,
  VirtualVScroller,
  CellWidget,
  Edit
]

2. Add a Column Property

Now that the modules are in place, all you have to do us add the editable property to a column definition and set it to true.

{
  id: 'first',
  field: 'firstname',
  name: 'First',
  width: '70px',
  editable: true
},

Default Edit Behavior

Now you can change the firstname column to edit mode by either double-clicking on a cell or selecting the cell and hitting the [ENTER] key.

By default, it will provide a plain text field for you to modify the data.

Gridx 30A

To stop editing, either hit the [ENTER] key or click or tab out of the field. It then changes back to read mode and shows the updated value.

Note: This preserves the change in the in-memory data store, but does not save it to the back-end document. (I’ll dig into that more in the next post.)

Always in Edit Mode

If you’d rather the data in the column always be in edit mode, you can add the alwaysEditing property to the column definition and set it to true.

Gridx 30B

{
  id: 'first',
  field: 'firstname',
  name: 'First',
  width: '70px',
  editable: true,
  alwaysEditing: true
},

Processing the Updated Value

You can also attach a function to process the user-entered value before it is updated in the data store.

In this example, I have a function that surrounds the updated value with asterisks.

function processState(storeData, gridHandle) {
  return '*' + storeData + '*';
}

The function automatically receives two parameters (it doesn’t matter what you name them): the updated value in the cell and a handle to the grid, which also gives you access to the row and column being edited, so you can get the document ID from the row (which will be necessary when saving changes to the back end document).

To call it when the column is updated, it needs to be added to the editorArgs object via the fromEditor property.

{
  id: 'state',
  field: 'state',
  name: 'State',
  width: '40px',
  editable: true,
  editorArgs:{
    fromEditor: processState
  }
},

There is also a toEditor callback that can be used to process the data before it becomes editable (but that would be more useful with other data types and edit controls).

You can also add callbacks to the onBegin, onApply, and onCancel events as needed.

Up Next

In the next post, we’ll look at saving the changes. After that, we’ll look at different types of widgets you can use to edit data in the grid.

Advertisements

Trackbacks / Pingbacks

  1. Gridx in XPages – 32: Editable Cell Widgets | Xcellerant - March 9, 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: