In this particular example, we show the built-in formatter actions, which are designed to automatically place edit/save/cancel buttons at the end of each grid row. In addition to this, we will attach a datepicker to the OrderDate column.

Starting from our example, the PHP code is:

<?php
require_once 'jq-config.php';
// include the jqGrid Class
require_once "php/jqGrid.php";
// include the driver class
require_once "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 OrderID, OrderDate, CustomerID, ShipName, Freight FROM orders';
// Set output format to json
$grid->dataType = 'json';
// Let the grid create the model
$grid->setColModel();
// Set the url from where we obtain and edit data
$grid->setUrl('grid.php');

// we add actions column at first place 
$grid->addCol(array(
    "name"=>"actions",
    "formatter"=>"actions",
    "editable"=>false,
    "sortable"=>false,
    "resizable"=>false,
    "fixed"=>true,
    "width"=>60,
    "formatoptions"=>array("keys"=>true)
    ), "first"); 

//disable the editing of the first column
$grid->setColProperty('OrderID', array("editable"=>false)); 

//add datepicker for order data
$grid->setColProperty("OrderDate",array("editoptions"=>array("dataInit"=>"js:function(el){ setTimeout(function(){jQuery(el).datepicker();},100) }" )));
// format the date field using default formatter options
$grid->setColProperty("OrderDate",array("formatter"=>"date"));

// Set some grid options
$grid->setGridOptions(array(
    "rowNum"=>10,
    "rowList"=>array(10,20,30),
    "sortname"=>"OrderID"
));
$grid->renderGrid('#grid','#pager',true, null, null, true,true);
$conn = null;
?>