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?

Exemplar

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();
});

Sensitive

I might be missing something here. In theory this works - because if I add it in firebug console and then get focus and lose focus it works once. But in the code, even in the document.ready, it's not working :\ – Exemplar

My mistake, that blur example wouldn't work because the input fields are added dynamcially. You'll need to bind the event using on instead. I updated the example, try that. – Sensitive

I'm getting the following error: TypeError: jQuery(...).on is not a function [Break On This Error] jQuery('#myGrid').on('blur', 'input.editor-text', function() { – Exemplar

You'll need to upgrade your version of jQuery to at least 1.7 use the on function. If you can't do that you can use delegate or live, see api.jquery.com/delegate and api.jquery.com/live. – Sensitive

This answer was very helpful. But it seems to introduce a new problem: calling commitCurrentEdit seems to play around with focus. If you are trying to tab through the columns in your grid you'll find that this breaks that. Something like this: $(document).on("click", function(e) { if (!$(e.target).hasClass("slick-cell")) { Slick.GlobalEditorLock.commitCurrentEdit(); } }); seems to work a little better but still has 2 issues. 1) Whatever you just clicked doesn't keep focus. 2) Clicking inside the editor destroys the editor. – Alleviator

I did the same but for checkbox columns: $('#body').on('blur', 'input.editor-checkbox', function() { Slick.GlobalEditorLock.commitCurrentEdit(); }); – Gretta

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.

Bogtrotter

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.

Guillema