Interface WunderbaumOptions

Available options for wunderbaum.Wunderbaum.

Options are passed to the constructor as plain object:

const tree = new mar10.Wunderbaum({
  id: "demo",
  element: document.getElementById("demo-tree"),
  source: "url/of/data/request",
  ...
});

Event handlers are also passed as callbacks

const tree = new mar10.Wunderbaum({
  ...
  init: (e) => {
    console.log(`Tree ${e.tree} was initialized and loaded.`)
  },
  activate: (e) => {
    console.log(`Node ${e.node} was activated.`)
  },
  ...
});
interface WunderbaumOptions {
    activate?: ((e) => void);
    adjustHeight?: boolean;
    autoCollapse?: boolean;
    beforeActivate?: ((e) => WbCancelableEventResultType);
    beforeExpand?: ((e) => WbCancelableEventResultType);
    beforeSelect?: ((e) => WbCancelableEventResultType);
    buttonClick?: ((e) => void);
    change?: ((e) => void);
    checkbox?: DynamicCheckboxOption;
    click?: ((e) => WbCancelableEventResultType);
    columns?: ColumnDefinitionList;
    columnsFilterable?: boolean;
    columnsMenu?: boolean;
    columnsResizable?: boolean;
    columnsSortable?: boolean;
    connectTopBreadcrumb?: HTMLElement;
    dblclick?: ((e) => WbCancelableEventResultType);
    deactivate?: ((e) => WbCancelableEventResultType);
    debugLevel?: number;
    discard?: ((e) => void);
    dnd?: DndOptionsType;
    edit?: EditOptionsType;
    element: string | HTMLDivElement;
    emptyChildListExpandable?: boolean;
    enabled?: boolean;
    error?: ((e) => void);
    expand?: ((e) => void);
    filter?: FilterOptionsType;
    fixedCol?: boolean;
    focus?: ((e) => void);
    header?: null | string | boolean;
    icon?: DynamicIconOption;
    iconBadge?: ((e) => WbIconBadgeEventResultType);
    iconMap?: string | {
        [key: string]: string;
    };
    iconTooltip?: DynamicBoolOrStringOption;
    id?: string;
    init?: ((e) => void);
    keydown?: ((e) => WbCancelableEventResultType);
    lazyLoad?: ((e) => void);
    load?: ((e) => void);
    minExpandLevel?: number;
    modifyChild?: ((e) => void);
    navigationModeOption?: NavModeEnum;
    quicksearch?: boolean;
    receive?: ((e) => void);
    render?: ((e) => void);
    renderStatusNode?: ((e) => void);
    rowHeightPx?: number;
    scrollIntoViewOnExpandClick?: boolean;
    select?: ((e) => void);
    selectMode?: SelectModeType;
    showSpinner?: boolean;
    skeleton?: boolean;
    source?: string | WbNodeData[];
    strings?: any;
    tooltip?: DynamicBoolOrStringOption;
    types?: NodeTypeDefinitionMap;
    unselectable?: DynamicBoolOption;
    update?: ((e) => void);
}

Callback

activate? beforeActivate? beforeExpand? beforeSelect? buttonClick? change? click? dblclick? deactivate? discard? error? expand? focus? iconBadge? init? keydown? lazyLoad? load? modifyChild? receive? render? renderStatusNode? select? update?

Other

adjustHeight? autoCollapse? checkbox? columns? columnsFilterable? columnsMenu? columnsResizable? columnsSortable? connectTopBreadcrumb? debugLevel? dnd? edit? element emptyChildListExpandable? enabled? filter? fixedCol? header? icon? iconMap? iconTooltip? id? minExpandLevel? navigationModeOption? quicksearch? rowHeightPx? scrollIntoViewOnExpandClick? selectMode? showSpinner? skeleton? source? strings? tooltip? types? unselectable?

Callback

Optional activate

activate?: ((e) => void)

e.node was activated.

Type declaration

Optional beforeActivate

beforeActivate?: ((e) => WbCancelableEventResultType)

e.node is about to be activated. Return false to prevent default handling, i.e. activating the node. See also deactivate event.

Type declaration

Optional beforeExpand

beforeExpand?: ((e) => WbCancelableEventResultType)

e.node is about to be expanded/collapsed. Return false to prevent default handling, i.e. expanding/collapsing the node.

Type declaration

Optional beforeSelect

beforeSelect?: ((e) => WbCancelableEventResultType)

Return false to prevent default handling, i.e. (de)selecting the node.

