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
¿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
Referencias de API
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.