Options
All
  • Public
  • Public/Protected
  • All
Menu

Hierarchy

  • options

Index

Properties

align?: number | align

The align option specifies the alignment of the nodes inside Family Tree JS.

  • FamilyTree.align.center - centered
  • FamilyTree.align.orientation - according to the orientation option

Default value - FamilyTree.align.center

var family = new FamilyTree('#tree', {
align: FamilyTree.align.orientation
});
anim?: { duration?: number; func?: anim }

Can be used to control the transition of the nodes on expand/collapse operation. Default value - func: FamilyTree.anim.outPow, duration: 200

var family = new FamilyTree('#tree', {
anim: {func: FamilyTree.anim.outBack, duration: 500}
});

Type declaration

  • Optional duration?: number

    Easing functions specify the speed at which an animation progresses at different points within the animation.

  • Optional func?: anim

    defines how long time an animation should take to complete

assistantSeparation?: number

Set the assistant separation value. Default value - 100

var family = new FamilyTree('#tree', {
assistantSeparation: 150
});
clinks?: link[]

Adds curved link.

var family = new FamilyTree('#tree', {
clinks: [
from: 4, to: 0, label: 'text'},
{from: 4, to: 5, template: 'blue', label: '4 reports to 3' },
{from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' }
]
});
collapse?: { allChildren?: boolean; level: number }

Collapse specified level of the family and its children if allChildren is true.

var family = new FamilyTree('#tree', {
collapse: {level: 2, allChildren: true}
});

Type declaration

  • Optional allChildren?: boolean
  • level: number
columns?: number

The number of colums if the family has multiple root nodes. Default value - 10

var family = new FamilyTree('#tree', {
columns: 1
});
dottedLines?: dottedLine[]

Adds dotted line.

var family = new FamilyTree('#tree', {
dottedLines: [
{from: 6, to: 1 }
]
});
editForm?: { addMore?: string; addMoreBtn?: string; addMoreFieldName?: string; buttons?: {}; cancelBtn?: string; elements?: (editFormElement | editFormElement[])[]; focusBinding?: string; generateElementsFromFields?: boolean; photoBinding?: string; readOnly?: boolean; saveAndCloseBtn?: string; titleBinding?: string }

Configure the buildin edit form. See doc...

Type declaration

  • Optional addMore?: string
  • Optional addMoreBtn?: string
  • Optional addMoreFieldName?: string
  • Optional buttons?: {}
    • [key: string]: { hideIfDetailsMode?: boolean; hideIfEditMode?: boolean; icon?: string; text?: string } | null
  • Optional cancelBtn?: string
  • Optional elements?: (editFormElement | editFormElement[])[]
  • Optional focusBinding?: string
  • Optional generateElementsFromFields?: boolean
  • Optional photoBinding?: string
  • Optional readOnly?: boolean
  • Optional saveAndCloseBtn?: string
  • Optional titleBinding?: string
enablePan?: boolean

You can disable family pan. Default value - true.

var family = new FamilyTree('#tree', {
enablePan: false
});
enableSearch?: boolean

Enables advanced search. Default value is true.

var family = new FamilyTree('#tree', {
enableSearch: false
});
enableTouch?: boolean

Enable touch instead of mouse for particular devices with touchscreen/touchpad/trackpad. Default value - false.

var family = new FamilyTree('#tree', {
enableTouch: true
});
expand?: { allChildren?: boolean; nodes?: (string | number)[] }

Expand specified node ids and its children if allChildren is true. The expand option works only if collapse is set.

In the example above the second level of the family will be collapsed but node with id 155 and its children will be expanded.

var family = new FamilyTree('#tree', {
collapse: {level: 2, allChildren: true},
expand: {nodes: [155], allChildren: true}
});

Type declaration

  • Optional allChildren?: boolean
  • Optional nodes?: (string | number)[]
exportUrl?: string

The URL to the export server. Default value - https://balkan.app/export

var family = new FamilyTree('#tree', {
exportUrl: "https://balkan.app/export"
});
filterBy?: string | string[] | {}

Filter the FamilyTree by the specified fields.

