How to display custom alert boxes in custom_func of jqgrid

Question

I am using custom function for validating my input on edit. Following is the piece of code.

editrules:{custom: true, custom_func: customValidation}


function customValidation(val, colname) {
        if (val.trim() == "") {
        return [ false,"name is required " ];
        } else {
        return [ true, "" ];
        }
          }

This works fine and it displays an alert if the validation is false. I want to display my custom alert box.

I tried to use my custom alert box like

showCustomBox('ERROR', 'Name is required! ',{title : 'Error: Edit xxx grid'});

 // where the function param means showCustomBox(type, message, heading);
   return[false, ""];

But this displays my alert as well as the default alert. Is there a way to use oly custom alert during return? Pls suggest. Thanks in advance.

which editing mode you use? The problem is that `custom_func` of `editrules` is **common** property used for form editing, inline editing and cell editing. The error message will be shown in **different ways** depend of editing mode. — Oleg, Jul 10 '14 at 13:06

score 6 · Accepted Answer · edited May 23 '17 at 10:32

jqGrid don't provide any direct way to customize validation dialog. Nevertheless one can do make some tricks to implement what you need.

First of all one have to examine how jqGrid implements custom validation. jqGrid calls $.jgrid.checkValues to validate the input data. The method $.jgrid.checkValues calls custom_func if required (see here). Then jqGrid calls here $.jgrid.info_dialog method to display the error message. So one can for example subclass the $.jgrid.info_dialog method to display custom error message in the way like I described in the answer.

I made the demo which demonstrates the approach. The demo have custom validation in "name" column. The validation require that the saved value have to start with the text "test". I used alert to display the custom error message. Below is the main parts of the code which I used in the demo:

var useCustomDialog = false, oldInfoDialog = $.jgrid.info_dialog;
...
$.extend($.jgrid,{
    info_dialog: function (caption, content, c_b, modalopt) {
        if (useCustomDialog) {
            // display custom dialog
            useCustomDialog = false;
            alert("ERROR: " + content);
        } else {
            return oldInfoDialog.apply (this, arguments);
        }
    }
});
...
$("#list").jqGrid({
    ...
    colModel: [
        { name: "name", width: 65, editrules: {
            custom: true,
            custom_func: function (val, nm, valref) {
                if (val.slice(0, val.length) === "test") {
                    return [true];
                } else {
                    useCustomDialog = true; // use custom info_dialog!
                    return [false, "The name have to start with 'test' text!"];
                }
            } } },
        ...
    ],
    ...
});

As the result jqGrid could display the error message like below if one would try to save the data for "Clients" ("name") column which text don't start with "test" text

enter image description here

Thanks so much for such a detailed explanation. This is exactly what I was looking for. — Poppy, Jul 11 '14 at 04:51

How to display custom alert boxes in custom_func of jqgrid

1 Answers1