As shown in our Subgrid with 2 levels example, it is possible to add any number of nested (child) subgrids with jqGrid for PHP. For the purpose of this tutorial, let's consider a scenario where we want to construct a hierarchical jqGrid with 3 nested levels (for simplicity, we will just show how to create the hierarchy, without extra features like editing. There is no difference in how editing and extra features are handled in nested (child) subgrids - same principles apply).

In our sample Northwind database (available in the download bits of the products), we have three linked tables: "Customers" -> "Orders" -> "Order_Details". Each customer can have a number of orders, and each order can have a number of details related to it. This relation naturally fits in a 3-level jqGrid hierarchy.

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'; // 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"=>'auto', "gridview"=>false, "rowList"=>array(10,20,30), "sortname"=>"CustomerID" )); $grid->setColProperty('CustomerID', array("label"=>"ID", "width"=>50)); $grid->setSubGridGrid("subgrid.php"); // Enable navigator $grid->navigator = true; // Enable only editing $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; ?>


subgrid.php (orders 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"); // Get the needed parameters passed from the main grid $subtable = jqGridUtils::Strip($_REQUEST["subgrid"]); $rowid = jqGridUtils::Strip($_REQUEST["rowid"]); if(!$subtable && !$rowid) die("Missed parameters"); // Create the jqGrid instance $grid = new jqGridRender($conn); // Write the SQL Query $grid->SelectCommand = "SELECT OrderID, RequiredDate, ShipName, ShipCity, Freight FROM orders WHERE CustomerID= ?"; // set the ouput format to json $grid->dataType = 'json'; // Let the grid create the model $grid->setColModel(null, array(&$rowid)); // Set the url from where we obtain the data $grid->setUrl('subgrid.php'); // Set some grid options $grid->setGridOptions(array( "width"=>540, "rowNum"=>10, "sortname"=>"OrderID", "height"=>'auto', "postData"=>array("subgrid"=>$subtable,"rowid"=>$rowid))); // 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 ) ); $grid->setSubGridGrid("subsubgrid.php"); $grid->navigator = true; $grid->setNavOptions('navigator', array("excel"=>false,"add"=>false,"edit"=>false,"del"=>false,"view"=>false)); // Enjoy $subtable = $subtable."_t"; $pager = $subtable."_p"; $grid->renderGrid($subtable,$pager, true, null, array(&$rowid), true,true); $conn = null; ?>

subsubgrid.php (order_details grid)

<?php require_once '../../../jq-config.php'; // include the jqGrid Class require_once ABSPATH."php/jqGrid.php"; // include the driver class require_once ABSPATH."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 $subtable = jqGridUtils::Strip($_REQUEST["subgrid"]); $rowid = jqGridUtils::Strip($_REQUEST["rowid"]); if(!$subtable && !$rowid) die("Missed parameters"); // Create the jqGrid instance $grid = new jqGridRender($conn); // Write the SQL Query $grid->SelectCommand = "SELECT OrderID, ProductID, Quantity, UnitPrice FROM order_details WHERE OrderID=?"; // set the ouput format to json $grid->dataType = 'json'; // Let the grid create the model $grid->setColModel(null, array(&$rowid)); // Set the url from where we obtain the data $grid->setUrl('subsubgrid.php'); // Set some grid options $grid->setGridOptions(array( "width"=>480, "rowNum"=>10, "sortname"=>"OrderID", "height"=>'auto', "postData"=>array("subgrid"=>$subtable,"rowid"=>$rowid))); // Change some property of the field(s) $grid->navigator = true; $grid->setNavOptions('navigator', array("excel"=>false,"add"=>false,"edit"=>false,"del"=>false,"view"=>false)); // Enjoy $subtable = $subtable."_t"; $pager = $subtable."_p"; $grid->renderGrid($subtable,$pager, true, null, array(&$rowid), true,true); $conn = null; ?>