Tree

Display a tree hierarchy of labels on the side.

Dependency

angular-ui-tree >= 2.15.0

Usage

angular.module('myApp', ['gantt', 'gantt.tree']);

<div gantt>
  <gantt-tree enabled="..." header="...">
  </gantt-tree>
</div>

Model

Rows can specify a list of children using children property and/or a parent using parent property. Name and id can be used to define the hierarchy.

var data = [
  {name: 'Parent', children: ['One', 'Two', 'Three']},
  {name: 'One', tasks: [...]},
  {name: 'Two', tasks: [...]},
  {name: 'Three', tasks: [...]},
]

var data = [
  {name: 'Parent'},
  {name: 'One', parent: 'Parent', tasks: [...]},
  {name: 'Two', parent: 'Parent', tasks: [...]},
  {name: 'Three', parent: 'Parent', tasks: [...]},
]

Take care to define a non-recursive hierarchy model, and check that a row is attached to a maximum of one parent.

Attributes

  • enabled

    Enable display of labels tree.

    default: true

  • Column header for the labels.

    default: Name

  • content

    Template of the content of each row. It can contain HTML and will be automatically compiled.

    It can be modified for a specific row using Row model content property.

    default: {{row.model.name}}

  • header-content

    Template of the content of header. It can contain HTML and will be automatically compiled.

    default: {{getHeader()}}

  • keep-ancestor-on-filter-row

    If true, ancestor will be keeped in the gantt when any of its descendant remains after the filter-row filter process.

    default: false

API

Methods

  • api.tree.refresh()

    Refresh hierarchy of rows based on model.

  • api.tree.isCollapsed(rowId)

    Check if a row is collapsed.

  • api.tree.getHierarchy()

    Get a Hierarchy object. Hierarchy object contains functions to retrieve hierarchical structure from loaded model.

    children(row), descendants(row) and ancestors(row) returns a list of Row model object.

    parent(row) returns a Row model object.

  • api.tree.collapse(rowId)

    Collapse a row.

  • api.tree.expand(rowId)

    Expand a row.

  • api.tree.collapseAll()

    Collapse all rows.

  • api.tree.expandAll()

    Expand all rows.

Events

  • api.tree.on.collapsed(row, collapsed)

    A row has collapsed or expanded