Operaciones de datos remotos de Web Components Grid

    De forma predeterminada, IgcGridComponent utiliza su propia lógica para realizar operaciones de datos.

    Puede realizar estas tareas de forma remota y alimentar los datos resultantes al IgcGridComponent aprovechando ciertas entradas y eventos, que están expuestos por el IgcGridComponent.

    Infinite Scroll

    Un diseño popular para escenarios que requieren recuperar datos por fragmentos desde un punto final es el llamado desplazamiento infinito. Para las cuadrículas de datos, se caracteriza por un aumento continuo de los datos cargados provocado por el desplazamiento del usuario final hasta el final. Los siguientes párrafos explican cómo puede utilizar la API disponible para lograr fácilmente un desplazamiento infinito en IgcGridComponent.

    Para implementar el desplazamiento infinito, debes recuperar los datos en fragmentos. Los datos que ya se han obtenido deben almacenarse localmente y hay que determinar la longitud de un fragmento y cuántos fragmentos hay. También debe realizar un seguimiento del último índice de fila de datos visible en la cuadrícula. De esta manera, utilizando las propiedades StartIndex y ChunkSize, puede determinar si el usuario se desplaza hacia arriba y debe mostrarle los datos ya obtenidos o si se desplaza hacia abajo y debe obtener más datos desde el punto final.

    Lo primero que hay que hacer es obtener el primer fragmento de los datos. Establecer la propiedad es importante, ya que permite que la totalItemCount cuadrícula ajuste el tamaño correcto de su barra de desplazamiento.

    Además, debe suscribirse a la salida, de modo que pueda proporcionar los datos que necesita la DataPreLoad cuadrícula cuando intenta mostrar un fragmento diferente, en lugar del cargado actualmente. En el controlador de eventos, debe determinar si desea capturar nuevos datos o devolver datos que ya están almacenados en caché localmente.

    Infinite Scroll Demo

    EXAMPLE
    NwindData.ts
    NwindService.ts
    TS
    HTML
    CSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    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}`;
    }
}
ts

    Después de declarar el servicio, debemos crear un componente, que será responsable de la construcción y la IgcGridComponent 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();
  }
ts

    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;
    }
  }
ts

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

    Grid Remote Paging Demo

    EXAMPLE
    CustomersWithPageResponseModel.ts
    RemotePagingService.ts
    TS
    HTML
    CSS
    Edit in:

    Ignite UI for Web Components | CTA Banner

    Known Issues and Limitations

    • Cuando la grilla no tiene PrimaryKey configurada y los escenarios de datos remotos están habilitados (al paginar, ordenar, filtrar y desplazar solicitudes de activación a un servidor remoto para recuperar los datos que se mostrarán en la grilla), una fila perderá el siguiente estado después de un dato. solicitud completa:
    • 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.