Integrating SlickGrid with Zend Framework 2 (Part 1)

I am a avid fan of Michael Leibman’s SlickGrid.  It is truly a masterpiece, and is my go to for JavaScript grids.  In this post we will build on the previous post “Zend Framework 2 JSON-RPC“. We will be Integrating SlickGrid with Zend Framework 2 and recreating the SlickGrid example “Basic use with minimal configuration“.  We will also connect that example to a MariaDB table.

SlickGrid

Getting a fresh copy of the ZF2 Skeleton

From the command line:

If you need help pulling a copy of the ZF2 Skeleton app, check out http://framework.zend.com/manual/current/en/user-guide/skeleton-application.html.

ZF2 Skeleton

SlickGrid in the public folderGet the resources

SlickGrid:

Download the SlickGrid files from GitHub https://github.com/mleibman/SlickGrid and put the files into the ZF2 Skeleton’s public folder.

Zend JSON-RPC:

Download the the file  jquery.zend.jsonrpc.js (258 downloads) and put it in the /public/js folder.

Zend friendly CSS style:

Download the file  slickgrid-examples.css (199 downloads) and put it in the /public/css folder.

Add a new Controller

Create the file /module/Application/src/Application/Controller/Example1Controller.php add a new slickgrid action

Add a new view model

I have created a view model of the first SlickGrid example, You can find the original at http://mleibman.github.io/SlickGrid/examples/example1-simple.html.  Put the following in a file called /module/Application/view/application/example1/index.phtml.

Finally, make the controller invokable by editing the /module/application/config/module.config.php file and adding the controller to the invokable controllers.

If you open your browser to (host)/application/example1/index you should see:

SlickGrid in ZF2

Now you have now integrated SlickGrid’s JavaScript files into the ZF2 skeleton.  For now, this is just a superficial integration with no real logic connecting the parts.

Add a database

Create a MariaDB database.  I called mine “slickgrid” and gave any user connecting from localhost full access to it, with no password.  If you use a different name or setup you will need to adjust your adapter accordingly.

Setup the Database adapter

Now we need some way to talk to the database.

Create the file /config/autoload/local.php and put the following in it:

If you need to, change your dsn to match your database connection, see http://framework.zend.com/manual/current/en/tutorials/tutorial.dbadapter.html.

Create the database table

Next, setup a database table.  Lets use the same general schema as the SlickGrid example code.  Create the MariaDB database, and in that database run the following script:

Add some data

Finally, add some data to the new table.  This will be the data for our example.

That sets the stage for setting up SlickGrid to use our new database table.

Integrating SlickGrid with Zend Framework 2

We know from the “Zend Framework 2 JSON-RPC” post that we need a PHP class to call from JavaScript.  We also know that this class should to talk to a database table.  So with that in mind lets start our new class.

/module/Application/src/Application/Model/Example1/SlickGridTableGateway.php:

We also need a controller action for our web-service to use.  Add the highlighted lines to the file /module/Application/src/Controller/IndexController.php:

We also need to add the service to JavaScript in /module/Application/view/application/example1/index.phtml:

We can test the RPC service by opening the RPC URL (host)/application/example1/rpc

RCP Screen

The getOptions() method

This is a good start, but we need some methods to call.  Looking at the example code we can see that the options are supplied in a JavaScript object.  Lets start by replacing that JavaScript object with our own call to a getOptions() method in PHP.

If you look at the example1.phtml file you can see where the options for SlcikGird are defined in JavaScript:

What we want to do is move that array to PHP, with JSON-RPC providing it to JavaScript on the browser.

Add the following function to the file /module/Application/src/Application/Model/Example1/SlickGridTableGateway.php.

The call to SlickGrid should change from:

To:

You should now be able to refresh the page http://(host)/application/example1/index.  If you get no errors you have successfully moved the options from JavaScript to PHP.  You can verify your new options by changing ‘enableColumnReorder’ to true and rearranging the columns by dragging the title bars around.

The getColumns() method

Similar to the options, the column definitions are a simple array of objects.  Each array element defines one column of the grid.

Like the options, we can move the column definitions to PHP.

Add the following function to the file /module/Application/src/Application/Model/Example1/SlickGridTableGateway.php:

The call to SlickGrid should now be:

The getData() method

The final thing we need to provide for our grid is some data.  You do recall that getting some data for the user to view is what this is all about right…  Ok, so getting data from the database and providing to to SlickGrid.

Add the following function to the file /module/Application/src/Application/Model/Example1/SlickGridTableGateway.php:

The call to SlickGrid should now be:

Anti-climactic I know, but this will provide data for the grid.  If you refresh, you should now see the data from your database in the grid.  You can verify this by changing some data in the database and refreshing the page http://(host)/application/example1/index.

Conclusion

Michael Leibman has taken one of the most complex types of user interfaces, the Excel style data grid, and provided simple ways to use it.  Truly a work of art.

This post is the simplest of use cases.  In future posts we will explore row edit, row add, and caching, to speed up loading.

Download the finished project

slickgrid.zip (332 downloads)

Leave a Reply