DataTable: Allow Enter and Esc to be used in editing to confirm/cancel editing

[mauromol]

Having a <p:datatable> with a <p:rowEditor>, it would be quite natural to be able to use Enter to confirm editing and Esc to cancel it. Instead, these keys are currently ignored and captured by other elements in the page.

[mauromol]

Currently, since there's no client-side API for doing this, it's a bit hard to make this work:
http://stackoverflow.com/questions/13287220/using-return-enter-key-to-save-edited-cell-in-primefaces-3-4-in-cell-editable-da

[cagataycivici]

CellEditor supports these (editMode="cell"), by design we don't support it for row edit. If more users require it, I'll reopen.

[mauromol]

OK Catagay, but please reconsider. That's the first thing I tried to do as soon as I started typing something in the fields of the edited row. I think it's also a matter of accessibility: right now, you are forced to take the mouse, move its pointer and click on the "check" icon to confirm.

I can't think of any good reason for which they shouldn't be implemented "by design".

[cagataycivici]

Ok, I'll reopen to see if more users will demand it. I have some performance changes upcoming in 5.3 to row editor, maybe will do it along the way.

[bsanders1979]

I've actually implemented this very functionality (not the escape key) and it was pretty easy to do. However, I added the escape piece because it's pretty simple. I can see why it's not implemented OOTB because it might be difficult to cover all use cases without overstepping boundaries.

<p:dataTable widgetVar="datatable" rowIndexVar="rowIndex">
    <p:column>
        <p:cellEditor>
            <f:facet name="input">
                <p:inputText
                    onkeydown="PF('datatable').onKeyDown(event)"
                    onkeyup="PF('datatable').onKeyUp(event, #{rowIndex})"
                />
            </f:facet>
        </p:cellEditor>
    </p:column>
</p:dataTable>

<script type="text/javascript">
//<![CDATA[
    $(function() {
        $.extend(PF("datatable"), {
            onKeyDown : function(e) {
                var key = e.which,
                    keyCode = $.ui.keyCode;

                if((key === keyCode.ENTER||key === keyCode.NUMPAD_ENTER)) {
                    e.preventDefault();
                }
            },

            onKeyUp : function(e, rowIndex) {
                var key = e.which,
                    keyCode = $.ui.keyCode;

                if((key === keyCode.ENTER||key === keyCode.NUMPAD_ENTER)) {
                    this.tbody
                        .find('.ui-row-editor .ui-icon-check')
                        .eq(rowIndex)
                        .click();
                }

                if (key === keyCode.ESCAPE) {
                    this.tbody
                        .find('.ui-row-editor .ui-icon-close')
                        .eq(rowIndex)
                        .click();
                }
            }
        });
    });
//]]/>
</script>

[mauromol]

Actually, I'm currently using the code provided by BalusC on Stackoverflow with no issues so far. It's quite brief. I'm reporting it here how the Enter key is handled:

$(document).on("keydown", ".ui-cell-editor-input input", function(event) {
    if (event.keyCode == 13) {
        $(this).closest("tr").find(".ui-row-editor .ui-icon-check").click();
    }
});

[kannextic]

I'd like this function, or at least the option to enable it for RowEditor.

[victorcarvalhosp]

We need this option too... All of our customers click ENTER and think something is wrong...

[yannickb85]

We need this option too.

[bgmoon]

Need this option for "in place" as well :)

[cagataycivici]

Please create a separate ticket for inplace and we'll discuss.

[okworx]

I'd like this function as well OOTB.

[ademcaliskan]

+1
That's the usual way I think. Click enter to accept changes and esc to cancel editing.

[ghost]

+1

[elab]

Slightly modified version of the BalusC code cited by @mauromol above:

• prevent adding new row to the table on "Enter" click
• cancel editing on "Escape" click

$(document).on("keydown", ".ui-cell-editor-input input", function(event) {
    if (event.keyCode == 13) { // Enter
        $(this).closest("tr").find(".ui-row-editor .ui-icon-check").click();
        return false; // prevents executing other event handlers (adding new row to the table)
    }
    if (event.keyCode == 27) { // Escape
        $(this).closest("tr").find(".ui-row-editor .ui-icon-close").click();
        return false;
    }
});

[melloware]

@elab. I am using the showcase and your fix for Cell editor is already natively in the latest Showcase Cell Edit event: https://www.primefaces.org/showcase/ui/data/datatable/edit.xhtml This ticket was about ROW editing right?

Nevermind: I see you are attaching to the Cell Editor to close the row editor.

[elab]

@melloware yes, the ticket is about the row editing.
I'm (actually, BalusC) attaching the handler to the cell editor as the key press is happening in an input element which is located under div with the "ui-cell-editor-input" class (while we are on row editing):

<div class="ui-cell-editor-input">
    <span id="form:table:12:j_idt61" class="ui-inputnumber ui-widget"
	    <input id="form:table:12:j_idt61_input" name="form:table:12:j_idt61_input" type="text" ...

(just checked that)

[melloware]

OK I submitted a PR. I modified all answers slightly.

1. Use :input instead of input so if you are are a select dropdown you can still press ENTER or ESC. Previously it would only work if you were in an input box.

2. Modified the ROW finder to use the more specific styles .ui-row-editor-check and ..ui-row-editor-close instead of .ui-row-editor .ui-icon-close

3. used Jquery constants for ENTER and ESC.

[elab]

@melloware: you made me thinking about, we could in fact catch key events for the row itself (to automatically cover any input elements), this also simplifies the code a bit:

$(document).on("keydown", "tr.ui-row-editing", function(event) {
	if (event.keyCode == 13) { // Enter
		$(this).find(".ui-row-editor .ui-icon-check").click();
		return false; // prevents executing other event handlers (adding new row to the table)
	}
	if (event.keyCode == 27) { // Escape
		$(this).find(".ui-row-editor .ui-icon-close").click();
		return false;
	}
});

[melloware]

@elab I think the problem is the ui-row-editing style does NOT appear until you actually click and edit a row. So when the component loads no rows are marked with ui-row-editing yet right?

[elab]

In the initial state no rows are marked with that, right.
But it works. It looks like browser's event processing always takes the current state of elements into consideration when processing events.

[melloware]

Cool let me test it locally and update my PR.

[melloware]

Tested and its working great. PR updated.