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

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.

Answer 2

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.

Answer 3

Try using this method to hide jqGrid:

$("#someGridTableName").jqGrid("GridUnload");

Be sure to include:
jquery.jqGrid-x.x.x/src/grid.custom.js file.

See this post that talks more about the above method. Or jqGrid wiki where it talks about this method in the Add on Grid Methods section.

Another point to consider:
Avoid using wrapper (see post) <div> tags on jqGrid to hide it because it's overflow: auto; attribute will not work if you try to make grid columns manually wider and exceed wrapper div's width.
Another words, jqGrid is already equipped with logic to create horizontal scrollbar without help of external divs.

Note: Tested on IE8 & 9

Answer 4

Folks, no need to create divs or use CSS. It is natively available using setGridState:

gridComplete: function ()
  {
    var recs = $('#myGrid').jqGrid('getGridParam', 'reccount');

    if (isNaN(recs) || recs == 0)
    {
      $("#myGrid").jqGrid('setGridState', 'hidden');
    }
    else
    {
      $("#myGrid").jqGrid('setGridState', 'visible');
    }
  }