var family = new FamilyTree('#tree', {
filterBy: 'all'
});
var family = new FamilyTree('#tree', {
filterBy: ['country', 'title']
});
var family = new FamilyTree('#tree', {
filterBy: {
name: { 'name 2': { checked: false, text: 'My text 2'} },
title: {}
}
});
groupDottedLines?: dottedLine[]

Adds group dotted line.

var family = new FamilyTree('#tree', {
groupDottedLines: [
{from: 6, to: 1 }
]
});
interactive?: boolean

Enables or disables the browser events handlers like click, pan, zoom, pinch, etc. Default value - true.

var family = new FamilyTree('#tree', {
interactive: false
});
keyNavigation?: boolean | keyNavigation

Enable keyboard navigation. Use "f" for find, arrows and space to navigate in the family. Default value - false.

var family = new FamilyTree('#tree', {
keyNavigation: true
});
var family = new FamilyTree('#tree', {
keyNavigation: { focusId: 5 }
});

See doc...

layout?: number | layout

Sets the layout algoritm:

  • FamilyTree.layout.normal
  • FamilyTree.layout.mixed
  • FamilyTree.layout.tree
  • FamilyTree.layout.treeLeftOffset
  • FamilyTree.layout.treeRightOffset
  • FamilyTree.layout.treeLeft
  • FamilyTree.layout.treeRight
  • FamilyTree.layout.grid

Default value - FamilyTree.layout.normal

var family = new FamilyTree('#tree', {
layout: FamilyTree.layout.mixed
});
layoutGridColumns?: string | number

Sets the maximum number of columns in grid layout, it has to be even nymber or 'dynamic' string The default id 'dynamic', that means that the maximum colomn numbers are dinamicly calculated

lazyLoading?: boolean

Lazy loading is technique that defers loading of non-critical nodes at page load time. Instead, these non-critical nodes are loaded at the moment of need. Default value - true.

var family = new FamilyTree('#tree', {
lazyLoading: false
});
levelSeparation?: number

The gap between each level. Default value - 60

var family = new FamilyTree('#tree', {
levelSeparation: 50
});
linkBinding?: {}

Link binding in Family Tree JS maps node data to link template parameters.

var family = new FamilyTree('#tree', {
linkBinding: {
link_field_0: "createdAt"
},
nodes: [
{ id: "1", name: "Amber McKenzie" },
{ id: "2", pid: "1", createdAt: "Since 08/08/2018" },
{ id: "3", pid: "1", createdAt: "Since 05/04/2018" }
]
});

See doc...

Type declaration

  • [key: string]: string
menu?: menu

Enables export to csv, export to svg and other FamilyTree operations. Also you can define your own FamilyTree operation.

var family = new FamilyTree('#tree', {
menu:{
svg: { text: "Export SVG" },
csv: { text: "Export CSV" }
myMenuItem: {text:"My node menu Item", onClick: function {}}
}
});

See doc...

min?: boolean

Minimize/Maximize node. The template has to have min defined. Default value - false.

var family = new FamilyTree('#tree', {
min: true
});

See doc...

minPartnerSeparation?: number

Minimum gap between partner and node with partners. Default value - 50

var family = new FamilyTree('#tree', {
minPartnerSeparation: 100
});
miniMap?: boolean

Shows mini map over the expanded tree. Default value - false.

var family = new FamilyTree('#tree', {
miniMap: true
});
mixedHierarchyNodesSeparation?: number

The gap between nodes in vertical layout. Default value - 20

var family = new FamilyTree('#tree', {
mixedHierarchyNodesSeparation: 5
});
mode?: "dark" | "light"

Color mode. Default value - light.

var family = new FamilyTree('#tree', {
mode: "dark"
});
mouseScrool?: action

mouseScrool can accept the following values:

  • FamilyTree.action.zoom - will zoom in/out on mouse scroll
  • FamilyTree.action.ctrlZoom - will zoom in/out on mouse scroll and ctrl button is pressed
  • FamilyTree.action.xScroll - left/right move of the family on mouse scroll
  • FamilyTree.action.yScroll - up/down move of the family on mouse scroll
  • FamilyTree.action.none - do nothing on mouse scroll

