Free jqgrid dialog - jqGrid

Question

Everything,

I am trying to execute a custom warning message, for example, "Select a line" when the toolbar button [top pager] is pressed. I do not want to use alerts.

I followed one of the examples from Oleg (guru JqGrid at least for me !!) i.eStackoverflow reference - jqGrid warning dialog . Demo version of Oleg - http://www.ok-soft-gmbh.com/jqGrid/Warning.htm

Everything works well if I use the version in the same way as in the demo version of Oleg. BUT, if I change jqGrid version 4.8.0, then the same demo does not work :(

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

 <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 if modal usage has changed in a later version?

Best regards, Sundar

Answer 1

First of all, I would recommend you use the latest version of the free jqGrid. 4.9.2. You can download it from GitHub or use the CDN directly (see here). Related 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 a language file

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

The inclusion of the English language file grid.locale-en.js not required since it is now included in the main code of the free jqGrid ( jquery.jqgrid.min.js or jquery.jqgrid.src.js ).

Before I explain the problems in the old demo, I would recommend using the simplified $.jgrid.info_dialog method to create a small dialog. The corresponding code may 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 box will look below

If you want to use text elements from a locale file, then the code can be changed 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 dialog box that displays free jqGrid, if no row is selected, the code can be especially simple

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

In case you cannot customize the texts, but the use is really simple.

If you want to use createModal and viewModal , as in the old demo, you should understand the following. Due to many changes in the free jqGrid. The main compatibility issue in the code: you need to call $.jgrid.createModal , setting this to the grid DOM. Therefore, you need to change $.jgrid.createModal(...) in the old demo to $.jgrid.createModal.call(this,...) . The next problem in the old demo is very simple. The condition $("#"+alertIDs.themodal).html() === null is incorrect in current versions of jQuery, and it is better to use $("#"+alertIDs.themodal).length === 0 . This is the next major issue in the old demo. The complete code may 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 }); } });