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.

Chemosynthesis

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

Battleplane

added .ui-jqgrid .loading {background: url(../images/38-1.gif); position: absolute; top: 45%;left: 45%;width: auto;z-index:101;padding: 6px; margin: 5px;text-align: center;font-weight: bold;display: none;border-width: 2px !important;}. I see the animated gif but still that loading... is there. The height and width is not adjusted according to my animated gif. Any help? – Chemosynthesis

@pirzada: I updated my answer with additional information and examples. – Battleplane

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='';

Malda