Default value - FamilyTree.action.zoom

var family = new FamilyTree('#tree', {
mouseScrool: FamilyTree.action.ctrlZoom
});
movable?: movable

movable node, move the node anywhere on the canvas

nodeBinding?: {}

Node binding in Family Tree JS maps node data to node template parameters.

var family = new FamilyTree('#tree', {
nodeBinding: {
field_0: "name"
},
nodes: [
{ id: 1, name: "Amber McKenzie" }
]
});

Type declaration

  • [key: string]: string
nodeCircleMenu?: circleMenu

With node circle menu you can add, edit, remove node or create clink/slink with drga and drop. Before setting this option make sure that you defined nodeCircleMenuButton in the ysed template.

var family = new FamilyTree('#tree', {
nodeCircleMenu: {
editNode: {
icon: FamilyTree.icon.edit(24, 24, '#aeaeae'),
text: "Edit node",
color: "white"
},
addClink: {
icon: FamilyTree.icon.link(24, 24, '#aeaeae'),
text: "Add C link",
color: '#fff',
draggable: true
}
}
});

See doc...

nodeContextMenu?: menu

Customizable context menu. Also you can define your own node operation.

var family = new FamilyTree('#tree', {
nodeContextMenu:{
details: {text:"Details"},
edit: {text:"Edit"},
add: {text:"Add"},
remove: {text:"Remove"}
myMenuItem: {text:"My node menu Item", onClick: function {}}
}
});

See doc...

nodeMenu?: menu

Enables edit, add, remove and other node operations. Also you can define your own node operation.

var family = new FamilyTree('#tree', {
nodeMenu:{
details: {text:"Details"},
edit: {text:"Edit"},
add: {text:"Add"},
remove: {text:"Remove"},
myMenuItem: {text:"My node menu Item", onClick: function {}}
}
});

See doc...

nodeMouseClick?: action

nodeMouseClick can accept the following values:

  • FamilyTree.action.edit - will open the edit view for the clicked node on the right hand side
  • FamilyTree.action.details - will open the details view for the clicked node on the right hand side, the details view is very similar to the edit view the only difference is that is read only.
  • FamilyTree.action.expandCollapse - will expand or collapse the children nodes
  • FamilyTree.action.none - do nothing on node click event
  • FamilyTree.action.pan - allows you to move the family in any direction

Default value - FamilyTree.action.details

var family = new FamilyTree('#tree', {
nodeMouseClick: FamilyTree.action.edit
});
nodeMouseDbClick?: action

nodeMouseDbClick can accept the following values:

  • FamilyTree.action.edit - will open the edit view for the clicked node on the right hand side
  • FamilyTree.action.details - will open the details view for the clicked node on the right hand side, the details view is very similar to the edit view the only difference is that is read only
  • FamilyTree.action.expandCollapse - will expand or collapse the children nodes
  • FamilyTree.action.none - do nothing on node click event

Default value - FamilyTree.action.none

var family = new FamilyTree('#tree', {
nodeMouseDbClick: FamilyTree.action.edit
});
nodeTreeMenu?: boolean
nodes?: Object[]

Array of node data JSON objects. nodes option is the data source of the family. Node JSON objects could have unlimited number of properties, id, pid, ppid, stpid and tags are reserved node properties.

  • id - unique identifier, it clould be integer or string
  • pid - is the parent id
  • stpid - subtree parent id
  • ppid - parent partner id
  • tags - array of strings
    var family = new FamilyTree('#tree', {
    nodes: [
    { id: 1 },
    { id: 2, pid: 1, tags: ["Sales"] },
    { id: 3, stpid: 2 }
    ]
    });
orderBy?: string | orderBy[]

The orderBy option is used to sort the nodes in ascending order by specified field. The default order is by nodes order in the nodes array. Default value - null

var family = new FamilyTree('#tree', {
orderBy: "orderId",
nodes: [
{ id: 10, pid: 1, orderId: 2 },
{ id: 11, pid: 1, orderId: 1 }
]
});
var family = new FamilyTree('#tree', {
orderBy: {field: "orderId", desc: true},
nodes: [
{ id: 10, pid: 1, orderId: 2 },
{ id: 11, pid: 1, orderId: 1 }
]
});
orientation?: orientation

