Welcome to Guriddo TreeGrid PHP¶

Introduction¶

Guriddo TreeGrid for PHP is a server-side component built on top of open and widely used standards. TreeGrid is a special extension for Guriddo jqGrid. This component allows showing the nested tabular data.

Some of the major features include:

Features¶

Bellow is the list of the most common featutres (in general)

Suport of the both most used tree models - adjacency and nested
Blazing speed - only the minimal data required is sent from server to client using JSON or XML
Supports the most popular SQL Databases like PostgreSQL, MySQL, Microsoft SQL Server.
Minimal HTML size - TreeGrid uses client-side rendering, meaning no hundreds of KBs of nested in HTML.
JavaScript based client-side - familiar and powerful client-side API based on jQuery.
Feature complete - every feature you might need, including adding/editing of records, sorting seraching etc
Bootstrap 5 (4) and jQuery UI ThemeRoller support
many more.

Requirements and installation¶

For installing the package please refer to this link

Quick start¶

Installing the the TreeGrid is the same as jqGrid. Below quick review.

After installing the php files it is necessary to know the location of javascript and css files which are located in dist subdirectory. This directory conatin two more subdirectories - js and css whith the needed CSS and JavaScript files.

The examples subdirectory contain mysql northwind database northwind.sql. Import this script in your mysql database and create the following index.php (or what you prefer name) file.

Be a sure that mysql pdo driver is installed as described in Databases

    <html>
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>My First PHP jqGrid </title>
        <!-- bootstrap 5 -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css"> 
        <!-- jQuery -->
        <script src="path_to_dist_directory/js/ext/jquery.min.js" type="text/javascript"></script> 
        <!-- Guriddo jqGrid  -->
        <link  href="path_to_dist_directory/css/ui.jqgrid-bootstrap5.css" rel="stylesheet" type="text/css" media="screen" />
        <script src="path_to_dist_directory/js/i18n/grid.locale-en.js" type="text/javascript"></script> 
        <script src="path_to_dist_directory/js/jquery.jqGrid.min.js" type="text/javascript"></script>  
    </head> 
    <body>
        <?php include "treegrid.php";?> 
    </body>
    </html>

In the same directory create a treegrid.php file with the following code:

<?php
require_once 'path_to_your_project_vendor_dir/autoload.php';

use Guriddo\Utils\Utils;

// 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 TreeGrid instance
$tree = new Guriddo\TreeGrid\TreeGrid($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));

// 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');

// add navigator and editing
$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.