savearound-tree-plugin

An angular (2/4/5) plugin to display treeview

Features

• Tree view with infinite levels
• lazy loading (load once/always)
• treeview input field with dropdown/overlay
• single-select node with radio button
• multi-select nodes with checkbox
• delete node
• add child node (freedom to create your own form to add child)
• search the tree

Installation

To install this library, run:

$ npm install savearound-tree-plugin --save

Consuming your library

Add it in your AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import SpTreeviewModule
import { SpTreeviewModule } from 'savearound-tree-plugin';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify SpTreeviewModule as an import
    SpTreeviewModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once savearound-tree-plugin is imported, you can use its components in your Angular application:

<!-- You can now use your library component in app.component.html -->
<h1>
  {{title}}
</h1>

<sp-treeview [nodes]="nodes" [config]="config" (change)="onChange($event)" (delete)="onDelete($event)" (addChild)="onAddChild($event)" (loadChildren)="onLoadChildren($event)"></sp-treeview>

or

<sp-treeview-dropdown [placeholder]="'placeholder'" [nodes]="nodes" [config]="config" (delete)="onDelete($event)" (addChild)="onAddChild($event)" (loadChildren)="onLoadChildren($event)" (change)="onChange($event)"></sp-treeview-dropdown>

or

<sp-treeview-overlay [placeholder]="'placeholder'" [nodes]="nodes" [config]="config" (delete)="onDelete($event)" (addChild)="onAddChild($event)" (loadChildren)="onLoadChildren($event)" (change)="onChange($event)"></sp-treeview-overlay>

  // app.component.ts

  nodes: Node[] = [];
  config: new Config();

  constructor() {
    this.nodes = Node.toNodeArray(/*json response from service call*/);
  }

  onLoadChildren(node: Node) {
    // service call to load children of node
    node.loadChildren(Node.toNodeArray(/*response from service call*/));
  }

  onDelete(node: Node) {
    // make service call to delete the node
    // on success
    node.removeMe(); // issue with removing root node refresh tree until fixed
    // on failure notify user
  }

  onAddChild(node: Node) {
    // create & open form to add new node
    // onSubmit make a service call
    // on success response 
    node.addChild(Node.toNodeArray([/*newly created child node*/])[0]);
    // on failure response notify user
  }

  onChange(nodes: Node[]) {
    // selected nodes can be saved locally and then sent on form submit or directly make the service call.
  }

toNodeArray(any[]):Node[] {...} - this method converts simple json object to Node object

Usage

• sp-treeview/sp-treeview-dropdown/sp-treeview-overlay takes Node[] and Config as input
• change event is fired on selection change in case of radio button/checkbox selection, delete and addChild event also fire change event
• delete event is fired when a node is deleted
• addChild event is fired to create a child of node
• loadChildren event is fired everytime(loadOnce=false)/first time(loadonce=true) on click of expand/collapse button
• expand/collapse button is visible only if children is not null. If the node have children that can be loaded later then set empty array in children. A node with null value in children is treated as a leaf node.

Node

Tree is consist of nodes, each node contains

• name: string - display text
• value: any - id or object that uniquily identifies the node
• children?: Node[]- list of child nodes (null->leaf node, []->lazy load, [node,node,...]-> expand(loadOnce=true) || lazy load(loadOnce=false))
• progress = false - shows indeterminate progress while loading children
• nodeState = new NodeState() - contains the state of node
• nodeLevelConfig = new NodeLevelConfig() - overrides the tree level config

following properties are handled internally

• parent: Node = null - holds the reference to the parent node
• config: Config - holds reference to the config object for the tree
• loadChildrenEvent: EventEmitter - holds the reference to the loadChildren event to load child nodes while searching the tree

NodeState

• checked = UNCHECKED - checked state(CHECKED/UNCHECKED/INDETERMINATE)
• collapsed = true - node is expanded(false) or collapsed(true)
• disabled = false - checkbox/radio is disabled or not
• hidden = false - show/hide node

NodeLevelConfig

• deleteNode?: boolean - if null then use tree level config otherwise use this config
• addChild?: boolean - if null then use tree level config otherwise use this config

Config

Config is used to show/hide template elements or change functionality

• treeLevelConfig = new TreeLevelConfig() - contains config related to treeview
• dropdownLevelConfig = new DropdownLevelConfig() - contains config related to dropdown

TreeLevelConfig

• loadOnce = true - load children once or always on expand/collapse
• allNode = true - show/hide all node
• select = SELECT_NONE - (SELECT_NONE/SELECT_RADIO/SELECT_CHECKBOX) what selection method to display
• deleteNode = false - show/hide delete node button
• addChild = false - show/hide add child button
• search = true - show/hide search bar

following properties are handled internally

• progress = false - show/hide search bar progress
• searchStr = '' - stores the search term
• treeview: SpTreeviewComponent - holds reference to treeview component
• loadChildrenStack = [] - keeps record of awaited loadChildren response

DropdownLevelConfig

• height = 'auto' - hieght of the treeview in dropdown
• showDropdownDefault = false - show/hide dropdown by default

Source Code

Report Issue