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

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

Answer 2

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

Answer 3

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":[]}"}

Answer 4

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 5

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

Answer 6

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