A great feature of the Dojo Data Grid control that we haven’t explored yet is editable columns. They’re quick to set up and they provide an easy way for users to update data without having to open forms, edit, save, and return to the grid.
Dojo Data Grid Series
- Part 1: Concepts and Default Features
- Part 2: Creating a REST Service
- Part 3: Creating Your First Grid
- Part 4: Additional Grid Features
- Part 5: Grid Column Features
- Part 6: Reordering Columns
- Part 7: Sorting
- Part 8: Opening Documents
- Part 9: Multi-Row Entries
- Part 10: Full-Text Searching and Field-Specific Filtering
Enabling Column Editing
Allowing a column to be editable in the grid is as simple as setting the column’s editable property to true!
Now, you can double-click on a cell in that column and it will change to edit mode.
But there is one more step…
Saving the Changes
Updates made to the grid are not saved to the back-end documents by default. The second step is to use client-side JavaScript to save the changes to the rest service:
restServiceID.save();
The ID to use is the jsId property of the REST service, if defined. Otherwise, you can use the id property. You don’t even need the #{id: } syntax to retrieve it; it automatically sets the jsId property to the same as the ID when generating the REST service on the client side.
The Extension Library book highlights a useful feature in the save() call. You can pass in a callback function that will be executed if there’s an error saving the change. This is helpful to inform the user that their update was not successful. Here’s an example:
var saveArguments = {onError: function() {alert('There was an error saving your changes.');}};
restServiceID.save(saveArguments);
Canceling the Changes
To cancel the any changes that have been made, add another button that calls the revert() method of the REST service:
restServiceID.revert();
REST Service Type
It is very important to note that, by default, the grid’s REST service needs to be a viewItemFileService in order to allow updates. In my testing, the error callback function was always triggered when trying to save updates to the viewJsonService.
However, if you have a Web Site document set up, you can include Put in the list of Allowed Methods in order to enable it to work. (Thanks to Per Lausten for the tip.)
autoHeight Required
I’m not sure why, but I was unable to get this to function properly until I set the autoHeight property on the Dojo Data Grid (All properties > basics > autoHeight).
Without it, the cell would change to edit mode, but it would stay in edit mode if I clicked out of the cell or hit the key. If I tabbed out or hit the key, it would change back to read mode and lose the value. Either way, it would not send any updates when I triggered the save.
Once the autoHeight was set, the editable cell would automatically change back to read mode (with the updated value), no matter what I did to exit the cell — and the updates were saved successfully.
Updatable Columns
You can only send back changes to columns in the REST service that map to single fields. It cannot process updates to computed columns.
Column Editor Types
When you set a column to be editable, it defaults to a plain text editable field, but there are a few additional options in the cellType property:
Cell is a plain text field (the default type).
Select is a drop-down list. You can compute the options with server-side JavaScript.
Bool – provides a checkbox. Just be aware that it’s a little strange to use, because it looks like you can click on the checkbox directly, but you still have to double-click in the cell and then click the checkbox in order to change it.
AlwaysEdit isn’t a field type per se; it just makes the column always exist in edit mode (as a plain text field).
RowIndex has nothing to do with editing the column. It overrides the data in the column and displays a row counter.
Single Click Editing
The Grid’s singleClickEdit setting defines whether editable columns can be placed into edit mode by a single click. By default, it requires a double-click.
Grid Updating and Security
You will be happy to know that grid updating respects Author access. The editing happens client-side, so the user can change values in editable columns, but changes will not be saved if the user does not have the proper access to the document. It will trigger the error callback function.
Up Next
In the next post, I’ll show how you can highlight all updated rows in order to have a visual indicator of what has been changed.
