free jqgrid - jqGrid warning dialog

Question

All,

I'm trying to implement custom warning message like 'Please Select row' when toolbar button[top pager] is pressed. I don't want to use alert!!

I followed one of the examples from Oleg(JqGrid guru atleast to me!!) i.e.Stackoverflow reference - jqGrid warning dialog. Oleg demo reference - http://www.ok-soft-gmbh.com/jqGrid/Warning.htm

All works well if i use the version same as in Oleg demo. BUT if i change the jqGrid version 4.8.0, the same demo not working :(

I used -

<script type="text/javascript"     src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.8.0/js/jquery.jqgrid.src.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.8.0/css/ui.jqgrid.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js"></script>

instead of

<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.0/js/jquery.jqGrid.src.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.0/css/ui.jqgrid.css" />
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.0/js/i18n/grid.locale-en.js"></script>

Any idea whether modal usage changed in later version ?

Best Regards, Sundar

Answer 1

First of all I would recommend you to use the latest version of free jqGrid. It's 4.9.2. You can download it from GitHub or use from CDN directly (see here). The corresponding URLs will be

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.9.2/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.9.2/js/jquery.jqgrid.min.js"></script>

and optionally the language file

<script src="https://cdn.jsdelivr.net/free-jqgrid/4.9.2/js/i18n/grid.locale-de.js"></script>

Including of English locale file grid.locale-en.js is not required, because it's included now in the main code of free jqGrid (jquery.jqgrid.min.js or jquery.jqgrid.src.js).

Before I explain the problems in the old demo I would recommend you to use simplified method $.jgrid.info_dialog to create small dialog. The corresponding code could be

$grid.jqGrid("navButtonAdd", {
    caption: "Click me too!",
    onClickButton: function () {
        $.jgrid.info_dialog.call(this,
            "Warning",              // dialog title
            "Please, select row!",  // text inside of dialog
            "Close",                // text in the button
            { left: 100, top: 100 } // position relative to grid
        );
    }
});

The displayed dialog will be like below

If you want use text elements from locale file then the code could be modified to the following

$grid.jqGrid("navButtonAdd", {
    caption: "Click me too!",
    onClickButton: function () {
        var $self = $(this),
            alertText = $self.jqGrid("getGridRes", "nav.alerttext"),
            alertTitle = $self.jqGrid("getGridRes", "nav.alertcap"),
            bClose = $self.jqGrid("getGridRes", "edit.bClose");
        $.jgrid.info_dialog.call(this,
            alertTitle, // dialog title
            alertText,  // text inside of dialog
            bClose,     // text in the button
            { left: 100, top: 100 } // position relative to grid
        );
    }
});

If you want to display exactly the same alert dialog which displays free jqGrid if no row is selected then the code could be especially simple

$grid.jqGrid("navButtonAdd", {
    caption: "Click me!",
    onClickButton: function () {
        this.modalAlert();
    }
});

In the case you can't customize the texts, but the usage is really simple.

If you want to use createModal and viewModal like in old demo you should understand the following. There are of cause many changes in free jqGrid. The main compatibility problem in the code: one should call $.jgrid.createModal by setting this to the DOM of the grid. So one have to modify $.jgrid.createModal(...) in the old demo to $.jgrid.createModal.call(this,...). The next problem in the old demo very simple. The condition $("#"+alertIDs.themodal).html() === null is wrong in the current versions of jQuery and one should better use $("#"+alertIDs.themodal).length === 0 instead. It's the next main problem in the old demo. The full code could be for example the following

$grid.jqGrid("navButtonAdd", {
    caption: "Click me!",
    onClickButton: function () {
        var $self = $(this),
            p = $self.jqGrid("getGridParam"),
            gridId = p.id,
            alertIDs = {
                themodal: "myalertmod_" + gridId,
                modalhead: "myalerthd_" + gridId,
                modalcontent: "myalertcnt_" + gridId
            },
            alertSelector = "#" + $.jgrid.jqID(alertIDs.themodal),
            alertText = $self.jqGrid("getGridRes", "nav.alerttext"),
            alertTitle = $self.jqGrid("getGridRes", "nav.alertcap");
        if ($(alertSelector).length === 0) {
            $.jgrid.createModal.call(this,
                alertIDs,
                "<div>" + alertText + "</div>",
                {
                    gbox: p.gBox,
                    jqModal: true,
                    drag: true,
                    resize: true,
                    caption: alertTitle,
                    top: 100,
                    left: 100,
                    width: 200,
                    height: "auto",
                    closeOnEscape: true,
                    zIndex: null
                },
                "", "", true);
        }
        $.jgrid.viewModal(
            alertSelector,
            {
                gbox: p.gBox,
                toTop: true
            });
    }
});