Specifies the orientation of the Family Tree JS. could accept one of the following values:

  • FamilyTree.orientation.top
  • FamilyTree.orientation.bottom
  • FamilyTree.orientation.right
  • FamilyTree.orientation.left
  • FamilyTree.orientation.top_left
  • FamilyTree.orientation.bottom_left
  • FamilyTree.orientation.right_top
  • FamilyTree.orientation.left_top

Default value - FamilyTree.orientation.top

var family = new FamilyTree('#tree', {
orientation: FamilyTree.orientation.bottom
});
padding?: number

The padding option sets the padding area on all four sides of the FamilyTree. Default value - 30

var family = new FamilyTree('#tree', {
padding: 20
});
partnerChildrenSplitSeparation?: number

Gap between partner links. Default value - 20

var family = new FamilyTree('#tree', {
partnerChildrenSplitSeparation: 50
});
partnerNodeSeparation?: number

Gap between partners. Default value - 15

var family = new FamilyTree('#tree', {
partnerNodeSeparation: 30
});
roots?: (string | number)[]

Define nodes as roots. Default value - null

var family = new FamilyTree('#tree', {
roots: [2, 4]
});
scaleInitial?: number | match

The scale factor determines what fraction of the entire scale is visible at one time.

  • FamilyTree.match.height
  • FamilyTree.match.width
  • FamilyTree.match.boundary
  • [number]

Default value - 1

var family = new FamilyTree('#tree', {
scaleInitial: FamilyTree.match.boundary
});

See doc...

scaleMax?: number

Determines the naximum scale factor. Default value - 5

var family = new FamilyTree('#tree', {
scaleMax: 10
});
scaleMin?: number

Determines the minimum scale factor. Default value - 0.1

var family = new FamilyTree('#tree', {
scaleMin: 0.2
});
searchDisplayField?: string

Displays a field in the search result.

var family = new FamilyTree('#tree', {
searchDisplayField: "name"
});

See doc...

searchFields?: string[]

Search by the fields defined in searchFields.

var family = new FamilyTree('#tree', {
searchFields: ["name", "title", etc...]
});

See doc...

searchFieldsAbbreviation?: {}

Search in field with abbreviation.

var family = new FamilyTree('#tree', {
searchFieldsAbbreviation: {
"n": "name",
"a": "My Address"
}
});

See doc...

Type declaration

  • [key: string]: string
searchFieldsWeight?: {}

Search by weight of the fields.

var family = new FamilyTree('#tree', {
searchFieldsWeight: {
"Name": 100, //percent
"Title": 20 //percent
}
});

See doc...

Type declaration

  • [key: string]: number
showXScroll?: boolean

Shows horizontal scrollbar. Default value - false.

var family = new FamilyTree('#tree', {
showXScroll: true
});
showYScroll?: boolean

Shows vertical scrollbar. Default value - false.

var family = new FamilyTree('#tree', {
showYScroll: true
});
siblingSeparation?: number

The gap between nodes in a subtree. Default value - 20

var family = new FamilyTree('#tree', {
siblingSeparation: 50
});
slinks?: link[]

Adds second link.

var family = new FamilyTree('#tree', {
slinks: [
from: 4, to: 0, label: 'text'},
{from: 4, to: 5, template: 'blue', label: '4 reports to 3' },
{from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' }
]
});
state?: { name?: string; readFromIndexedDB?: boolean; readFromLocalStorage?: boolean; readFromUrlParams?: boolean; writeToIndexedDB?: boolean; writeToLocalStorage?: boolean; writeToUrlParams?: boolean }

Persist the state (scale, position, expanded/collapsed and min/max nodes) in the url or indexedDB. Default value - null

var family = new FamilyTree('#tree', {
state: {
name: 'MyStateName',
readFromLocalStorage: true,
writeToLocalStorage: true,
readFromIndexedDB: true,
writeToIndexedDB: true,
readFromUrlParams: true,
writeToUrlParams: true
}
});

