Jqgrid how to add custom custom error to display in table

Question

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});
            }
        });

score 1 · Accepted Answer · edited May 23 '17 at 10:28

1

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");
}

edited May 23 '17 at 10:28

Community

1
1

answered Apr 17 '16 at 15:06

Oleg

220,925
34
403
798

added the loadError section to my code and updated it. It didnt display the custom error message instead of the regular 404. Do I need to update my library links? – user244394 Apr 18 '16 at 03:57
@user244394: Sorry, but the code which you post don't contains even `` over the JavaScript code. I posted you two demos: one which use free jqGrid 4.13.2 and another which use the latest code from GitHub. You can see that it works. If you want that I help you to find the error in your code then you should post URL to your demo. – Oleg Apr 18 '16 at 04:59
-Thank you i got it to work for most part here is my fiddle https://jsfiddle.net/dev2020/dc62L37z/7/ Is there anyway to change the background color of defauli error from red? Also, how can I add a custom message when there is no data is returned? – user244394 Apr 18 '16 at 16:37
@user244394: You are welcome! The last your demo seems to have the exact code which I posted in my answer. About changing or removing red color: the color come from `gridError: "ui-state-error"` property of the default `guiStyles: "jQueryUI"`. You can define your own guiStyle base of the standard one. For example to remove `"ui-state-error"` one can use `$.jgrid.guiStyles.jQueryCustom = { baseGuiStyle: "jQueryUI", gridError: "" };` and to add `guiStyle: "jQueryCustom"` option to the grid. See [the demo](http://ok-soft-gmbh.com/jqGrid/OK/useErrorDiv2.htm). – Oleg Apr 18 '16 at 20:26
Oleg - I am have additional sets of data that I have added here is my fiddle https://jsfiddle.net/dev2020/dc62L37z/9/ for example Name to Contactnumber , which I do not want to display in the table. I plan to display those data in the webpage but outside the table. Is there any way of displaying outside the table without making another ajax call just for that? – user244394 Apr 19 '16 at 18:37
@user244394: Yes you can. You need just include the names of the properties in `additionalProperties` array. The properties will be saved in the local `data` of the grid. You can use `getLocalRow` to access the data. – Oleg Apr 19 '16 at 18:58
Is there an example on how to go about using it? to show in the page outside jqtabletable grid thanks – user244394 Apr 19 '16 at 19:39
@user244394: Sorry, but all the discussion is far and for from your original question. I'm not sure what exactly you want to implement. It's better that you post new question where you describe clear the problem, which you can't solve. You wrote "I plan to display those data in the webpage but outside the table.". It could be to display a "details" grid for example below of the grid *on selection the row* of the main grid, but I guess only what you need. – Oleg Apr 19 '16 at 19:57

Jqgrid how to add custom custom error to display in table

1 Answers1