Slickgrid - Lost focus to end edit

Question

When editing my grid, if I click outside the grid, the box I was editing is still editable. How do I get the edited cell to "complete" the edit when it looses focus?

Answer 1

The following code will save the current edit.

Slick.GlobalEditorLock.commitCurrentEdit();

You'll need to place this inside an event handler that you think should trigger the save. For example, if you're using the sample text editor plugin, I believe an editor-text CSS class is added to the input field that's created when you're editing a cell so something like this should work:

$('#myGrid').on('blur', 'input.editor-text', function() {
    Slick.GlobalEditorLock.commitCurrentEdit();
});

Answer 2

I found that I needed to wrap clav's handler in a timeout:

$("#myGrid").on('blur', 'input.editor-text', function() {

    window.setTimeout(function() {

        if (Slick.GlobalEditorLock.isActive())
            Slick.GlobalEditorLock.commitCurrentEdit();

    });

});

to avoid errors like:

Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist. 

when using the keyboard to navigate. Presumably the new blur handler fires before SlickGrid can do its own handling and this causes problems.

Answer 3

Unfortunately, probably due to differences in event processing, Grame's version breaks keyboard navigation in chrome. To fix this, I added another check to only commit the edit, if the newly focused element is not another editor element within the grid (as the result of keyboard navigation):

            $('#grid').on('blur.editorFocusLost', 'input.editor-text', function() {
                window.setTimeout(function() {
                    var focusedEditor = $("#grid :focus");
                    if (focusedEditor.length == 0 && Slick.GlobalEditorLock.isActive()) {
                        Slick.GlobalEditorLock.commitCurrentEdit();
                    }
                });
            });

This seems to work in current versions of firefox, chrome and ie.