• Frontend Script API
• <internal>
• FancytreeOptions

Interface FancytreeOptions

The this context of any event function is set to tree's the HTMLDivElement

interface FancytreeOptions {
activeVisible?: boolean;
ajax?: { cache: boolean; dataType: string; type: string };
aria?: boolean;
autoActivate?: boolean;
autoCollapse?: boolean;
autoScroll?: boolean;
checkbox?:
| string
| boolean
| ((event: JQueryEventObject, data: EventData) => boolean);
clickFolderMode?: FancytreeClickFolderMode;
debugLevel?: 0 | 1 | 2 | 3 | 4;
defaultKey?: (node: FancytreeNode) => string;
dnd5?: DragAndDrop5;
enableAspx?: boolean;
enableTitles?: boolean;
extensions?: (keyof List)[];
filter?: Filter;
focusOnSelect?: boolean;
generateIds?: boolean;
icon?: string | boolean;
idPrefix?: string;
imagePath?: string;
keyboard?: boolean;
keyPathSeparator?: string;
minExpandLevel?: number;
quicksearch?: boolean;
rtl?: boolean;
scrollOfs?: { bottom: number; top: number };
scrollParent?: null | JQuery<HTMLElement>;
selectMode?: FancytreeSelectMode;
source?: any;
strings?: TranslationTable;
tabbable?: boolean;
table?: Table;
titlesTabbable?: boolean;
toggleEffect?: any;
tooltip?: boolean;
unselectable?:
| boolean
| ((event: JQueryEventObject, data: EventData) => undefined | boolean);
unselectableIgnore?:
| boolean
| ((event: JQueryEventObject, data: EventData) => undefined | boolean);
unselectableStatus?:
| boolean
| ((event: JQueryEventObject, data: EventData) => undefined | boolean);
activate(event: JQueryEventObject, data: EventData): void;
beforeActivate(event: JQueryEventObject, data: EventData): boolean;
beforeExpand(event: JQueryEventObject, data: EventData): boolean;
beforeSelect(event: JQueryEventObject, data: EventData): boolean;
blur(event: JQueryEventObject, data: EventData): void;
blurTree(event: JQueryEventObject, data: EventData): void;
click(event: JQueryEventObject, data: EventData): boolean;
collapse(event: JQueryEventObject, data: EventData): void;
create(event: JQueryEventObject, data: EventData): void;
createNode(event: JQueryEventObject, data: EventData): void;
dblclick(event: JQueryEventObject, data: EventData): boolean;
deactivate(event: JQueryEventObject, data: EventData): void;
expand(event: JQueryEventObject, data: EventData): void;
focus(event: JQueryEventObject, data: EventData): void;
focusTree(event: JQueryEventObject, data: EventData): void;
init(event: JQueryEventObject, data: EventData): void;
keydown(event: JQueryEventObject, data: EventData): boolean;
keypress(event: JQueryEventObject, data: EventData): void;
lazyLoad(event: JQueryEventObject, data: EventData): void;
loadChildren(event: JQueryEventObject, data: EventData): void;
loadError(event: JQueryEventObject, data: EventData): boolean;
postProcess(event: JQueryEventObject, data: EventData): void;
removeNode(event: JQueryEventObject, data: EventData): void;
renderColumns(event: JQueryEventObject, data: EventData): void;
renderNode(event: JQueryEventObject, data: EventData): void;
renderTitle(event: JQueryEventObject, data: EventData): void;
restore(event: JQueryEventObject, data: EventData): void;
select(event: JQueryEventObject, data: EventData): void;
extension: string: any;
}

Hierarchy (View Summary)

• FancytreeEvents
  • FancytreeOptions

Indexable

Options for misc extensions - see docs for typings

Index

Properties

activeVisible?ajax?aria?autoActivate?autoCollapse?autoScroll?checkbox?clickFolderMode?debugLevel?defaultKey?dnd5?enableAspx?enableTitles?extensions?filter?focusOnSelect?generateIds?icon?idPrefix?imagePath?keyboard?keyPathSeparator?minExpandLevel?quicksearch?rtl?scrollOfs?scrollParent?selectMode?source?strings?tabbable?table?titlesTabbable?toggleEffect?tooltip?unselectable?unselectableIgnore?unselectableStatus?

