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

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 (isNaN(recs) || recs == 0) {            $("#gridWrapper").hide();        }        else {            $('#gridWrapper').show();            alert('records > 0');        }    }

Hope this helps.

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.

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.