I’m very busy today, so I’ve decided to punt on the post for today and talk just briefly about some of the changes that I’ve made recently to liteGrid and why I made them.  I’m not going to talk about the layout manager module until Wednesday.  For background, be sure to read the first three parts: 1, 2, 3.

Changes to core

I did make a couple of minor changes to core. First, the aptly named “initializationComplete” event is now fired after all modules have been initialized.  I had actually planned on firing this event originally, but I decided to wait until I had a real need (YAGNI).  Now, modules are allowed to make changes to the liteGrid options (including column definitions) within their initialization methods.  If they have logic that needs to be executed once the column definitions are solidified, they should register to receive the initializationComplete event.

Next, the table header cells (th elements) are now rendered slightly differently.  First, they are given an ID of “{FieldName}Header” (I’m going to make this format an overridable option eventually).  This allows styles to target specific columns.  Next, the label within each header cell is now nested within a simple div tag.  This makes it possible to do some advanced styling (separate styles on the th and label) as well as supports the layout manager.  Yes, I basically made a change to core to support a module.  Sorry, but it was unavoidable, and it is in-line with how other grid plug-ins render their markup, so I don’t feel like it was completely unjustified.

jQuery UI Support

A major change I recently made was add jQuery UI support.  This is mainly leveraged by the layout manager module, but I also updated the tree-grid module to take advantage of it.  The expander icons are now rendered using the .ui-icon-plusthick and .ui-icon-minusthick CSS classes, and non-expandable items are rendered using .ui-icon-bullet.  It isn’t a major change, but it does reduce the number of liteGrid-specific files and insures that the grid looks pretty when used with jQuery UI themes.

What’s Left

From my first post, here’s the list of things I said I’d like to achieve with liteGrid (items marked through have been implemented):

• Must support tree-grid functionality.  You should be able to expand and collapse rows.
• Must support flexible editing.  Items in the grid should be editable, and it should be very clean and easy to customize how things are edited.
• Easy to customize.  If you want to change something on the grid, it should be easy and straightforward.
• Easy to handle formatting.  You should have complete control over how values are rendered.
• Completely decoupled data model.  The underlying data model should be distinct from what’s rendered.
• AJAX support.  At a minimum, loading and saving data should be doable with AJAX.
• Simple.  The grid itself should contain very little code.
• Event-driven.  The grid should be loosely-coupled and use events to pass messages.  I was inspired by this article on custom events in jQuery.
• jQuery UI support.  I hate coming up with themes for anything as I have no artistic inclination (at all), so this is me passing the buck. I’m still not sure how feasible this is as I’m a complete newb on jQuery UI, but hopefully they have something I can leverage.

Some of those are debatable, I suppose.  I certainly think liteGrid’s customization story beats the hell out of other grids, and I think the loosely-coupled design of the modules makes it much easier to digest. 

In addition to those things, I’ve also added a layout manager, complete with resizable columns, and I’m working on toolbar support.  I also plan to write a simple AJAX module that will allow you to move data to/from the server.    I’m hoping to wrap the initial version of liteGrid up this week, at which time I will see about open-sourcing it on Google Code. 

That’s it for this post.  As always, feedback is very much appreciated.