Tree

<ef-tree></ef-tree>

const tree = document.querySelector('ef-tree');
tree.data = [{
    label: 'Group 1',
    expanded: true,
    items: [{
        label: 'Item 1.1',
        value: '1.1'
      },
      {
        label: 'Item 1.2',
        value: '1.2'
      },
      {
        label: 'Item 1.3',
        value: '1.3',
        selected: true
      }
    ]
  },
  {
    label: 'Group 2',
    items: [{
        label: 'Item 2.1',
        value: '2.1'
      },
      {
        label: 'Item 2.2',
        value: '2.2'
      },
      {
        label: 'Item 2.3',
        value: '2.3'
      }
    ]
  }
]

Displays a nested data structure as a tree menu. Useful for navigating grouped/categorized data.

Basic usage

The data of ef-tree can be set by passing an array of objects to the element's data property.

<ef-tree></ef-tree>

const tree = document.querySelector('ef-tree');
tree.data = [{
  label: 'Group 1',
  expanded: true,
  items: [{
    label: 'Item 1.1',
    value: '1.1'
  },
  {
    label: 'Item 1.2',
    value: '1.2'
  },
  {
    label: 'Item 1.3',
    value: '1.3',
    selected: true
  }]
},
{
  label: 'Group 2',
  items: [{
    label: 'Item 2.1',
    value: '2.1'
  },
  {
    label: 'Item 2.2',
    value: '2.2'
  },
  {
    label: 'Item 2.3',
    value: '2.3'
  }]
}]

Tree item with icon

Icon can be set to show on each node in tree by using icon key in item object. You can pass icon name, url of icon svg file or empty string.

<ef-tree></ef-tree>

const tree = document.querySelector('ef-tree');
tree.data = [{
  label: 'Request 5 Rank 1: custom leage table',
  icon: 'list',
  selected: true,
  expanded: true,
  items: [{
    label: 'Req. 5 Rnk. 1 Dr.Req. 1: Goldman Sachs & Co',
    value: '1.1',
    icon: 'https://cdn.refinitiv.com/public/libs/elf/assets/elf-theme-halo/resources/icons/grid.svg'
  },
  {
    label: 'Req. 5 Rnk. 1 Dr.Req. 2: Allen & Co Inc',
    value: '1.2',
    icon: 'https://cdn.refinitiv.com/public/libs/elf/assets/elf-theme-halo/resources/icons/grid.svg'
  }]
},
{
  label: 'Session Details',
  icon: 'sendfeed',
}]

<div class="container">
  <ef-tree id="basic"></ef-tree>
  <ef-tree multiple id="multiple"></ef-tree>
</div>

var basicTree = document.getElementById('basic');
var multipleTree = document.getElementById('multiple');
basicTree.data = [{
    label: 'Request 5 Rank 1: custom leage table',
    icon: 'list',
    selected: true,
    expanded: true,
    items: [{
        label: 'Req. 5 Rnk. 1 Dr.Req. 1: Goldman Sachs & Co',
        value: '1.1',
        icon: 'https://cdn.refinitiv.com/public/libs/elf/assets/elf-theme-halo/resources/icons/grid.svg'
      },
      {
        label: 'Req. 5 Rnk. 1 Dr.Req. 2: Allen & Co Inc',
        value: '1.2',
        icon: 'https://cdn.refinitiv.com/public/libs/elf/assets/elf-theme-halo/resources/icons/grid.svg'
      }
    ]
  },
  {
    label: 'Session Details',
    icon: 'sendfeed',
  }
]
multipleTree.data = [{
    label: 'Request 5 Rank 1: custom leage table',
    icon: 'list',
    selected: true,
    expanded: true,
    items: [{
        label: 'Req. 5 Rnk. 1 Dr.Req. 1: Goldman Sachs & Co',
        value: '1.1',
        icon: 'https://cdn.refinitiv.com/public/libs/elf/assets/elf-theme-halo/resources/icons/grid.svg'
      },
      {
        label: 'Req. 5 Rnk. 1 Dr.Req. 2: Allen & Co Inc',
        value: '1.2',
        icon: 'https://cdn.refinitiv.com/public/libs/elf/assets/elf-theme-halo/resources/icons/grid.svg'
      }
    ]
  },
  {
    label: 'Session Details',
    icon: 'sendfeed',
  }
]

