autoedit cells with arrow keys (spreadsheet like)

autoedit cells with arrow keys (spreadsheet like)

abuabu Posts: 5Questions: 0Answers: 0
edited May 2010 in KeyTable
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.

Replies

  • abuabu Posts: 5Questions: 0Answers: 0
    edited July 2010
    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.
  • abuabu Posts: 5Questions: 0Answers: 0
    edited July 2010
    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
  • abuabu Posts: 5Questions: 0Answers: 0
    edited July 2010
    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 ;)
  • giorgio79giorgio79 Posts: 43Questions: 0Answers: 0
    There are some tips from Allan here
    http://datatables.net/forums/comments.php?DiscussionID=3
This discussion has been closed.