The tutorials in this chapter are using only the most advanced and feature rich jqGridRender PHP class provided by jqGrid. For information on the base classes jqGrid and jqGridEdit please refer to the appropriate topics in the Architecture and classes guide chapter of the documentation and the additional client-side documentation here.

We are using the "Northwind" database in all tutorials. You can find the SQL dump and schema of the Northwind database in the installation package of the product.

We will use the following base PHP page as a starting point for all tutorials. The base code for the grid itself is in the "grid.php" file. All subsequent tutorials are built using these files (changes and additions will be shown in each tutorial based on the topic of the tutorial).

index.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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.7.1.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/css">
        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-1.7.2.custom.min.js" type="text/javascript"></script>
  </head>
  <body>
      <div>
          <?php include ("grid.php");?>
      </div>
   </body>
</html>

grid.php

<?php
// include the database connection settings/configuration
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);
// instruct the database that we use utf-8 encoding
$conn->query("SET NAMES utf8");

// Create the jqGrid instance
$grid = new jqGridRender($conn);
// set the SQL select query
$grid->SelectCommand = 'SELECT OrderID, OrderDate, CustomerID, ShipName, Freight FROM orders';
// Set output format to json
$grid->dataType = 'json';
// Let the grid automatically create the model based on the SQL query
$grid->setColModel();
// 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;
?>