Carga de rejilla de árbol bajo demanda

    La cuadrícula de árbol de Ignite UI for Web Components se puede representar de tal manera que requiera la cantidad mínima de datos para obtener del servidor para que el usuario pueda verlos lo más rápido posible. A continuación, solo después de que el usuario expanda una fila, se cargarán los elementos secundarios de esa fila principal en particular. Este mecanismo, también conocido como Load on Demand, se puede configurar fácilmente para trabajar con cualquier dato remoto.

    Web Components Tree Grid Load On Demand Example

    Usage

    The Load on Demand feature is compatible with both types of Tree Grid data sources - primary and foreign keys or child collection. You only need to load the root level data in the Tree Grid and specify the necessary keys for one of the data source types. In order to load the child rows when the user expands a row, the Tree Grid provides the callback input property loadChildrenOnDemand.

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

    La devolución de llamada LoadChildrenOnDemand proporciona dos parámetros:

    • parentID: el ID de la fila principal que se está expandiendo.
    • done: devolución de llamada que se debe llamar con los niños cuando se recuperan del servidor.
    public loadChildren = (parentID: any, done: (children: any[]) => void) => {
    this.getData(parentID, (children) => done(children));
}

    Después de que el usuario haga clic en el icono de expansión, se reemplaza por un indicador de carga. Cuando se llama a la devolución de llamada done, el indicador de carga desaparece y se cargan los elementos secundarios. La cuadrícula de árbol agrega los elementos secundarios a la fuente de datos subyacente y rellena automáticamente las claves necesarias.

    Expanding Indicator Visibility

    If you have a way to provide an information whether a row has children prior to its expanding, you could use the hasChildrenKey input property. This way you could provide a boolean property from the data objects which indicates whether an expansion indicator should be displayed.

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

    Note that setting the hasChildrenKey property is not required. In case you don't provide it, expansion indicators will be displayed for each row. After expanding a row that has no children, you still need to call the done callback with undefined or empty array. In this case after the loading indicator disappears, the expansion indicator never shows up.

    Custom Loading Indicator

    If you want to provide your own custom loading indicator, you can use the rowLoadingIndicatorTemplate option to set a custom template.The following code snippet demonstrates how set to it:

    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

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