Tree component

Shows the nodes in tree structure, each node containing children is collapsible/expandable. Can be integrated with any datasource extending Tree service.

Basic Usage

<adf-tree
    [displayName]="'Tree display name'"
    [loadMoreSuffix]="'subnodes'"
    [emptyContentTemplate]="emptyContentTemplate"
    [nodeActionsMenuTemplate]="nodeActionsMenuTemplate"
    (paginationChanged)="onPaginationChanged($event)">
</adf-tree>

Class members

Properties

Events

Details

Defining your own custom datasource

First of all create custom node interface extending TreeNode interface or use TreeNode when none extra properties are required.

export interface CustomNode extends TreeNode

Next create custom datasource service extending TreeService. Datasource service must implement getSubNodes method. It has to be able to provide both root level nodes as well as subnodes. If there are more subnodes to load for a given node it should add node with LoadMoreNode node type. Example of custom datasource service can be found in Category tree datasource service.

@Injectable({...})
class CustomTreeDatasourceService extends TreeService<TreeNode> {
    ...
    public getSubNodes(parentNodeId: string, skipCount?: number, maxItems?: number): Observable<TreeResponse<TreeNode>> {
        ...
}

Final step is to provide your custom datasource service as tree service in component using TreeComponent.

providers: [
    {
        provide: TreeService,
        useClass: CustomTreeDatasourceService,
    },
]

Enabling nodes selection and listening to selection changes

First step is to provide necessary input value.

<adf-tree
    [displayName]="'Tree display name'"
    [loadMoreSuffix]="'subnodes'"
    [selectableNodes]="true"
    [emptyContentTemplate]="emptyContentTemplate"
    [nodeActionsMenuTemplate]="nodeActionsMenuTemplate"
    (paginationChanged)="onPaginationChanged($event)">
</adf-tree>

Next inside your component get the TreeComponent

@ViewChild(TreeComponent)
public treeComponent: TreeComponent<TreeNode>;

and listen to selection changes.

this.treeComponent.treeNodesSelection.changed.subscribe(
    (selectionChange: SelectionChange<TreeNode>) => {
        this.onTreeSelectionChange(selectionChange);
    }
);