Type declaration

  • Optional name?: string
  • Optional readFromIndexedDB?: boolean
  • Optional readFromLocalStorage?: boolean
  • Optional readFromUrlParams?: boolean
  • Optional writeToIndexedDB?: boolean
  • Optional writeToLocalStorage?: boolean
  • Optional writeToUrlParams?: boolean
sticky?: boolean

Stops the family locking to the top of the screen once you move it.

var family = new FamilyTree('#tree', {
sticky: false
});
subtreeSeparation?: number

The gap between subtrees. Default value - 40

var family = new FamilyTree('#tree', {
subtreeSeparation: 50
});
tags?: {}

With tags option you can:

  • Set a specific template for tagged node/s See doc...
  • Set node as assistant See doc...
  • Change node menu, circle menu and context menu items for tagged node/s See doc...
  • Set the node level See demo...
  • Set specific options for sub trees like layout templates etc See doc...
    var family = new FamilyTree('#tree', {
    tags: {
    myTag: {template: 'olivia'}
    },
    nodes: [{id: 1}, {id: 2, tags: ['myTag']}]
    });

Type declaration

  • [key: string]: { nodeCircleMenu?: circleMenu; nodeContextMenu?: menu; nodeMenu?: menu; subLevels?: number; subTreeConfig?: { collapse?: { allChildren?: boolean; level?: number }; columns?: number; layout?: layout | number; levelSeparation?: number; mixedHierarchyNodesSeparation?: number; orientation?: orientation; siblingSeparation?: number; subtreeSeparation?: number }; template?: "ana" | "ula" | "olivia" | "belinda" | "rony" | "mery" | "polina" | "mila" | "diva" | "luba" | "isla" | "deborah" | "base" | "group" | "invisibleGroup" | string }
    • Optional nodeCircleMenu?: circleMenu
    • Optional nodeContextMenu?: menu
    • Optional nodeMenu?: menu
    • Optional subLevels?: number
    • Optional subTreeConfig?: { collapse?: { allChildren?: boolean; level?: number }; columns?: number; layout?: layout | number; levelSeparation?: number; mixedHierarchyNodesSeparation?: number; orientation?: orientation; siblingSeparation?: number; subtreeSeparation?: number }
      • Optional collapse?: { allChildren?: boolean; level?: number }
        • Optional allChildren?: boolean
        • Optional level?: number
      • Optional columns?: number
      • Optional layout?: layout | number
      • Optional levelSeparation?: number
      • Optional mixedHierarchyNodesSeparation?: number
      • Optional orientation?: orientation
      • Optional siblingSeparation?: number
      • Optional subtreeSeparation?: number
    • Optional template?: "ana" | "ula" | "olivia" | "belinda" | "rony" | "mery" | "polina" | "mila" | "diva" | "luba" | "isla" | "deborah" | "base" | "group" | "invisibleGroup" | string
template?: string

Set template if you want to change the appearance of the family. Family Tree JS comes with number of build-in templates:

  • ana
  • ula
  • olivia
  • belinda
  • rony
  • mery
  • polina
  • mila
  • diva
  • base
  • isla
  • deborah

Default value - ana.

var family = new FamilyTree('#tree', {
template: 'olivia'
});

See doc...

toolbar?: toolbar

With the toolbar enabled allows you to change the layout, zoom in/out, expand all nodes, etc.

var family = new FamilyTree('#tree', {
toolbar: {
layout: true,
zoom: true,
fit: true,
expandAll: false,
fullScreen: true
},
});
undoRedoStorageName?: string

Set the session storage name to use undo/redo functionallity.

zoom?: { smooth?: number; speed?: number }

Can be used to control the zooming sensitivity. Default value - speed: 120, smooth: 12

var family = new FamilyTree('#tree', {
zoom: {speed: 130, smooth: 10}
});

Type declaration

  • Optional smooth?: number
  • Optional speed?: number

Legend

  • Constructor
  • Property
  • Method
  • Static property
  • Static method
  • Property
  • Inherited method

Settings

Theme

Generated using TypeDoc