validate inline row data in beforeSaveRow event in jqgrid

Question

I am using jqGrid 4.6.0 version for inline add/edit/delete feature. I want to validate the inline row information before submitting it to the server on save button click. For this i have written an ajax call under "beforeSaveRow" event. where i am returning true / false flag based on the output.

below is my code:

jQuery.extend(true, $.jgrid.inlineEdit, {
                beforeSaveRow: function (options, rowid) {

                    var validateFlag = false;
                    var postData = {
                        ID: $("#new_row_ID").val(),
                        Name: $("#new_row_Name").val()
                    }

                    $.ajax({
                        type: "POST",
                        url: validateInlineRowData,
                        dataType: 'json',
                        data: {
                            postData
                        },
                        success: function (response) {

                            if (response.ID > 0) {
                                // display a popup with error message
                                validateFlag = false;
                            }
                            else {
                                // continue with editUrl by setting the flag to 'true'
                                validateFlag = true;
                            }
                        }
                    });                        
                    return validateFlag;
                }
            });

My issue is , even if I set the validateFlag flag to true in else part, the inline save action is not taking place. and if I set the default value of validateFlag to true then my ajax call to validate the row is not taking place.

please help me to solve this issue.

score 0 · Answer 1 · answered Feb 05 '18 at 10:43

The problem you have is the ajax call.

The beforeSaveRow event is executed immediately, but your ajax , which is inside of the beforeSaveRow need time to make the request and return the result, which causes the problems you have You have some options.

One possible solution (not recommended) is to set the ajax flag async to false, but setting this option to false will cause a problems on some browsers and crossdomain requests. More you can read on jQuery documenatation
You can define your custom button (or event action) to save the row and before to save it to call your ajax and inside the ajax (in success event) to cal saveRow function to save it.
You can upgrade to Guriddo jqGrid and use the newly added onEnter event in inline edit where you can do the checking and call saveRow on condition. See example here

validate inline row data in beforeSaveRow event in jqgrid

1 Answers1