---

Laravel jqGrid package allows you to easily integrate the popular jQuery Grid Plugin (jqGrid) into your Laravel application

Requirements

---

• Laravel 4 or 5 Framework
• jQuery v2.0.0 or later
• Your choice of a jQuery UI theme
• Free jQuery Grid Plugin (Open Source) or jQuery Grid Plugin (Commercial product)

Features

---

• Spreadsheet Exporter.
• CSV Exporter.
• Config file with global properties to use in all grids of your application.
• PHP Render to handle the jqGrid HTML and Javascript code.
• JSON Data Enconder to send the data to the grid in the correct format.
• Datasource independent (you are able to create your own datasource implementation).

Installation

---

Require this package in your composer.json and run composer update:

After updating composer, add the ServiceProvider to the providers array in app/config/app.php:

Add the Render and Encoder Facade to the aliases array in app/config/app.php:

Optionally, run the following command if you wish to overwrite the default configuration properties, on Laravel 5:

And on Laravel 4:

Usage

---

Step 1: Use the Grid Render Facade to create a grid in your application.

The following code shows the most important methods that you'll need to create a grid, you can find a description for each method in the RenderInterface source code. If it is your first time usign the jQuery Grid Plugin I recommend you to take a look at its official documentation as it will help you to know what options are available and what they do. Having said that let's start by creating the view app/view/myview.blade.php:

{{
GridRender::setGridId("myFirstGrid")
  ->enableFilterToolbar()
  ->setGridOption('url',URL::to('/grid-data'))
  ->setGridOption('rowNum', 5)
  ->setGridOption('shrinkToFit',false)
  ->setGridOption('sortname','id')
  ->setGridOption('caption','Laravel 4 jqGrid package demo')
  ->setGridOption('useColSpanStyle', true)
  ->setNavigatorOptions('navigator', array('viewtext'=>'view'))
  ->setNavigatorOptions('view',array('closeOnEscape'=>false))
  ->setFilterToolbarOptions(array('autosearch'=>true))
  ->setGridEvent('gridComplete', 'gridCompleteEvent') //gridCompleteEvent must be previously declared as a javascript function.
  ->setNavigatorEvent('view', 'beforeShowForm', 'function(){alert("Before show form");}')
  ->setFilterToolbarEvent('beforeSearch', 'function(){alert("Before search event");}')
  ->addGroupHeader(array('startColumnName' => 'amount', 'numberOfColumns' => 3, 'titleText' => 'Price'))
  ->addColumn(array('index'=>'id', 'width'=>55))
  ->addColumn(array('label'=>'Product','index'=>'product','width'=>100))
  ->addColumn(array('label'=>'Amount','index'=>'amount','index'=>'amount', 'width'=>80, 'align'=>'right'))
  ->addColumn(array('label'=>'Total','index'=>'total','index'=>'total', 'width'=>80))
  ->addColumn(array('label'=>'Note','index'=>'note','index'=>'note', 'width'=>55,'searchoptions'=>array('attr'=>array('title'=>'Note title'))))
  ->renderGrid()
}}

If you are creating a Pivot Grid the method addColumn has no effect, instead you have to use the following methods: setGridAsPivot(), addXDimension(), addYDimension(), addAggregate() and you can keep using the method setGridOption() to set pivot options.

The code for creating a Pivot Grid should look something like this:

{{
GridRender::setGridId("myFirstGrid")
  ->setGridAsPivot()
  ->enablefilterToolbar()
  ->setGridOption('url',URL::to('/grid-data'))
  ->setGridOption('caption','Laravel 4 jqGrid package demo')
  ->setGridOption('rowTotals', true) //Pivot option
  ->setGridOption('colTotals', true) //Pivot option
  ->setNavigatorOptions('navigator', array('view'=>false))
  ->addXDimension(array('dataName' => 'category', 'label' => 'Category'))
  ->addXDimension(array('dataName' => 'description', 'label' => 'Product Name'))
  ->addYDimension(array('dataName' => 'country', 'label' => 'Country'))
  ->addAggregate(array('member' => 'total', 'aggregator' => 'sum', 'formatter' => 'number', 'align'=>'right'))
  ->renderGrid()
}}

By default the package enables both the CSV and XLS exporter (these are the buttons that appear in the grid navigator), however you can hide them by using the following methods: hideXlsExporter() and hideCsvExporter().

The package Laravel Excel is beign used to generate the CSV and XLS files, you can use the methods setFileProperty() and setSheetProperty() to set properties of the Laravel Excel package, take a look at the Laravel Excel Reference Guide to see all available file properties and sheet properties. Example code:

{{
GridRender::setGridId("myFirstGrid")
  ->enablefilterToolbar()
  ->setGridOption('url',URL::to('/grid-data'))
  ->setFileProperty('title', 'Invoices') //Laravel Excel File Property
  ->setFileProperty('creator', 'YOUR USERNAME') //Laravel Excel File Property
  ->setSheetProperty('fitToPage', true) //Laravel Excel Sheet Property
  ->setSheetProperty('fitToHeight', true) //Laravel Excel Sheet Property
  ->addColumn(array('index'=>'id', 'width'=>55))
  ->addColumn(array('label'=>'Product','index'=>'product','width'=>100))
  ->renderGrid()
}}

Step 2: Create a "repository class" .

The package includes the class EloquentRepositoryAbstract which is an implementation of the RepositoryInterface, extending this class will make your life easier as it will do all the heavy lifting for you when using Query Builder or Eloquent ORM to implement your repository class. If you need to, you can also create your own RepositoryInterface implementation, just remember to take into account all parameter received by both methods and the expected type of the return value. Let's create the class app/models/ExampleRepository:

