jqGrid.info_dialog is not a function, do I have to call extend?

Question

I try to use info_dialog on my jqGrid, but see TypeError: $(...).jqGrid.info_dialog is not a functionin the console.

I have (!) not defined my own info_dialog function. But I can see one it in $.extend($.jgrid, ... like here, so I was expecting it is available by default.

info_dialog : function(caption, content,c_b, modalopt) {
        var mopt = {
            width:290,
            height:'auto',

Do I somehow have to enable it for the grid? Or what else do I have to do so I can use the version defined here (call extend on my grid? ..)

Using 4.6.0 from https://cdnjs.com/libraries/jqgrid
Now using https://cdnjs.com/libraries/free-jqgrid 4.14.1

Answer 1

jqGrid defines not only "standard" methods, which can be used as $("#grid").jqGrid("methodName", ...) or $("#grid").methodName(...), but some other methods. The "standard" methods will be registered under $.fn.jqGrid.methodName (like $.fn.jqGrid.editGridRow function for example) and, if no $.jgrid.no_legacy_api = true; is specified before $.jgrid.no_legacy_api = true;, then under $.fn.methodName too.

In other words there are exist only global object $.fn.jqGrid or $.fn, which contains the "standard" jqGrid methods.

Some other list of methods will be registered under $.jgrid instead of $.fn.jqGrid or $.fn. info_dialog is an example of such method. Thus one should use $.jgrid.info_dialog, $.jgrid.jqID, $.jgrid.htmlEncode, $.jgrid.randId and so on to use such methods. The most of the methods don't require to initialize this (like $.jgrid.randId() $.jgrid.jqID("some.text")), but some methods require that this is initialized to DOM of the grid (the empty <table> used to generate the grid).

For example, you can use

$grid.jqGrid("navButtonAdd", "#pager", {
    caption: "Test",
    onClickButton: function () {
        $.jgrid.info_dialog.call(this,
            "Warning with two buttons",
            "Click the `test` button",
            "Close",
            {
                buttons: [
                    {
                        text: "\"text\" button",
                        id: "buttid",
                        onClick: function() {
                            alert("click...");
                        }
                    }
                ]
            }
        );
    }
});

See https://jsfiddle.net/OlegKi/xLrbdspo/. I use in the demo free jqGrid fork, which I develop, but the same works with the retro version 4.6 of jqGrid, which you use.

The final remark. If you know the syntax of TypeScript, that you can find in free-jqgrid.d.ts answers on many of questions like the usage of info_dialog. The methods and properties of $.jgrid are described here (inclusive info_dialog). You will find here additionally some methods $.fmatter, $.jqm, $.jqDnR and $.unformat which are the part of jqGrid in the same way like $.jgrid.