user244394 user244394 - 7 months ago 285
Javascript Question

Jqgrid how to add custom custom error to display in table

How can i add a custom error message to display in the jqgrid table if there is no data or data is not found
is it possible do?

here is my code blow and screen grab

Code

<script type="text/ecmascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js"></script>

<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.1/js/jquery.jqgrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
$(document).ready(function () {

var mydata;
var collateralid= getQueryUrlString("id");
console.log(collateralid);

$(".monitoring-red").jqGrid({

url:"json/data-"+collateralid.trim()+".json",
data: mydata,
datatype: "json",
emptyrecords: "0 records found",
postData: {
json: JSON.stringify(mydata)
},
success: function(mydata, textStatus, jqXHR) {
console.log(" data :" +mydata);
},
colModel: [
{ name: 'ClientID', label: 'ClientId',width: 70, key: true,
formatter: "showlink",
formatoptions: {
baseLinkUrl: testUrl,
idName: "",
addParam: function (options) {
return "clientid="+options.rowid+"-20160408" ;
}
}

},
{ name: 'Borrower',label: 'Borrower', align:'right', width: 115 },
{ name: 'Brokerage',label: 'Brokeage', align:'right', width: 125 },
{ name: 'LoanBalance', label: 'Loan Balance',align:'right',width: 100, formatter: 'currency',
formatoptions: { prefix: "$", suffix: " "}},
/*{ label: 'Value1',
name: 'Value1',
width: 80,
sorttype: 'number',
formatter: 'number',
align: 'right'
}, */
{ name: 'MaxLoanAmt', label: 'MaxLoanAmt', width: 120, sorttype: 'number' , align: "right", formatter: 'currency', formatoptions: { prefix: " $", suffix: " "}},
{ name: 'AvailableCredit', label: 'Available Credit', width: 110, sorttype: 'number' , align: "right", formatter: 'currency', formatoptions: { prefix: " $", suffix: " "}},
{ name: 'Watch', label: 'Watch', width: 120, sorttype: 'number' , align: "right", template: "number",formatoptions: {decimalPlaces: 9}},
{ name: 'PledgedValue', label: 'PledgedValue',width: 120, sorttype: 'number', align: "right", formatter: 'currency', formatoptions: { prefix: " $", suffix: " "} },
{ name: 'AverageLTV', label: 'AverageLTV',width: 75, sorttype: 'number', align: "right", formatter: 'currency', formatoptions: { prefix: "", suffix: " "} }

],
additionalProperties: ["Num1"],
beforeProcessing: function (mydata) {
var item, i, n = mydata.length;
for (i = 0; i < n; i++) {
item = mydata[i];
item.LoanBalance = parseFloat($.trim(item.LoanBalance).replace(",", ""));
item.MaxLoanAmt = parseFloat($.trim(item.MaxLoanAmtMaxLoanAmt).replace(",", ""));
item.AvailableCredit = parseFloat($.trim(item.AvailableCredit).replace(",", ""));
// item.Num1 = parseInt($.trim(item.Num1).replace(",", ""), 10);
// item.Num2 = parseInt($.trim(item.Num2).replace(",", ""), 10);
}
},
iconSet: "fontAwesome",
loadonce: true,
rownumbers: true,
cmTemplate: { autoResizable: true, editable: true },
autoResizing: { compact: true },
forceClientSorting: true,
sortname: "Symbol",
height:"auto",
caption: "<b>Collateral Monitoring Red</b>",
viewrecords: true,


errorDisplayTimeout: '', //never expire

loadError: function (jqXHR, textStatus, errorThrown) {
var p = $(this).jqGrid("getGridParam"),
$errorDiv = $(this.grid.eDiv),
$errorSpan = $errorDiv.children(".ui-jqgrid-error");

$errorSpan.html("My custom error message");
$errorDiv.show();
if (p.errorDisplayTimeout) {
setTimeout(function () {
$errorSpan.empty();
$errorDiv.hide();
}, p.errorDisplayTimeout);
}
},



loadComplete: function () {
var $self = $(this),
sum = $self.jqGrid("getCol", "Price", false, "sum"),
sum1 = $self.jqGrid("getCol", "MaxLoanAmt", false, "sum");

$self.jqGrid("footerData", "set", {invdate: "Total:", Price: sum, maxLoanAmt: sum1});
}
});

Answer

There loadError callback since a long time. The old answer for example shows how it could be used. The main problem was that it was no default implementation of the callback fill jqGrid 4.12.1 (see here). Thus the user could see some error message if loading failed.

On the other side I see that the usage of new div.ui-jqgrid-errorbar and the SPAN span.ui-jqgrid-error is not yet described. Thus I created the simple demo for you, which demonstrates it. Additionally I use errorDisplayTimeout option set to 3 sec which can be combined with the error div. The corresponding code is

errorDisplayTimeout: 3000,
loadError: function (jqXHR, textStatus, errorThrown) {
    var p = $(this).jqGrid("getGridParam"),
        $errorDiv = $(this.grid.eDiv),
        $errorSpan = $errorDiv.children(".ui-jqgrid-error");

    $errorSpan.html("My custom error message");
    $errorDiv.show();
    if (p.errorDisplayTimeout) {
        setTimeout(function () {
            $errorSpan.empty();
            $errorDiv.hide();
        }, p.errorDisplayTimeout);
    }
}

In the same way you can display any other error text based on jqXHR, textStatus, errorThrown parameters which are forwarded to loadError from error callback of jQuery.ajax.

If you want to use the same div to display error message on no data you can do this in the same way. It's important to understand that no data will be not interpreted as an error. Thus loadComplete instead of loadError will be called. Inside of the loadComplete callback you still can examine the total number of rows ($(this).jqGrid("getGridParam", "records")) or the number of rows on the current page ($(this).jqGrid("getGridParam", "reccount")) and to display your custom message in the same way like you could display it inside of loadError.

UPDATED: I added new method displayErrorMessage to the latest code on GitHub to simplify working with error div (see the commit). The demo use the new method and the code of loadError are reduced to one line:

errorDisplayTimeout: 3000,
loadError: function (jqXHR, textStatus, errorThrown) {
    $(this).jqGrid("displayErrorMessage", "My custom error message");
}