cellEditing supports key navigation and editing individual cells, with the following behaviour:

  • When we click on a cell that is not editable, the cell is selected and we can use the up, down, left and right keys to navigate through the cells.
  • If we move to a cell that is editable, we can press [Enter] to edit the cell. The cell is saved when we press [Enter] again, when we press [Tab], or when we click on another cell. If we press [ESC], the cell is not saved. When editing a cell, the cursor keys move only within the cell.
  • When we click on cell that is editable, then we go directly into edit mode.
  • The cell is not editable if it has a class 'not-editable-cell', instead that in colModel is set to be editable

The properties, events and methods used in cell editing are a sub-set of those of the parent grid, and described below.
The above mean that when cell editing is used the following method should be used

setGridOptions - to set a option for cell editing
setGridEvent - to set a event related to cell editing.

Properties

Property

Type

Description

Default

cellEdit

boolean

Enables (disables) cell editing. When this option is set to true, onSelectRow event can not be used, and hovering is disabled (when mouseover on the rows).

false

cellsubmit

string

Determines where the contents of the cell are saved - can have two values: 'remote' or 'clientArray'.
If remote the content is immediately saved to the server using the cellurl property, via ajax. The rowid and the cell content are added to the url as name:value pairs. For example, if we save the cell named mycell,{id: rowid, mycell: cellvalue} is added to the url.
If 'clientArray', no ajax request is made and the content of the changed cell can be obtained via the method getChangedCells

remote

cellurl

string

the url where the cell is to be saved

null

ajaxCellOptions

array

This option allow to set global ajax settings for the cell editiing when we save the data to the server. Note that with this option is possible to overwrite all current ajax setting in the save request including the complete event.

empty array

Events

Many of the following events use the parameters defined here:

  • rowid - is the id of the row
  • cellname is the name of the cell (name from colModel)
  • value - the value of the cell
  • iRow - the index of the row (do not mix with rowid)
  • iCol - the index of the column

Event

Parameters

Description

afterEditCell

rowid, cellname, value, iRow, iCol

applies only to a cell that is editable; this event fires after the edited cell is edited - i.e. after the element is inserted into the DOM

afterSaveCell

rowid, cellname, value, iRow, iCol

applies only to a cell that is editable; this event fires after the cell has been successfully saved. This is the ideal place to change other content.

afterSubmitCell

serverresponse, rowid, cellname, value, iRow, iCol

applies only to a cell that is editable; this event Fires after the cell and other data is posted to the server Should return array of type [success(boolean),message] when return [true,””] all is ok and the cellcontent is saved [false,”Error message”] then a dialog appears with the “Error message” and the cell content is not saved. servereresponse is the response from the server. To use this we should use serverresponse.responseText to obtain the text message from the server.

beforeEditCell

rowid, cellname, value, iRow, iCol

applies only to a cell that is editable; this event fires before editing the cell.

beforeSaveCell

rowid, cellname, value, iRow, iCol

applies only to a cell that is editable; this event fires before validation of values if any. This event can return the new value which value can replace the edited one
beforeSaveCell : function(rowid,celname,value,iRow,iCol) {
if( some_condition )
{ return “new value”; }
}
The value will be replaced with “new value”

beforeSubmitCell

rowid, cellname, value, iRow, iCol

applies only to a cell that is editable; this event fires before submit the cell content to the server (valid only if cellsubmit : 'remote'). Can return new array that will be posted to the server.
beforeSubmitCell : function(rowid,celname,value,iRow,iCol) {
if( some_condition ) {
return {name1:value1,name2:value2}
}
else
{ return {} }
}
The returned array will be added to the cellurl posted data.

errorCell

serverresponse, status

fires if there is a server error; servereresponse is the response from the server. To use this we should apply serverresponse.responseText to obtain the text message from the server. status is the status of the error. If not set a modal dialog apper.

formatCell

rowid, cellname, value, iRow, iCol

applies only to a cell that is editable; this event allows formatting the cell content before editing, and returns the formatted value

onSelectCell

rowid, celname, value, iRow, iCol

applies only to cells that are not editable; fires after the cell is selected

serializeCellData

postdata

If set this event can serialize the data passed to the ajax request when we save a cell. The function should return the serialized data. This event can be used when a custom data should be passed to the server - e.g - JSON string, XML string and etc. To this event is passed the data which will be posted to the server


Below is the order of which the events are called when the cellsubmit option is 'remote'

if a cell is editable then
1. formatCell - format and the value of the cell can be changed before editing
2. beforeEditCell
3. afterEditCell - after the input element is created
4. beforeSaveCell
5. beforeSubmitCell
if the submit is successfully
6. afterSubmitCell
7. afterSaveCell
else
6. errorCell
else if the cell is not editable
1. onSelectCell

If the cellsubmit is 'clientArray' then
if a cell is editable then
1. formatCell - format and the value of the cell can be changed before editing
2. beforeEditCell
3. afterEditCell - after the input element is created
4. beforeSaveCell
5. beforeSubmitCell
6. afterSaveCell
else if the cell is not editable
1. onSelectCell

How is the data organized

When the cell is edited and the input elements is created we set the following rules:

  • The id of the editable cell element is constructed as 'iRow_'+ the name from the colModel array - where the iRow is the index of the row (not rowid) Example if we edit cell with index=20 and editable element has name 'myname' (from colModel) then the id becomes 20_myname.
  • The name of the editable element is constructed from the name of the colModel array - property - name

What is posted to the server?

When the data is posted to the server we construct object {} that contain:

  • the name:value pair where the name is the name of the input element represented in the cell
  • additionally we add a pair id:rowid where the rowid is the id of the row
  • if the returned data from beforeSubmitCell event is not empty we extend this data with the posted data.