Type declaration

Optional buttonClick

buttonClick?: ((e) => void)

Return false to prevent default handling, i.e. (de)selecting the node.

Type declaration

Optional change

change?: ((e) => void)

Type declaration

Optional click

click?: ((e) => WbCancelableEventResultType)

Return false to prevent default behavior, e.g. expand/collapse, (de)selection, or activation.

Type declaration

Optional dblclick

dblclick?: ((e) => WbCancelableEventResultType)

Return false to prevent default behavior, e.g. expand/collapse.

Type declaration

Optional deactivate

deactivate?: ((e) => WbCancelableEventResultType)

e.node was deactivated.

Return false to prevent default handling, e.g. deactivating the node and activating the next. See also activate event.

Type declaration

Optional discard

discard?: ((e) => void)

e.node was discarded from the viewport and its HTML markup removed.

Type declaration

Optional error

error?: ((e) => void)

An error occurred, e.g. during initialization or lazy loading.

Type declaration

Optional expand

expand?: ((e) => void)

e.node was expanded (e.flag === true) or collapsed (e.flag === false)

Type declaration

Optional focus

focus?: ((e) => void)

The tree received or lost focus. Check e.flag for status.

Type declaration

Optional iconBadge

iconBadge?: ((e) => WbIconBadgeEventResultType)

e.node is about to be rendered. We can add a badge to the icon cell here.

Type declaration

Optional init

init?: ((e) => void)

Fires when the tree markup was created and the initial source data was loaded. Typical use cases would be activating a node, setting focus, enabling other controls on the page, etc.
Also sent if an error occured during initialization (check e.error for status).

Type declaration

Optional keydown

keydown?: ((e) => WbCancelableEventResultType)

Fires when a key was pressed while the tree has focus. e.node is set if a node is currently active. Return false to prevent default navigation.

Type declaration

Optional lazyLoad

lazyLoad?: ((e) => void)

Fires when a node that was marked 'lazy', is expanded for the first time. Typically we return an endpoint URL or the Promise of a fetch request that provides a (potentially nested) list of child nodes.

Type declaration

Optional load

load?: ((e) => void)

Fires when data was loaded (initial request, reload, or lazy loading), after the data is applied and rendered.

Type declaration

Optional modifyChild

modifyChild?: ((e) => void)

Type declaration

Optional receive

receive?: ((e) => void)

Fires when data was fetched (initial request, reload, or lazy loading), but before the data is applied and rendered. Here we can modify and adjust the received data, for example to convert an external response to native Wunderbaum syntax.

Type declaration

Optional render

render?: ((e) => void)

Fires when a node is about to be displayed. The default HTML markup is already created, but not yet added to the DOM. Now we can tweak the markup, create HTML elements in this node's column cells, etc. See also Custom Rendering for details.

Type declaration

Optional renderStatusNode

renderStatusNode?: ((e) => void)

Same as render(e), but for the status nodes, i.e. e.node.statusNodeType.

Type declaration

Optional select

select?: ((e) => void)

e.node was selected (e.flag === true) or deselected (e.flag === false)

Type declaration

Optional update

update?: ((e) => void)

Fires when the viewport content was updated, after scroling, expanding etc.

Type declaration

Other

Optional adjustHeight

adjustHeight?: boolean

If true, the tree will automatically adjust its height to fit the parent container. This is useful when the tree is embedded in a container with a fixed or calculated sized. If the parent container is unsized (e.g. grows with its content, height: auto), then we can define a height: ... or max_height: ... style on the parent. To avoid a recursive resize-loop, it may be helpful to set overflow: hidden on the parent container.

Set this option to false will disable auto-resizing.

@default: true

Optional autoCollapse

autoCollapse?: boolean

Collapse siblings when a node is expanded. Default: false

Optional checkbox

checkbox?: DynamicCheckboxOption

If true, render a checkbox before the node tile to allow selection with the mouse. Pass "radio" to render a radio button instead. Default: false.

Optional columns

columns?: ColumnDefinitionList

A list of maps that define column headers. If this option is set, Wunderbaum becomes a treegrid control instead of a plain tree. Column definitions can be passed as tree option, or be part of a source response. Default: [] meaning this is a plain tree.

Optional columnsFilterable

columnsFilterable?: boolean

Default value for ColumnDefinition.filterable option. Default: false

Since

0.11.0

Optional columnsMenu

columnsMenu?: boolean

Default value for ColumnDefinition.menu option. Default: false

Since

0.11.0

