I’m not that impressed with this [http://scbr.com/docs/products/dhtmlxGrid/index.shtml DHTML grid] widget: It’s intended as a generic editable table which shows data in a Web browser, using JavaScript to control all user interaction client-side. I’m working on something similar which allows easy form generation straight out of a MySQL database, gathering as much data as possible from the database itself (by querying MySQL for column data type, keys, etc.). Anyway, I’ve given a lot of thought to how the interface should work, and what I like to provide the most efficient and logical “data editing experience”. Problems with this demo are:
# I don’t like having to double-click to edit a cell. What’s wrong with single click?
# The cell type is not clear before clicking on it. For example, the Book Title column is apparently a text field since it’s editable in-cell. But the Author column opens a small text-area, however without a visible cursor.
# The Shipping dropdown does not render as a true drop-down box (one row high, with a drop-down showing the excell options), rather a list box (overlayed on top of the other elements). This is a problem I ran into as well, though: apparently there is no DHTML function which will tell a list box to open up; it has to be manually clicked by the user. Maybe it’s possible to simulate a “click” event and send it to the list box element.
# If I open a list box by double-clicking one of the cells under Shipping, and then scroll the whole table from side to side usings its scrollbar, the list box showing the shipping options stays in place relative to the browser window, not the frame in which the table is shown. You can end up with a dropdown box not positioned over the element whose choices it’s showing.
# Why does clicking in a cell with a checkbox not check the box? Instead one needs to click exactly in the checkbox. Clicking in the rest of the cell area just moves the current row highlight, which is not useful.
# It’s not possible to edit the Date of Publication field. I would think that showing off a date-editing widget is an important piece of functionality, since there are so many ways to go about this. For example, I could be given a cursor to edit the text of the date directly, or separate dropdowns for year/month/day, or a small pop-up calendar overlay, and so on.
# Tab functionality doesn’t work properly. Half of the time, Tab will take me to the next element, but ofter it will start moving the focus to other links on the page or browser menu options.
# The current row is highlighted, but the focused cell is not.
On the other hand, their [http://scbr.com/docs/products/dhtmlxTree/index.shtml Tree] and [http://scbr.com/docs/products/dhtmlxTabbar/index.shtml Tab-bar] widgets seem pretty nice. It’s just the grid that’s poorly designed.