Carregamento de grade de árvore sob demanda

    A Ignite UI for Angular IgxTreeGrid pode ser renderizada de tal forma que exija a quantidade mínima de dados para obter do servidor para que o usuário possa vê-los o mais rápido possível. Então, somente após o usuário expandir uma linha, os filhos para aquela linha pai específica serão carregados. Esse mecanismo, também conhecido como Load on Demand, pode ser facilmente configurado para funcionar com quaisquer dados remotos.

    Angular Tree Grid Load On Demand Example

    Usage

    O recurso Load on Demand é compatível com ambos os tipos de fontes de dados do Tree Grid -primary and foreign keys ou child collection. Você só precisa carregar os dados de nível raiz no Tree Grid e especificar as chaves necessárias para um dos tipos de fonte de dados. Para carregar as linhas filho quando o usuário expande uma linha, o Tree Grid fornece a propriedade de entrada de retorno de chamada loadChildrenOnDemand.

    <igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID"
        [loadChildrenOnDemand]="loadChildren">
        ...
</igx-tree-grid>

    O retorno de chamada loadChildrenOnDemand fornece dois parâmetros:

    • parentID - o ID da linha pai que está sendo expandida.
    • done - retorno de chamada que deve ser chamado com os filhos quando eles forem recuperados do servidor.
    public loadChildren = (parentID: any, done: (children: any[]) => void) => {
    this.dataService.getData(parentID, (children) => done(children));
}

    Após o usuário clicar no ícone de expansão, ele é substituído por um indicador de carregamento. Quando o callback done é chamado, o indicador de carregamento desaparece e os filhos são carregados. O Tree Grid adiciona os filhos à fonte de dados subjacente e preenche as chaves necessárias automaticamente.

    Se você tiver uma maneira de fornecer uma informação se uma linha tem filhos antes de sua expansão, você pode usar a propriedade de entrada hasChildrenKey. Dessa forma, você pode fornecer uma propriedade booleana dos objetos de dados que indica se um indicador de expansão deve ser exibido.

    <igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID"
        [loadChildrenOnDemand]="loadChildren" hasChildrenKey="hasEmployees">
        ...
</igx-tree-grid>

    Observe que a configuração da propriedade hasChildrenKey não é necessária. Caso você não a forneça, os indicadores de expansão serão exibidos para cada linha. Após expandir uma linha que não tem filhos, você ainda precisa chamar o callback done com array indefinido ou vazio. Nesse caso, após o indicador de carregamento desaparecer, o indicador de expansão nunca mais aparecerá.

    Se você quiser fornecer seu próprio indicador de carregamento personalizado, você pode criar um ng-template e marcá-lo com a diretiva igxRowLoadingIndicator. O seguinte trecho de código demonstra como definir tal modelo personalizado:

    <igx-tree-grid ...>

    ...

    <ng-template igxRowLoadingIndicator>
        <igx-icon fontSet="material">loop</igx-icon>
    </ng-template>
</igx-tree-grid>

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.