Methods

activate?beforeActivate?beforeExpand?beforeSelect?blur?blurTree?click?collapse?create?createNode?dblclick?deactivate?expand?focus?focusTree?init?keydown?keypress?lazyLoad?loadChildren?loadError?postProcess?removeNode?renderColumns?renderNode?renderTitle?restore?select?

Properties

OptionalactiveVisible

activeVisible?: boolean

Make sure that the active node is always visible, i.e. its parents are expanded (default: true).

Optionalajax

ajax?: { cache: boolean; dataType: string; type: string }

Default options for ajax requests.

Type declaration

cache: boolean

false: Append random '_' argument to the request url to prevent caching.

dataType: string

Default 'json' -> Expect json format and pass json object to callbacks.

type: string

HTTP Method (default: 'GET')

Optionalaria

aria?: boolean

(default: false) Add WAI-ARIA attributes to markup

OptionalautoActivate

autoActivate?: boolean

Activate a node when focused with the keyboard (default: true)

OptionalautoCollapse

autoCollapse?: boolean

Automatically collapse all siblings, when a node is expanded (default: false).

OptionalautoScroll

autoScroll?: boolean

Scroll node into visible area, when focused by keyboard (default: false).

Optionalcheckbox

checkbox?:
| string
| boolean
| ((event: JQueryEventObject, data: EventData) => boolean)

Display checkboxes to allow selection (default: false)

OptionalclickFolderMode

clickFolderMode?: FancytreeClickFolderMode

Defines what happens, when the user click a folder node. (default: activate_dblclick_expands)

OptionaldebugLevel

debugLevel?: 0 | 1 | 2 | 3 | 4

0..4 (null: use global setting $.ui.fancytree.debugInfo)

OptionaldefaultKey

defaultKey?: (node: FancytreeNode) => string

callback(node) is called for new nodes without a key. Must return a new unique key. (default null: generates default keys like that: "_" + counter)

Optionaldnd5

dnd5?: DragAndDrop5

OptionalenableAspx

enableAspx?: boolean

Accept passing ajax data in a property named d (default: true).

OptionalenableTitles

enableTitles?: boolean

Enable titles (default: false)

Optionalextensions

extensions?: (keyof List)[]

List of active extensions (default: [])

Optionalfilter

filter?: Filter

OptionalfocusOnSelect

focusOnSelect?: boolean

Set focus when node is checked by a mouse click (default: false)

OptionalgenerateIds

generateIds?: boolean

Add id="..." to node markup (default: true).

Optionalicon

icon?: string | boolean

Node icon url, if only filename, please use imagePath to set the path

OptionalidPrefix

idPrefix?: string

Prefix (default: "ft_")

OptionalimagePath

imagePath?: string

Path to a folder containing icons (default: null, using 'skin/' subdirectory).

Optionalkeyboard

keyboard?: boolean

Support keyboard navigation (default: true).

OptionalkeyPathSeparator

keyPathSeparator?: string

(default: "/")

OptionalminExpandLevel

minExpandLevel?: number

2: top-level nodes are not collapsible (default: 1)

Optionalquicksearch

quicksearch?: boolean

navigate to next node by typing the first letters (default: false)

Optionalrtl

rtl?: boolean

Right to left mode (default: false)

OptionalscrollOfs

scrollOfs?: { bottom: number; top: number }

optional margins for node.scrollIntoView() (default: {top: 0, bottom: 0})

OptionalscrollParent

scrollParent?: null | JQuery<HTMLElement>

scrollable container for node.scrollIntoView() (default: $container)

OptionalselectMode

selectMode?: FancytreeSelectMode

default: multi_hier

Optionalsource

source?: any

Used to Initialize the tree.

Optionalstrings

strings?: TranslationTable

Translation table

Optionaltabbable

tabbable?: boolean

