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 capti

Answer 1

It is enough to not include the "caption" option in the definition of the grid. Tested with version 5.0.1

Answer 2

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 3

Try this (Keep JqGrid inside a div). Also create a label to display a meesage.
                        <label style="font-weight:bold;color:red;font-size:11px;" id="lblValMessage"></label>

  <div align="center" class='content' id="divForImageResult">
                                <div style="padding-left:50px;">
                                </div>
                                <table id="EmpTable"></table>
                                <div id="EmpPager">
                                </div>
                            </div>
And then write this after ajax call
   gridComplete: function () {
                                var recs = parseInt($("#EmpTable").getGridParam("records"), 10);
                                if (isNaN(recs) || recs == 0) {
                                    document.getElementById("lblValMessage").innerHTML = "No data found.";

                                    $("#divForImageResult").hide();

                                }
                                else {
                                    $('#divForImageResult').show();

                                }
                            }

                        });

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;" />
        </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 set opacity:0 for jqgrid element. it will work also.

Answer 6

Suppose you have below tag in which you will be creating jqgrid:

<div id=jqgridcontent>
<table id="jqgridtab"></table>
</div>

Now in your js script in jqgrid code you can modify loadcomplete option as:

loadComplete: function () {

if(jQuery("#jqgridtab").getDataIDs().length==0){
            noDataError();
        }
    }

Defination of noDataError will as:

function noDataError(){
       document.getElementById("jqgridcontent").style.visibility="hidden";
       document.getElementById("jqgridcontent").style.display="none"; 
}