autoedit cells with arrow keys (spreadsheet like)

abu

I wonder if it is possible to make DataTables work exactly like Excel when editing a table.
I mean, something similar to a combination of these examples alltogether:
http://datatables.net/release-datatables/extras/KeyTable/editing.html
http://datatables.net/examples/api/editable.html
http://datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html

But also with the freedom for editing numbers like in a spreadsheet:

- NO need to press Return to start editing: when you navigate to a cell using arrows (or mouse), the whole cell content is selected in edit mode; so if you press a number, the whole cell content is changed to its value.
- NO need to press Return/Esc to end editing: when you are writing inside a cell, if you press up/down arrow keys (or right/left at end/begin of a cell) the content is saved and focus goes immediately to the above/below (or next/previous) cell of the same col (or row).
This way you can enter tons of numbers in a web spreadsheet very fast (if trained, right hand will be enough for numbers and left for arrows -or even right thumb for arrows, depending on your keyboard-)

Focus event may be used to start auto-edition (instead of the action event). But how do I accomplish end of edition without pressing enter/esc? My onblur event is already used to submit data.
Many thanks in advance for your replies.

abu

This is the closest js implementation I have seen so far, but it's not exactly what I am looking for (I would like also to have fixed left columns).
http://mleibman.github.com/SlickGrid/examples/example3-editing.html
I guess this can be better done with DataTables + plugins:

Do you know any example of DataTables doing at least the first part of what I mention? (the last one is just applying FixedHeaders plugin)

Thanks a lot.

abu

I finally got to do part of what I am looking for, adapting some examples of code from datatables.net:
http://ajax.uphero.com/spreadsheet.php

As I do not understand all the code I took, I am sure my adaption will contain some errors which explain its odd behaviour in some aspects (the most important first):

(1) For my surprise, this works in IExplorer, but fails in other browsers:
- Firefox 3.6.6
- Google Chrome 5.0.375.86
Both of them keep cells in edit mode when I leave them using arrow keys. Also, cells already edited are not editable again when I go back to them using keyboard. I have to use mouse to make them "alive" again.
I.Explorer behaves like I want: when I leave them using keyboard, cells return to their original look. And they are edited again if I go back with keyboard to the same cell. It's the first time that I like crappy IE behaviour ;)
What am I doing wrong?

(2) In all browsers: When I navigate "too fast" using different arrow keys, javascript seems to start an infinite loop and keep editing the last visited cells.
You can reproduce this behaviour if you keep up/down arrow key pressed and after a short while (just 5 or 6 cells away from start) you press left/right key.

Thank you so much for your answers

abu

I forgot to say:
If I got this to work, I would like to submit changes to a database server.

As I read here, only focus and return/escape keys are the only events supported:
http://sprymedia.co.uk/article/KeyTable

I wonder if there if somebody knows a workaround for an "onchange" event: I just wanna submit data to server if the cell contect has changed.

Thanks for your comments
(no one in a couple of months, but I thank me anyway ... perhaps someone else finds this helpful ;)

giorgio79

There are some tips from Allan here
http://datatables.net/forums/comments.php?DiscussionID=3