If you are using Query Builder, your repository class should look like this:

<?php
use \Illuminate\Support\Facades\DB;
use Mgallegos\LaravelJqgrid\Repositories\EloquentRepositoryAbstract;

class ExampleRepository extends EloquentRepositoryAbstract {

    public function __construct()
    {
        $this->Database = DB::table('table_1')
                             ->join('table_2', 'table_1.id', '=', 'table_2.id');

        $this->visibleColumns = array('column_1','column_2','column_3');

        $this->orderBy = array(array('table_1.id', 'asc'), array('table_1.name', 'desc'));
    }
}

If you are using Eloquent ORM (use Eloquent ORM only in those cases where your data comes from one table, if your data comes from more than one table then use Query Builder), your repository class should look like this:

<?php
use Illuminate\Database\Eloquent\Model;
use Mgallegos\LaravelJqgrid\Repositories\EloquentRepositoryAbstract;

class ExampleRepository extends EloquentRepositoryAbstract {

    public function __construct()
    {
        $this->Database = new YOUR_DATABASE_MODEL;

        $this->visibleColumns = array('column_1','column_2','column_3');

        $this->orderBy = array(array('id', 'asc'), array('name','desc'));
    }
}

And if you are creating your own implementation, your repository class should look something like this:

<?php
use Mgallegos\LaravelJqgrid\Repositories\RepositoryInterface;

class ExampleRepository implements RepositoryInterface {

  /**
   * Calculate the number of rows. It's used for paging the result.
   *
   * @param    array $filters
   *  An array of filters, example: array(array('field'=>'column index/name 1','op'=>'operator','data'=>'searched string column 1'), array('field'=>'column index/name 2','op'=>'operator','data'=>'searched string column 2'))
   *  The 'field' key will contain the 'index' column property if is set, otherwise the 'name' column property.
   *  The 'op' key will contain one of the following operators: '=', '<', '>', '<=', '>=', '<>', '!=','like', 'not like', 'is in', 'is not in'.
   *  when the 'operator' is 'like' the 'data' already contains the '%' character in the appropiate position.
   *  The 'data' key will contain the string searched by the user.
   * @return  integer
   *  Total number of rows
   */
  public function getTotalNumberOfRows(array $filters = array())
  {
      return 5;
  }

  /**
   * Get the rows data to be shown in the grid.
   *
   * @param    integer $limit
   *  Number of rows to be shown into the grid
   * @param    integer $offset
   *  Start position
   * @param    string $orderBy
   *  Column name to order by.
   * @param    array $sord
   *  Sorting order
   * @param    array $filters
   *  An array of filters, example: array(array('field'=>'column index/name 1','op'=>'operator','data'=>'searched string column 1'), array('field'=>'column index/name 2','op'=>'operator','data'=>'searched string column 2'))
   *  The 'field' key will contain the 'index' column property if is set, otherwise the 'name' column property.
   *  The 'op' key will contain one of the following operators: '=', '<', '>', '<=', '>=', '<>', '!=','like', 'not like', 'is in', 'is not in'.
   *  when the 'operator' is 'like' the 'data' already contains the '%' character in the appropiate position.
   *  The 'data' key will contain the string searched by the user.
   * @return  array
   *  An array of array, each array will have the data of a row.
   *  Example: array(array("column1" => "1-1", "column2" => "1-2"), array("column1" => "2-1", "column2" => "2-2"))
   */
  public function getRows($limit, $offset, $orderBy = null, $sord = null, array $filters = array())
  {
      return array(
                  array("column1" => "1-1", "column2" => "1-2", "column3" => "1-3", "column4" => "1-4", "column5" => "1-5"),
                  array("column1" => "2-1", "column2" => "2-2", "column3" => "2-3", "column4" => "2-4", "column5" => "2-5"),
                  array("column1" => "3-1", "column2" => "3-2", "column3" => "3-3", "column4" => "3-4", "column5" => "3-5"),
                  array("column1" => "4-1", "column2" => "4-2", "column3" => "4-3", "column4" => "4-4", "column5" => "4-5"),
                  array("column1" => "5-1", "column2" => "5-2", "column3" => "5-3", "column4" => "5-4", "column5" => "5-5"),
                  );
  }
}

Step 3: Create a route to handle your grid data request.

The package includes a JSON Data Enconder to help you send the data to the grid in the correct format. (If you are using RESTful controllers, an instance of a class that implements the interface Mgallegos/LaravelJqgrid/Encoders/RequestedDataInterface has already been bound in the package service provider, so all you'll have to do is declare it as an argument in you class constructor). Let's add the following lines in the app/routes.php:

Route::get('/', function()
{
  return View::make('myview');
});

Route::post('/grid-data', function()
{
    GridEncoder::encodeRequestedData(new ExampleRepository(), Input::all());
});

Step 4: Edit package config file (optional)

In the package config file of your application (app/config/packages/mgallegos/laravel-jqgrid/config.php) you can set global properties to be used in all grids of your application.

Aditional information

---

Any questions, problems or feature request feel free to open an issue on GitHub.

TODO

---

• JqGrid Render.
• JqGrid JSON Encoder.
• Query Builder and Eloquent ORM implementation.
• Global configuration file.
• Pivot table implementation.
• Frozen columns
• Group headers
• Spreadsheet Exporter.
• CSV Exporter.
• Tree-Grid implementation.
• Sub-Grid implementation.
• PDF Exporter.
• Advanced Searching implementation.

License

---

Laravel jqGrid package is open source software licensed under the MIT License.