Update: Reorganizable DataGrid built on Ajax / Smarty / Prototype / Scriptaculous

Welcome! Since many of you are arriving here from a recent mention on Ajaxian I wanted to let you know about a more bandwidth-optimized, working prototype of an XSLT version of this component – this is the direction I really want to see this grid move in!

Updated to version 0.3
README
LICENSE
Download: DataGrid-0.3.tar.gz (check out the QuickSearch filter feature by rightclicking on the “Owner” column!)
Note: Vendor column is intentionally non-draggable, non-reorderable, and non-resizable.

Changes
* Simpler template design for right-click column menus
* Patch to script.aculo.us allows mouse dragging outside of the Sortable container to update the list
(delay_and_ignorePosition_forSortables.diff, Functional Test of the patch)
* Improved speed on column reordering and resizing
* Removed a div inside the data table td’s which made an incredible speed boost to IE’s rendering
* Recoded some of the for loops to use do {} while structures
* General cleanup

Notes
Primarily, there have been many changes made to improve speed of the DOM operations, and we plan on doing more! Many thanks to this article which I found to be exhaustive and interesting: Optimizing JavaScript for Execution Speed. Also, I’ve been analyzing the code in the latest update to FogBugz by Fog Creek Software – they’ve included resizability and column reordering. Their mechanisms seem to use XML parsing a lot – anyhow, I can confirm very similar speed results in our DataGrid to theirs. They’ve chosen to make the column headers completely draggable which is intuitive if you don’t know that feature is there for sure. And you click the actual text of the column label to sort. I like that too. Anyhow, I’ve restyled the grid here too to be more pleasant on the eyes and I hope to get some feedback from other developers out there!

13 comments May 30th, 2006 Author: Lindsey Simon