Question

In colModel I have one custom_func: myFunc() which tests whether an integer value entered into the text field of the jqGrid native Add or Edit modal form is not already in use in the handful of rows visible in the grid where loadonce:true is set in the options. The way it is the custom_func: is not executed until the modal form Submit button is clicked but I’d like to have the modal form text field tested when it is focusout (or blur?). Is there a way to do this? I’ve tried to do it as showing below in the afterShowForm: option and it kind of works but the error message and halting is not the same as when the Submit button is clicked, is there a way to do focusout/blur from custom_func: myFunc()?

The following shows colModel snippet followed by the custom function followed by my attempt to use focusout in afterFormShow: function() of the Add modal form.

//colModel
...},
{name: 'ezyid', index: 'ezyid', width: 60, align: "center", editable: true,
        formoptions: { rowpos: 1,
            colpos: 1,
            label: "Ezy ID",
            elmprefix: "(*) " 
            },
editrules: {
            custom: true,
            custom_func: chkDuplicateEzyids, //custom function
            required: true
            }
        },             

The colModel custom function:

function chkDuplicateEzyids(value, colname) {

var isFound = false;

var rows = grid.jqGrid('getRowData');

for (var i = 0; i < rows.length; i++) {

    var row = rows[i];

    if (value == row.ezyid && value != '') { isFound = true };

}

if(isFound){

    return [false, "This Ezy ID is in use, please enter another or press Cancel."];

} else {

    return [true, ""];

}

}

My less than ideal attempt to use the custom function accessed from the afterShowForm: option of the Add modal form options (would be similar use in Edit if it had to be done this way):

addSettings = {
recreateForm: true,
jqModal: false,
reloadAfterSubmit: false,
closeOnEscape: true,
closeAfterAdd: true,
afterShowForm: function ($form) {
    var form = $form.parent()[0];

    $("#ezyid", form).blur(function () { //or focusout() if better

        var resp = chkDuplicateEzyids($(this).val(), 'Ezy ID');

        if (!resp[0]) {
            $("#FormError", form).show();
            $(".ui-state-error", form).html(resp[1]);
        }
    });

    $("#lui_" + grid[0].id).hide();
},
onclickSubmit: onclickSubmitLocal
},

To summarize, I’d like to use focusout (or blur) to immediately test the text field value rather than having to enter in all other values of the form to get to the Submit button only to find the value is already in use. This seems a common practice but I cannot figure it out in this context. Many TIA.

( some code snippet(s) reused with by approval and with appreciation to stackoverflow user @Oleg )

Answer 1

I would recommend you to use dataEvents to bind any event handler (like focusout which is a little better as blur) to the corresponding input control. See the old answer for an example.

One more remark. The 'ezyid' column seems to have unique values. So you can consider to use key: true in the column. In the case the ids for the grid rows (for the <tr> elements of the <table>) will be used with the values from the column. In the case the chkDuplicateEzyids function can be reduced to the if ($('#' + value).length > 0) {/*duplicate are found*/} or to the if ($('#' + $.jgrid.jqID(value)).length > 0) {/*duplicate are found*/} if you would allows to use meta-characters in the id. The only thing which you need to implement hiding of the 'ezyid' column in the Edit dialog (see here for details) and show it only in the “Add” form.