You can have any content as a child for any expandable row. In this example, we are doing a simple ajax back to the server to retrieve the details and photo of the respective Employee in the parent grid.
You will need to set the url from where the data comes.
Please, refer to PHP code tabs for additional details.
<?php
require_once '../../../../php/demo/tabs.php';
?>
<!DOCTYPE html>
<html>
<head>
<title>jqGrid PHP Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="../../../../css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../../../css/trirand/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../../../css/ui.multiselect.css" />
<style type="text">
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.min.js" type="text/javascript"></script>
<script src="../../../../js/trirand/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="../../../../js/trirand/jquery.jqGrid.min.js" type="text/javascript"></script> <script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
$.jgrid.defaults.width = "700";
</script>
<script src="../../../../js/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<div>
<?php include ("grid.php");?>
</div>
<br/>
<?php tabs(array("grid.php", "details.php"));?>
</body>
</html>
grid.php.
<?php
require_once '../../jq-config.php';
// include the jqGrid Class
require_once ABSPATH."php/PHPSuito/jqGrid.php";
// include the driver class
require_once ABSPATH."php/PHPSuito/DBdrivers/jqGridPdo.php";
// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
jqGridDB::query($conn,"SET NAMES utf8");
// Create the jqGrid instance
$grid = new jqGridRender($conn);
// Write the SQL Query
$grid->SelectCommand = 'SELECT EmployeeID, LastName, FirstName, Title FROM employees';
// Set output 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('grid.php');
// Set some grid options
$grid->setGridOptions(array(
"rowNum"=>10,
"height"=>250,
"rowList"=>array(10,20,30),
"sortname"=>"EmployeeID"
));
// Set the url from where we get the data
$grid->setSubGridGrid('details.php');
// Enjoy
$grid->renderGrid('#grid','#pager',true, null, null, true,true);
details.php.
<?php
require_once '../../jq-config.php';
// include the jqGrid Class
require_once ABSPATH."php/PHPSuito/jqGrid.php";
// include the driver class
require_once ABSPATH."php/PHPSuito/DBdrivers/jqGridPdo.php";
// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
jqGridDB::query($conn,"SET NAMES utf8");
$rowid = jqGridUtils::Strip($_REQUEST["rowid"]);
if(!$rowid) die("Missed parameters");
// Get details
$SQL = "SELECT * FROM employees WHERE EmployeeID=".(int)$rowid;
$qres = jqGridDB::query($conn, $SQL);
$result = jqGridDB::fetch_assoc($qres,$conn);
$s = "<table><tbody>";
$s .= "<tr><td><b>First Name</b></td><td>".$result["FirstName"]."</td>";
$s .= "<td rowspan='9' valign='top'><img src='images/".trim($result["EmployeeID"]).".jpg'/></td></tr>";
$s .= "<tr><td><b>Last Name</b></td><td>".$result["LastName"]."</td></tr>";
$s .= "<tr><td><b>Title</b></td><td>".$result["Title"]."</td></tr>";
$s .= "<tr><td><b>Title of Courtesy</b></td><td>".$result["TitleOfCourtesy"]."</td></tr>";
$s .= "<tr><td><b>Birth Date</b></td><td>".$result["BirthDate"]."</td></tr>";
$s .= "<tr><td><b>Hire Date</b></td><td>".$result["HireDate"]."</td></tr>";
$s .= "<tr><td><b>Address</b></td><td>".$result["Address"]."</td></tr>";
$s .= "<tr><td><b>City</b></td><td>".$result["City"]."</td></tr>";
$s .= "<tr><td><b>Postal Code</b></td><td>".$result["PostalCode"]."</td></tr>";
$s .= "</tbody></table>";
echo $s;
jqGridDB::closeCursor($qres);