Edit Row

This method is the same as inline editing except that the data is represented in form via modal dialog.

This method uses colModel and editurl properties from jqGrid

Calling Convention:

jQuery("#grid_id").editGridRow( rowid, properties );

where

grid_id: the id of the parent grid
rowid: the id of the row to edit
properties: an array of name: value pairs, including any of the following properties or events.

Properties

Property	Description	Default
top	the initial top position of confirmation dialog	0
left	the initial left position of confirmation dialog	0
width	the width of confirmation dialog	300
height	the height of confirmation dialog	200
modal	sets dialog in modal mode	false
drag	the dialog is dragable	true
msg	message to display when deleting the row	"Delete selected row(s)"
addCaption	the caption of the dialog if the mode is adding	"Add Record"
editCaption	the caption of the dialog if the mode is editing	"Edit Record"
bSubmit	the text of the button when you click to delete	"Submit"
bCancel	the text of the button when you click to close dialog	"Cancel"
url	url where to post data. If set, replaces the editurl
processData	Words displayed when posting data	"Processing..."
addedrow	Controls where the row just added is placed: 'first' at the top of the gird, 'last' at the bottom. Where the new row is to appear in its natural sort order, set reloadAfterSubmit: true	'first'
closeAfterAdd	when add mode, close the dialog after add record	false
clearAfterAdd	when add mode, clear the data after adding data	true
closeAfterEdit	when in edit mode, close the dialog after editing
reloadAfterSubmit	reload grid data after posting	true
mtype	Defines the type of request to make ("POST" or "GET") when data is sent to the server	"POST"
editData	an array used to add content to the data posted to the server	empty
recreateForm	when set to true the form is recreated every time	false

Events

Event	Description
afterclickPgButtons	This event can be used only when we are in edit mode; it fires after the data for the new row is loaded from the grid, allowing modification of the data or form before the form is redisplayed. afterclickPgButtons(whichbutton, formid, rowid) where whichbutton is either 'prev' or 'next' formid is the id of the form rowid is the id of the current row
afterComplete	This event fires immediately after all actions and events are completed and the row is inserted or updated in the grid. afterComplete(response, postdata, formid) where response is the data returned from the server (if any) postdata an array, is the data sent to the server formid is the id of the form
afterShowForm	fires after showing the form; receives as Parameter the id of the constructed form.
afterSubmit	fires after response has been received from server. Typically used to display status from server (e.g., the data is successfully saved or the save cancelled for server-side editing reasons). Receives as parameters the data returned from the request and an array of the posted values of type id=value1,value2
beforeInitData	fires before initialize the form data. Receives, as parameter, the id of the constructed form.
beforeShowForm	fires before showing the form; receives as Parameter the id of the constructed form.
beforeSubmit	fires before the data is submitted to the server. Parameter is of type id=value1,value2,... When called the event can return array where the first parameter can be true or false and the second is the message of the error if any. Example: [false,"The value is not valid"]
onclickPgButtons	This event can be used only when we are in edit mode; it fires immediately after the previous or next button is clicked, before leaving the current row, allowing working with (e.g., saving) the currently loaded values in the form. onclickPgButtons(whichbutton, formid, rowid) where whichbutton is either 'prev' or 'next' formid is the id of the form rowid is the id of the current row
onclickSubmit	fires after the submit button is clicked and the postdata is constructed. Parameters passed to this event is a options array of the method. The event should return array of type {} which then replaces the data of editData. See example below.
onInitializeForm	fires once when creating the data for editing and adding. Receives, as parameter, the id of the constructed form.

Notes & Examples

If the top and left off-set properties are not set, the dialog appears at the upper left corner of the grid. Top and left off-sets are in relation to the viewing window, not the grid, so {top:10, left:10} will be indented slightly from the window, and may be nowhere near the grid. With some browsers, in instances where the grid is contained in a scrolling div, this may be the only way to make sure the form appears where you want it.

For ease in manipulating the elements in an edit form, every table row in the form that holds the data for the edit has a id which is a combination of "tr_" + name (from colmodel).
Example:

<form ....>
<table>
<tr id='tr_myfield'>
 <td> Caption</td> <td>edited element named, in colModel, as "myfield"</td>
</tr>
...
</table>
</form>

This allow us to easily show or hide some table rows depending on conditions.

jqGrid adds two parameters to the values that are posted to the server:

id=rowid and
oper=edit

to identify to the server that the operation is an update.

We can set common options for all add and/or edit dialogs using the $.jgrid.edit object with $.extend().

The default values are:

jQuery.jgrid.edit = {
    addCaption: "Add Record",
    editCaption: "Edit Record",
    bSubmit: "Submit",
    bCancel: "Cancel",
    processData: "Processing...",
    msg: {
        required:"Field is required",
        number:"Please enter valid number!",
        minValue:"value must be greater than or equal to ",
        maxValue:"value must be less than or equal to"
    }
};

Using onclickSubmit:

This feature can be used to add data to that which is to be sent to the server.

Static method (can be used in navigator too)

jQuery("#grid_id").editGridRow("rowid",{editData:{myname:"myvalue"}});

Every time when the data is sent to the server this pair will be added to the postdata.

If we want to dynamically add data to that sent to the server, we can use something like the following:

onclickSubmit : function(eparams) {
    var retarr = {};
    // we can use all the grid methods here
    //to obtain some data
    var sr = jQuery("#grid_id").getGridParam('selrow');
    rowdata = jQuery("#grid_id").getRowData(sr);
    if(rowdata.somevalue=='aa') {
        retarr = {myname:"myvalue"};
    }
    return retarr;
}

If the condition is true the pair myname:myvalue will be sent to the server when you click submit.