CODEWITHSUNDEEP
jqueryjqgrid
FixMaker
FixMaker

Reputation: 3877

Trigger click event on jqGrid cell editor

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?

Upvotes: 0

Views: 3705

Answers (2)

Zanoldor
Zanoldor

Reputation: 388

guys! I do like the idea of @FixMaker, Thks! And I show below what I've done.

    $(document).ready(function () {

        $(document).on('click', '#grupo_pesquisadores input', function() {
             $(this).trigger('click');

             if ($(this).attr("class") == 'fileIndividual') {
                  if ( $(this).is(":checked") ) {
                            $("#grupo_pesquisadores").find(".fileShared").prop("checked", false);
                  }
             }
             if ($(this).attr("class") == 'fileShared') {
                  if ( $(this).is(":checked") ) {
                            $("#grupo_pesquisadores").find(".fileIndividual").prop("checked", false);
                  }
             }
        });

   }); //document.ready end

I used it to control some checkboxes that I have. When I click on 'fileIndividual' checkbox it uncheck all checked 'fileShared' checkboxes, and if I click in any 'fileShared' checkbox it uncheck the 'fileIndividual' checkebox checked.

Upvotes: 0

FixMaker
FixMaker

Reputation: 3877

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

Upvotes: 2

Related Questions