Update: Reorganizable DataGrid built on Ajax / Smarty / Prototype / Scriptaculous
May 30th, 2006 Author: Lindsey Simon
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!
Entry Filed under: User Interface
13 Comments Add your own
1. Ajaxian » Script.ac&hellip | June 22nd, 2006 at 1:14 am
[...] Finetooth has created a Reorganizable DataGrid built on Ajax / Smarty / Prototype / Scriptaculous. [...]
2. DataGrid con Script.aculo&hellip | June 22nd, 2006 at 1:47 am
[...] Muy buena utilización de script.aculo.us, en esta datagrid con una gran cantidad de funcionalidades. [Demo][Descargar] [...]
3. i-ssential devBlog »&hellip | June 22nd, 2006 at 4:48 am
[...] Bei FInetooth kann man sich ein Script downloaden, das aus einer normalen Tabelle diese Funktionen herausholt. Dies geschieht mit Hilfe der Toolkits Smarty, Prototype und script.aculo.us. http://development.finetooth.com/?p=13 Hier gibt es ein Demo. [...]
4. Jase | June 22nd, 2006 at 12:42 pm
I’m not getting a vertical scrollbar for the grid. Is it just me (Firefox 1.5.0.4 on Windows XP)?
Screenshot:
http://aycu37.webshots.com/image/1396/1084118563533840513_rs.jpg
5. Celi Online » DataG&hellip | June 22nd, 2006 at 3:40 pm
[...] Muy buena utilización de script.aculo.us, en esta datagrid con una gran cantidad de funcionalidades. [Demo][Descargar] Ajax script.aculo.us web2.0 [...]
6. Lindsey Simon | June 22nd, 2006 at 8:13 pm
Jase: The funny thing about the scrollbar is that I can’t figure out what the cause is. On my windows box at work, I cannot get the scrollbar. On my coworker’s it shows up. Same version of Firefox and Windows. I cannot explain it or figure it out. Firefox on my linux box, which is where I do development, has the scrollbar, so oddly it just hasn’t caused be so much pain that I’ve spent more than 2 hours on it. I’d love to figure it out though.
7. SmithEllis.Com » li&hellip | June 22nd, 2006 at 10:18 pm
[...] FineTooth Development » Update: Reorganizable DataGrid built on Ajax / Smarty / Prototype / Scriptaculous (tags: ajax dhtml javascript tables) [...]
8. ajaxDNA&hellip | June 22nd, 2006 at 11:57 pm
[...] A DataGrid built using PHP, the Smarty Template Engine, Scriptaculous, and Prototype. [...]
9. links for 2006-06-23 at G&hellip | June 23rd, 2006 at 12:21 pm
[...] Grilla de datos hecha on Ajax / Smarty / Prototype / Scriptaculous Demostración de una grilla de datos hecha con Ajax, la liberÃa Smarty, Prototype y Script.aculo.us. Permite crearla a través de una herramienta y posee las funcionalidades habituales de mover los encabezados y ordenar por la columna elegida. Observacià (tags: ajax javascript smarty script.aculo.us) [...]
10. Script.aculo.us Datagrid&hellip | June 24th, 2006 at 8:46 pm
[...] Script.aculo.us Datagrid: “Finetooth has created a Reorganizable DataGrid built on Ajax / Smarty / Prototype / Scriptaculous. [...]
11. Agregador » Blog Ar&hellip | June 25th, 2006 at 2:34 pm
[...] Muy buena utilización de script.aculo.us, en esta datagrid con una gran cantidad de funcionalidades. [Demo][Descargar] [...]
12. Justin | July 6th, 2006 at 11:18 pm
Hi Lindsey,
great datagrid, just wondering is it possible to show examples of how to use this with results from a mysql query, this would be very handy
Cheers
Justin
13. Sam’s random musing&hellip | July 24th, 2006 at 10:30 am
[...] DataGrid [...]
Leave a Comment
Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed