Dojo Data Grid – Part 11: Editing Data in the Grid

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

Enabling Column Editing

Allowing a column to be editable in the grid is as simple as setting the column’s editable property to true!

Grid11_1

Now, you can double-click on a cell in that column and it will change to edit mode.

Grid11_2

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:

Grid11_3

Cell is a plain text field (the default type).

Select is a drop-down list. You can compute the options with server-side JavaScript.

Grid11_5

Grid11_6

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.

Grid11_7

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.

Grid11_8

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.

Advertisements

12 responses to “Dojo Data Grid – Part 11: Editing Data in the Grid”

  1. Jim Roysdon says :

    Love the Datagrid series with REST services. It does a lot of what we are looking for. We do have one issue, though. We have a requirement to put a series of services (rows) with months (columns). The issue, and I think this is simple, is that the requirement is that the end user only be able to edit a single column based on the month. For example, if this is September, they want the ability to submit numbers for August, but not for July and not for September.

    If I were writing this in something like PHP or even Javascript, I think I would give each TH an id and use DOJO.BYID to find it and then set “editable” to “true” post load based on the month(-1). Do you or any of your readers know of a better way?

    Thanks – Jim

    • Brad Balassaitis says :

      Thank you very much!

      Very interesting question. I’ve put together some code that seems like it will do the trick, but it’s not polished yet. I’ll write up a blog post about it in the near future, but if you need it sooner, please ping me on Twitter (@Balassaitis), Skype, or LinkedIn and I’ll send it to you.

      • Jim Roysdon says :

        Actually, I found it myself this morning, but have not had a chance to right it up. The XP:GRID:COLUMN “Edit” property has a setting of “True/False”. What I did not see was the “Diamond”. Using that, I am able to call a JSS function that returns “false” to the column IF it is not the proper month, and
        “true” if it is, making only ONE month column editable. I can use the SAME function to control the CSS style, making the editable column a larger font and different color so as to stand out.

      • Brad Balassaitis says :

        The editable property of the column can be computed with SSJS, but I didn’t see a way to access the data from a given row in SSJS at that point. This makes sense because the REST service provides the data and the grid is rendered client-side, so there’s a disconnect in what’s available via SSJS.

        However, I thought you were looking to conditionally allow editing based on the data *in* a column. It sounds like you’re trying to just conditionally allow the entire column to be editable based on the current month. That should be pretty straightforward to implement by computing the Editable property of the column.

        Glad you found a solution quickly!

  2. Roman says :

    Hello. I have dojo 1.8.1, and install manual ext lib
    If the DataGrid contains lots of rows(example 200) and to scroll, it does not work out of edit mode. Do not know what the problem is?

  3. Justin says :

    I have issue in using dojox.grid.EnhancedGrid with structure of row as “editable: true, alwaysEditing: true”. But the the grids.cells.textbox and grids.cell.selectbox don’t automatically save to store after we change it in input fields. The “onStartEdit”, “onApplyCellEdit” functions are also not triggered here.
    What is the problem here?

    If we remove “alwaysEditing: true” from structure, every thing will work correct. save store and “onStartEdit”, “onApplyCellEdit” functions will be triggered.

    If we use normal datagrid( dojox.grid.DataGrid) instead of dojox.grid.EnhancedGrid. with structure “editable: true, alwaysEditing: true” of row everything will works fine.

    Please give me solution to get the “alwaysEditing: true” to get store be updated and with triggering of these following function “onStartEdit”, “onApplyCellEdit” too using with dojox.grid.EnhancedGrid.

    • Roman says :

      Try it:
      add in onClientLoad

      dojo.addOnLoad( function() {
      var grid = dojo.byId(“#{id:djxDataGrid1}”);
      dojo.connect( grid, “onApplyCellEdit”, function(inValue, inRowIndex, inFieldIndex) { … your code … } );
      } )

  4. Arvind Raay says :

    I am currently working on grids in dojo and my requirement is to have a editable text box in the data grid. I have tried using editable:true in the layout, but the text box appears only after i double click the field. I want that text box while the grid is populated and the user has to click the field only once. Is there any way to do it?? Thanks in advance

  5. nonolady says :

    Hello,i’m have the same issues,when edit row over 25 Response is empty.s there any way to do it?? Thank you.
    http://stackoverflow.com/questions/20055940/xpages-dojo-grid-editable-cell-does-not-save-value-when-rest-service-save-meth

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: