Carregamento de grade de árvore sob demanda

    A Grade de Árvore Ignite UI for Web Components pode ser renderizada de forma que exija a quantidade mínima de dados para obter do servidor para que o usuário possa vê-la o mais rápido possível. Em seguida, somente depois que o usuário expandir uma linha, os filhos dessa linha pai específica serão carregados. Esse mecanismo, também conhecido como Load on Demand, pode ser facilmente configurado para funcionar com qualquer dado remoto.

    Web Components Tree Grid Load On Demand Example

    Usage

    O recurso Carregar sob Demanda é compatível com os dois tipos de fontes de dados da Grade de Árvore - chaves primárias e estrangeiras ou coleta filho. Você só precisa carregar os dados de nível raiz na grade de árvore 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, a Grade de Árvore fornece a propriedade LoadChildrenOnDemand de entrada de retorno de chamada.

    <igc-tree-grid id="treeGrid"></igc-tree-grid>
    
    constructor() {
        var treeGrid = document.getElementById("treeGrid") as IgcTreeGridComponent;
        treeGrid.data = this.employeesFlatData;
        treeGrid.loadChildrenOnDemand = (parentID: any, done: (children: any[]) => void) => {
        this.getData(parentID, (children) => done(children));
        };
    }
    

    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.getData(parentID, (children) => done(children));
    }
    

    Depois que o usuário clica no ícone de expansão, ele é substituído por um indicador de carregamento. Quando o retorno de chamada done é chamado, o indicador de carregamento desaparece e os filhos são carregados. A Grade de Árvore adiciona os filhos à fonte de dados subjacente e preenche as chaves necessárias automaticamente.

    Se você tiver uma maneira de fornecer informações sobre se uma linha tem filhos antes de sua expansão, poderá 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.

    <igc-tree-grid id="treeGrid" primary-key="ID" foreign-key="ParentID" has-children-key="hasEmployees"></igc-tree-grid>
    

    Observe que a configuração da propriedade HasChildrenKey não é necessária. Caso você não o forneça, os indicadores de expansão serão exibidos para cada linha. Depois de expandir uma linha que não tem filhos, você ainda precisa chamar o retorno de chamada done com array indefinido ou vazio. Nesse caso, depois que o indicador de carga desaparece, o indicador de expansão nunca aparece.

    Se você quiser fornecer seu próprio indicador de carregamento personalizado, poderá usar a opção RowLoadingIndicatorTemplate para definir um modelo personalizado. O snippet de código a seguir demonstra como configurá-lo:

    constructor() {
        var treeGrid = document.getElementById("treeGrid") as IgcTreeGridComponent;
        treeGrid.data = this.employeesFlatData;
        treeGrid.rowLoadingIndicatorTemplate = this.rowLoadingTemplate;
        treeGrid.loadChildrenOnDemand = (parentID: any, done: (children: any[]) => void) => {
                   this.getData(parentID, (children) => done(children));
        };
    
    }
    public rowLoadingTemplate() {
        return html`<igc-icon name="loop" collection="material"></igc-icon>`;
    }
    

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.