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

Horse

Answer 1

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

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.

Bradeord

Works great. Thanks. Now to figure out how you figured that out ;) – Horse

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?? – Castleberry

@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. – Bradeord

hi, I have tried a lot but still not get anything. plz help. $.extend($.jgrid.nav, { alerttext: message, alertcap: header }); $.jgrid.createModal(alertIDs, "<div>" + $.jgrid.nav.alerttext + "</div><span tabindex='0'><span tabindex='-1' id='jqg_alrt'></span></span>",{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(); – Castleberry

@Amit: Sorry, but I don't understand your goal. What you try to do? The ids like tblDeltaDPSStatusEvaluation should correspond the id of the <table>. Moreover $.jgrid.jqID("#tblDeltaDPSStatusEvaluation") part of your code is definitively wrong. You should remove # or just replace all with "tblDeltaDPSStatusEvaluation" only. – Bradeord

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. – Castleberry

@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. – Bradeord

@Amit: You can consider to use $.jgrid.info_dialog method to display your custom message. – Bradeord

Thanks Oleg, thanks a lot. :) info_dialog is working absolutely fine. – Castleberry

Answer 2

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.

Achromatin

Answer 3

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

It worked well for me!

Stutzman

He asked to use the same alert, which implies the same localized message as the JQGrid default. – Subarid