BeforeSubmit event on user button in jqgrid user form not working

Question

I am using jqgrid version 4.5.2 with jQuery-3.2.1.

In jqgrid, instead of the edit buttons (add, edit and delete), custom (add, edit and delete) buttons are implemented. Now, when you click on the custom add / edit buttons, the user form opens. Following is the onclick event for custom buttons.

This means that we have replaced jqgrid default edit / add forms with our own custom forms. Earlier we wrote some checks with the beforeSubmit event, which worked perfectly with the default (add / edit) formats for jqgrid. Now I want to apply the same checks to replaced user forms.

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

This user form has custom submit and cancel buttons. Now I would like to add the beforeSubmit event to this submit button. Since the form is customizable, the jqgrids default beforeSubmit event does not work.

Add / edit forms are created by our own infrastructure, which is built in Java. Forms are completely independent of jqgrid. I just get the identifier from the jqgrid row (by double-clicking or pressing the edit button) and pass it to the template, which extracts data from db and forms the edit row form. If the passed id is empty or not found on db, an empty (additional) 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); }; 

Using the above two functions, an add / edit form is generated in DialogBoxEditHandler.js. Js internally calls the template to create the form.

The created form contains the following two buttons, for which I need to add the 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 raised this question a second time. Documenatation for it here

Basically in this case you will need to define this event and return the corresponding array. Using the help provided in the link, when you click the user button defined in the 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']; } }, ... }); 

Answer 2

If we want to use the beforeSubmit event, we must use the assembly in editing the form - in all other cases the event will not work - with simple words we need to write our own user before submitting in case of using our own editing form.