How to display information in jqGrid that there are not any data?

Question

When jqGrid is empty I want to display single empty row inside the grid with information message that there are not any data. How is this possible? Thanks

Answer 1

I implemented it as follows (although this does depend on the fact I was using the provided pager functionality). All that is displayed when no records are returned is the Caption bar and one Pager bar displaying "No records to view".

Snippet of my code from setting jqGrid default options early (before grid is even loaded on my page):

// jQuery jqGrid default options
$.extend($.jgrid.defaults, {
    pager: '#gridPager',
    emptyrecords: "No records to view", // Unnecessary (default in grid.locale-en.js)
    recordpos: 'left',
    recordtext: "Viewing {0} - {1} of {2}", // Overriding value in grid.locale-en.js
    viewrecords: true
});

Snippet of my code from loading jqGrid:

$('#grid').jqGrid({
    loadComplete: function () {
        // Hide column headers and top pager if no records were returned
        if ($('#grid').getGridParam('records') === 0) {
            $('#grid_toppager').hide();  // I used top & bottom pagers, so I hid one
            $('.ui-jqgrid-htable').hide();
        }
    }
});

EDIT: You could also reference this answer How can I hide the jqgrid completely when no data returned? and do one of two things:

1) Put your message in one div and the grid in another. Hide the grid and show the message.

2) Put your message in a div directly below the grid. Follow my approach above, but hide all pagers (not just one). Show your div in the same event handler. All you should see is the Caption bar and your message div.

Answer 2

I know this question is a little bit old, but for me this worked fine:

$('#tableid').jqGrid({
  ...
  datatype: dataLoad,
  ...
})

function dataLoad(postdata, sid) {
  var id = sid.replace('load_', '');
  var result = loadDataFromServer('/my/server/url', postdata);

  if (result) {
    if (result.records > 0) {
      var thegrid = $("#"+id)[0];
      thegrid.addJSONData(result);
    }
    else
      $("#"+id+" tbody")
       .empty()
       .append('<tr><td class="emptyDataMsg">This table is empty</td></tr>');
  }
}

Basically what I do is to load the data from the server, check if I get some records and if not just empty all the rows in the table and adding a single one width only a row with my custom text. With some CSS, the result is quite neat:

.emptyDataMsg {
  background-color: #EEEEEE;
  border-bottom: 1px solid #CCCCCC;
  color: #666666;
  font-size: 1.2em;
  font-weight: bold;
  padding: 5px;
  text-align: center;
}