Additionally to this we will show how to set up detail so that we can add arecords to it setting the Master Key

Starting from this example, just add the following line:

<div>
	<?php include ("detail.php");?>
</div>

after this line:

<div>
	<?php include ("grid.php");?>
</div>

We will link the database table "Customers" to database table "Orders", so that when we select a customer from the master table, all orders for this customer will appear in the details table. In addition to that, we will summarize the totals of all orders of this customer in the footer row of the details jqGrid instance.

grid.php (customers grid)

<?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 CustomerID, CompanyName, ContactName, Phone, City FROM customers';
// Set the table to where you update the data
$grid->table = 'customers';
// Set output format to json
$grid->dataType = 'json';
// Set the primary key
$grid->setPrimarykeyId("CustomerID");
// Let the grid create the model
$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"=>"CustomerID"
));
$grid->setColProperty('CustomerID', array("label"=>"ID", "width"=>50));

// on select row we should post the customer id to second table and trigger it to reload the data
$selectorder = &lt;&lt;&lt;ORDER
function(rowid, selected)
{
    if(rowid != null) {
        jQuery("#detail").jqGrid('setGridParam',{postData:{CustomerID:rowid}});
        jQuery("#detail").trigger("reloadGrid");

        // Enable CRUD buttons in detail navigator when a row is selected

        jQuery("#add_detail").removeClass("ui-state-disabled");
        jQuery("#edit_detail").removeClass("ui-state-disabled");
        jQuery("#del_detail").removeClass("ui-state-disabled"); 
    }
}
ORDER;
$grid->setGridEvent('onSelectRow', $selectorder);

// We should clear the grid data on second grid on sorting, paging, etc.
$cleargrid = &lt;&lt;&lt;CLEAR
function(rowid, selected)
{
   // clear the grid data and footer data
   Query("#detail").jqGrid('clearGridData',true);

   // Disable CRUD buttons in detail navigator when a row is not selected

       jQuery("#add_detail").addClass("ui-state-disabled");
       jQuery("#edit_detail").addClass("ui-state-disabled");
       jQuery("#del_detail").addClass("ui-state-disabled"); 
}
CLEAR;

$grid->setGridEvent('onPaging', $cleargrid);
$grid->setGridEvent('onSortCol', $cleargrid);

// Enable navigator
$grid->navigator = true;

$grid->setNavOptions('navigator', array("excel"=>false,"add"=>false,"edit"=>false,"del"=>false,"view"=>false));
// Enjoy
$grid->renderGrid('#grid','#pager',true, null, null, true,true);
$conn = null;
?>

detail.php (orders table)

<?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");
// Get the needed parameters passed from the main grid
if(isset ($_REQUEST["CustomerID"]))
    $rowid = jqGridUtils::Strip($_REQUEST["CustomerID"]);
else
    $rowid = "";
// Create the jqGrid instance
$grid = new jqGridRender($conn);
// Write the SQL Query
$grid->SelectCommand = "SELECT OrderID, RequiredDate, ShipName, ShipCity, Freight, CustomerID FROM orders WHERE CustomerID= ?";
// set the ouput format to json
$grid->dataType = 'json';
// Setup the table 
$grid->table = 'orders';
// Setup primary key id
$grid->setPrimaryKeyId("OrderID");
// Let the grid create the model
$grid->setColModel(null, array(&$rowid));
// Set the url from where we obtain the data
$grid->setUrl('detail.php');
// Set some grid options
$grid->setGridOptions(array(
    "rowNum"=>10,
    "footerrow"=>true,
    "userDataOnFooter"=>true,
    "sortname"=>"OrderID",
    "height"=>110
    ));
// Change some property of the field(s)
$grid->setColProperty("RequiredDate", array(
    "formatter"=>"date",
    "formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y"),
    "search"=>false
    )
);

//Set the CustomerID (master key)  hidden
$grid->setColProperty("CustomerID", array("hidden"=>true))l

$grid->navigator = true;
// Enable Editing
$grid->setNavOptions('navigator', array("excel"=>true,"add"=>true,"edit"=>true,"del"=>true,"view"=>false));

// Set the sumary of the orders
$summaryrow = array("Freight"=>array("Freight"=>"SUM"));

// disable the CRUD buttons when we initialy load the grid
$initgrid = <<INIT
jQuery("#add_detail").addClass("ui-state-disabled");
jQuery("#edit_detail").addClass("ui-state-disabled");
jQuery("#del_detail").addClass("ui-state-disabled");
INIT;

$grid->setJSCode($initgrid); 

// on beforeshow form when add we get the customer id and set it for posting
$beforeshow = <<BEFORE
function(formid)
{
var srow = jQuery("#grid").jqGrid('getGridParam','selrow');
if(srow) {
    var gridrow = jQuery("#grid").jqGrid('getRowData',srow);
    $("#CustomerID",formid).val(gridrow.CustomerID);
}
}
BEFORE; 

$grid->setNavEvent('add', 'beforeShowForm', $beforeshow); 
$grid->renderGrid("#detail","#pgdetail", true, $summaryrow, array(&$rowid), true,true);
$conn = null;
?>