jqGrid - supply no data message in the grid?

Question

If there was no data returned from our search currently we use the loadComplete callback to print out a message to the user to indicate that there is no data. Is th

Answer 1

jqGrid displays "No records to view" message ($.jgrid.defaults.emptyrecords) only at the end of the pager area and only in the case if all following take place

• you define a pager
• viewrecords: true
• the current number of record counts (reccount parameter) is 0.

It is unknown to me any "standard" way to display a message inside of grid data area (on top of the body of grid). It seems to me if you need such message you have to continue to use div placed over the grid body and hide/show it inside of loadComplete event handle.

Answer 2

You can overwrite the body table html to show your message. Use this to do it:

loadComplete: function() {
                if ($('#Grid').getGridParam('records') === 0) {
                    oldGrid = $('#GridIdb2 tbody').html();
                    $('#Grid tbody').html("<div style='padding:6px;background:#D8D8D8'>No records found</div>");
                }
                else
                    oldGrid = "";
             }

Use the oldGrid var as an auxiliar to save what the jqgrid had before you changed; before submit a new search set the old value:

if(oldGrid!=""){
    $("#Grid tbody").html(oldGrid);
}

Answer 3

To Oleg: Yes you are right, since jqGrid shows the message only in the pager i.e. navGrid. So placing one <DIV> after the jqGrid table is the best way to show the message.

To Marcus: See the below approach of what I did in one of the project. I pasted the HTML snippet - and loadComplete implementation, where you have to trigger your logic to show the "No records to show" message.

HTML:

<pre>
  <div class="cols jsGridOuter" style="position:relative;">
    <table id="mandateList" class="jsStretchGridWidth"><tr><td></td></tr></table>
    <div class="noResultsDiv gridNoRecords jstHidden">
      <span class="notice"><label>No records to show</label></span>
    </div>
    <div id="pagination"></div>
  </div>
</pre>

Java Script:

loadComplete: function() {
  if (j$(this).getGridParam("records")==0) 
  {
    j$('div#pagination').hide();
    if (j$('div.noResultsDiv').hasClass('jstHidden'))
    {
      j$('div.noResultsDiv').removeClass('jstHidden');
    }
  }
  else
  {
    j$('div#pagination').show();
    if (j$('div.noResultsDiv').length>0)
    {
      j$('div.noResultsDiv').addClass('jstHidden');
    }
  }
}