Catalyst::Controller::REST, jQgrid, and You.

Datagrids are a pretty big thing nowadays. Every reasonable JavaScript framework has a solution for creating them, and for good reason. You can get a really simple, data-agnostic CRUD interface up and running that has quick sorting features, pagination, bulk create/delete/update, and easy search features. These are all extremely useful for situations in which you have large datasets you have to deal with in big chunks at a time. Tangible scenarios include admin interfaces, store product inventory lists, email listings, etc. This is all good and gravy, given we have a JavaScript UI solution to *displaying* the data, but how do we get data *into* it, reasonbly, and extensibly? We use my good friend Catalyst::Controller::REST. Folks have talked about this fella before, but not exactly in this capacity. See, things like flexigrid from jQuery also give you a nice grid interface, but the CRUD factor isn't quite as easy as with jQgrid. So I'd like to take some time and explain how to use jQgrid for your datagrid instances, and show you why it's a bit easier.

PACKING LIST

Catalyst::Controller::REST

cpanm Catalyst::Controller::REST

Voila. One down, a few more to go!

A Data Source.

Ours will be a database, hooked up via DBIx::Class. Yours can be anything, as long as it can be coerced into the data structure we'll be talking about here shortly.

jQgrid

Put together the options you want here: http://www.trirand.com/blog/?page_id=6, download, and be happy. For this specific example, jQuery UI addons, Form Editing, Cell Editing, and Inline/In Place Editing will be used, but it is up to you whether you want to include these or not.

Putting it all Together

So, I trust you have a basic Catalyst app all ready to go, in preparation and anticipation for this article, ready to go since you've been waiting with untold excitement since my last article. Great! Let's get going.

This specific example will be a entry management "panel" for a high-traffic, many post blog.

Let's create a controller that will serve as our CRUD interface to the jQgrid:

Phew! That's pretty much the gist of it. There are a LOT of other things you can do, but if you're lazy like me and just wanted to have this all spat out and done, that's all you need. It's a little counterintuitive at times, but I figured it out, and it's really not as bad as it could be.