JQGrid, Necesito cambiar el mensaje de progreso "Cargando ..."

Question

Quiero cambiar el mensaje "Cargando ..." de JQGrid a algo con imagen gif animada. Miró por todas partes pero no pudo encontrar una manera. Cualquiera por favor

Answer 1

intenta utilizar

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

que debería funcionar. Algunos gifs animados se pueden cargar, por ejemplo, desde here. Por cierto, el div que tiene "Cargando ..." mensaje tiene la forma

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

donde el "load_list" id se construye a partir del prefijo "load_" y el identificador del elemento de la tabla.

ACTUALIZADO: Para eliminar el texto "Cargando ..." o bien se puede utilizar la opción loadtext:'' jqGrid o sobrescribir $.jgrid.defaults.loadtext configuración global de la grid.locale-en.js:

$.jgrid.defaults.loadtext=''; 

Si es necesario ajustar la anchura, altura o cualquier otro parámetro de CSS del div de carga puede hacerlo de la misma manera. Por ejemplo,

.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

Esta es quizás una respuesta más moderna a la pregunta usando FontAwesome en lugar de un gif. No pude encontrar dónde se ha respondido esto en ningún lado y tuve que reconstruirlo desde varios lugares, incluida la respuesta anterior por @oleg.

Esperemos que esto sea útil para otros que buscan.

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

y luego coloque el siguiente (exactamente como este) después $ (document) ready (function() {

$.jgrid.defaults.loadtext='';