TreeWidget

A TreeWidget can contain TreeItems, which in turn can contain TreeItems to construct a tree.

from flexx import app, ui

class Example(ui.Widget):

    def init(self):

        with ui.TreeWidget(max_selected=2):

            for t in ['foo', 'bar', 'spam', 'eggs']:
                ui.TreeItem(text=t, checked=True)
open in new tab

Also see examples: tree.py, control_with_keys.py.


class flexx.ui.TreeItem(*init_args, **kwargs)

Inherits from: Widget

An item to put in a TreeWidget. This widget should only be used inside a TreeWidget or another TreeItem.

Items are collapsable/expandable if their collapsed property is set to True or False (i.e. not None), or if they have sub items. Items are checkable if their checked property is set to True or False (i.e. not None). Items are selectable depending on the selection policy defined by TreeWidget.max_selected.

If needed, the _render_title() and _render_text() methods can be overloaded to display items in richer ways. See the documentation of Widget._render_dom() for details.

The outernode of this widget is a <li> (a list-item in the tree or parent item’s <ul>. The node of this widget is a <span> that represents the row for this item (but not its children).

properties: checked, collapsed, selected, text, title, visible

emitters: user_checked, user_collapsed, user_selected

actions: set_checked, set_collapsed, set_parent, set_selected, set_text, set_visible

checked

TriStateProp – Whether this item is checked (i.e. has its checkbox set). The value can be None, True or False. None (the default) means that the item is not checkable.

collapsed

TriStateProp – Whether this item is expanded (i.e. shows its children). The value can be None, True or False. None (the default) means that the item is not collapsable (unless it has sub items).

selected

BoolProp – Whether this item is selected. Depending on the TreeWidget’s policy (max_selected), this can be set/unset on clicking the item.

set_checked(*val)

action – Setter for the ‘checked’ property.

set_collapsed(*val)

action – Setter for the ‘collapsed’ property.

set_parent(parent, pos=None)

action – set_parent

set_selected(*val)

action – Setter for the ‘selected’ property.

set_text(*val)

action – Setter for the ‘text’ property.

set_visible(*val)

action – Setter for the ‘visible’ property.

text

StringProp – The text for this item. Can be used in combination with title to obtain two columns.

title

StringProp – The title for this item that appears before the text. Intended for display of key-value pairs. If a title is given, the text is positioned in a second (virtual) column of the tree widget.

user_checked(checked)

emitter – Event emitted when the user (un)checks this item. Has old_value and new_value attributes.

user_collapsed(collapsed)

emitter – Event emitted when the user (un)collapses this item. Has old_value and new_value attributes.

user_selected(selected)

emitter – Event emitted when the user (un)selects this item. Has old_value and new_value attributes. One can call this emitter directly to emulate a user-selection, but note that this bypasses the max_selected policy.

visible

BoolProp – Whether this item (and its sub items) is visible.

class flexx.ui.TreeWidget(*init_args, **kwargs)

Inherits from: Widget

A Widget that can be used to structure information in a list or a tree. It’s items are represented by its children, which may only be TreeItem objects. Sub items can be created by instantiating TreeItems in the context of another TreeItem.

When the items in the tree have no sub-items themselves, the TreeWidget is in “list mode”. Otherwise, items can be collapsed/expanded etc.

The node of this widget is a <div> with some child elements and quite a bit of CSS for rendering.

Style

This widget can be fully styled using CSS, using the following CSS classes:

  • flx-listmode is set on the widget’s node if no items have sub items.

Style classes for a TreeItem’s elements:

  • flx-TreeItem indicates the row of an item (its text, icon, and checkbox).
  • flx-TreeItem > collapsebut the element used to collapse/expand an item.
  • flx-TreeItem > checkbut the element used to check/uncheck an item.
  • flx-TreeItem > text the element that contains the text of the item.
  • flx-TreeItem > title the element that contains the title of the item.

Style classes applied to the TreeItem, corresponding to its properties:

  • visible-true and visible-false indicate visibility.
  • selected-true and selected-false indicate selection state.
  • checked-true, checked-false and checked-null indicate checked state, with the null variant indicating not-checkable.
  • collapsed-true, collapsed-false and collapsed-null indicate collapse state, with the null variant indicating not-collapsable.

properties: max_selected

actions: set_max_selected

methods: get_all_items, highlight_get, highlight_hide, highlight_show, highlight_show_item, highlight_toggle_checked, highlight_toggle_selected

get_all_items()

Get a flat list of all TreeItem instances in this Tree (including sub children and sub-sub children, etc.), in the order that they are shown in the tree.

highlight_get()

Get the “current” item. This is the currently highlighted item if there is one. Otherwise it can be the last highlighted item or the last clicked item.

highlight_hide()

Stop highlighting the “current” item.

highlight_show(step=0)

Highlight the “current” item, optionally moving step items.

highlight_show_item(item)

Highlight the given item.

highlight_toggle_checked()

Convenience method to toggle the “checked” property of the current item.

highlight_toggle_selected()

Convenience method to toggle the “selected” property of the current item.

max_selected

IntProp – The maximum number of selected items:

  • If 0 (default) there is no selection.
  • If 1, there can be one selected item.
  • If > 1, up to this number of items can be selected by clicking them.
  • If -1, any number of items can be selected by holding Ctrl or Shift.
set_max_selected(*val)

action – Setter for the ‘max_selected’ property.