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

The tricky bit is getting the message to show up spread across the columns. I don't think there's a simple way to do that; you'd have to, say, hide all the columns except the first one, set the first column's width to fill the grid, and put the message in the first column. Then when you reload you'd have to undo all that. It should work, but it's kind of messy.

However, let's say you just want to put the message into the first column and leave the rest empty. Basically, you implement the "loadComplete" event function and manipulate the grid's contents.

Add a property to your grid object like so:

//Various other grid properties...
loadComplete: function() {
     if (jQuery("#grid_id").getGridParam("records")==0) {
          jQuery("#grid_id").addRowData(
                "blankRow", {"firstCol":"No data was found". "secondCol":"", "thirdCol":""
          );
     }
}

Where "#grid_id" is the ID of your grid container, "blankRow" is an arbitrary ID you've given to the new row you've added, and "firstCol", "secondCol" and so forth are the names of the columns.

Answer 2

Place your message inside a div with style: hidden. Place this within your pager div.

In loadComplete event do something like:

if($('#results').getGridParam("records")==0) { 
 $("#noResultsDiv").show();   
}