Quick installation

Download and unzip the contents of the archive to any convenient location. The package contains the following folders:

- [php] - Contains the jqGrid PHP classes and the driver files for the appropriate database.
- [themes] - Contains the themes shipped with the product. Since jqGrid supports jQuery UI Themeroller, any theme compatible with jQuery UI ThemeRoller will work for jqGrid as well. Therefore, the package contains just one theme ("Redmond"). You can download any additional themes directly from jQuery UI's ThemeRoller site available here:

http://jqueryui.com/themeroller/

In addition to the "Redmond" theme, there is one more file in the [themes] folder - ui.jqgrid.css. This is the one and only Css file jqGrid needs. Just add it after you add the reference to the "Redmond" theme in your PHP/HTML file containing jqGrid for PHP.

- [js] - The javascript files of jqGrid (and the needed libraries). You need to include them in your PHP page.

The first file is "jquery.js" - this is the official jQuery library on which jqGrid is built upon.
The second file you need is the i18n (localization) javascript file. Depending on the language you need, just pick one from the "js/i18n" folder.
The last one is the jqGrid javascript code itself, located in "jquery.jqGrid.min.js"

The final result you will have in an PHP page containing jqGrid would be something similar to that:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First PHP jqGrid </title> 

<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

</head>
<body>
......
<?php include "myfirstgrid.php";?>
.......
</body>
</html>

Save the file as grid.php or any desired name in the root directory.

In the root directory you will find a file named jq-config.php. Open the file and enter the appropriate information for the connection to the database. Save the file and then create a file myfirstgrid.php with the following content.

<?php
require_once 'jq-config.php';
// include the jqGrid Class
require_once "php/jqGrid.php";
// include the PDO driver class
require_once "php/jqGridPdo.php";
// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);

// Create the jqGrid instance
$grid = new jqGridRender($conn);
// Write the SQL Query
// We suppose that mytable exists in your database
$grid->SelectCommand = 'SELECT field1, field2, field3  FROM mytable';

// set the ouput 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('myfirstgrid.php');
// Set grid caption using the option caption
$grid->setGridOptions(array(
    "caption"=>"This is custom Caption",
    "rowNum"=>10,
    "sortname"=>"field1",
    "rowList"=>array(10,20,50)
    ));

// Change some property of the field(s)
$grid->setColProperty("field1", array("label"=>"ID", "width"=>60));

// Run the script
$grid->renderGrid('#grid','#pager',true, null, null, true,true);
?>

Run the file grid.php from your web browser. All subsequent requests the grid needs (e.g. paging, sorting, searching, etc) will be forwarded back to the "myfirstgrid.php" file (using the $grid->setUrl(...) method) and the grid will automatically handle the requests and provide the needed response - no need for custom coding.