.container {
  display: flex;
}

ef-tree {
  margin-right: 20px;
}

Data property interface

The data property that passes through the ef-tree uses the TreeData interface for its data items which is described below.

Name	Type	Description
label	string	Item's label
value	string	Value of an item
icon	string	Icon of an item
selected	boolean	Selection state of the item
expanded	boolean	Expanded state of child items
items	array	Child items collection
readonly	boolean	Sets the item to be readonly
disabled	boolean	Sets the item to be disabled

Multiple selection

Tree uses single selection mode by default. Use the multiple attribute if you need multiple selections.

<ef-tree multiple></ef-tree>

<ef-tree multiple></ef-tree>

const tree = document.querySelector('ef-tree');
tree.data = [{
    label: 'Group 1',
    items: [{
        label: 'Item 1.1',
        value: '1.1'
      },
      {
        label: 'Item 1.2',
        value: '1.2'
      },
      {
        label: 'Item 1.3',
        value: '1.3',
        selected: true
      }
    ]
  },
  {
    label: 'Group 2',
    items: [{
        label: 'Item 2.1',
        value: '2.1'
      },
      {
        label: 'Item 2.2',
        value: '2.2'
      },
      {
        label: 'Item 2.3',
        value: '2.3'
      }
    ]
  }
]

Turn off parent/child relationship

For multiple selection mode, Tree manages the relationship between parent and child items. Use the no-relation attribute to turn this feature off.

<ef-tree multiple no-relation></ef-tree>

<ef-tree multiple no-relation></ef-tree>

const tree = document.querySelector('ef-tree');
tree.data = [{
    label: 'Group 1',
    items: [{
        label: 'Item 1.1',
        value: '1.1'
      },
      {
        label: 'Item 1.2',
        value: '1.2'
      },
      {
        label: 'Item 1.3',
        value: '1.3',
        selected: true
      }
    ]
  },
  {
    label: 'Group 2',
    items: [{
        label: 'Item 2.1',
        value: '2.1'
      },
      {
        label: 'Item 2.2',
        value: '2.2'
      },
      {
        label: 'Item 2.3',
        value: '2.3'
      }
    ]
  }
]

Tree value(s) and events

Use the value-changed event to know when the user has changed any selection in Tree. Tree provides value and values properties for accessing selected item(s).

Typically, you can just use the values property, as it will work for both multiple and single selection mode. With single selection mode, value represents a single value, whereas in multiple selection mode, it will store the first value of the values array.

const tree = document.querySelector('ef-tree');

tree.addEventListener('value-changed', (e) => {
  console.log(e.detail); // value that users changed
  console.log(tree.values); // access selected items
});

API Reference

Attributes

boolean

multiple

Allows multiple items to be selected

boolean

no-relation

Breaks the relationship when multiple selection mode is enabled

string

query

Query string applied to tree

boolean

stateless

Disable selections

Properties

boolean

multiple

Allows multiple items to be selected

false

boolean

noRelation

Breaks the relationship when multiple selection mode is enabled

false

string

query

Query string applied to tree

TreeRenderer

renderer

Renderer used for generating tree items

"new TreeRenderer(this)"

string[]

values

Selected items in tree

TreeData<T>

data

Data object to be used for creating tree

boolean

stateless

Disable selections

false

Methods

expandAll()

Expands all groups

collapseAll()

Collapses all groups

checkAll()

Checks all editable items

uncheckAll()

Unchecks all editable items

Events

value-changed

Fired when the users changed selection item.

expanded-changed

Fired when an item's expanded state has changed.

Element Framework

Tree

Basic usage

Tree item with icon

Data property interface

Multiple selection

Turn off parent/child relationship

Tree value(s) and events

API Reference

Attributes

Properties

Methods

Events