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>

Pardue

You need to provide your code if you expect to get help on this matter. – Eggert

@AnteJablanAdamović: It's a question in general. I am not facing any problem with the code I have written. This is a new implementation and not found any help on google. Believe my question explains what I need exactly. – Pardue

It does not, without seeing your code we don't know how you bound the beforeSubmit event therefore we can't help you. – Eggert

@AnteJablanAdamović: Sorry, If I am harsh to you in anyway. The thing is that, I cannot post the code to any public site. Even the complete implementation of my application is in our own customized framework which is written on Java. As being a very rare user of jqgrid thought the question posted is quite simple and understandable. – Pardue

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

Corniculate

Thanks @TonyTomov, now it's clear. Mine is completely different case. Add/Edit forms are built by our own framework which is build on Java. The forms are completely independent of jqgrid. I just get the id from jqgrid row 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 form is formed with the same template. Didn't find any proper way and feel it's impossible to make my custom form inline with jqgrid. So planning to write the validations which were bound to beforeSubmit with onclick action in js. – Pardue

If you use custom form, then naturally you will need to use your custom event before submiting the data. You can use the build in jqGrid form editing. Refer to the docs provided in my answer in order to get alternative solution as descibed in my example code above. – Corniculate

Thanks @TonyTomov, really sorry that I cannot understand the line ("You can use the build in jqGrid form editing.") in your last comment. I would like to summarize the issue as following: we are not using the editing features of jgGrid and as I mentioned above, the jqGrid is only used for listing the data. Now when I submit the changes to server, jqGrid is absolutely unaware. The only thing jqgrid does is, showing the data which is on db. – Pardue

Note: Recently we replaced the jqgrid 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. Now I want to apply the same validations to the replaced custom forms. – Pardue

Sorry for my not good expression. With this, I say, that if you want to use beforeSubmit event you must use build in form editing - in all other cases the event will not work - with simple words you need to write your own custom before submit in case of using your own editing form. – Corniculate

Thanks a lot for the help. :) – Pardue

Answer 2

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

Pardue