Javascript Grid Tutorial

(last updated: 10.04.07 23:29 UTC)

Introduction

---

The goal for this tutorial is to document how to reproduce very simple grid functionality using html, css, javascript, and perhaps some xmlhttprequest.  Following are the features to be implemented:

• Make certain cells in an html table editable.
• Provide standard navigation between cells: [shift]-tab, [shift]-enter, arrow keys.
• Allow rows and columns to be fixed (also known as freeze panes).

This used to be called a spreadsheet tutorial, but some of the defining characteristics of spreadsheets (e.g. formulae, selecting multiple cells at a time) aren't necessarily going to be implemented.  Note that regardless of whether one is constructing a grid or a spreadsheet, the information available here should be of help.

Editing via Roving Textbox

---

One might be tempted to implement a grid by simply placing a textbox (<input type="text" />) in every cell of a <table>.  However, web browsers get sluggish when there are many controls on the screen.  Therefore, one textbox will be used, and only made visible when a cell is being edited.  The document's onclick event is wired up to a function that detects whether an editable cell has been clicked; if so, it highlights the cell.  If one starts editing the cell (when F2 is pressed, the cell is double clicked, or certain keys are pressed), a textbox is inserted into the cell.  Hence, the term roving textbox.

Freeze Pane Ideas

---

Freeze panes are simply rows/columns which do not move when the grid is scrolled vertically/horizontally, respectively.  In IE it is fairly easy, due to the ability to use javascript for CSS values in IE via expression().  Unfortunately, td.text {position: relative; left: -10px;} will only work on the table below in IE, which means that we can't just wire up the Scroll event of a containing div and continually update left with scrollLeft/Top in Firefox.  It is possible to freeze just column headers fairly easily in a cross-browser compatible fashion.

In Development

---

This tutorial is in active development.  This means it doesn't do everything the introduction says it will do.  It also means that any help would be greatly appreciated; here is my contact info.

Discoveries

---

Please let me know about anything that's incorrect.

• The only way to detect the TAB key in IE is to wire up KeyDown; neither KeyPress nor KeyUp fire.
• window.document.onkeydown is fired multiple times when a key is held down; this is a departure from typical Windows behavior, where a KeyDown message is sent once, a KeyPress message sent one or more times, then a KeyUp message sent once.
• Discovering whether a key press will result in printable character in the KeyDown/Up event handlers is nontrivial; e.keyCode is almost always a keyboard reference, which means that one would have to deal with virtual key codes and whatnot.  It is much easier to use the KeyPress event; one can simply ensure that charCode is nonzero and then call String.fromCharCode(code).  The only gotcha is that when the escape key is pressed in IE, charCode equals 27.  OnDocumentKeyPress in the javascript in this page uses the above to allow typing when a cell is highlit to cause a textbox to appear in the cell.

Issues

---

• Efforts to prevent text selection upon double click in IE fail, as MouseUp fires after the first and second clicks of the double click and document.onselectstart = null is run onmouseup.  It is apparently not possible to know if a MouseUp firing is the first of the two clicks of a double click; the only recourse seems to be to somehow capture the second MouseDown event of a double click, although there seems to be none.
• The reliance on the global variable _lastTxt isn't very desirable, as we might want to have other types of controls (like combo boxes).
• Firefox throws an exception when the generated editing textbox is .select()ed for the second and successive created textboxes; why does this happen?

Support Tutorials like This

---

If you found this tutorial helpful, please link to it.  If you really want to show your appreciation... :-)

Copyright © 2006 Luke Breuer