Inline editing is another editing mode of jqGrid. To invoke inline editing, just call the client-side jqGrid editRow method.

In this particular example, we are using the build in formatter "actions" which call editRow on the client-side jqGrid.
Note that we create a datepicker in colModel using the dataInit event. The event occur when the element is created and is ideal
for initial bindings and etc.

Please, refer to the PHP tab for the javascript sample.
<?php
require_once '../../../tabs.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>jqGrid PHP Demo</title>
    <link rel="stylesheet" type="text/css" media="screen" href="../../../themes/redmond/jquery-ui-1.8.2.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../../../themes/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../../../themes/ui.multiselect.css" />
    <style type="text">
        html, body {
        margin: 0;            /* Remove body margin/padding */
        padding: 0;
        overflow: hidden;    /* Remove scroll bars on browser window */
        font-size: 75%;
        }
    </style>
    <script src="../../../js/jquery.js" type="text/javascript"></script>
    <script src="../../../js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script type="text/javascript">
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
    </script>
    <script src="../../../js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="../../../js/jquery-ui-custom.min.js" type="text/javascript"></script>
  </head>
  <body>
      <div>
          <?php include ("grid.php");?>
      </div>
      <br/>
      <?php tabs(array("grid.php"));?>
   </body>
</html>
grid.php.
<?php
require_once '../../../jq-config.php';
// include the jqGrid Class
require_once ABSPATH."php/jqGrid.php";
// include the driver class
require_once ABSPATH."php/jqGridPdo.php";
// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$conn->query("SET NAMES utf8");

// Create the jqGrid instance
$grid = new jqGridRender($conn);
// Write the SQL Query
$grid->SelectCommand 'SELECT EmployeeID, FirstName, LastName, BirthDate FROM employees';
// Set the table to where you add the data
$grid->table 'employees';
// Set output format to json
$grid->dataType 'json';
// Let the grid create the model
$grid->setColModel();
// Set the url from where we obtain the data
$grid->setUrl('grid.php');
// add a action column and instruct the formatter to create the needed butons
// for inline editing
$grid->addCol(array(
    
"name"=>"actions",
    
"formatter"=>"actions",
    
"editable"=>false,
    
"sortable"=>false,
    
"resizable"=>false,
    
"fixed"=>true,
    
"width"=>60,
    
// use keys to save or cancel a row.
    
"formatoptions"=>array("keys"=>true)
    ), 
"first");
$grid->setColProperty('EmployeeID', array("editable"=>false"width"=>50"label"=>"ID"));
$grid->setColProperty('BirthDate'
        array(
"formatter"=>"date",
            
"formatoptions"=>array("srcformat"=>"Y-m-d H:i:s""newformat"=>"Y-m-d"),
// Ok. We use some trick here to create the datepicer on dataInit event
// when the element is created. Note the js: before the function.
// this instruct the grid to put a javascript code without additional formating
            
"editoptions"=>array("dataInit"=>
                
"js:function(elm){setTimeout(function(){
                    jQuery(elm).datepicker({dateFormat:'yy-mm-dd'});
                    jQuery('.ui-datepicker').css({'font-size':'75%'});
                },200);}"
)
            ));
// Set some grid options
$grid->setGridOptions(array(
    
"rowNum"=>10,
    
"rowList"=>array(10,20,30),
    
"sortname"=>"EmployeeID"
));
// Enjoy
$grid->renderGrid('#grid','#pager',truenullnulltrue,true);
$conn null;
?>