2001-01-20 Original Grid Created.
2002-05-30 Work on artical started.
2003-01-02 Article posted.

An object based grid widget, targeted at database powered web applications, incorporating features found in popular spreadsheet and database management applications. Currently only internet explorer 5.5 and later are supported.

Please note that the backend portion of this article is not yet as comprehensive as desired, and several examples are missing.


About two years ago I decided to create a web based user interface for a database I was using at the time. As with most projects, it was put on hold shortly after it was started. I continued to work on one of the core parts of the interface, a simple grid control, since I thought it could be useful in other projects. Since then I've been speeding quite a lot of time working on the grid. It's still not as good as I want it to be and although it could really use a rewrite since it's pretty much a patch-work right now, it's good enough to be useful to many developers and have decided to share it with the world. The actual component has been more or less ready for over a year now, but it was not until now that I've taken the time to write this article. It has been on my todo list for way too long.


A grid control is basically a table where the value of the cells can be edited. Other than that, it also provides useful functions for data manipulation or representation such as different data types, sortable and resizable columns, etc. Of course, not all grids are the same. They have different purposes and different feature sets. This grid component neither tries to reassemble nor compete with spreadsheet applications such as Excel, Quattro Pro or even HalfBrain. Enough about what it's not. Let's focus on what it is. As I mentioned earlier, the grid component was originally created to be a part of a large scale web application with intense database interaction. It contains quite a number of functions for interacting with a backend and directly with a database of some kind. Since this component is pretty much useless without a backend, this article will not only discuss the actual DHTML component, like most of our other articles, but will also include information and sample code covering the communication between the component and a backend and vice versa. Sample code for the backend implementation will be provided for a large range of programming languages, platforms and technologies, including perl (cgi/mod_perl), c++ (cgi/isapi) and java (servlets).


The grid component is basically a simple html table containing the data, and two more tables providing the column headers and row numbers. Those tables are all linked with a scroll mechanisms synchronizing their scrolling, thus when the main table is scrolled the column header or row id table is also scrolled (Please see our article about synchronized scrolling for information concerning how this can be achieved). The cells are then made editable by moving a single input box to the position of the cell to be edited.


I'm not very satisfied with the current implementation. It's a gigantic patch-work and not even remotely close to being standards-compatible. Other than that the speed (or rather lack thereof) is a big problem when working with large sets of data or on slower computers.

History & Introduction
Backend - Introduction
Backend - Perl (cgi/mod_perl)
Backend - C++ (cgi/isapi)
Backend - Java (servlet)

Author: Emil A Eklund