Angular Tree Grid Remote Data Operations

El Ignite UI for Angular Tree Grid 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 del árbol.

Angular Tree Grid Remote Data Operations Overview Example

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

Remote Filtering

Para proporcionar filtrado remoto, necesitas suscribirte a lafilteringExpressionsTreeChange salida para hacer la solicitud adecuada basada en los argumentos recibidos. Usemos una colección plana como fuente de datos para nuestra Tree Grid proporcionando unaprimaryKey y unaforeignKey​

También aprovecharemos la función rxjs debounceTime, que emite un valor desde el observable fuente solo después de que haya pasado un periodo de tiempo determinado sin otra emisión de fuente. De este modo, la operación remota se activará solo cuando haya transcurrido el tiempo especificado sin que el usuario la interrumpa.

const DEBOUNCE_TIME = 300;
...
public ngAfterViewInit() {
    ...
    this.treeGrid.filteringExpressionsTreeChange.pipe(
        debounceTime(DEBOUNCE_TIME),
        takeUntil(this.destroy$)
    ).subscribe(() => {
        this.processData();
    });
}

Cuando se proporciona filtrado remoto, normalmente no necesitamos el filtrado incorporado de la Red de Árbol. Podemos desactivarlo configurando lafilterStrategy entrada de la Tree Grid en laNoopFilteringStrategy instancia.

<!-- tree-grid-remote-filtering-sample.html -->

<igx-tree-grid #treeGrid [data]="remoteData | async" primaryKey="ID" foreignKey="ParentID"
               [autoGenerate]="false"
               [filterStrategy]="noopFilterStrategy"
               [allowFiltering]="true">
    <igx-column [field]="'Name'" dataType="string"></igx-column>
    <igx-column [field]="'Title'" dataType="string"></igx-column>
    <igx-column [field]="'Age'" dataType="number"></igx-column>
</igx-tree-grid>

// tree-grid-remote-filtering-sample.ts

public noopFilterStrategy = NoopFilteringStrategy.instance();

public processData() {
    this.treeGrid.isLoading = true;

    const filteringExpr = this.treeGrid.filteringExpressionsTree;

    this._remoteService.getData(filteringExpr, () => {
        this.treeGrid.isLoading = false;
    });
}

La filtración remota deberá realizarse directamente sobre la colección plana. También tendremos que incluir todos los padres de cualquier registro que coincida con la condición de filtrado, independientemente de si los padres coinciden o no con el filtrado (hacemos esto para mantener la jerarquía intacta). El resultado se puede ver a continuación:

Note

Cuando se solicitan datos remotos, la operación de filtrado distingue entre mayúsculas y minúsculas.

Remote Filtering Demo

Puede ver el resultado del código anterior al comienzo de este artículo en la sección Demostración.

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 de Árbol 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 de Árbol. 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-tree-grid #treeGrid [data]="data" [filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy">
    ...
</igx-tree-grid>

public columnValuesStrategy = (column: ColumnType,
                               columnExprTree: IFilteringExpressionsTree,
                               done: (uniqueValues: any[]) => void) => {
    // Get specific column data.
    this.remoteValuesService.getColumnData(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-tree-grid [data]="data" [filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy">
    ...
    <ng-template igxExcelStyleLoading>
        Loading ...
    </ng-template>
</igx-tree-grid>

Remote Paging

En este ejemplo demostraremos cómo mostrar un cierto número de registros raíz por página, sin importar cuántos registros hijos tengan. Para cancelar el algoritmo de paginación Tree Grid incorporado, que muestra un cierto número de registros sin importar su nivel (raíz o hijo), tenemos que establecer laperPage propiedad enNumber.MAX_SAFE_INTEGER.

<igx-tree-grid #treeGrid ...>
        <igx-paginator [perPage]="maxPerPage">
        </igx-paginator>
...

public maxPerPage = Number.MAX_SAFE_INTEGER;

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-tree-grid #treeGrid [data]="data | async" childDataKey="Content" [pagingMode]="mode">
    <igx-column field="Name"></igx-column>
    ...
    <igx-paginator [(page)]="page" [(perPage)]="perPage" [totalRecords]="totalCount"
        (pagingDone)="paginate($event.current)">
    </igx-paginator>
</igx-tree-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"
    [selectOptions]="selectOptions"
    (pageChange)="paginate($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>

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

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

Note

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

<igx-tree-grid #treeGrid [data]="data | async" childDataKey="Content"
        expansionDepth="0" width="100%" height="540px" [pagingMode]="mode"></igx-tree-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

• API de componentes IgxPaginator
• IgxTreeGridComponent API
• IgxTreeGridComponent Styles

Additional Resources

• Paginación
• Descripción general de la cuadrícula de árbol
• Virtualización y rendimiento
• Filtración
• Clasificación
• resúmenes
• Columna en movimiento
• Fijación de columnas
• Cambio de tamaño de columna
• Selección

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

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub