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.
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.
{
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.
