jqGrid warning dialog

Question

I have some custom toolbar buttons on a jqGrid. One of them is dependent on a row being selected, just like the built in edit and delete buttons. When the user clicks on it with no row selected, I want the user to be presented with the same warning dialog they are presented with from the built in Edit or Delete buttons. That is, I want to reuse the dialog that the grid uses that says:

Warning Please, select row

Any idea where the grid displays the alert from?

Thanks, Scott

score 8 · Accepted Answer · edited May 23 '17 at 12:13

8

I think that the code could looks like the following

var alertIDs = {themodal: 'alertmod', modalhead: 'alerthd', modalcontent: 'alertcnt'};

$.jgrid.viewModal("#" + alertIDs.themodal,
    {gbox: "#gbox_" + $.jgrid.jqID(this.p.id), jqm: true});
$("#jqg_alrt").focus();

where this.p.id (or $.jgrid.jqID(this.p.id)) can be replaced to the id of the grid. To be more sure that the alert work I do recommend you to use more long code

var alertIDs = {themodal:'alertmod',modalhead:'alerthd',modalcontent:'alertcnt'};
if ($("#"+alertIDs.themodal).html() === null) {
    $.jgrid.createModal(alertIDs,"<div>"+$.jgrid.nav.alerttext+
        "</div><span tabindex='0'><span tabindex='-1' id='jqg_alrt'></span></span>",
        {gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqModal:true,drag:true,resize:true,
        caption:$.jgrid.nav.alertcap,
        top:100,left:100,width:200,height: 'auto',closeOnEscape:true,
        zIndex: null},"","",true);
}
$.jgrid.viewModal("#"+alertIDs.themodal,
    {gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqm:true});
$("#jqg_alrt").focus();

The demo demonstrate the code. It displays the message

enter image description here

every time when you click on the "Click me!" button.

UPDATED: The answer contains the information how one can use the above dialog in free jqGrid. It describes many option. The simplest version contains only one simple call this.modalAlert();. It displays the same alert dialog, which free jqGrid displays internally.

edited May 23 '17 at 12:13

Community

1
1

answered Aug 14 '12 at 21:02

Oleg

220,925
34
403
798

Works great. Thanks. Now to figure out how you figured that out ;) – Doo Dah Aug 14 '12 at 21:24
1

Wow, this is working fine. But I want a little change to this. I want to change the text and heading of the message box to display different messages at different instance. How to achieve that?? – Amit Jan 30 '13 at 06:13
@Amit: In the demo are used explicitly `$.jgrid.nav.alerttext` as the text of the message and `$.jgrid.nav.alertcap` as the title. You can either directly replace `$.jgrid.nav.alerttext` and `$.jgrid.nav.alertcap` as another texts or use `$.expend($.jgrid.nav, {alerttext: "new text", alertcap: "new title"});` to change the texts of default alert message. – Oleg Jan 30 '13 at 06:25
hi, I have tried a lot but still not get anything. plz help. $.extend($.jgrid.nav, { alerttext: message, alertcap: header }); $.jgrid.createModal(alertIDs, "
" + $.jgrid.nav.alerttext + "
",{gbox: "#gbox_tblDeltaDPSStatusEvaluation",jqModal: true,drag: true,resize: true,caption: $.jgrid.nav.alertcap,top: 100,left: 100,width: 200,height: 'auto',closeOnEscape: true},"","",true);$.jgrid.viewModal("#" + alertIDs.themodal, { gbox: "#gbox_" + $.jgrid.jqID("#tblDeltaDPSStatusEvaluation"), jqm: true });$("#jqg_alrt").focus(); – Amit Feb 13 '13 at 06:25
@Amit: Sorry, but I don't understand your goal. What you try to do? The ids like `tblDeltaDPSStatusEvaluation` should correspond the `id` of the ``. Moreover `$.jgrid.jqID("#tblDeltaDPSStatusEvaluation")` part of your code is definitively wrong. You should remove `#` or just replace all with `"tblDeltaDPSStatusEvaluation"` only.
– Oleg Feb 13 '13 at 08:16
Hi Oleg, I want to show my updation status message and custom heading in the message box. I followed the way you have suggested above. But it shows the default "Warning" message box(text is "Please, select row"). I have tried with the code which i pasted above for your reference. I have also removed the # from $.jgrid.jqID("#tblDeltaDPSStatusEvaluation"), but not working. – Amit Feb 13 '13 at 10:36
@Amit: `$.jgrid.nav.alerttext` is the text and the `$.jgrid.nav.alertcap` is the title used in the dialog. If you change the texts you need just replace the above default strings with your custom texts. It's recommended to change values from `alertIDs` to have no conflicts with the existing Alert dialog. – Oleg Feb 13 '13 at 10:43
@Amit: You can consider to use `$.jgrid.info_dialog` method to display your custom message. – Oleg Feb 13 '13 at 10:48
Thanks Oleg, thanks a lot. :) info_dialog is working absolutely fine. – Amit Feb 13 '13 at 11:32

score 2 · Answer 2 · edited May 26 '14 at 12:25

I've just tried Oleg's below solution and it's not working for me.
Doing some debug I realised that $("#"+alertIDs.themodal).html() was 'undefined' for me, so the if case proposed by Oleg wasn't working properly.

I changed this:

if ($("#"+alertIDs.themodal).html() === null) {

into this:

if ($("#"+alertIDs.themodal).html() === null || $("#"+alertIDs.themodal).html() === undefined) {

and is working fine now.

score -1 · Answer 3 · edited Jun 28 '16 at 12:53

-1

$.jgrid.info_dialog.call(this,
    "Warning",              // dialog title
    "Please, select row!"  // text inside of dialog
);

It worked well for me!

edited Jun 28 '16 at 12:53

Frits

7,341
10
42
60

answered Jun 28 '16 at 11:58

kimoduor

504
6
16

He asked to use the same alert, which implies the same localized message as the JQGrid default. – jstuardo Jan 05 '17 at 23:38

jqGrid warning dialog

3 Answers3

Linked