Angular Operações de Dados Remotos de Grade Hierárquica

    O Ignite UI for Angular Hierarchical 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 Hierárquica.

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

    Unique Column Values Strategy

    Os itens de lista dentro da caixa de diálogo Filtragem de Estilo do Excel representam os valores exclusivos para a respectiva coluna. A Grade Hierárquica gera esses valores com base em sua fonte de dados por padrão. No caso de filtragem remota, os dados da grade não contêm todos os dados do servidor. Para fornecer os valores exclusivos manualmente e carregá-los sob demanda, podemos aproveitar a entrada da uniqueColumnValuesStrategy Grade Hierárquica. Essa entrada é, na verdade, um método que fornece três argumentos:

    • 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 a uniqueColumnValuesStrategy entrada é fornecida, o processo de geração de valores exclusivos padrão na filtragem de estilo do Excel não será usado.

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

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

    Unique Column Values Strategy Demo

    Para fornecer um modelo de carregamento personalizado para a filtragem de estilo do Excel, podemos usar a igxExcelStyleLoading diretiva:

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

    Remote Paging

    O recurso de paginação pode operar com dados remotos. Para demonstrar isso, vamos primeiro declarar nosso serviço que será responsável pela busca de dados. Precisaremos da contagem de todos os itens de dados para calcular a contagem de páginas. Essa lógica será adicionada ao nosso serviço.

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

    Após declarar o serviço, precisamos criar um componente, que será responsável pela construção da Grade Hierárquica e assinatura de dados.

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

    Agora podemos escolher entre configurar nosso próprio modelo de paginação personalizado ou usar o padrão que o igx-paginator fornece. Primeiro, vamos dar uma olhada no que é necessário para configurar a paginação remota usando o modelo de paginação padrão.

    Remote paging with default template

    Se você quiser usar o modelo de paginação padrão, precisará definir a propriedade do totalRecords paginador, somente então a grade poderá calcular o número total da página com base no total de registros remotos. Ao executar uma paginação remota, o paginador passará para a grade apenas os dados da página atual, portanto, a grade não tentará paginar a fonte de dados fornecida. É por isso que devemos definir a propriedade de pagingMode Grid como GridPagingMode.remote. Também é necessário assinar pagingDone ou perPageChange eventos para buscar os dados do seu serviço remoto, depende do caso de uso qual evento será usado.

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

    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 de paginador personalizado, precisamos definir o conteúdo de forma a obter os dados apenas para a página solicitada e passar os parâmetros skip e​ ​top corretos para o serviço remoto de acordo com a página e os itens selecionados perPage. Vamos usar o <igx-paginator> para facilitar nossa configuração de exemplo, junto com o e IgxPageNavigationComponent que foram introduzidos IgxPageSizeSelectorComponent-igx-page-size adicionará o menu suspenso e o rótulo por página e igx-page-nav adicionará os botões e rótulos de ação de navegação.

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

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

    Para que a paginação remota seja configurada corretamente, um GridPagingMode.Remote deve ser definido:

    <igx-hierarchical-grid #hierarchicalGrid [data]="data | async" [primaryKey]="'CustomerID'"
    [height]="'550px'" [width]="'100%'" [pagingMode]="mode"></igx-hierarchical-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ão tiver nenhuma primaryKey configuração e os cenários de dados remotos estiverem habilitados (ao paginar, classificar, filtrar, rolar solicitaçõ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 tiver um primaryKey argumento set,event rowSelectionChanging.oldSelection não conterá o objeto de dados de linha completa para as linhas que estão atualmente fora da exibição de dados. Nesse caso, rowSelectionChanging.oldSelection o objeto conterá apenas uma propriedade, que é o primaryKey campo. Para o restante das linhas, atualmente na exibição de dados, rowSelectionChanging.oldSelection conterá os dados da linha inteira.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.