Angular Tree Grid Remote Data Operations

La 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 Tree Grid.

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, debe suscribirse a la salida filteringExpressionsTreeChange para realizar la solicitud adecuada en función de los argumentos recibidos. Utilicemos una colección plana como fuente de datos para nuestro Tree Grid proporcionando una primaryKey y una foreignKey.

También aprovecharemos la función rxjs debounceTime, que emite un valor de la fuente Observable solo después de que haya pasado un lapso de tiempo particular sin otra emisión de fuente. De esta forma la operación remota se activará solo cuando haya pasado 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 integrado de Tree Grid. Podemos deshabilitarlo configurando la entrada filterStrategy de Tree Grid en la instancia NoopFilteringStrategy.

<!-- 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 cuadro de diálogo Filtrado de estilos de Excel representan los valores únicos para la columna respectiva. Tree Grid 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 Tree 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.

Note

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-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 de estilos de Excel, podemos usar la directiva igxExcelStyleLoading:

<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 una cierta cantidad de registros raíz por página sin importar cuántos registros secundarios tengan. Para cancelar el algoritmo de paginación Tree Grid incorporado, que muestra una cierta cantidad de registros sin importar su nivel (raíz o hijo), tenemos que establecer la propiedad perPage en Number.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 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.

Remote paging with default template

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-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 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"
    [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 se configure correctamente, se debe configurar GridPagingMode.Remote:

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

API References

Additional Resources

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

Angular Tree Grid Remote Data Operations