Angular Tree Grid Remote Data Operations

O Ignite UI for Angular Tree Grid suporta operações remotas de dados, como virtualização remota, classificação remota, filtragem remota e outras. Isso permite que o desenvolvedor execute essas tarefas em um servidor, recupere os dados produzidos e os exiba na Grade de Árvore.

Angular Tree Grid Remote Data Operations Overview Example

Por padrão, a Grade de Árvore usa sua própria lógica para executar operações de dados. Você pode executar essas tarefas remotamente e alimentar os dados resultantes na Grade de Árvore aproveitando determinadas entradas e eventos, que são expostos pela Grade de Árvore.

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

A filtragem remota terá que ser executada diretamente na coleção plana. Também teremos que incluir todos os pais para qualquer registro que corresponda à condição de filtragem, independentemente de os pais corresponderem ou não à filtragem (fazemos isso para manter a hierarquia intacta). O resultado pode ser visto abaixo:

Note

Quando dados remotos são solicitados, a operação de filtragem diferencia maiúsculas de minúsculas.

Remote Filtering Demo

Você pode ver o resultado do código acima no início deste artigo na seção Demonstração.

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:

column: a respectiva instância da coluna.
filteringExpressionsTree: a árvore de expressões de filtragem, que é reduzida com base na respectiva coluna.
done- Retorno de chamada que deve ser chamado com os valores de coluna recém-gerados quando eles são recuperados do servidor.

O desenvolvedor pode gerar manualmente os valores de coluna exclusivos necessários com base nas informações, fornecidas pela coluna e pelos argumentos filteringExpressionsTree e, em seguida, invocar o retorno de chamada done.

Note

Quando auniqueColumnValuesStrategy entrada é fornecida, o processo padrão de geração de valores únicos no filtro estilo Excel não será usado.

<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 fornecer um modelo de carregamento personalizado para o filtro no estilo Excel, podemos usar aigxExcelStyleLoading diretiva:

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

Agora podemos escolher entre criar nosso próprio modelo de paginação personalizado ou usar o padrão que elesigx-paginator fornecem. Vamos primeiro dar uma olhada no que é necessário para configurar paginação remota usando o template padrão de paginação.

Remote paging with default template

Se você quiser usar o modelo padrão de paginação, precisa definir a propriedade dototalRecords paginador, só assim a grade poderá calcular o número total da página com base no total de registros remotos. Ao realizar uma paginação remota, o Paginador passa para a Grade apenas os dados da página atual, então a grade não tentará paginar a fonte de dados fornecida. Por isso devemos definir a propriedade dopagingMode Grid como GridPagingMode.remote. Também é necessário assinar eventospagingDone de ORperPageChange para obter os dados do seu serviço remoto, depende do caso de uso qual evento será utilizado.

<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

Quando definimos um conteúdo personalizado para paginador, precisamos definir o conteúdo de forma a obter os dados apenas para a página solicitada e para passar os parâmetros corretos de pular e superior para o serviço remoto, de acordo com a página eperPage os itens selecionados. Vamos usar o<igx-paginator> para facilitar nossa configuração de exemplo, junto com osIgxPageSizeSelectorComponent eIgxPageNavigationComponent que foram introduzidos -igx-page-sizevamos adicionar o menu suspenso por página, o rótulo eigx-page-nav os botões e etiquetas de ação de navegação.

<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 a Paginação Remota seja configurada corretamente,GridPagingMode.Remote deve ser definida:

<igx-tree-grid #treeGrid [data]="data | async" childDataKey="Content"
        expansionDepth="0" width="100%" height="540px" [pagingMode]="mode"></igx-tree-grid>
...
public mode = GridPagingMode.Remote;

A última etapa será declarar o conteúdo do paginador com base em seus requisitos.

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

Após todas as alterações acima, o seguinte resultado será alcançado.

Known Issues and Limitations

Quando a grade nãoprimaryKey tem um set definido e cenários de dados remotos são ativados (ao paginar, ordenar, filtrar, rolar requisições de gatilho para um servidor remoto para recuperar os dados a serem exibidos na grade), uma linha perderá o seguinte estado após a conclusão de uma solicitação de dados:
- Seleção de linha
- Expandir/recolher linha
- Edição de linha
- Fixação de linha
Em cenários de dados remotos, quando a grade tem umprimaryKey argumento set,rowSelectionChanging.oldSelection evento não conterá o objeto de dados da linha completa para as linhas que estão atualmente fora da visualização de dados. Nesse caso,rowSelectionChanging.oldSelection objeto conterá apenas uma propriedade, que é oprimaryKey campo. Para o restante das linhas, atualmente na visualização de dados,rowSelectionChanging.oldSelection conterá os dados da linha inteira.

API References

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

Angular Tree Grid Remote Data Operations