Operaciones de datos remotos en cuadrícula jerárquica Angular

    La cuadrícula jerárquica Ignite UI for Angular admite operaciones de datos remotas, como virtualización remota, clasificación remota, filtrado remoto y otras. Esto permite al desarrollador realizar estas tareas en un servidor, recuperar los datos que se producen y mostrarlos en la cuadrícula jerárquica.

    De forma predeterminada, la cuadrícula jerárquica utiliza su propia lógica para realizar operaciones de datos. Puede realizar estas tareas de forma remota y alimentar los datos resultantes a la cuadrícula jerárquica aprovechando ciertas entradas y eventos, que están expuestos por la cuadrícula jerárquica.

    Unique Column Values Strategy

    Los elementos de la lista dentro del diálogo de Filtrado de Estilo Excel representan los valores únicos de la columna correspondiente. La Cuadrícula Jerárquica genera estos valores por defecto basándose en su fuente de datos. En caso de filtrado remoto, los datos de la red no contienen todos los datos del servidor. Para proporcionar los valores únicos manualmente y cargarlos bajo demanda, podemos aprovechar la entrada deuniqueColumnValuesStrategy la Red Jerárquica. Esta entrada es en realidad un método que proporciona tres argumentos:

    • columna: la instancia de columna respectiva.
    • filteringExpressionsTree: el árbol de expresiones de filtrado, que se reduce según la columna respectiva.
    • done: devolución de llamada que debe llamarse con los valores de columna recién generados cuando se recuperan del servidor.

    El desarrollador puede generar manualmente los valores de columna únicos necesarios en función de la información proporcionada por la columna y los argumentos filteringExpressionsTree y luego invocar la devolución de llamada hecha.

    Note

    Cuando se proporciona launiqueColumnValuesStrategy entrada, no se utilizará el proceso generador de valores únicos por defecto en el filtrado estilo Excel.

    <igx-hierarchical-grid #hierarchicalGrid [primaryKey]="'Artist'" [data]="data" [filterMode]="'excelStyleFilter'"
                       [uniqueColumnValuesStrategy]="singersColumnValuesStrategy">
    ...
    <igx-row-island [primaryKey]="'Album'" [allowFiltering]="true" [filterMode]="'excelStyleFilter'"
                    [uniqueColumnValuesStrategy]="albumsColumnValuesStrategy">
        ...
    </igx-row-island>
</igx-hierarchical-grid>

    public singersColumnValuesStrategy = (column: ColumnType,
                                      columnExprTree: IFilteringExpressionsTree,
                                      done: (uniqueValues: any[]) => void) => {
// Get specific column data for the singers.
this.remoteValuesService.getColumnData(
    null, 'Singers', column, columnExprTree, uniqueValues => done(uniqueValues));
}

