Check it out at http://verysimple.com/content/html/

I was thinking that it would be cool to have it searchable but I don’t see myself spending the time to index thousands of characters.  If you have any suggestions, feel free to post a comment.

IE uses a non-standard attribute (autocomplete=”off”) that can be added to an entire form or one specific input control. Besides the fact that this attribute will make your HTML markup fail compliance tests, Firefox seems to consider this tag merely a “suggestion” and will disregard it at times.

In particular, Firefox will *always* populate certain password fields. There is seemingly no way to tell Firefox not to fill in a field if it really wants to do so. This can be a very bad thing if you are dealing with a user preference page or something sensitive where you don’t want autocomplete to ever occur under any circumstance. Setting value=”" is equally worthless because Firefox seems to populate this value just after the page is rendered.

The following code however will work. The concept is basially to set a timeout a fraction of a second after the page loads which clears the password field. Technically Firefox still populates the field, however this script code removes it almost instantly. As an added bonus, because you are not using autocomplete=”off” your HTML markup should still validate. This code should be placed at the bottom of your page beneath your form.

// this brutally clears a password field in firefox
// compliments of verysimple.com
function clearPwBox()
{
if (document.getElementById)
{
var pw = document.getElementById('MyPasswordFieldName');
if (pw != null)
{
pw.value = '';
}
}
}
window.setTimeout("clearPwBox()", 100);

This code could probably be made more generic by enumerating through the form elements and searching for a certain class name. This way you could have one script and simply append a classname to any field that you don’t want auto-complete to occur. This technique is similar to one posted on Chris Holland’s blog. Chris’s solution, however, is aimed exclusively at the Wc3 compliance issue. As you can see in his code he adds the autocomplete=”off” attribute, which allows the page to validate properly, but doesn’t solve the Firefox/Password field issue.

If you have a more graceful solution and/or decide to flesh this idea out, please post a comment and I’ll provide a link to your site.

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.

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.