Related options in options array: datataype
Related options in colModel: sorttype, datefmt
Related methods : getRowData, delRowData, setRowData, addRowData

If we have defined a pager for grid with client side data, the buttons in pager are automatically disabled. In other words, the current release of grid does not support client side paging.

First we must instruct jqGrid that the data that will be present is at client side. This is done with the option datatype. To use this we must set

datatype : "clientSide"

The other option that can be used is "local" i.e. datatype: "local" These are the same.

Having this it is a good idea to set the sorttypes for the columns. If the sorttype is not set the default sorttype is "text". Let's consider our example in terms of array data.

<script>
jQuery(document).ready(function(){ 
    jQuery("#list").jqGrid({
        datatype: 'clientSide',
        colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
        colModel :[ 
        {name:'invid',index:'invid', width:55, sorttype:'int'}, 
        {name:'invdate',index:'invdate', width:90, sorttype:'date', datefmt:'Y-m-d'}, 
        {name:'amount',index:'amount', width:80, align:'right',sorttype:'float'}, 
        {name:'tax',index:'tax', width:80, align:'right',sorttype:'float'}, 
        {name:'total',index:'total', width:80,align:'right',sorttype:'float'}, 
        {name:'note',index:'note', width:150, sortable:false} ],
        pager: jQuery('#pager'),
        rowNum:10,
        viewrecords: true,
        imgpath: 'themes/basic/images',
        caption: 'My first grid'
}); 
}); 
</script>

You can see the new setting here: datatype, sortype and datefmt.

The possible values for the sorttype are:
int - the data is interpreted as integer,
float - the data is interpreted as decimal number
date - the data is interpreted as data
text - the data is interpreted as text

We need this information for the appropriate sorting of these types. Additionally for the sorttype date we must known the format of the data that will be present in the grid. The default format is a ISO format 'Y-m-d'. The description of the date format is like a PHP way. For more information refer to php.net.
The limitation of date format is that the date can be represented only as numbers and not as number and string. By example if the date is represented as '03-Mar-2008' the sorting will be not correct.

Let's add some data. This can be done with the method addRowData.
The parameters to this method are:

addRowData( rowid, data, position, srcrowid )

where:

• rowid: this value will be set as the id of the row
  
• data: is the array of data in pair name:value, where the name is the name from colModel
  
• position: specifies where to add the data - first, last, before or after. "first" adds the new row at the top of the grid; "last" adds the data in the last position; "before" and "after" refer to the row identified in srcrowid.
  
• srcrowid: the id of a row which the new data is to be added either "before" or "after"
  

<script>
...
myfirstrow = {
invid:"1",
invdate:"2007-10-01",
note:"note",
amount:"200.00",
tax:"10.00",
total:"210.00"}
jQuery("#list").addRowData("1", myfirstrow);
...
</script>

With this line we have added our first row. It is important to note that the order of the name-value pairs is arbitrary. Moreover, we can set a single name-value pair Like this.

jQuery("#list").addRowData("2", {amount:"300.00"});

with this line we have added second row with only a value in the amount column.

To get data from the particular row we should use getRowData method:

getRowData( rowid ),

where rowid is the id for the row which values we will obtain

jQuery("#list").getRowData("1");

{invid:"1",
invdate:"2007-10-01",
note:"note",
amount:"200.00",
tax:"10.00",
total:"210.00"}

To delete a row we should use delRowData method:

delRowData( rowid )

where rowid is the id of the row that can be deleted.

jQuery("#list").delRowData("2");

To change all or part of the values in a given row, we can use a setRowData method.

setRowData( rowid, data )

where
rowid is the id of the row which values will be changed
data is a array of data that contain the new values. The structure of array is in type
name:value.

jQuery("#list").setRowData( "1", { tax:"5", total:"205" })

will change the values tax and total of row with id = 1.

The method returns true if update is successful, otherwise false.