Open Editor form when clicking enter on selected row

resqonline

I am using the regular lightbox Editor form display and struggle to find the correct selector for opening the editor when you press the enter key on a selected row - how do I get the row data to be passed to the editor?

I have an icon element that can be clicked like this:

$('#contactstable').on( 'click', 'td.row-edit', function (e) {
    e.preventDefault();
    contacteditor.edit( $(this).parent('tr'), {
        buttons: 'Update',
    } );
} );

but I am not sure how to perform the opening on a selected row when hitting the enter key

$('#contactstable').what selector to get selected row?.keypress(function (e) {
    e.preventDefault();
    var key = e.which;
    if(key == 13){
        contacteditor.edit( $(this) );
    }
});

allan

opening the editor when you press the enter key on a selected row

I don't quite understand I'm afraid. The row doesn't have focus when it is selected. You can't listen for key events on it.

You could listen for a key event on the document and then check to see if there is anything that has focus (document.activeElement) and if not, then check to see if there is a selected row, and if so then trigger editing on it.

Allan

resqonline

So when a row gets selected, there is nothing that indicates that it is selected? How then does Datatables know to highlight the row - it's blue when I click on it, so something must be happening?

kthorngren

With the Datatables APIs like, row(), you can use the selector-modifier of {selected: true} to get the selected rows. See this example.

Datatables has select and deselect events know when something is selected. See this example.

Kevin

resqonline

@kthorngren yes I know these exist, however in this case I am not sure how to implement them or if it's even possible

kthorngren

You can do something like Allan explained. Or maybe have a column with a checkbox and use select() and deselect() to follow the checkbox state. Since the checkbox will have focus you can use an event handler for the checkbox, maybe something in this SO thread will help. I would say the answer really depends on what, if anything, is in focus when you are checking for the enter key.

Kevin

allan

row gets selected, there is nothing that indicates that it is selected

It is selected sure - but it isn't "focused".

A focused element will have keyboard interaction - e.g. an input element. You can put a key event listener on that. You can't put a key event listener on the row, because it can't gain focus.

What you can do is put a key event listener on the document. Key events bubble up the DOM, and are triggered on the document even when nothing has focus. You can use the document.activeElement I mentioned before to determine what has focus, if anything.

So yup, a key event listener on the document, check if anything else has focus, if not, and there is a row selected and it was the return key that was pressed, trigger editing.

Allan

resqonline

Thank you, @allan, for clearing things up. I will have a try with this.

@kthorngren thank you as well, I am trying without checkbox, but it's an interesting solution nonetheless and if I cannot get the other version to work, I will definitely try it.

resqonline

@allan Could it be there is a problem if rowID is set to "id"? I have other tables where the rowID is set to some custom data, but in one table it is set to id and that seems to screw up my function with the icon edit button from above (it works alright with the regular edit button)

allan

I can't think of a reason why that would be. Did you also set the Editor idSrc property?

Allan

resqonline

yes I did, that's why I am confused that suddenly it doesn't seem to be working - could there be an issue when using the same editor both for a datatables field (nested editing) and regular table (on a different page)?

allan

Not as far as I'm aware. I think I'd probably need a link to your page showing the issue if that is possible, so I can trace it through and see what is going on.

Allan

resqonline

the weird thing is: the regular Editor buttons work, only the icon edit function from above doesn't
I've now removed the icons and their functions, I didn't want to waste anymore time on that

I haven't managed to get the key opening functionality to work, though... still trying to figure out how to get the selected row for that function.

resqonline

I've managed to get it working with adding shift+key to the buttons:

buttons: [
    { extend: "create", editor: myeditor, key: {
            key: 'n',
            shiftKey: true
        } },
    { extend: "edit", editor: myeditor, key: {
            key: 'e',
            shiftKey: true
        } },
    { extend: "remove", editor: myeditor, key: {
            key: 'd',
            shiftKey: true
        } },
    'copy', 'excel',
]

Also: be aware of any key combination the browser uses! I tried to use the cmd key, but that would always result in Firefox doing something, so I changed to shift key and that works.

allan

Nice one - thank you!

Allan