<!doctype html>
<html>
    <head>

        <title>jqGrid</title>
        <meta charset="UTF-8">

        <link rel="stylesheet" type="text/css" href="jqueryui/development-bundle/themes/redmond/jquery-ui-1.8.20.custom.css" />
        <link rel="stylesheet" type="text/css" href="jqGridPHP_Sources_4_3_2_0/themes/ui.jqgrid.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="jqGridPHP_Sources_4_3_2_0/themes/ui.multiselect.css" />

        <style type="text/css">

        </style>

        <script src="js/jquery-1.7.2.js" type="text/javascript"></script>
        <script src="jqGridPHP_Sources_4_3_2_0/js/i18n/grid.locale-en.js" type="text/javascript"></script>
        <script src="jqGridPHP_Sources_4_3_2_0/js/src-grid/jquery.jqGrid.js" type="text/javascript"></script>
        <script src="jqueryui/js/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
        <script src="jqueryui/development-bundle/ui/jquery.ui.core.js" type="text/javascript"></script>
        <script src="jqueryui/development-bundle/ui/jquery.ui.datepicker.js" type="text/javascript"></script>

        <script>
            $.jgrid.no_legacy_api = true;
            $.jgrid.useJSON = true;

            $(document).ready(function() {
                <?php include "grid1.php"; ?>

             });

        </script>

    </head>

    <body>

        <table id="grid"></table>
        <div id="pager"></div>

    </body>
</html>


///////grid1.php//////

<?php

// include database configuration credentials
require_once 'jqGridPHP_Sources_4_3_2_0/jq-config.php';
// include the jqGrid Class
require_once "jqGridPHP_Sources_4_3_2_0/php/jqGrid.php";
// include the PDO driver class
require_once "jqGridPHP_Sources_4_3_2_0/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);
// Write the SQL Query
$grid->SelectCommand = 'SELECT OrderID, CustomerID, EmployeeID, OrderDate  FROM orders';

// set the ouput format to json
$grid->dataType = 'json';

// Definition of the labels
$mylabels = array("OrderID"=>"Order ID", "CustomerID"=>"Customer ID", "EmployeeID"=>"Employee ID", "OrderDate"=>"OrderDate");
// Let the grid create the model with the desired labels
$grid->setColModel(null, null, $mylabels);
// Change some property of the field(s)
$grid->setColProperty("OrderDate", array("width"=>100));


// Set the url from where we obtain the data
// make sure this path is the same as your include in your main page
$grid->setUrl('grid1.php');

// Set grid caption using the option caption
$grid->setGridOptions(array(
    "caption"=>"Northwinds Orders",
    "rowNum"=>1000,
    "sortname"=>"EmployeeID",
    "rowList"=>array(10,20,1000)
    ));

$grid->setGridOptions(array("width"=>1000));
$grid->setGridOptions(array("height"=>350));




// javascriptCode for the datepicker
$mydatepicker = <<<DATEPICK
function(el)
{
   setTimeout(function(){
      jQuery(el).datepicker({dateFormat:'dd/mm/yy'});
   },200);
}
DATEPICK;

// Set the column property
$grid->setColProperty('OrderDate', array(
   "formatter"=>'date',
   "editoptions"=>array("dataInit"=>"js:".$mydatepicker),
   "searchoptions"=>array("dataInit"=>"js:".$mydatepicker)
));

// add navigator with the default properties
$grid->navigator = true;



/*
$onselect = <<<ONSELECTROW
function(rowid, selected)
{
   alert(rowid);
}
ONSELECTROW;

$grid->setGridEvent('onSelectRow',$onselect);
*/




// Run the script
$grid->renderGrid('#grid','#pager',false, null, null, false, false, true);
//renderGrid( $tblelement, $pager , $script , $summary, $params , $createtbl , $createpg , $echo );

// clear database connection
$conn = null;


?>