jqGrid with no data - how to set a more prominent

Question

By default, when having no data, jqGrid displays the message 'No records to view' inside a pager. (My grids use the top pager).

The problem is, the message is easy to miss.

I'd like to make the grid display the message below the top header, in the same place where the rows would show up if there was any data. (in the body layer, as defined in the documentation).

Alternatively, though less desirable, I'd be fine with leaving the message where it is, but showing it in a big, fat, red font-face.

The message has css class ui-paging-info applied, but I can't just update that because the sae class is also used for displaying the message 'X records found', when the datasource is not empty, and I don't want that to be big and red :).

From what I've seen in the jqGrid source, the message is set in the function updatepager.

[...]
pgboxes = ts.p.pager || "";
pgboxes += ts.p.toppager ?  (pgboxes ? "," + ts.p.toppager : ts.p.toppager) : "";
[...]
if(pgboxes) {
    [...]
    if (ts.p.viewrecords){
        if(ts.p.reccount === 0) {
            $(".ui-paging-info",pgboxes).html(ts.p.emptyrecords);
        } 
        else [...]

I'm guessing that's where I should be injecting some custom logic, but I'm not sure how to do that.

I could just hack the jqGrid source, but I'd rather not -> that would be painful for future jqGrid upgrades.

Answer 1

I described in the old answer and this one a way how one can implement your requirements.

The demo uses the current 4.6.0 version of jqGrid and displays

In case of some data need be displayed the grid looks like on another demo

If I correctly understand your question the demos should do what you need.