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'. |
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:
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 |
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. |
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:
What is posted to the server?
When the data is posted to the server we construct object {} that contain: