Welcome to Guriddo jqGrid PHP¶

Introduction¶

Guriddo jqGrid for PHP is a server-side component built on top of open and widely used standards such as jQuery, Bootstrap, jQuery UI, ThemeRoller, etc..

Some of the major features include:

Blazing speed - only the minimal data required is sent from server to client using JSON. Supports millions of rows of data.
Supports the most popular SQL Databases like: PostgreSQL, MySQL, Microsoft SQL Server.
Minimal HTML size - jqGrid uses client-side rendering, meaning no hundreds of KBs of nested in HTML.
jQuery based client-side - familiar and powerful client-side API based on jQuery.
Feature complete - every feature you might need, including adding/editing of records, hierarchy, sorting, filtering, paging, etc
Bootstrap and Theme Roller support
many more.

Overview¶

Guriddo jqGrid PHP is a set of PHP classes and JavaScript library components that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it is integrated with any server-side technology, including PHP.

Guriddo jqGrid uses a jQuery Java Script Library and is written as plug-in for that package. For more information on jQuery, please refer to the jQuery web site .

For styling, Guriddo jqGrid can be used with Bootstrap CSS or jQuery UI.

Note

The grid doesn't depend on these Java Script libraries and it is not necessary to load them.

Guriddo jqGrid's Home page can be found here.

Working examples of Guriddo jqGrid, with explanations, can be found here.

Features¶

Basic grid¶

Guriddo jqGrid PHP has consistently been developed with ease of use in mind. The user should feel at ease from installation to administration.

CSS based themes. jqGrid is compatible with Bootstrap and jQuery UI Theming. Developers can change the grid skin by defining their own using the UI CSS Framework.
Speed. The new rendering engine improves the loading speed in some cases up to 5-10 time faster than previous releases.
Paging. This feature enables developer to display data page by page. Data will not be retrieved from the server until the end user comes to that page. Developers can control how many rows are displayed at a time.
Re sizable Columns. Column width can be changed by the end user.
Sorting & various data types. The end user can sort records by clicking on the header of a column. Developers can specify sorting for various types including string, number, boolean, link, select and percent.
Event handlers & user API. Event handlers and various methods give you more flexibility without coding too much.
Auto loading data when scrolling. This feature allows you to load data without paging and using only the vertical scrollbar.
Working with local data. jqGrid can work with local data defined as an array.
Build in integration with PHP.
Cross browser. Supports for most popular IE, FireFox, Safari, Opera and Google Chrome.
Multi language support (i18n). Currently jqGrid supports more than 30 languages.
Support for XML, JSON, JSONP and arrays as data sources. Another great feature is the possibility to define your own custom data type.
SubGrids. Using a SubGrid is the easiest method for displaying data from child records.
SubGrid as Grid. In this alternative to a subGrid, we use the subGrid functions of the main grid to create not a subGrid, but another grid, with all of the power and capacity of the main grid but appearing, as before, under the “parent” record with the same ability to reveal and hide it.
Frozen columns. Dynamic creation.
Save and load grid state
AMD support

Bellow are some of the main features of Guriddo jqGrid

Formatting ¶

Formatter
Formatter supports advanced formatting of the contents of cells
Formatter has predefined types like : integer, number, date, currency, links, check boxes and etc.
The developer can define you own custom formatter
Multi-language configuration

Screenshot

In-line editing ¶

In-line editing In place editing allow you in easy way to update the cell content in particular row.

supporting of text, text area, check box, select, image, button types
client side and server validation of the entered data
server side insert/update/delete
flexible events
multirow posting
optional include and support for datepickers, autocomplete

Screenshot

Cell Editing ¶

Cell editing supports editing individual cells.

supporting of text, text area, check box, select, image, button types
client side and or server side validation of the entered data
keyboard navigation with tab, shift tab, left, right, up and down keys
flexible events
optional include and support for datepickers, autocomplete

Screenshot

Form Editing ¶

jqGrid supports creating a form, on the fly, to enter or edit grid data

supporting of text, text area, check box, select, image, button types
client side or server side validation of the entered data
keyboard navigation up and down keys
flexible events
full control of the form from creation to closing
file uploading
optional include and support for datepickers, autocomplete

Screenshot

Searching and Filtering ¶

Searching The columns in the grid can be used as the basis for a search form to appear above, below, or in place of, the grid.

single field searching
toolbar searching (placing the search fields below the headers) with many search operators
complex form searching
advanced searching with criteria defined from user
local search on all fields

Screenshot

Grouping ¶

jqGrid support grouping by data and header grouping

multiple level data grouping
support of common operations like summery, count, avg
custom summaries support
easy configuration multiple group header
dynamic data and header grouping
custom criteria

Screenshot

Tree Grid ¶

Tree Grid supports both the Nested Set model and the Adjacency model

Easy configuration
Auto loading tree nodes.
Rich client API for easy manipulation
nested and adjacency model support
sorting
searching
inserting/editing and updating tree nodes at server

Screenshot

Pivot Grid ¶

Pivot grid allows you to reorganize and summarize selected columns and rows of data in a spreadsheet or database table.

easy configuration
different aggregate types - sum, count avg
custom aggregation
unlimited level of grouping

Screenshot

Export ¶

Guriddo jqGrid support native export to:

Excel (using PhpSpreadsheet)
CSV
PDF (using TCPDF)
HTML

Requirements and Installation¶

Browser Support¶

jqGrid for PHP supports all major browsers:

Internet Explorer - 11+
Fire Fox
Google Chrome
Opera

Note

Note: a minor number of features may not work in all browsers. For example, RTL is not fully supported in certain browsers.

PHP¶

As from version 7.0.0 Guriddo jqGrid PHP is designed to work with PHP version >= 8.x

Databases¶

Currently we support the following databases

MySQL versions 5 and up
Microsoft SQL Server
PostgreSQL versions 7 and up
Oracle
DB2
Ibase/Firebird
SQLite
Mongodb
ODBC
Adodb (actually this is another php db layer)

MySQL, PostgreSQL and SQLite databases are supported througth PDO ,so depending on your PHP setup you may need to install it before using jqGrid for PHP. PDO is by default installed in PHP distributions.

To ensure that PDO is installed create a php file like this

<?php
phpinfo();

Save the file and run it on your web server.

By example the following should apper if you want to use MySQL

pdo_mysql

Check this for the driver you want to use.

Installation via composer.¶

Unzip the archive in directory of your choice. After unzipping the directory will have the following content

where:

dist directory contain javascript and css files + Visual Form builder code

docs directory contain documantation - both api and developers one

examples directory contain demo files

src directory contain all the Guriddo Suito classes

vendor directory contain autogenerated autoload file.

Attention

Currently there is no possibility to copy only certain directories when using the composer. It is recommended before to do anyting to move the following directories: dist, docs, examples and vendor to another place if you plan to use composer. Doing this go to the next step.

In your project composer.json add the following item in repositories property

    "repositories": [
        ...
        {
            "type": "path",
            "url": "path_to/Guriddo"
            "options" : { 
                "symlink" : false  
            }
        }
        ...
    ]
    "require": {
        ...
        "guriddo/jqgridsuitophp": "^7.0.0"
        ...
    }

where the url should be adjusted to your needs. If you want to use symbolic link and not copy the files, change the symlink to true:

"options" : { "symlink" : true  }

run the command

composer update

to update your autoload.php file.

In order to use Guriddo php lib in your project files point to your vendor/autoload.php file.

Installation without composer¶

Unzip the archive to directory of your project. This will create a directory Guriddo and other directories as described in the chapter above

In your project file do

require_once "path_to/Guriddo/vendor/autoload.php";

where path_to should be adjusted to your needs.

All the needed JavaScript and CSS files are placed in Guriddo/dist subdirectory, where in Guriddo/dist/css are the needed css files and in Guriddo/dist/js are the needed JavaScript files.

Of your choice, you can copy/move these files to other directory.

Installing packages for exporting¶

By default the installation comes without packages for the export (pdf and excel). These packages are placed into the suggest section of the composer.json file. In the directory of guriddo use the command to list these libs:

composer suggests --list

install these packges manually if you need the export to pdf and excel.

composer require tecnickcom/tcpdf
composer require phpoffice/phpspreadsheet

Quick start¶

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 "grid.php";?> 
    </body>
    </html>

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

require_once 'path_to_your project_vendor_dir/autoload.php';

use Guriddo\Utils\Utils;

// Connection to the server
$conn = new PDO('mysql:host=localhost;dbname=northwind','user','password');
// Tell the db that we use utf-8
$conn->query("SET NAMES utf8");

// Create the jqGrid instance
$grid = new Guriddo\jqGrid\Render\Render($conn, 'pdo');
// Write the SQL Query
$grid->SelectCommand = 'SELECT OrderID, OrderDate, CustomerID, Freight, ShipName FROM orders';
// set the ouput format to json
$grid->dataType = 'json';
// Let the grid create the model from SQL query
$grid->setColModel();
// Set the url from where we obtain the data
$grid->setUrl(Utils::fileUrl(__FILE__));
// specify the css framework used
$grid->setCssFrameWork('Bootstrap5', 'Bootstrap5');

// Enjoy
$grid->renderGrid('#grid','#pager',true, null, null, true,true);

Save the index.php and run it your web browser. All subsequent requests the grid needs (e.g. paging, sorting, searching, etc) will be forwarded back to the "grid.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.

Connection and database drivers¶

If you take a look at our Quick start topic, you will see that jqGrid for PHP does not create its own connection to the database, but uses a connection that already exists. This is a very flexible approach in complex applications where the connection to the database had already been created. Typically in our examples we create the connection using PDO rules, but this is not necessary and you can reuse your own connection.

The only what you need to know is which database you use and point the name in the constructor class as second parameter. Actually the constructor class has four parameters

    function __construct($db=null, $driver='pdo', $logger=null, $odbctype='')

The $db is the database connection
The $driver - the database driver class that will be used
The $logger the logger instance
The $odbctype - the odbc type

Below is the list of available database drivers, which can be used as second parameter:

adodb
array
db2
ibase
mongodb
mysqli
odbc
oracle
pdo
sqlsrv

In case of odbc the second parameter should be set to odbc and the fourth to the database. By example if a mysql odbc is used do

$grid = new jqGridRender($conn, 'odbc', $logger=null, 'mysql');

Using Logger¶

As from version 7 debug option is no more valid and logger class replaces that. GuriddoPHP uses PSR-3: Logger Interface for its loging mechanism See https://www.php-fig.org/psr/psr-3/.

This mean that you can add your own logging class (using PSR-3 logger interface) and use it in Guriddo. By default we use logger, which output the logs to a file.

To use the build in logger create the instance and pass it as parameter to the constructor class:

$logger = new Guriddo\Logger\Logger(__DIR__.'/myLog.log','myName', 'debug' );
$grid = new Guriddo\jqGrid\Render\Render($conn, 'pdo', $logger);

where first parameter is the log file, the second is the channel and the third parameter is the log level. Be a sure that the file in directory you specify is writable.

Log level can have the following values: debug, info, notice, warning, error, critical, alert, emergency.

The log format is: YYYY-mm-dd HH:ii:ss.uuuuuu (loglevel) (channel) (pid:##) Log message content {"Optional":"JSON Contextual Support Data"} {"Optional":"Exception Data"}

To use your own Logger you need to create a class using the PSR-3 logger interface and simple pass it to the Guriddo lib like this

$logger = new MySimple\Logger(...);
$grid = new Guriddo\jqGrid\Render\Render($conn, 'pdo', $logger);