jspreadsheet / ce

Jspreadsheet is a lightweight vanilla javascript plugin to create amazing web-based interactive tables and spreadsheets compatible with other spreadsheet software.
https://bossanova.uk/jspreadsheet/v4
MIT License
6.73k stars 825 forks source link

Enter to start Edit Mode #246

Closed koenhandekyn closed 5 years ago

koenhandekyn commented 6 years ago

currently the behaviour is the same like in Excel. However for my use case it would be beneficial to be able to configure ENTER as the key to activate edit mode and while in edit mode, enter terminates edit mode and executes the current behaviour.

is such a behaviour in some way 'pluggable'?

koenhandekyn commented 6 years ago

actually the use case is to have a standard key to open up the editor similar to the F2 you have implemented. adding preventDefault to the handling of the space key gives the desired behaviour with the space key instead of the enter key. it might make sense to make this configurable.

koenhandekyn commented 6 years ago

proposal, have optional configuration for onEnter with values ['edit', 'nextRow'] with nextRow as default for backwards compatibility:

  $('#grid').jexcel({
    data: data,
    onEnter: 'edit',
    colWidths: [ 75, 200, 100, 100, 50, 100, 200, 300, 300, 300 ],
    colHeaders: ['nr', 'name', 'wood', 'glass', '#', 'position', 'type', 'dimensions', 'params', 'options'],
    columns: [

code change around line nr 1100:

    if ($.fn.jexcel.defaults[$.fn.jexcel.current].onEnter == 'edit' ) {
        // Open editor
        $('#' + $.fn.jexcel.current).jexcel('openEditor', $($.fn.jexcel.selectedCell), false);
        e.preventDefault();
    } else {
        // Go to the next line
        cell = $($.fn.jexcel.selectedCell).parent().next().find('#' + columnId[0] + '-' + (parseInt(columnId[1]) + 1));
        e.preventDefault();
    }
tejcirkulate commented 6 years ago

I think the proper solution is to be able to access the event object in every handler like openEditor, closeEditor, etc.

I am finding a need to show two different types of editors depending on the action taken by the user.

A keypress should open a default text editor while a double click should open a modal window.

This isnt possible today because the openEditor handler cannot differentiate between different events that resulted in the call to openEditor.

I am thinking of creating a customized version of jquery.jexcel.js where each call to openEditor, changes from:

$(tableid).jexcel('openEditor', $(e.target));

to:

$(tableid).jexcel('openEditor', $(e.target), $(e));

so that we can access e.type and determine what type of editor to fire.

Will this work for you too?

Update: Also useful for another issue filed by me: https://github.com/paulhodel/jexcel/issues/236 and another one from the past: https://github.com/paulhodel/jexcel/issues/151

koenhandekyn commented 6 years ago

i think it could work if as i am assuming the default key handling isn't executed

tejcirkulate commented 6 years ago

i think it could work if as i am assuming the default key handling isn't executed

I think it will still trigger but you can create a custom editor. In that custom editor's openEditor handler, you can check if the key value is XYZ and choose to do something different from the default editor.

pphod commented 5 years ago

Hi Guys, thanks for the suggestion. For the custom editor, the openEditor(cell, empty, e); will have three arguments.

cell empty : yes/no (means clear the current content) e: you can obtain more information about what triggered the editor. For example, get the Key to customize the behavior.

This change has been applied to the master repo.