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

Unbelt

Answer 1

I was looking for answer to this one and came up with the following solution, but I'm not talking to the server, so I have to using something besides the 'loadComplete' event. I hooked into the 'gridComplete' event and check to see if there are any records. If not, display your empty text, otherwise hide it.

jQuery('#test').jqGrid({
        ... // some settings
        gridComplete: loadCompleteFunction,
        emptyDataText:'There are no records. If you would like to add one, click the "Add New ..." button below.', // you can name this parameter whatever you want.
        ... // more settings

});

function LoadComplete()
{
    if ($('test').getGridParam('records') == 0) // are there any records?
        DisplayEmptyText(true);
    else
        DisplayEmptyText(false);
}

function DisplayEmptyText( display)
{
    var grid = $('#test');
    var emptyText = grid.getGridParam('emptyDataText'); // get the empty text
    var container = grid.parents('.ui-jqgrid-view'); // find the grid's container
    if (display) {
        container.find('.ui-jqgrid-hdiv, .ui-jqgrid-bdiv').hide(); // hide the column headers and the cells below
        container.find('.ui-jqgrid-titlebar').after('' + emptyText + ''); // insert the empty data text
    }
    else {
        container.find('.ui-jqgrid-hdiv, .ui-jqgrid-bdiv').show(); // show the column headers
        container.find('#EmptyData' + dataObject).remove(); // remove the empty data text
    }
}

Transcontinental

+1 This is really helpfull. Also one might refer to this demo by Oleg for my question. Read the comments section to get the important stuff – Exorcise

Answer 2

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.

Taber

Answer 3

1. Set "rows":[] for json array

2. Append your error container on success as

   onLoadSuccess: function() {
       **var rows = $(this).datagrid("getRows");**
   if(rows.length == 0)
   {
   
     $("#errordiv").show();
     $(".datagrid-view").append('<div class="errordiv" id="errordiv">Ur Message</div>');
   }
   else
    $("#errordiv").hide();
   
   
    }
   

Pentha

Answer 4

$('#grid').jqGrid({
     loadComplete: function() {
            if ($("#grid").getGridParam("records")==0) {
                $("#grid").addRowData(
                $("#grid")
                    .empty()
                    .append('<tr class="yourClass"><td>No records to display</td></tr>')
                 );
            }
        }
});

Batton

Answer 5

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();   
}

Zoomorphism

Answer 6

I found the best way to do this and allow the grid to handle it is to return the default parameters with no rows. For example, I'm using JSON data, so this would be the return JSON.

{"d":"{"page":"1","total":"0","records":"0","rows":[]}"}

Inconspicuous

Tried this and doesn't seem to have any result. Any hidden trick there? – Mer

Answer 7

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.

Gredel

Answer 8

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;
}

Moskva