Quick Installation

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

- [php] - Contains the jqTreeGrid and jqGrid PHP classes and the driver files for the appropriate database.
- [themes] - Contains the themes shipped with the product. Since jqTreeGrid supports jQuery UI Themeroller, any theme compatible with jQuery UI ThemeRoller will work for jqTreeGrid 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 jqTreeGrid (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 jqTreeGrid javascript code itself, located in "jquery.jqTreeGrid.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.jqtreegrid.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.jqTreeGrid.min.js" type="text/javascript"></script>

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

Save the file as treegrid.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 myfirsttreegrid.php with the following conten. Note that this example will use the database and tables provided with the demo.

<?php
require_once 'jq-config.php';
// include the driver class
require_once ABSPATH."php/jqGridPdo.php";
// include the jqTreeGrid Class
// NOTE that jqGrid.php file should be available in same directory

require_once ABSPATH."php/jqTreeGrid.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 jqTreeGrid instance
$tree = new jqTreeGrid($conn);

$tree->SelectCommand = "SELECT * FROM adj_table";

// set the table and primary key
$tree->table = 'adj_table';
$tree->setPrimaryKeyId('emp_id');
// set tree model and table configuration
$tree->setTreeModel('adjacency');
$tree->setTableConfig(array('id'=>'emp_id', 'parent'=>'boss_id'));

// autoloading is disabled
$tree->autoLoadNodes = false;
// collapse all nodes (default)
$tree->expandAll = true;
// show any error (if any ) from server
$tree->showError = true;

$tree->setColModel();

$tree->setUrl('treegrid.php');
$tree->dataType = 'json';
// Some nice setting
$tree->setColProperty('name',array("label"=>"Employee", "width"=>170));
$tree->setColProperty('salary',array("label"=>"Salary", "align"=>"right","width"=>90));

// hide the not needed fields
$tree->setColProperty('emp_id',array("hidden"=>true));
$tree->setColProperty('boss_id',array("hidden"=>true));

// and finaly set the expand column and height to auto
$tree->setGridOptions(array(
// set which column should act as expanded one
   "ExpandColumn"=>"name",
   "height"=>'auto',
   "sortname"=>"emp_id",
   // allow automatic scrolling of the rows
   "scrollrows"=>true
   ));
// enable key navigation
$tree->callGridMethod('#tree', 'bindKeys');

$tree->navigator = true;
$tree->setNavOptions('navigator', array("add"=>true,"edit"=>true, "del"=>true, "search"=>false, "excel"=>false));
$tree->renderTree('#tree', '#pager', true,null, null, true, true);
?>

Run the file tree.php from your web browser. All subsequent requests the grid needs will be forwarded back to the "myfirsttreegrid.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.