JQGrid, Need to change progress message “Loading…”

Question

I want to change JQGrid "Loading..." message to something with animated gif image. Looked everywhere but couldn't find a way. Anyone please.

Answer 1

Try to use

.ui-jqgrid .loading { background: url(ajax-loader.gif); }

it should work. Some animated gifs can be loaded for example from here. By the way, the div having "Loading..." message has the form

<div id="load_list" class="loading ui-state-default ui-state-active">Loading...</div>

where the id "load_list" will be constructed from the prefix "load_" and the id of the table element.

UPDATED: To remove the text "Loading..." you can either use loadtext:'' jqGrid option or overwrite $.jgrid.defaults.loadtext global setting from the grid.locale-en.js:

$.jgrid.defaults.loadtext='';

If you need to adjust width, height or any other CSS parameter of the loading div you can do it in the same way. For example,

.ui-jqgrid .loading
{
    left: 45%;
    top: 45%;
    background: url(ajax-loader.gif);
    background-position-x: 50%;
    background-position-y: 50%;
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
}

Answer 2

This is perhaps a more modern answer to the question using FontAwesome rather than a gif. I couldn't find where this has been answered anywhere and had to piece it together from various places including the answer above by @oleg.

Hopefully this will be helpful to others searching.

<style>
    .ui-jqgrid .loading {
        background-color: transparent;
        border: 0px;
        -webkit-animation: fa-spin 2s infinite linear;
        animation: fa-spin 2s infinite linear;
    }

    .ui-jqgrid .loading:before {
        content: "\f110";
        font-family: FontAwesome;
        font-size:40px;
    }
</style>

And then place the following (exactly like this) after $(document).ready(function() {

$.jgrid.defaults.loadtext='';