Tuesday, July 13, 2010

Flexigrid PHP Implementation

I successfully implemented Flexigrid into my MVC Framework.  I am pleased with the results.  I still need to add some JavaScript to manipulate some DOM elements but it looks good so far...
I decided to use Flexigrid because it seemed to accomplish what I wanted, at the right price.  I am always looking for ways to help meet client budgets while still providing a great system.  There are some great tutorials on Flexigrid so this is not intended to replace those.  I wanted just to show a sample of how it can be implemented in an MVC framework using the AJAX/JSON method.

So I was adding a datagrid to my list views and after some prototyping I decided against using PEAR Structured DataGrid because it required so many other packages to manipulate columns and the html and Flexigrid did all of that quickly.

I generate seperate JavaScript code in each view instead of just including a dynamically generated one with PHP since I can customize the columns and button functions to give an enhanced user experience and will manipulate DOM elements to improve various aesthetics.

For the AJAX call I call a file in my root called ajax.php with is basically just this:

include_once("includes/includes.php");  //DB Connections and required files
include_once('models/'.$_REQUEST['module'].'.inc.php');
include_once('controllers/'.$_REQUEST['module'].'.php');


A sample call looking like:
ajax.php?module=MODULE&action=JSON

Then in the controller I add a case to my "action" switch statement:
case 'JSON': include_once(views/MODULE_list_JSON.php); break;

Which returns JSON data only.  I found helpful information here:
http://www.kenthouse.com/blog/2009/07/fun-with-flexigrids/


And for those just learning web development I added buttons that navigate to my "add/edit" and "details" views inside the button commands.
window.location.href="?module=MODULE&action=edit&id="+id;


I hope this helps anyone looking for a good Datagrid tool for PHP.

So far the only issues I have encountered were:
- Column widths.  I was setting the heading width but the rows don't always match up so I played with the values to get it looking good.
- I still haven't figured out how to access some of the DOM elements to replace some boolean values with a red bullet or green bullet image.




Brian J. has been involved in web design since 1997. He is the founder of True Vision Computer Services, Inc. His recent focus has been on web applications and information systems development.

No comments: