Operaciones de datos remotos de Web Components Grid

    Por defecto, utilizaIgcGridComponent su propia lógica para realizar operaciones de datos.

    Puedes realizar estas tareas de forma remota y alimentar los datosIgcGridComponent resultantes aprovechando ciertas entradas y eventos que son expuestos por elIgcGridComponent.

    Infinite Scroll

    Un diseño popular para escenarios que requieren obtener datos por bloques desde un punto final es el llamado scroll infinito. En las cuadrículas de datos, se caracteriza por un aumento continuo de los datos cargados que se desencadena cuando el usuario final desplaza hasta el final. Los siguientes párrafos explican cómo puedes usar la API disponible para lograr fácilmente desplazamientoIgcGridComponent infinito.

    Para implementar el scroll infinito, tienes que obtener los datos en bloques. Los datos que ya se han recuperado deberían almacenarse localmente y tienes que determinar la longitud de un fragmento y cuántos fragmentos hay. También tienes que llevar un registro del último índice de filas de datos visible en la cuadrícula. De este modo, usando lasStartIndex propiedades yChunkSize, puedes determinar si el usuario sube y tienes que mostrarle datos ya obtenidos o desplazarse hacia abajo y obtener más datos desde el punto final.

    Lo primero que hay que hacer es recuperar el primer fragmento de los datos. Configurar latotalItemCount propiedad es importante, ya que permite que la cuadrícula tenga el tamaño correcto de su barra de desplazamiento.

    Además, tienes que suscribirte a laDataPreLoad salida para poder proporcionar los datos necesarios para la red cuando intente mostrar un fragmento diferente, en lugar del que está cargado actualmente. En el gestor de eventos, tienes que decidir si buscas nuevos datos o devuelves datos que ya están almacenados en caché localmente.

    Infinite Scroll Demo

    Remote Paging

    La función de localización puede funcionar con datos remotos. Para demostrar esto, primero declaremos que nuestro servicio será responsable de la obtención de datos. Necesitaremos el recuento de todos los elementos de datos para poder calcular el recuento de páginas. Esta lógica se agregará a nuestro servicio.

    export class RemotePagingService {
    public static CUSTOMERS_URL = `https://data-northwind.indigo.design/Customers/GetCustomersWithPage`;
    constructor() {}

    public static getDataWithPaging(pageIndex?: number, pageSize?: number) {
        return fetch(RemotePagingService.buildUrl(RemotePagingService.CUSTOMERS_URL, pageIndex, pageSize))
        .then((result) => result.json())
        .catch((error) => console.error(error.message));
    }

    private static buildUrl(baseUrl: string, pageIndex?: number, pageSize?: number) {
        let qS = "";
        if (baseUrl) {
                qS += `${baseUrl}`;
        }

        // Add pageIndex and size to the query string if they are defined
        if (pageIndex !== undefined) {
            qS += `?pageIndex=${pageIndex}`;
            if (pageSize !== undefined) {
                qS += `&size=${pageSize}`;
            }
        } else if (pageSize !== undefined) {
            qS += `?perPage=${pageSize}`;
        }

        return `${qS}`;
    }
}

    Después de declarar el servicio, necesitamos crear un componente que será responsable de laIgcGridComponent construcción y la suscripción de datos.

    Primero tenemos que enlazar a los eventos relevantes para que cuando cambiemos las páginas y la cantidad de registros que se muestran por página, el servicio remoto obtenga la cantidad correcta de datos

      constructor() {
      this.grid = document.getElementById('grid') as IgcGridComponent;
      this.pager = document.getElementById('paginator') as IgcPaginatorComponent;

      this._bind = () => {
        window.addEventListener("load", () => {
          this.loadData(this.page,this.perPage);
        });

        this.pager.addEventListener("perPageChange", ((args: CustomEvent<any>) => {
          this.perPage = args.detail;
          this.loadData(this.page, this.perPage);
        }) as EventListener);

        this.pager.addEventListener("pageChange", ((args: CustomEvent<any>) => {
          this.page = args.detail;
          this.loadData(this.page, this.perPage);
        }) as EventListener);
      }

      this._bind();
  }

    También necesitamos establecer el método para cargar datos y actualizar la interfaz de usuario en consecuencia:

      private loadData(pageIndex?: number, pageSize?: number): void {
    this.grid.isLoading = true;

    RemotePagingService.getDataWithPaging(pageIndex,pageSize)
    .then((response: CustomersWithPageResponseModel) => {
      this.totalRecordsCount = response.totalRecordsCount;
      this.pager.perPage = pageSize;
      this.pager.totalRecords = this.totalRecordsCount;
      this.page = response.pageNumber;
      this.data = response.items;
      this.grid.isLoading = false;
      this.updateUI(); // Update the UI after receiving data
    })
    .catch((error) => {
      console.error(error.message);
      // Stop loading even if error occurs. Prevents endless loading
      this.grid.isLoading = false;
      this.updateUI();
    })
  }

    private updateUI(): void {
    if (this.grid && this.data) { // Check if grid and data are available
        this.grid.data = this.data;
    }
  }

    Para obtener más información, consulte la demostración a continuación:

    Grid Remote Paging Demo

    Known Issues and Limitations

    • Cuando la cuadrícula noprimaryKey tiene un sistema fijo y los escenarios de datos remotos están habilitados (al paginar, ordenar, filtrar o desplazar las solicitudes de disparo a un servidor remoto para recuperar los datos que se mostrarán en la cuadrícula), una fila perderá el siguiente estado tras completar una solicitud de datos:

    • Selección de fila

    • Fila Expandir/contraer

    • Edición de filas

    • Fijación de filas

    API References

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.