CellEdit

Feature

Adding this feature to the grid and other Bryntum products which are based on the Grid (i.e. Scheduler, SchedulerPro, and Gantt) enables cell editing. Any subclass of Field can be used as editor for the Column. The most popular are:

• TextField
• NumberField
• DateField
• TimeField
• Combo

Usage instructions:

Start editing

• Double click on a cell
• Press Enter or F2 with a cell selected (see Keyboard shortcuts below)
• It is also possible to change double click to single click to start editing, using the triggerEvent config

new Grid({
   features : {
       cellEdit : {
           triggerEvent : 'cellclick'
       }
   }
});

Instant update

If instantUpdate on the column is set to true, record will be updated instantly as value in the editor is changed. In combination with autoCommit it could result in excessive requests to the backend. By default instantUpdate is false, but it is enabled for some special columns, such as Duration column in Scheduler Pro and all date columns in Gantt.

Keyboard shortcuts

While not editing

While editing

For more information on how to customize keyboard shortcuts, please see our guide.

Editor configuration

Columns specify editor in their configuration. Editor can also by set by using a column type. Columns may also contain these three configurations which affect how their cells are edited:

• invalidAction
• revertOnEscape
• finalizeCellEdit

Preventing editing of certain cells

You can prevent editing on a column by setting editor to false:

new Grid({
   columns : [
      {
         type   : 'number',
         text   : 'Age',
         field  : 'age',
         editor : false
      }
   ]
});

To prevent editing in a specific cell, listen to the beforeCellEditStart and return false:

grid.on('beforeCellEditStart', ({ editorContext }) => {
    return editorContext.column.field !== 'id';
});

Choosing field on the fly

To use an alternative input field to edit a cell, listen to the beforeCellEditStart and set the editor property of the context to the input field you want to use:

grid.on('beforeCellEditStart', ({ editorContext }) => {
    return editorContext.editor = myDateField;
});

Loading remote data into a combo box cell editor

If you need to prepare or modify the data shown by the cell editor, e.g. load remote data into the store used by a combo, listen to the startCellEdit event:

// A server endpoint returning data like:
// [{ id : 123, name : 'Bob Mc Bob' }, { id : 345, name : 'Lind Mc Foo' }]
const employeeStore = new AjaxStore({ readUrl : '/cities' });

new Grid({
    // Example data including a city field which is an id used to look up entries in the cityStore above
    data : [
        { id : 1, name : 'Task 1', employeeId : 123 },
        { id : 2, name : 'Task 2', employeeId : 345 }
    ],
    columns : [
      {
         text   : 'Task',
         field  : 'name'
      },
      {
         text   : 'Assigned to',
         field  : 'employeeId',
         editor : {
              type : 'combo',
              store : employeeStore,
              // specify valueField'/'displayField' to match the data format in the employeeStore store
              valueField : 'id',
              displayField : 'name'
          },
          renderer : ({ value }) {
               // Use a renderer to show the employee name, which we find by querying employeeStore by the id of the grid record
               return employeeStore.getById(value)?.name;
          }
      }
   ],
   listeners : {
       // When editing, you might want to fetch data for the combo store from a remote resource
       startCellEdit({ editorContext }) {
           const { record, editor, column } = editorContext;
           if (column.field === 'employeeId') {
               // Load possible employees to assign to this particular task
               editor.inputField.store.load({ task : record.id });
           }
      }
   }
});

Editing on touch devices

On touch devices, a single tap navigates and tapping an already selected cell after a short delay starts the editing.

This feature is enabled by default.

Validation

To validate the cell editing process you can use the finalizeCellEdit config. Please refer to its documentation for details.

The following example requires a name of a minimum of 5 characters and a score of less than 1,000 for Paris city.

You can use the value parameter to add validation to accept a value of minimum 5 characters:

// Column
{
 field: 'name',
 text: 'Name',
 flex: 1,
 finalizeCellEdit: ({ value }) => {
     // Implement your validation logic here
     if (value.trim().length < 5) {
         return "Name should be at least 5 characters";
     }

     // Return true to allow the edit to be finalized
     return true;
 }
}

Along with the value, it also contains other parameters, such as data.record property, which provides a way to access and validate other columns based on their values.

In the following example, validation is performed based on the 'Score' column's value and the value of its sibling column ('City'):

      {
          type             : 'number',
          field            : 'score',
          text             : 'Score',
          flex             : 1,
          finalizeCellEdit : ({ value, record }) => {

              // record contains sibling column's data e.g. city
              const { city } = record;

              // Perform validation based on a sibling column
              if (city == 'Paris' && value > 999) {
                  return "Score can't be higher than 999 for Paris";
              }
              return true;
          }
      },

See also

• RowEdit - Edit an entire row in a popup form
• editor - Per-column editor config