Let suppose that in our example we want to display in red the values in the Freight column that have values less than 100. For this purpose, we need to write a small javascript formatting function. We can use the approach from this topic - i.e using the "js:" prefix, but for demonstartion purposes we will use setJSCode method instead. When using this approach we just need to set the formatter to use the desired javascript custom function and output this function with the setJSCode method.
Here is the example:
<?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(); // point to Fright column to use the function named MyFormatter $grid->setColProperty('Fright', array('formatter'=>'js:MyFormatter')); // Writh the MyFormatter function $myformat = <<<FORMATFREIGHT function MyFormatter (cellValue, options, rowdata) { var color = (parseFloat(cellValue) > 100) ? " style='color=red'" : ""; var cellHtml = "<span" + color +">" + cellValue + "</span>"; return cellHtml; } FORMATFREIGHT; // Output the function with setJSCode $grid->setJSCode($myformat); // Set the url from where we obtain the data $grid->setUrl('grid.php'); // 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; ?>