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?

clav · Accepted Answer · 2013-03-20T16:06:02.873

16

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

edited Mar 20 '13 at 16:06

answered Mar 20 '13 at 01:09

clav

4,221
30
43

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 :\ – sunzyflower Mar 20 '13 at 15:21
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. – clav Mar 20 '13 at 16:07
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() { – sunzyflower Mar 20 '13 at 20:06
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 http://api.jquery.com/delegate and http://api.jquery.com/live. – clav Mar 20 '13 at 20:12
2

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. – ron Aug 08 '13 at 21:07
I did the same but for checkbox columns: `$('#body').on('blur', 'input.editor-checkbox', function() { Slick.GlobalEditorLock.commitCurrentEdit(); });` – Sal Apr 13 '22 at 02:06

score 6 · Answer 2 · answered Aug 12 '13 at 22:11

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.

score 5 · Answer 3 · edited May 11 '16 at 21:50

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.

Slickgrid - Lost focus to end edit

3 Answers3