Web Components Operaciones de datos remotos de cuadrícula jerárquica

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

    Puede realizar estas tareas de forma remota y alimentar los datos resultantes al IgcHierarchicalGridComponent aprovechando ciertas entradas y eventos, que son expuestos por el IgcHierarchicalGridComponent.

    Localización remota

    export class RemotePagingService {
        public static BASE_URL = 'https://data-northwind.indigo.design/';
        public static CUSTOMERS_URL = `${RemotePagingService.BASE_URL}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));
        }
        
        public static getHierarchyDataById(parentEntityName: string, parentId: string, childEntityName: string) {
            return fetch(`${RemotePagingService.BASE_URL}${parentEntityName}/${parentId}/${childEntityName}`)
            .then((result) => result.json());
        }
    
        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 IgcHierarchicalGridComponent 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.hierarchicalGrid = document.getElementById("hGrid") as IgcHierarchicalGridComponent;
            this.pager = document.getElementById('paginator') as IgcPaginatorComponent;
            const ordersRowIsland = document.getElementById("ordersRowIsland") as IgcRowIslandComponent;
            const orderDetailsRowIsland = document.getElementById("orderDetailsRowIsland") as IgcRowIslandComponent;
    
            ordersRowIsland.paginatorTemplate = this.webHierarchicalGridPaginatorTemplate;
            orderDetailsRowIsland.paginatorTemplate = this.webHierarchicalGridPaginatorTemplate;
    
            this._bind = () => {
                window.addEventListener("load", () => {
                    this.pager.perPage = this._perPage;
                    this.loadCustomersData(this.page,this.perPage);
                });
    
                this.pager.addEventListener("perPageChange", ((args: CustomEvent<any>) => {
                  this.perPage = args.detail;
                  this.loadCustomersData(this.page, this.perPage);
                }) as EventListener);
    
                this.pager.addEventListener("pageChange", ((args: CustomEvent<any>) => {
                  this.page = args.detail;
                  this.loadCustomersData(this.page, this.perPage);
                }) as EventListener);
    
                ordersRowIsland.addEventListener("gridCreated", (event: any) => {
                    this.gridCreated(event, "Customers");
                });
        
                orderDetailsRowIsland.addEventListener("gridCreated", (event: any) => {
                    this.gridCreated(event, "Orders");
                });
            }
        
            this._bind();
        }
    ts

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

      private updateUI(): void {
            if (this.hierarchicalGrid && this.data) { // Check if grid and data are available
                this.hierarchicalGrid.data = this.data;
            }
        }
    
        private loadCustomersData(pageIndex?: number, pageSize?: number): void {
            this.hierarchicalGrid.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.hierarchicalGrid.isLoading = false;
              this.updateUI(); // Update the UI after receiving data
            })
            .catch((error) => {
              console.error(error.message);
              this.hierarchicalGrid.data = [];
              this.hierarchicalGrid.isLoading = false;
              this.updateUI();
            })
          }
    ts

    Y, por último, tenemos que manejar el comportamiento detrás de los niveles jerárquicos reales de la Faja Jerárquica

        public gridCreated(event: CustomEvent<IgcGridCreatedEventArgs>, parentKey: string) {
            const context = event.detail;
            const parentId: string = context.parentID;
            const childDataKey: string = context.owner.childDataKey;
    
            context.grid.isLoading = true;
            RemotePagingService.getHierarchyDataById(parentKey, parentId, childDataKey)
            .then((data: any) => {
              context.grid.data = data;
              context.grid.isLoading = false;
              context.grid.markForCheck();
            })
            .catch((error) => {
              console.error(error.message);
              context.grid.data = [];
              context.grid.isLoading = false;
              context.grid.markForCheck();
            });
        }
    
        public webHierarchicalGridPaginatorTemplate = () => {
           return html `
            <igc-paginator 
                id="islandPaginator">
            </igc-paginator>`
        }
    ts

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

    Demostración de paginación remota de cuadrícula

    EXAMPLE

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Problemas conocidos y limitaciones

    • 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
    Ignite UI for Web Components | CTA Banner

    Referencias de API

    Recursos adicionales

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