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.

    Estrategia de valores de columna única

    Los elementos de la lista dentro del cuadro de diálogo Filtrado de estilos de Excel representan los valores únicos para la columna respectiva. La cuadrícula jerárquica genera estos valores en función de su fuente de datos de forma predeterminada. En caso de filtrado remoto, los datos de la cuadrícula no contienen todos los datos del servidor. Para proporcionar los valores únicos manualmente y cargarlos a pedido, podemos aprovechar la entrada uniqueColumnValuesStrategy de Hierarchical Grid. 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.

    Cuando se proporciona la entrada uniqueColumnValuesStrategy, no se utilizará el proceso de generación de valores únicos predeterminado en el filtrado de 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>
html
    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));
}
typescript

    Demostración de estrategia de valores de columna únicos

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

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

    Para proporcionar una plantilla de carga personalizada para el filtrado de estilos de Excel, podemos usar la directiva igxExcelStyleLoading:

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

    Localización remota

    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)
        );
    }
}
typescript

    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();
        }
    }
}
typescript

    Ahora podemos elegir entre configurar nuestra propia plantilla de paginación personalizada o usar la predeterminada que proporciona igx-paginator. Primero echemos un vistazo a lo que es necesario para configurar la paginación remota utilizando la plantilla de paginación predeterminada.

    Localización remota con plantilla predeterminada

    Si desea utilizar la plantilla de paginación predeterminada, debe configurar la propiedad totalRecords del Paginador, solo entonces la cuadrícula podrá calcular el número total de páginas en función del total de registros remotos. 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. Es por eso que deberíamos establecer la propiedad pagingMode de Grid en GridPagingMode.remote. También es necesario suscribirse a los eventos pagingDone o perPageChange para poder recuperar los datos de su servicio remoto; depende del caso de uso qué evento se utilizará.

    <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>
html
    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);
}
typescript

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Localización remota con contenido igx-paginator personalizado

    Cuando definimos el contenido de un paginador personalizado, necesitamos definir el contenido de manera que obtenga los datos solo para la página solicitada y pase los parámetros de salto y superior correctos al servicio remoto de acuerdo con la página seleccionada y los elementos perPage. Usaremos <igx-paginator> para facilitar nuestra configuración de ejemplo, junto con IgxPageSizeSelectorComponent e IgxPageNavigationComponent que se introdujeron: igx-page-size agregará el menú desplegable y la etiqueta por página y igx-page-nav agregará los botones y etiquetas de 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>
html
    @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();
            }
        );
}

typescript

    Para que la paginación remota se configure correctamente, se debe configurar GridPagingMode.Remote:

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

    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>
html

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

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Problemas conocidos y limitaciones

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

    Referencias de API

    App Builder | CTA Banner

    Recursos adicionales

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