Add tabindex='0' to container, so tree can be reached using TAB

Optionaltable

table?: Table

OptionaltitlesTabbable

titlesTabbable?: boolean

Add tabindex='0' to node title span, so it can receive keyboard focus

OptionaltoggleEffect

toggleEffect?: any

Animation options, false:off (default: { effect: "blind", options: {direction: "vertical", scale: "box"}, duration: 200 })

Optionaltooltip

tooltip?: boolean

Tooltips

Optionalunselectable

unselectable?:
| boolean
| ((event: JQueryEventObject, data: EventData) => undefined | boolean)

(dynamic Option)Prevent (de-)selection using mouse or keyboard.

OptionalunselectableIgnore

unselectableIgnore?:
| boolean
| ((event: JQueryEventObject, data: EventData) => undefined | boolean)

(dynamic Option)Ignore this node when calculating the partsel status of parent nodes in selectMode 3 propagation.

OptionalunselectableStatus

unselectableStatus?:
| boolean
| ((event: JQueryEventObject, data: EventData) => undefined | boolean)

(dynamic Option)Use this as constant selected value (overriding selectMode 3 propagation).

Methods

Optionalactivate

activate(event: JQueryEventObject, data: EventData): void

'data.node' was deactivated.

Parameters

• event: JQueryEventObject
• data: EventData

Returns void

OptionalbeforeActivate

beforeActivate(event: JQueryEventObject, data: EventData): boolean

Return false to prevent default processing

Parameters

• event: JQueryEventObject
• data: EventData

Returns boolean

OptionalbeforeExpand

beforeExpand(event: JQueryEventObject, data: EventData): boolean

Return false to prevent default processing

Parameters

• event: JQueryEventObject
• data: EventData

Returns boolean

OptionalbeforeSelect

beforeSelect(event: JQueryEventObject, data: EventData): boolean

Return false to prevent default processing

Parameters

• event: JQueryEventObject
• data: EventData

Returns boolean

Optionalblur

blur(event: JQueryEventObject, data: EventData): void

data.node lost keyboard focus

Parameters

• event: JQueryEventObject
• data: EventData

Returns void

OptionalblurTree

blurTree(event: JQueryEventObject, data: EventData): void

data.tree lost keyboard focus

Parameters

• event: JQueryEventObject
• data: EventData

Returns void

Optionalclick

click(event: JQueryEventObject, data: EventData): boolean

data.node was clicked. data.targetType contains the region ("title", "expander", ...). Return false to prevent default processing, i.e. activating, etc.

Parameters

• event: JQueryEventObject
• data: EventData

Returns boolean

Optionalcollapse

collapse(event: JQueryEventObject, data: EventData): void

data.node was collapsed

Parameters

• event: JQueryEventObject
• data: EventData

Returns void

Optionalcreate

create(event: JQueryEventObject, data: EventData): void

Widget was created (called only once, even if re-initialized).

Parameters

• event: JQueryEventObject
• data: EventData

Returns void

OptionalcreateNode

createNode(event: JQueryEventObject, data: EventData): void

Allow tweaking and binding, after node was created for the first time (NOTE: this event is only available as callback, but not for bind())

Parameters

• event: JQueryEventObject
• data: EventData

Returns void

Optionaldblclick

dblclick(event: JQueryEventObject, data: EventData): boolean

data.node was double-clicked. data.targetType contains the region ("title", "expander", ...). Return false to prevent default processing, i.e. expanding, etc.

Parameters

• event: JQueryEventObject
• data: EventData

Returns boolean

Optionaldeactivate

deactivate(event: JQueryEventObject, data: EventData): void

data.node was deactivated

Parameters

• event: JQueryEventObject
• data: EventData

Returns void

Optionalexpand

expand(event: JQueryEventObject, data: EventData): void

data.node was expanded

Parameters

• event: JQueryEventObject
• data: EventData

Returns void

Optionalfocus

focus(event: JQueryEventObject, data: EventData): void

data.node received keyboard focus

Parameters

• event: JQueryEventObject
• data: EventData

