VerySimple

Autocomplete is a nice feature which fills in common form fields automatically for the user. However, in some cases you don’t want this to happen.  Some examples could be an account management page where you don’t want the admin password to be auto-filled in when you are creating and managing accounts.  Another example is any site that has a “My Account” page with a field allowing you to change your password.  Auto-complete can accidentally fill in these fields because it thinks it is a login form.

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.

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.