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

To provide remote filtering, you need to subscribe to the filteringExpressionsTreeChange output so that you make the appropriate request based on the arguments received. Let's use a flat collection as a data source for our Tree Grid by providing a primaryKey and a foreignKey.

We will also take advantage of the rxjs debounceTime function, which emits a value from the source Observable only after a particular time span has passed without another source emission. This way the remote operation will be triggered only when the specified amount of time has passed without the user interrupting it.

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

When remote filtering is provided, usually we do not need the built-in filtering of the Tree Grid. We can disable it by setting the filterStrategy input of the Tree Grid to the NoopFilteringStrategy instance.

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

The list items inside the Excel Style Filtering dialog represent the unique values for the respective column. The Tree Grid generates these values based on its data source by default. In case of remote filtering, the grid data does not contain all the data from the server. In order to provide the unique values manually and load them on demand, we can take advantage of the Tree Grid's uniqueColumnValuesStrategy input. This input is actually a method that provides three arguments:

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

In this sample we will demonstrate how to display a certain number of root records per page no matter how many child records they have. In order to cancel the built-in Tree Grid paging algorithm, which displays a certain number of records no matter their level (root or child), we have to set the perPage property to 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 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

Additional Resources

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

Angular Tree Grid Remote Data Operations