UPDATE 04-2010: This post was originally written in 2006. There are a lot more options for ajax datagrids now and most of them are constantly evolving. Even if I were to review them all, it would be difficult to keep this page updated. So, instead the original article is below and I’ll focus on my criteria list for DataGrids as well as a small number of grids that I recommend
My Criteria:
- Stability: My first criteria is stability because no matter how flashy, the grid needs to function correctly.
- Features: The features I consider “must have” for a datagrid is AJAX filtering, sorting and pagination. For more advanced apps, inline editing is a requirement.
- Code Style: I prefer object-oriented code that is modular. I don’t like a grid that requires server-side code or that is tightly coupled with the back-end (ie the grid talks directly to the database) unless it is built into the development framework itself (like .NET for example).
- License: For in-house apps I’ll consider commercial licensing for the components. If I plan to distribute my source code then I use a library that is open source. I prefer a more liberal license such as LGPL or MIT, however I’ll use GPL if it’s acceptable for the project.
- System Requirements: I take a conservative approach and prefer a grid that doesn’t require bleeding-edge browser versions.
My Recommended DataGrids:
ExtJS: http://extjs.com/
ExtJS is an entire JavaScript framework. Any part can be used on it’s own, however in order to use the DataGrid some time needs to be invested in learning about the data reader classes. So there is somewhat of a learning curve, but in my opinion this is the best DataGrid. You can purchase a commercial license or use it free-of-charge under the GPL. ExtJS has a very active development community.
DHTMLX UI toolkit: http://dhtmlx.com/
The DHTMLX UI components looks a little more 0ld-school to me at first glance, however the functionality is definitely there and the grids includes just about anything you would want. It supports themes as well so it could be made to look better. A lite version is available under the GPL and a more feature-rich version is available with a commercial license.
FlexiGrid: http://groups.google.com/group/flexigrid/
FlexiGrid is a more lightweight option with a more liberal licensing than the other products. It doesn’t include inline editing. It is implemented as a plugin for JQuery. I’m not sure if it’s being actively developed but the discussion group still has some activity. It is a nice looking grid with the basic features that I need. The developer himself seems confused about licensing and grants permission to do whatever you want but requests a “heads up.” JQuery uses the MIT license.
Popular Grids that I have tried but didn’t work for me
- Nitobi Complete UI: Awesome looking grid but it seems to have problems with cross-browser support. I like these guys’ products so I continue to keep my eye on them
- jqGrid: I really don’t like the way they have tied in the grid to the database layer. This might be helpful if you just want a table editor, but not if you want to have a modular grid component
If you have one that you suggest, please post a comment and I’ll take a look. Thanks!
—
ORIGINAL ARTICLE FROM 2006
I’ve been on the lookout for a good AJAX DataGrid component for some time now, hoping to find one that I can add to my bag of tricks. Most data-driven web applications need to show data in a table or grid at some point or another. There are quite a few for .NET programming, but if you just want the JavaScript to plug into your app, there are not as many choices.
Writing a flexible and powerful AJAX DataGrid is a complicated task and, speaking for myself, not one that most developers will want to tackle. Using a 3rd party component makes a lot of sense. However the commercial vendors of AJAX DataGrids out there are charging ridiculous amounts for licensing. I’m sure these prices will come down to Earth as more open source options become available.
The most promising open source DataGrid I’ve found is the Rico LiveGrid at www.openrico.org. But from what I can tell, it’s a read-only display of data. I could be wrong about that, but I haven’t seen any example code to show edit capability with LiveGrid.
The most most impressive commercial DataGrid in my opinion is the nitobi Grid at www.nitobi.com but it’s not exactly cheap. If anyone knows of any other options out there and/or has a preference for one of these, please leave some feedback. I’d be interested to read some other opinions.
| Name | Active Widgets Grid | Zapatec Grid | nitobi Grid V3 | dhtmlxGrid |
|---|---|---|---|---|
| URL | visit… | visit… | visit… | visit… |
| License | ||||
| Type | Commercial | Commercial | Commercial | GPL, Commercial |
| Per Seat Cost | $395.00 | NA | $489.00 | $149.00 |
| Per Server Cost | NA | $59.00 | NA | NA |
| Unlimited Server Cost | $2,450.00 | $799.00 | NA | NA |
| Distribute w/ My App Cost | NA | $1,199.00 | NA | NA |
| Source Included | Yes | Yes | Only with $3,699 Enterprise Edition | Yes |
| Trial Download | Yes | NA | Yes | NA |
| Free Version | No | Yes, “Lite” | No | Yes, GPL |
| Free/Trial Version Limitations | Honor System? | Link required, Non-removable “About” button in grid | Reg. Required, 30 Day Limitation | Feature Limitations |
| Technical | ||||
| Browsers | IE6+ FireFox (Safari TBA 2006) | ? | IE 6+, FireFox 1+, Camino 1.3+ | IE5+, FireFox 0.9+, Safari 1.3+ |
| How Data Loaded | JS Array, CSV, XML | HTML, XML, JSON | XML, JS API | |
| Features | ||||
| JIT Rendering (Scroll) | Yes | No, but has “Slider” pagination control | Yes | Pro Version Only |
| Edit In Place | Yes | Yes | Yes | Yes |
| Input Controls | ? | Yes | Yes | Pro Version Only |
| Sortable Rows | Yes | Yes | Yes | Yes |
| Resize Columns | Yes | No | Yes | Yes |
| Frozen Columns | Yes | Yes | Yes | Yes |
| Notes | Includes various user controls like sliders, buttons, etc. | Charts feature for customized output display | Copy/Paste multiple cells, to-from Excel. | Interesting “TreeView” Grid |
Terminology:
JIT Rendering: “Just in Time” rendering is the ability to show part of your data and load more dynamically as you scroll down.
Edit in Place: The ability to click on a cell and edit the data with no page reload
Input Controls: The ability to use drop-downs, checkboxes, etc when editing in place.
Frozen Columns: The ability to allow scrolling through your records but keep a column or row “frozen” as you can in Excel.
You might want to try this one: http://www.xml.com/pub/a/2006/08/23/xsldatagrid-xslt-ajax.html
I have not yet got it to work, but it looks promising!
Hey Thijs, I had actually looked at that one as well and I like their way of thinking a lot. I like any solution where the data is structured and the presentation is separate from that. It seems like this particular code is still in the concept phase as far as I can tell, but I am going to keep my eye on it. Thanks for the comment!
Thanks for putting this together and the kind words on the Nitobi Grid. We’ve been working on it for long time:) Just a heads up we’re adding grouping / treeview functionality into our grid, been in the works for a while with some beta customers. Also, we’re releasing a suite early in 2007 which will bring the per component cost down quite a bit for the community.
I’m curious why you haven’t included offerings from Ajax component vendors like Infragistics, Backbase or Telerik?
Do you develop mainly in .Net on the backend?
Thanks!
Hi Andre, Thanks for the message – you guys make a great product! I actually only included links on this page for non .NET products. Though I do use .NET, in this case I’m looking for a PHP solution. So, I didn’t include the ones that only have a .NET version. But, I will check out the companies that you mentioned.
Thanks Jason. We’ve always felt supporting multiple backends is very important. That’s why we were so excited to get .Net and Cold Fusion support in this fall. We have a PHP backend, what did you think of that? What IDE are you using for development? And I’m guessing it’s MySQL for the DB? I’m also curious since you’re looking for a JavaScript component whether you have a preference for XML or JSON?
Finally, one last question, what would you consider a down to earth price for this type of product?
Hi Andre, Well first thanks for your interest in my humble opinion! I use Visual Studio for most of my development. For PHP I use JCX Software’s vsPHP plugin which is awesome. For my own personal work, I choose the LAMP/WAMP platform because it has the widest install base and the least hassle. When I’m working for a client, the sky is the limit – I work with about everything – Oracle, MS SQL, Java, C#, etc. So your support for all of those things is nice because I could theoretically learn your product and use it in all of my work.
As far as XML or JSON. hmm… XML is tempting because I can imagine a generic back-end with a replaceable presentation layer. But on a practical level you want the grid to be as responsive as possible. JSON is probably the pragmatic choice.
As far as price, that is a tough question. I think $399 for a component puts you definitely into the corporate price range for developers like myself who would buy it for work. I do like the fact that there is unlimited deployment for that price. I think it’s a fair deal. It just hurts a little to shell out that much cash unless the company is footing the bill.
I think there are two groups of developers you’re filtering out with that price – the freelancers and the OSS guys. You’ll never get OSS guys with a commercial product. If you want to go after the freelancers, though, I think there is a sweet spot around $99. I bet you would see more sales, but your support costs would go up as well. If you can make something work at that price, I think you guys would get a lot more customers.
Thanks for stopping by!
The simplest way I’ve found to generate online xml that can feed your ajax datagrid is using this web app. http://www.simplesa.net
sigmagrid http://www.sigmawidgets.com
displaytag http://displaytag.sourceforge.net
eXtremeComponents http://www.extremecomponents.org
Hello,
I see you mention Nitobi as expensive, I purchased all, I found the grid very good, the only thing that let down the entire collection was the Combomenu, It was very buggy and left me with a bad taste in my mouth with regards to Nitobi products. I also found that Nitobi support can take up to 4 weeks for responce.
I am not debasing Nitobi, only passing an observation.
Regards
Thomas
Have you look at
http://www.eyesis.ca/projects/datagrid.html
¡ Gracias !
I tried hard to find the solution since I came across with this post. In my case, I had different collation in the columns.