Trigger click event on jqGrid cell editor

Question

I have a jqGrid with cell editing enabled.

I also have a delegated click event for all <input> elements. This means that when the user clicks on an <input> an on-screen keyboard is displayed so that they can edit the value (this solution is for a touch screen).

When the user clicks on a cell to initiate editing, the cell editor is displayed. However, the user then has to directly click on the cell editor to trigger the click event and display the on-screen keyboard (effectively having to 'double click' to edit the value).

I want a way to be able to trigger the click event of the cell editor as soon as the editing starts.

I tried the following, but it doesn't work:

$('#myGrid').jqGrid({
    // ...
    afterEditCell: function() {
        $(document.activeElement).trigger('click');
    }
});

Can anyone tell me how to do this?

Answer 1

I managed to achieve this by doing the following.

First, I set the following:

$('#myGrid').jqGrid({
    //....
    cmTemplate: { editoptions: {class: 'jqg-editor'} }
    //....
});

This makes sure that the cell editor that is created by jqGrid automatically has the jqg-editor CSS class applied to it. So we can target it using a delegated 'on focus' event, like so:

$(document).on('focus.jqg', '.jqg-editor', function() {
    $(this).trigger('click');
});