Replace default message "Loading..." to Image "Loading.gif" at JQGrid footer

Question

Experts,

I have implemented JQGrid with successfully on my project. My requirement is i would like to replace default message "Loading..." to Image "Loading.gif" at jqgrid footer.

Is this possible to implement this?

I have also attached screen shot for more clarity.

Updated JQGrid footer HTML

Thanks,
Imdadhusen

Answer 1

First of all I recommend you to read two old answers: this and this.

To have the loading div which displays an animated gif and no text you should change the style of the 'loading' class for example like

<style type="text/css">
    .ui-jqgrid .loading {
        background: url(loader1.gif);
        border-style: none;
        background-repeat: no-repeat;
    }
</style>

remove the default text 'Loading...' with $.jgrid.defaults.loadtext='' and move the 'loading' div to the place where you want to have it. It con be needed to adjust some CSS styles additionally. For example

$("#load_list")
    .css({position:'relative',left:'0',float:'left',width:'4px',
          height:'4px','margin-top':'3px'})
    .prependTo('#pager_left');

At the end you will receive something like

See the corresponding demo here.