Reorganizable DataGrid built with xhtml / AJAX / Smarty

January 11th, 2006 Author: Lindsey Simon

Wherefore art thou DataGrid?
Front-end developers are frequently challenged with the task of creating a list view. I’ve been looking for a DataGrid component that leverages backend logic and power with cool, client-side visual controls. It has to be intuitive, fast, flexible, reusable, accessible and relatively simple. I’m hoping that this post will help improve this code, so let me know if you come up with something!
README
LICENSE
Download: DataGrid-0.3.tar.gz (updated 5/30/2006 – check out the QuickSearch filter feature – right click on Vendor)
Note: Vendor column is intentionally non-draggable and non-resizable.

Some History
I began working at FineTooth in March of 2005 and one of our first challenges was to come up with a standard way to implement list displays. Having just come off two years of working almost exclusively with Macromedia Flash and programming in Actionscript, I was eager to see what the possibilities were with xhtml and JavaScript – Ajax was buzzing big-time. The lack of real user-oriented functionality in the Macromedia datagrid had been one of my big irritations with Flash. At that time, I published a beefed up, data-oriented component – the XMLDataGrid. In the end, it felt like doing something as fundamentally simple as the HTML table in SVG was not ideal. Writing cell renderers proved less than simple and in the end, this wasn’t a pixel positioned graphic layout I was trying to accomplish, but rather a failsafe data presentation – something HTML has always been perfect for. On top of that, creating a tool for line-item data information that was completely inaccessible (as in Accessibility) just felt wrong.

For context, our first need was in a medical application. Accessibility and reliability were crucial. I tried implementing the ActiveWidgets Grid. I really loved how customizable the grid was – its use of CSS is awesome. I loved that you could embed a wide grid into a standard sized page and the scrollers worked. I liked that it could load data from an URL. I liked that it sorted without going back to the server. I didn’t like that it seemed to sort things funny sometimes (though I see that most of the type-based sorting bugs are now fixed). I didn’t like how it scaled – sorting those rows in Javascipt is not truly scalable, even though it is cool for small data sets. Of course, pagination solves that. But my biggest gripe with the implementation was that it was not possible to have variable height rows. Because it was built with divs set to visibility: hidden to achieve a row effect, you had to actually make all the rows big enough to accommodate the biggest row in the set. This also assumes you *know* how big the biggest row will be in the data set. Having data not display seemed like a truly fatal flaw. Worse still was that we actually had to programmatically insert line breaks in the data to get long text rows to wrap. This implementation never left beta, but it was really an eye-opener to the possibilities with JavaScript and Ajax, and I suspect these problems will be solved soon. Alex is an amazing developer.

In September of 2005, I came across the OpenRico Live Grid. I was fascinated by this solution to pagination and the write-up on their blog really had me convinced! I was loving the fact that this implementation relied on the tried and true, good old-fashioned HTML table. My rows were variable height and data was not getting lost. Or was it? I had come back to the same problem from a different angle. Since the LiveGrid relies on a portal div technique to do scrolling, it has to assume the height of a row. If row heights can vary dramatically then grid fails to calculate to full height of the full data set. And so I would scroll to the bottom only to realize I couldn’t get to many of the last rows. In the end, getting the datasets in pieces proved to be the cause of a fatal layout flaw.

FineTooth contracted with Handwire to build the initial design of our web application and we had meetings in October 2005 to review things. It was really exciting – these folks had put together a web interface that felt really alive. It looks and feels in many ways like Microsoft Outlook, but I’d never seen a web application so cool. One of the centerpieces of this webapp is the list view. I was really impressed by Skip’s design of row grouping and multiple selections. The initial component was pure JavaScript though, much like the ActiveGrid, and had similar scaling problems. Skip and I got together to do some tests with innerHTML versus the more purely DOM approach and discovered just how much of an improvement server-side sorting would be. We felt like we were getting closer. And they left things in our hands to deal with implementation.

In December of 2005 FineTooth gave me a couple of weeks to work on a feature-rich implementation of the grid. It now has a PHP5 Class to wrap up the pieces of data needed for the layout. The layout is done via a Smarty Template, so it’s nice and clean to read the xhtml. The original JavaScript class has been pared down and honed to rely on a much greater use of inline event handling over event binding in DOM; there is still a big mix of these methods with the guiding principle being to use inline event handlers whenever possible to conserve JavaScript memory for when it’s truly needed. This implementation does require a mix of different technologies instead trying to do it all in one, but the payoff is that each are being used in conjunction to produce something scalable, reusable, and swift.

Entry Filed under: User Interface