Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
wiki:cell_editing [2011/08/31 21:12] kees |
wiki:cell_editing [2017/12/12 17:18] (current) admin |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ~~ODT~~ | ||
| ====== Cell Editing ====== | ====== Cell Editing ====== | ||
| Cell editing provides the frontend user with functionality to change the contents of one single cell from a row and then the developer has the abbility to handle the changed data by AJAX or in a jqGrid cell edit event (see below). | Cell editing provides the frontend user with functionality to change the contents of one single cell from a row and then the developer has the abbility to handle the changed data by AJAX or in a jqGrid cell edit event (see below). | ||
| Line 22: | Line 21: | ||
| ^Property^Type^Description^Default^ | ^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| | |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| | + | |cellsubmit|string|Determines where the contents of the cell are saved - can have two values: 'remote' or 'clientArray'. \\ If //remote// the content of the cell if anything is changed is immediately saved to the server using the cellurl property, via ajax. The rowid and the cell content are added to the url by default. If you have the "mtype" setting set to post, the key value pears will be send as post variables. For example, if we save the cell named mycell,{id: rowid, mycell: cellvalue} is added to the url. \\ If cellsubmit is 'clientArray', no ajax request is made and the content of the changed cell can be obtained via the method getChangedCells or thru a event. |remote| |
| - | |cellurl|string|the url where the cell is to be saved|null| | + | |cellurl|string|the url where the cell is to be saved. You need to set this only when you use cellsubmit as 'remote'.|null| |
| |ajaxCellOptions|object|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 object| | |ajaxCellOptions|object|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 object| | ||
| + | |||
| + | ==== Examples ==== | ||
| + | |||
| + | When using the 'remote' setting you could add these lines to your grid configuration: | ||
| + | |||
| + | <code javascript> | ||
| + | { | ||
| + | 'cellEdit' : true, | ||
| + | 'cellsubmit' : 'remote', | ||
| + | 'cellurl' : '/url/to/handling/the/changed/cell/value' | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | When your are using 'clientArray' as cellsubmit setting, only these settings are important: | ||
| + | |||
| + | <code javascript> | ||
| + | { | ||
| + | 'cellEdit' : true, | ||
| + | 'cellsubmit' : 'remote' | ||
| + | } | ||
| + | </code> | ||
| ===== Events ===== | ===== Events ===== | ||
| Line 50: | Line 70: | ||
| |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| | |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| | ||
| + | ==== Event calling stack ==== | ||
| + | |||
| + | Depending on your cellSubmit setting set to 'remote' or 'clientArray' the following events will be fired in the following order: | ||
| + | |||
| + | === cellSubmit setting 'remote' === | ||
| - | Below is the order of which the events are called when the cellsubmit option is 'remote' | + | - **formatCell** (//rowid, cellname, value, iRow, iCol//) : You can change the cell value here which will be used in the edit mode |
| + | - **beforeEditCell** (//rowid, cellname, value, iRow, iCol//) : Just before the cell jumps into edit mode this event is fired | ||
| + | - **afterEditCell** (//rowid, cellname, value, iRow, iCol//) : Just after the input element is created this event will be fired | ||
| + | - **beforeSaveCell** (//rowid, cellname, value, iRow, iCol//) : Fires before the cell is saved, you can save the value here which is send to the server. | ||
| + | - **beforeSubmitCell** (//rowid, cellname, value, iRow, iCol//) : Fires before value will be send to the server, you can add extra parameters here to the request by returning an array | ||
| + | - **afterSubmitCell** (//serverresponse, rowid, cellname, value, iRow, iCol//) : Fires only if saving cell is succesful, you can return a error message here that causes a dialog with the message | ||
| + | - **afterSaveCell** (//rowid, cellname, value, iRow, iCol//) : Fires when the value of the cell is saved | ||
| + | - **errorCell** (//serverresponse, status//) : Fires when a server error is occured (like: 403, 404, 500, etc) | ||
| + | - **onSelectCell** (//rowid, celname, value, iRow, iCol//) : Fires when a cell is not editable | ||
| - | if a cell is editable then \\ | + | === cellSubmit setting 'clientArray' === |
| - | 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 \\ | + | - **formatCell** (//rowid, cellname, value, iRow, iCol//) : You can change the cell value here which will be used in the edit mode |
| - | if a cell is editable then \\ | + | - **beforeEditCell** (//rowid, cellname, value, iRow, iCol//) : Just before the cell jumps into edit mode this event is fired |
| - | 1. formatCell - format and the value of the cell can be changed before editing \\ | + | - **afterEditCell** (//rowid, cellname, value, iRow, iCol//) : Just after the input element is created this event will be fired |
| - | 2. beforeEditCell \\ | + | - **beforeSaveCell** (//rowid, cellname, value, iRow, iCol//) : Fires before the cell is saved by user |
| - | 3. afterEditCell - after the input element is created \\ | + | - **beforeSubmitCell** (//rowid, cellname, value, iRow, iCol//) : You can save the value somewhere here |
| - | 4. beforeSaveCell \\ | + | - **afterSaveCell** (//rowid, cellname, value, iRow, iCol//) : Fires when the value of the cell is succesfully saved by beforeSubmitCell |
| - | 5. beforeSubmitCell \\ | + | - **onSelectCell** (//rowid, celname, value, iRow, iCol//) : Fires when a cell is not editable |
| - | 6. afterSaveCell \\ | + | |
| - | else if the cell is not editable \\ | + | |
| - | 1. onSelectCell \\ | + | |
| ===== Methods ===== | ===== Methods ===== | ||