public albumsColumnValuesStrategy = (column: ColumnType,
                                     columnExprTree: IFilteringExpressionsTree,
                                     done: (uniqueValues: any[]) => void) => {
// Get specific column data for the albums of a specific singer.
const parentRowId = (column.grid as any).foreignKey;
this.remoteValuesService.getColumnData(
    parentRowId, 'Albums', column, columnExprTree, uniqueValues => done(uniqueValues));
}

    Unique Column Values Strategy Demo

    Para proporcionar una plantilla de carga personalizada para el filtrado en estilo Excel, podemos usar laigxExcelStyleLoading directiva:

    <igx-hierarchical-grid [data]="data" [filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy">
    ...
    <ng-template igxExcelStyleLoading>
        Loading ...
    </ng-template>
</igx-hierarchical-grid>

    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.

    @Injectable()
export class RemotePagingService {
    public remoteData: BehaviorSubject<any[]>;
    public dataLenght: BehaviorSubject<number> = new BehaviorSubject(0);
    public url = 'https://www.igniteui.com/api/products';

    constructor(private http: HttpClient) {
        this.remoteData = new BehaviorSubject([]) as any;
    }

    public getData(index?: number, perPage?: number): any {
        let qS = '';

        if (perPage) {
            qS = `?$skip=${index}&$top=${perPage}&$count=true`;
        }

        this.http
            .get(`${this.url + qS}`).pipe(
                map((data: any) => data)
            ).subscribe((data) => this.remoteData.next(data));
    }

    public getDataLength(): any {
        return this.http.get(this.url).pipe(
            map((data: any) => data.length)
        );
    }
}

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

    export class HGridRemotePagingSampleComponent implements OnInit, AfterViewInit, OnDestroy {
    public data: BehaviorSubject<any> = new BehaviorSubject([]);
    private _dataLengthSubscriber;

    constructor(private remoteService: RemotePagingService) {}

    public ngOnInit() {
        this.data = this.remoteService.remoteData.asObservable();

        this._dataLengthSubscriber = this.remoteService.getDataLength().subscribe((data) => {
            this.totalCount = data;
            this.grid1.isLoading = false;
        });
    }

    public ngOnDestroy() {
        if (this._dataLengthSubscriber) {
            this._dataLengthSubscriber.unsubscribe();
        }
    }
}

    Ahora podemos elegir entre configurar nuestra propia plantilla de paginación personalizada o usar la predeterminada que proporcionen.igx-paginator Veamos primero qué es necesario para configurar la paginación remota usando la plantilla de paginación predeterminada.

    Remote paging with default template

    Si quieres usar la plantilla de paginación predeterminada necesitas establecer la propiedad deltotalRecords paginador, solo entonces la cuadrícula podrá calcular el número total de página basándose en registros remotos totales. Al realizar una paginación remota, el paginador pasará a la cuadrícula solo los datos de la página actual, por lo que la cuadrícula no intentará paginar la fuente de datos proporcionada. Por eso deberíamos poner la propiedad depagingMode Grid en GridPagingMode.remote. Además, es necesario suscribirse apagingDone eventos de ORperPageChange para obtener los datos de tu servicio remoto; depende del caso de uso qué evento se utilize.

    <igx-hierarchical-grid #hierarchicalGrid [primaryKey]="'CustomerID'" [pagingMode]="mode">
    <igx-column field="CustomerID"></igx-column>
    ...
    <igx-paginator [(page)]="page" [(perPage)]="perPage" [totalRecords]="totalCount"
        (pagingDone)="paginate($event.current)" (perPageChange)="getFirstPage()">
    </igx-paginator>
</igx-hierarchical-grid>

    public totalCount = 0;
public data: Observable<any[]>;
public mode = GridPagingMode.remote;
public isLoading = true;
@ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;

private _dataLengthSubscriber;

public set perPage(val: number) {
    this._perPage = val;
    this.paginate(0);
}

public ngOnInit() {
    this.data = this.remoteService.remoteData.asObservable();

    this._dataLengthSubscriber = this.remoteService.getDataLength().subscribe((data: any) => {
        this.totalCount = data;
        this.grid1.isLoading = false;
    });
}

public ngAfterViewInit() {
    const skip = this.page * this.perPage;
    this.remoteService.getData(skip, this.perPage);
}

public paginate(page: number) {
    this.page = page;
    const skip = this.page * this.perPage;
    const top = this.perPage;

    this.remoteService.getData(skip, top);
}

    Remote Paging with custom igx-paginator-content

    Cuando definimos el contenido de un paginador personalizado, necesitamos definir el contenido de manera que los datos solo correspondan a la página solicitada y que pasemos los parámetros correctos de salto y superior al servicio remoto según la página y los elementosperPage seleccionados. Vamos a usar el<igx-paginator> para facilitar nuestra configuración de ejemplo, junto con losIgxPageSizeSelectorComponent queIgxPageNavigationComponent se han introducido,igx-page-size añadiremos el desplegable por página y etiquetar, yigx-page-nav añadiremos los botones y etiquetas de la acción de navegación.

    <igx-paginator #paginator
    [totalRecords]="totalCount"
    [(perPage)]="perPage"
    [(page)]="page"
    [selectOptions]="selectOptions"
    (pageChange)="paginate($event)"
    (perPageChange)="perPageChange($event)">
    <igx-paginator-content>
        <igx-page-size></igx-page-size>
        [This is my custom content]
        <igx-page-nav></igx-page-nav>
    </igx-paginator-content>
</igx-paginator>

    @ViewChild('hierarchicalGrid', { static: true }) public hierarchicalGrid: IgxHierarchicalGridComponent;

public ngOnInit(): void {
    this._dataLengthSubscriber = this.remoteService.getDataLength(
        { parentID: null, rootLevel: true, key: 'Customers' }).subscribe((length) => {
            this.totalCount = length;
        });
}

public ngAfterViewInit() {
    this.hierarchicalGrid.isLoading = true;
    this._dataSubscriber = this.remoteService.getData({parentID: null, rootLevel: true, key: 'Customers' }, 0, this.perPage)
        .subscribe((data) => {
            this.hierarchicalGrid.isLoading = false;
            this.data.next(data);
        },(error) => {
                this.hierarchicalGrid.emptyGridMessage = error.message;
                this.hierarchicalGrid.isLoading = false;
                this.hierarchicalGrid.cdr.detectChanges();
            }
        );
}
    Note

    Para que la paginación remota esté configurada correctamente,GridPagingMode.Remote debe establecerse:

    <igx-hierarchical-grid #hierarchicalGrid [data]="data | async" [primaryKey]="'CustomerID'"
    [height]="'550px'" [width]="'100%'" [pagingMode]="mode"></igx-hierarchical-grid>
...
public mode = GridPagingMode.Remote;

    El último paso será declarar el contenido del paginador según sus requisitos.

    <igx-paginator-content>
    <igx-page-size></igx-page-size>
    [This is my custom content]
    <igx-page-nav></igx-page-nav>
</igx-paginator-content>

    Después de todos los cambios anteriores, se logrará el siguiente resultado.

    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
    • En escenarios de datos remotos, cuando la cuadrícula tiene unprimaryKey argumento set,rowSelectionChanging.oldSelection evento no contendrá el objeto de datos completo de fila para las filas que actualmente están fuera de la vista de datos. En este caso,rowSelectionChanging.oldSelection object contendrá solo una propiedad, que es elprimaryKey campo. Para el resto de las filas, actualmente en la vista de datos,rowSelectionChanging.oldSelection contendrán los datos completos de la fila.

    API References

    Additional Resources

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