Returns void

OptionalfocusTree

focusTree(event: JQueryEventObject, data: EventData): void

data.tree received keyboard focus

Parameters

• event: JQueryEventObject
• data: EventData

Returns void

Optionalinit

init(event: JQueryEventObject, data: EventData): void

Widget was (re-)initialized.

Parameters

• event: JQueryEventObject
• data: EventData

Returns void

Optionalkeydown

keydown(event: JQueryEventObject, data: EventData): boolean

data.node received key. event.which contains the key. Return false to prevent default processing, i.e. navigation. Call data.result = "preventNav"; to prevent navigation but still allow default handling inside embedded input controls.

Parameters

• event: JQueryEventObject
• data: EventData

Returns boolean

Optionalkeypress

keypress(event: JQueryEventObject, data: EventData): void

(currently unused)

Parameters

• event: JQueryEventObject
• data: EventData

Returns void

OptionallazyLoad

lazyLoad(event: JQueryEventObject, data: EventData): void

data.node is a lazy node that is expanded for the first time. The new child data must be returned in the data.result property (see source option for available formats).

Parameters

• event: JQueryEventObject
• data: EventData

Returns void

OptionalloadChildren

loadChildren(event: JQueryEventObject, data: EventData): void

Node data was loaded, i.e. node.nodeLoadChildren() finished

Parameters

• event: JQueryEventObject
• data: EventData

Returns void

OptionalloadError

loadError(event: JQueryEventObject, data: EventData): boolean

A load error occured. Return false to prevent default processing.

Parameters

• event: JQueryEventObject
• data: EventData

Returns boolean

OptionalpostProcess

postProcess(event: JQueryEventObject, data: EventData): void

Allows to modify the ajax response.

Parameters

• event: JQueryEventObject
• data: EventData

Returns void

OptionalremoveNode

removeNode(event: JQueryEventObject, data: EventData): void

data.node was removed (NOTE: this event is only available as callback, but not for bind())

Parameters

• event: JQueryEventObject
• data: EventData

Returns void

OptionalrenderColumns

renderColumns(event: JQueryEventObject, data: EventData): void

(used by table extension)

Parameters

• event: JQueryEventObject
• data: EventData

Returns void

OptionalrenderNode

renderNode(event: JQueryEventObject, data: EventData): void

Allow tweaking after node state was rendered (NOTE: this event is only available as callback, but not for bind())

Parameters

• event: JQueryEventObject
• data: EventData

Returns void

OptionalrenderTitle

renderTitle(event: JQueryEventObject, data: EventData): void

Allow replacing the <span class='fancytree-title'> markup (NOTE: this event is only available as callback, but not for bind())

Parameters

• event: JQueryEventObject
• data: EventData

Returns void

Optionalrestore

restore(event: JQueryEventObject, data: EventData): void

ext-persist has expanded, selected, and activated the previous state

Parameters

• event: JQueryEventObject
• data: EventData

Returns void

Optionalselect

select(event: JQueryEventObject, data: EventData): void

data.node was selected

Parameters

• event: JQueryEventObject
• data: EventData

Returns void

Settings

Member Visibility

• Protected
• Inherited
• External

ThemeOSLightDark

On This Page

Properties activeVisibleajaxariaautoActivateautoCollapseautoScrollcheckboxclickFolderModedebugLeveldefaultKeydnd5enableAspxenableTitlesextensionsfilterfocusOnSelectgenerateIdsiconidPrefiximagePathkeyboardkeyPathSeparatorminExpandLevelquicksearchrtlscrollOfsscrollParentselectModesourcestringstabbabletabletitlesTabbabletoggleEffecttooltipunselectableunselectableIgnoreunselectableStatus Methods activatebeforeActivatebeforeExpandbeforeSelectblurblurTreeclickcollapsecreatecreateNodedblclickdeactivateexpandfocusfocusTreeinitkeydownkeypresslazyLoadloadChildrenloadErrorpostProcessremoveNoderenderColumnsrenderNoderenderTitlerestoreselect