How can I hide the jqgrid completely when no data returned?

Question

I'm having a heck of a time trying to only display my jqGrid when records are returned from my webservice. I don't want it to be collapsed to where you only see the caption bar either, but if that's the best I can do, I suppose that I could put a meaningful message into the caption. Still, I'd much rather just hide the grid and show a "No Records Found" message div block.

I also guess that if worst came to worst, I could do the solution on this question How to display information in jqGrid that there are not any data? (link included as alternate possible solution for others).

I've tried doing a .hide() inside of both the function used when loading the data from a function and the GRIDCOMPLETE event, and neither accomplished hiding the grid. I'm pretty new to JQuery, not to mention pretty new to using jqGrid.

$(document).ready(function() {
    $("#list").jqGrid({
        url: 'Service/JQGridTest.asmx/AssetSearchXml',
        datatype: 'xml',
        mtype: 'GET',
        colNames: ['Inv No', 'Date', 'Amount'],
        colModel: [
            { name: 'invid', index: 'invid', width: 55 },
            { name: 'invdate', index: 'invdate', width: 90 },
            { name: 'amount', index: 'amount', width: 80, align: 'right' }],
        pager: jQuery('#pager'),
        postData: { "testvar": "whatever" },
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: 'id',
        sortorder: "desc",
        viewrecords: true,
        imgpath: 'themes/sand/images',
        caption: 'My first grid',
        gridComplete: function() {
            var recs = $("#list").getGridParam("records");
            if (recs == 0) {
                $("#list").hide();
            }
            else {
                alert('records > 0');
            }
        }
    });

    ...

    <table id="list" class="scroll"></table> 
    <div id="pager" class="scroll" style="text-align:center;"></div>

And tried this too:

$(document).ready(function() {
    $("#list").jqGrid({
        datatype: function(postdata) {
            jQuery.ajax({
                url: 'Service/JQGridTest.asmx/AssetSearchXml',
                data: postdata,
                dataType: "xml",
                complete: function(xmldata, stat) {
                    if (stat == "success") {
                        var thegrid = $("#list")[0];
                        thegrid.addXmlData(xmldata.responseXML);
                        var recs = $("#list").getGridParam("records");

                        if (recs == 0) {
                            $("#list").hide();
                            alert('No rows - grid hidden');
                        }
                        else {
                            alert(recs);
                        }
                    }
                    else {
                        alert('FAIL');
                    }
                }
            });
        },
        mtype: 'GET',
        colNames: ['Inv No', 'Date', 'Amount'],
        colModel: [
            { name: 'invid', index: 'invid', width: 55 },
            { name: 'invdate', index: 'invdate', width: 90 },
            { name: 'amount', index: 'amount', width: 80, align: 'right' }],
        pager: jQuery('#pager'),
        postData: { "testvar": "whatever" },
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: 'id',
        sortorder: "desc",
        viewrecords: true,
        imgpath: 'themes/sand/images',
        caption: 'My first grid'
    });

    ...

    <table id="list" class="scroll"></table> 
    <div id="pager" class="scroll" style="text-align:center;"></div>

Thanks for any help you can provide.

Answer 1

jqGrid wraps your table with it's special sauce and divs so you should be able to do what you want by wrapping that table with your own div that you can hide:

 <div id="gridWrapper">
    <table id="list" class="scroll"></table> 
 </div>

Then in your gridComplete:

   gridComplete: function() {
        var recs = parseInt($("#list").getGridParam("records"),10);
        if (recs == 0) {
            $("#gridWrapper").hide();
        }
        else {
            $('#gridWrapper').show();
            alert('records > 0');
        }
    }

Hope this helps.

Answer 2

Attempting to use the suggestion. I added the code (see below). I set it to hide the jqGrid whether there is data or not. However, it always shows the grid. I know it is working as I get the popup box.

What am I missing?

Tom

<div id="gridwrapper">
    <div id="search"></div>
    <table id="grid" class="scroll" cellpadding="0" cellspacing="0"></table>
    <div id="pager" class="scroll" style="text-align:center;"></div>
</div>

function handleGridComplete() { var recs = parseInt($("#grid").getGridParam("records"),10); if (recs = 0) {
$("gridwrapper").hide(); alert("No records returned!"); } else {
$("gridwrapper").hide(); alert("Records returned."); }

}

Answer 3

I'm finding that this:

parseInt($("#grid").getGridParam("records"),10);

is returning a "NaN." The "records" property is set to null if there are no records in the grid. So you can't cast it to a number and check to see if it equals zero.

Answer 4

    <!-- table for Pagination START -->
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <div id="pager" class="scroll" style="text-align: right;">
                </div>
            </td>
        </tr>
    </table>
    <!-- table for Pagination END -->
    <table id="tblCompany" class="scroll" width="100%" cellpadding="0" cellspacing="0">
    </table>
<div id="NoRecord" class="NoRecord">
    <%: CommonText.NoRecords%> </div>

JqGrid No Records Check

gridComplete: function () {

                var recs = $("#").getGridParam("records");
                if (recs == 0 || recs == null) {
                    $(tableContacts).setGridHeight(100);
                    $("#NoRecordContact").show();
                }
            }

Answer 5

just a little twist on seth's solution:

1. you can use in place of var recs = $('#list').jqGrid('getGridParam','records');

   var recs = $('#list').jqGrid('getGridParam','reccount');

   jqGrid grid option 'records' default value = 'None'

   jqGrid grid option 'reccount' defaults to 0 and will always return a number even when there are no records (returns 0)

   see wiki:options @ jqGrid Wiki

2. If you don't want to use a wrapping div you can hide the whole jqGrid using $('.ui-jqgrid').hide() or $('.ui-jqgrid').show().

   The ui-jqgrid class is only used for the jqGrid parent.