Optional columnsResizable

columnsResizable?: boolean

Default value for ColumnDefinition.resizable option. Default: false

Since

0.10.0

Optional columnsSortable

columnsSortable?: boolean

Default value for ColumnDefinition.sortable option. Default: false

Since

0.11.0

Optional connectTopBreadcrumb

connectTopBreadcrumb?: HTMLElement

HTMLElement that receives the top nodes breadcrumb. Default: undefined

Optional debugLevel

debugLevel?: number

0:quiet, 1:errors, 2:warnings, 3:info, 4:verbose Default: 3 (4 in local debug environment)

Optional dnd

dnd?: DndOptionsType

Optional edit

edit?: EditOptionsType

element

element: string | HTMLDivElement

The target div element (or selector) that shall become a Wunderbaum.

Optional emptyChildListExpandable

emptyChildListExpandable?: boolean

If true, allow to expand parent nodes, even if node.children conatains an empty array ([]). This is the the behavior of macOS Finder, for example. Default: false

Optional enabled

enabled?: boolean

Default: true

Optional filter

filter?: FilterOptionsType

Optional fixedCol

fixedCol?: boolean

Default: false

Optional header

header?: null | string | boolean

Show/hide header (default: null) null: assume false for plain tree and true for grids. string: use text as header (only for plain trees) true: display a header (use tree's id as text for plain trees) false: do not display a header

Optional icon

icon?: DynamicIconOption

Optional callback to render icons per node.

Optional iconMap

iconMap?: string | {
    [key: string]: string;
}

Icon font definition. May be a string (e.g. "fontawesome6" or "bootstrap") or a map of iconName: iconClass pairs. Note: the icon font must be loaded separately. Default: "bootstrap"

Type declaration

  • [key: string]: string

Optional iconTooltip

iconTooltip?: DynamicBoolOrStringOption

Optional callback to render a tooltip for the icon.

Optional id

id?: string

The identifier of this tree. Used to reference the instance, especially when multiple trees are present (e.g. tree = mar10.Wunderbaum.getTree("demo")).

Default: "wb_" + COUNTER.

Optional minExpandLevel

minExpandLevel?: number

Number of levels that are forced to be expanded, and have no expander icon. E.g. 1 would keep all toplevel nodes expanded. Default: 0

Optional navigationModeOption

navigationModeOption?: NavModeEnum

Default: NavModeEnum.startRow

Optional quicksearch

quicksearch?: boolean

Default: true

Optional rowHeightPx

rowHeightPx?: number

Height of a node row div. Default: 22

Optional scrollIntoViewOnExpandClick

scrollIntoViewOnExpandClick?: boolean

Scroll Node into view on Expand Click

Default

true

Optional selectMode

selectMode?: SelectModeType

Default: "multi"

Optional showSpinner

showSpinner?: boolean

Optional skeleton

skeleton?: boolean

If true, add a wb-skeleton class to all nodes, that will result in a 'glow' effect. Typically used with initial dummy nodes, while loading the real data. Default: false.

Optional source

source?: string | WbNodeData[]

Define the initial tree data. Typically a URL of an endpoint that serves a JSON formatted structure, but also a callback, Promise, or static data is allowed.

Default: {}.

Optional strings

strings?: any

Translation map for some system messages.

Optional tooltip

tooltip?: DynamicBoolOrStringOption

Optional callback to render a tooltip for the node title. Pass true to use the node's title property as tooltip.

Optional types

types?: NodeTypeDefinitionMap

Define shared attributes for multiple nodes of the same type. This allows for more compact data models. Type definitions can be passed as tree option, or be part of a source response.

Default: {}.

Optional unselectable

unselectable?: DynamicBoolOption

Optional callback to make a node unselectable.

Settings

Member Visibility

Theme

On This Page

activatebeforeActivatebeforeExpandbeforeSelectbuttonClickchangeclickdblclickdeactivatediscarderrorexpandfocusiconBadgeinitkeydownlazyLoadloadmodifyChildreceiverenderrenderStatusNodeselectupdateadjustHeightautoCollapsecheckboxcolumnscolumnsFilterablecolumnsMenucolumnsResizablecolumnsSortableconnectTopBreadcrumbdebugLeveldndeditelementemptyChildListExpandableenabledfilterfixedColheadericoniconMapiconTooltipidminExpandLevelnavigationModeOptionquicksearchrowHeightPxscrollIntoViewOnExpandClickselectModeshowSpinnerskeletonsourcestringstooltiptypesunselectable