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