javascript - beforeSubmit event to custom button on a custom form of jqgrid doesn't work

Question

I am using jqgrid 4.5.2 version with Jquery-3.2.1.

In jqgrid, in place of edit buttons (add, edit and delete) custom (add, edit and delete) buttons are implemented. Now on clicking the custom add/edit buttons a custom form is opened. The below is the onclick event for the custom buttons.

That means we replaced the jqgrid default edit/add forms with our own custom forms. Earlier we wrote some validations with beforeSubmit event which were working fine with default(add/edit) forms of jqgrid. Now I want to apply the same validations to the replaced custom forms.

function(myGrid){
  myGrid.getGridParam('dataGrid').openEditFormIndicator();
}(myGrid)

That custom form has custom submit and cancel buttons. Now I would like to add beforeSubmit event to this submit button. As the form is custom, jqgrids default beforeSubmit event doesn't work.

Add/Edit forms are built by our own framework which is built on Java. The forms are completely independent of jqgrid. I just get the id from jqgrid row (on double click or clicking on edit button) and pass it to a template, which pulls the data from db and forms the row edit form. If the id passed is empty or didn't find on db, an empty (add)form is formed with the same template.

DataGrid.prototype.openEditFormIndicator = function() {
var id = this.grid.getGridParam('selrow')
if(!id) {
    var gridId = this.grid.attr('id');
    var idSelector = "#alertmod_" + gridId;
    $.jgrid.viewModal(idSelector, {
        gbox: "#gbox_" + $.jgrid.jqID(gridId),
        jqm: true
    });
    $(idSelector).find(".ui-jqdialog-titlebar-close").focus();
}
else {
    //openInteractiveForm('form_plugin_examples',this.options.formIndicatorId,'id',id,'true'); 
    var encodedPkId = encodeURIComponent(id);
    this.openFormIndicator('Id:' + encodedPkId + ',pkId:' + encodedPkId + ',Search:id%3A' + encodedPkId + ',IndicatorId:' + this.options.formIndicatorId + ',Debug:true' + ',FilterField:id,FilterValue:' + encodedPkId);
    // TODO width, length, position
}
};

DataGrid.prototype.openFormIndicator = function(optionsStr) {
  DialogBoxEdit.newWindow(this.options.formIndicatorId, optionsStr);
};

With the above two functions, the add/edit form is formed in DialogBoxEditHandler.js. The js internally calls a template to create the form.

The created form contains the below two buttons, for which I need to add beforeSubmit event.

<Button id="lnk-close" onclick="closeDialogBoxControl($(this).closest('form'));" class="btn-default">Close</Button>
<Button id="lnk-submit" onclick="save_form_data($(this).closest('form'),true,'72');MD.ui.reloadGrid();"  class="btn-primary ui-dialog-close">Save</Button>

Answer 1

It seems you put this question second time. The documenatation for this is here

Basically in this case you will need to define that event and return the appropriate array. Using the help provided in the link when you click the custom button defined in a onclick event you can do this:

...
jQuery("#grid_id").jqGrid('editGridRow', rowid, {
    ...
    beforeSubmit : function( postdata, formid ) {
        if(someconditionOK) {
            return [true,''];
        } else {
            return [false,'Error submiting data'];
        }
    },
    ...
});