About the author

Steven Harmansteven harman :: makes sweet software with computers!

For recent posts and more about me, scroll to the bottom.

Sponsors

Subscribe

  • Subscribe to my feed. via RSS
  • Subscribe via email via email

News

Badges

  • Subtext Project
  • Support Subtext
| Home |

Creating a Fluid jQuery jqGrid

I’m just going to come right out and say it, I have a huge nerd-crush on jQuery. I have for several years. Actually, it may be more of a love affair.

Recently I’ve been spending extra time with the jqGrid plugin, a fantastic mechanism for displaying tabular data in hip & trendy webby-2.0 sites. One limitation I quickly ran into was the grids insistence on a statically defined layout. More precisely, the grid only works for a fixed width, meaning no fluid layouts.

Let’s fix that!

I spent a few minutes spelunking the jqGrid documentations and found that you could set the grid’s width dynamically, via some jQuery-fu. Thirty minutes later I had a grid that could grow or shrink to its parent container, automatically.

a fluid jQuery jqGrid On the urging of a co-worker, Andy Edmonds, I invested a little time and extracted the code into a stand-alone module.

I wanted to create a plugin that would monkey-patch the jqGrid, adding the functionality directly to it. But for now it’s a simple jQuery plugin that acts on an instance of a jqGrid.

Check out the demo if you want to see it in action.

UPDATE: I’ve fixed bug in finding a parent element when none is provided. I also changed the option ‘base’ to ‘example’ to avoid a naming collision with some other jQuery stuff.

How to use it.

   1:  $(document).ready(function(){
   2:   
   3:    // wire up your grid
   4:   
   5:    $("#theGrid").fluidGrid({ example:"#grid_wrapper", offset:-10 });
   6:  });

There are only a couple of options available right now for configuring the fluid grid.

  • example : a jQuery selector for the DOM element the grid will use to get a new base size. If none is provided, default to the grid’s parent element.
  • offset : number of pixels added to the example element’s size, giving the grid its new size. This can be positive or negative. If none is provided, default to zero (0).

The above sample will resize the grid when the page loads, but that’s it. If you want true fluidity, you’ll also need to wire up a handler for the window.resize event to resize the grid. I did just that in the demo listed above, which is really just the sample included in the source code.

The source?

Oh yeah, that stuff. You can grab the source, which comes with a sample implementation, over at CodeIncubator. Please feel free to send me feedback, patches, etc…

Enjoy!

What others are saying.

# re: Creating a Fluid jQuery jqGrid
Gravatar Mohammad Azam
Aug 21, 2009
JQGrid is awesome but the only pain point is the code needed to set it up.

The following code is just too much to display a Grid control.

myGrid.jqGrid({
datatype:'clientSide',
altRows:true,
colNames:['Name', 'Side', 'Power'],
colModel:[
{ name:'name', index: 'name' },
{ name:'side', index: 'side' },
{ name:'power', index: 'power' } ],
pager: jQuery('#pager'),
viewrecords: true,
imgpath: 'css/start/images',
caption: 'The Force: Who\'s Who?',
height: "100%"
});

myGrid.addRowData("1", {name:"Luke", side:"Good", power:"6"})
myGrid.addRowData("2", {name:"Vader", side:"Dark", power:"9"})
myGrid.addRowData("3", {name:"Han", side:"meh?", power:"0"})


Thanks,
Azam
# re: Creating a Fluid jQuery jqGrid
Gravatar Steven Harman
Aug 21, 2009
@azam, fair point. However, I have a feeling that if you were using a lot of grids in your application, then you could extract much of that into a common module that sets up all of your defaults.

And you could go even crazier and build a DSL around grid configuration, which simply emits a JSON object that is the grid's full configuration data. And of course, that too would have defaults for all of the truly optional stuff.
# re: Creating a Fluid jQuery jqGrid
Gravatar Jon Kruger
Aug 21, 2009
I think you can do the same thing with the 3.5 version of the jqGrid... for a demo, go to http://www.trirand.com/jqgrid/jqgrid.html, click on New in version 3.5, then Autowidth and row numbering.

(I'm still on an older version of the jqGrid for now so I might use your plugin!)
# re: Creating a Fluid jQuery jqGrid
Gravatar Steven Harman
Aug 21, 2009
@Jon, it would be nice if the autowidth option took an options hash where you could specify things like the offset concept in my version. Sounds like an opportunity to extend what's now baked into jqGrid. :)
# re: Creating a Fluid jQuery jqGrid
Gravatar Scott Koon
Aug 25, 2009
So why monkey-patch instead of patching directly and submitting a patch?
# re: Creating a Fluid jQuery jqGrid
Gravatar Steven Harman
Aug 25, 2009
@scott, because I wasn't sure how to go about patching into the actual jqGrid stuff... and I basically extracted my monkey-patch out of the stuff I was doing here at VersionOne.
# re: Creating a Fluid jQuery jqGrid
Gravatar Sam Dana
Aug 25, 2009
Nice addition. Although there is a bug that causes the last column to grow in relative width with each resize. This becomes noticeable if you resize the window slowly (more resize events). This occurs on your example as well.
# re: Creating a Fluid jQuery jqGrid
Gravatar Steven Harman
Aug 28, 2009
@Sam, hmm, I'd not noticed that before - likely because I was only really testing it in Firefox and it doesn't seem to fire the resize event until the resize is done. I did a quick smoke test to make sure it worked in Chrome and IE7+, but didn't spend considerable time in those browsers.

Any idea what's causing the column to grow?
# re: Creating a Fluid jQuery jqGrid
Gravatar Oliver Mezquita
Oct 21, 2009
In my opinion, the sole existence of jqGrid is enough reason to learn and use jquery throughout all your web apps. And this right what I needed, dynamic size. Thanks for your contribution!
Comments have been closed on this topic.