es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

ag-grid sigue mostrando el ícono de carga cuando no se devuelve ningún dato del servidor.

Me enfrento a un comportamiento extraño en Ag-grid (Angular). Cuando uso la opción serverSide y no se devuelven datos desde el servidor, la cuadrícula muestra el ícono de carga para todas las filas mencionadas en cacheBlockSize. He intentado muchas opciones para ocultar estas filas de carga vacías, pero nada ha funcionado.

He intentado replicar lo mismo en la página de ejemplo oficial. Por suerte pude replicar el comportamiento similar. Consulta esta versión editada de una página de ejemplo oficial, donde estoy pasando un array vacío desde la llamada falsa al servidor:

https://plnkr.co/edit/Egw9ToJmNE7Hl6Z6

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

this.http
  .get('https://www.ag-grid.com/example-assets/olympic-winners.json')
  .subscribe((data) => {
    let idSequence = 0;
    data.forEach((item) => {
      item.id = idSequence++;
    });
    const server = new FakeServer(data);
    const datasource = new ServerSideDatasource(server);
    params.api.setServerSideDatasource(datasource);
  });
}

function ServerSideDatasource(server) {
  return {
    getRows: (params) => {
      setTimeout(() => {
        const response = server.getResponse(params.request);
        if (response.success) {
          params.successCallback(response.rows, response.lastRow);
        } else {
          params.failCallback();
        }
      }, 2000);
    },
  };
}
function FakeServer(allData) {
  return {
    getResponse: (request) => {
      console.log(
        'asking for rows: ' + request.startRow + ' to ' + request.endRow
      );
      const rowsThisPage = allData.slice(request.startRow, request.endRow);
      const lastRow = allData.length <= request.endRow ? data.length : -1;
      return {
        success: true,
        rows: [],
        lastRow: lastRow,
      };
    },
  };
}

La captura de pantalla de la salida del plunker se muestra a continuación.

Official plunker example edited with empty array

Tags:  ,

Answer

  1. Avatar for davy.ai

    El problema ocurre debido a que cuando el servidor no devuelve datos para un bloque particular de filas, Ag-grid sigue mostrando el ícono de carga para esas filas. Esto se debe a que la opción cacheBlockSize define la cantidad de filas que Ag-grid debe pre-cargar a la vez. Por lo tanto, cuando el servidor no tiene datos para un bloque de filas, Ag-grid todavía está esperando que ese bloque se llene de datos.

    Para ocultar o eliminar las filas de carga, puede establecer la propiedad suppressNoRowsOverlay en true. Esto eliminará las filas de carga y las reemplazará con un mensaje vacío, que se puede personalizar utilizando la propiedad localeText. Esto se puede hacer configurando las siguientes opciones en el objeto gridOptions:

    gridOptions: {
      ...
      suppressNoRowsOverlay: true,
      localeText: { 
        noRowsToShow: 'Mensaje personalizado para cuando no hay filas para mostrar.' 
        // también puede personalizar otros mensajes para la superposición
      }
      ...
    }
    

    Alternativamente, también puede establecer la propiedad suppressLoadingOverlay en true, lo que eliminará por completo la superposición de carga. Sin embargo, esto puede no ser recomendable si necesita mostrar un indicador de carga en ciertos casos.

    gridOptions: {
      ...
      suppressLoadingOverlay: true,
      ...
    }
    

    Tenga en cuenta que estas opciones están disponibles en Ag-grid versión 21 y superior. Para versiones anteriores, es posible que deba utilizar la propiedad noRowsOverlayComponent para personalizar la superposición.

Comments are closed.