요청 시 트리 그리드 로드

    The Ignite UI for Angular IgxTreeGrid can be rendered in such way that it requires the minimal amount of data to get from the server so the user could see it as quickly as possible. Then, only after the user expands a row, the children for that particular parent row will be loaded. This mechanism, also known as Load on Demand, can be easily configured to work with any remote data.

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

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

    The loadChildrenOnDemand callback provides two parameters:

    • parentID - 확장되는 상위 행의 ID입니다.
    • done - 서버에서 자식을 검색할 때 자식과 함께 호출해야 하는 콜백입니다.
    public loadChildren = (parentID: any, done: (children: any[]) => void) => {
    this.dataService.getData(parentID, (children) => done(children));
}

    After the user clicks the expand icon, it is replaced by a loading indicator. When the done callback is called, the loading indicator disappears and the children are loaded. The Tree Grid adds the children to the underlying data source and populates the necessary keys automatically.

    행이 확장되기 전에 자식이 있는지 정보를 제공할 수 있는 방법이 있다면, 입력 속성을 사용할hasChildrenKey 수 있습니다. 이렇게 하면 데이터 객체에서 불리언 속성을 제공해 확장 표시기를 표시할지 알 수 있습니다.

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

    If you want to provide your own custom loading indicator, you may create an ng-template and mark it with the igxRowLoadingIndicator directive. The following code snippet demonstrates how to define such custom template:

    <igx-tree-grid ...>

    ...

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

    API References

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.