By default, columns are not editable so to use this option, we must add to the settings in the colModel for the columns we wish to be able to edit (it is not necessary to make all columns editable). There are four settings to consider:

• editable
  
• edittype
  
• editoptions, and
  
• editrules
  

For example,

{name:'stock', index:'stock', width:60, editable:true, edittype:"checkbox", editoptions: {value:"Yes:No"}},

editable: defines if this field is editable (or not). Default is false. To make a field editable, set this to true: editable:true

edittype: defines the type of of the editable field. Possible values: 'text', 'textarea', 'select', 'checkbox'. The default value is 'text'.

editoptions: an array of allowed options (attributes) for the chosen edittype

Details of edittype and editioptions appear below.

If we are going to save the results of the edit into a server-side database, we also need to specify the server-side method that is going to accept the edited data. This is set as a grid option: editurl

What jqGrid does

edittype is 'text'

When edittype is 'text', jqGrid constructs a input tag of type text:

<input type="text" ...../>

In editoptions we can set all the possible attributes for this field. For example,

editoptions: {size:10, maxlength: 15}

will cause jqGrid to construct the following input

<input type="text" size="10" maxlength="15" />

In addition to the these settings, jqGrid adds the following:

• id: the id that is added to this element is a combination of the id of the row and the name - rowid_name
  
• name: the name from colModel
  
• value: the contents of the cell.
  

Consider the example above and suppose that the id of the row is 12 and name is invdate then the result is:

<input type="text" id="12_invdate" name="invdate" size="10" maxlength="15" value="someval"/>

edittype is 'textarea'

When edittype is 'textarea', jqGrid constructs a input tag of type textarea

<input type="textarea" .../>

In editoptions we can add additional attributes to this type. Typically, these govern the size of the box:

editoptions: {rows:"2",cols:"10"}

To these attributes jqGrid adds id and name attributes just as for text type.

edittype is 'checkbox'

When edittype is 'checkbox', jqGrid constructs a input tag as follows:

<input type="checkbox" .../>

editoptions is used to define the checked and unchecked values. The first value is checked. For example

editoptions: { value:"Yes:No" }

defines a checkbox in which when the value is Yes the checkbox becomes checked, otherwise unchecked. This value is passed as parameter to the editurl.

To these attributes jqGrid adds id and name attributes just as for text type.

edittype is 'select'

When edittype is 'select', jqGrid constructs a input tag as follows:

<select>
<option value='val1'> Value1 </option>
<option value='val2'> Value2 </option>
...
<option value='valn'> ValueN </option>
</select>

To construct this element, editoptions must contain a set of value:label pairs with the value separated from the label with a colon (:). These sets of pairs can be either a string or an array. For example, both

colModel : [
      ...
    {name:'myname', edittype:'select' editoptions:{value:"1:One;2:Two"} }
      ...
]

and

colModel : [
      ...
    {name:'myname', edittype:'select', editoptions:{value:{1:'One',2:'Two'}} }
      ...
]

are correct and can be used as a 'select' definition.

Whichever you use, something like the following

editoption: { value: "FE:FedEx; IN:InTime; TN:TNT" }

will construct

<select>
<option value='FE'> FedEx </option>
<option value='IN'> InTime </option>
<option value='TN'> TNT </option>
</select>

To this element, jqGrid adds the id and name attributes as above.

Multiple selection of options in a select box is also possible:

editoptions: {multiple:true, ... }