6

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.

enter image description here

Updated JQGrid footer HTML
enter image description here

Thanks,
Imdadhusen

imdadhusen
  • 2,493
  • 7
  • 40
  • 75

1 Answers1

10

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

enter image description here

See the corresponding demo here.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • 1
    Awesome! Very helpful answer on jQGrid once again Oleg! – FastTrack Jan 05 '13 at 16:53
  • For those looking for a way to do something similar with FontAwesome rather than a gif. Look at my answer here: https://stackoverflow.com/questions/4473690/jqgrid-need-to-change-progress-message-loading/47546944#47546944 – RedSands Nov 29 '17 at 07:09