How to display information in jqGrid that there ar

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

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

$('#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 4

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

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