configuration options
Csv import and export delimiter/separator
Escape HTML to prevent Cross-site scripting (also known as XSS) attacks
Cut nodes when export with pages, dafault is false
Hides the Edit Form when the family is moved with pan
Can be used to instruct the browser to defer loading of FamilyTree that are off-screen until the user scrolls near them. The init event listener will be called as soon as the FamilyTree become visible.
Use mixed layout for example tree or treeLeftOffset if number of children is more then specified value
Render clinks before nodes, default is false
Render links before nodes, default is false
Reset movable nodes to its original position when expand or collapse
Close search result list by click outside list and clean search input
Search help symbol.
Search placeholder
Align children of assistant vertically
node-created and layout event listeners are obsolete use node-initialized or node-layout instead
Shows/hides lloading image. Usefull when export large data to pdf. You can override and show your own loading image.
The on() method of the OrgChart class sets up a function that will be called whenever the specified event is delivered to the target. *
A case-sensitive string representing the event type to listen for.
The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function.
The onExpandCollpaseButtonClick event occurs when the family is redrawed.
var family = new FamilyTree('#tree', {});
family.onExpandCollpaseButtonClick(() => {
//return false; to cancel the operation
});
family.load(nodes);
Indicates id the operation is collaps or expand
the id of the clicked node
node ids that will be expanded or collapsed
Occurs in the beginning of the export. Use this event listener to hide loading image or upload exported document to your server using ArrayBuffer argument.
var family = new FamilyTree('#tree', {});
family.onExportEnd(() => {
//return false; to cancel the operation for example id you prefer the exported document to not download
});
family.load(nodes);
the array buffer is the exported document, you can save it on a server or send it via email
this property is initialized only for PDF/PNG exports
csv ot xml string
this property is initialized only for CSV/XML/SVG exports
extension
this property is initialized only for CSV/XML exports
filename, you can change the filename here
this property is initialized only for CSV/XML exports
an array of node objects
this property is initialized only for CSV/XML exports
export options
this property is initialized only for SVG exports
add extra styles
this property is initialized only for SVG exports
Occurs in the beginning of the export. Extra css styles can be added to the exported document using this event listener or show loading image.
var family = new FamilyTree('#tree', {});
family.onExportStart(() => {
args.styles += '<link href="https://fonts.googleapis.com/css?family=Gochi+Hand" rel="stylesheet">';
//return false; to cancel the operation
});
family.load(nodes);
the content to be exported
this property is initialized only for PDF/PNG/SVG exports
extension
this property is initialized only for CSV/XML
filename, you can change the filename here
this property is initialized only for CSV/XML exports
array of node objects
this property is initialized only for CSV/XML exports
export options
this property is initialized only for PDF/PNG/SVG exports
an object that discribes pages to be exported
this property is initialized only for PDF/PNG exports
add extra styles
this property is initialized only for PDF/PNG/SVG exports
The onField() method of the FamilyTree class sets up a function that will be called whenever the specified event is delivered to the target.
var family = new FamilyTree('#tree', {});
family.onField((args) => {
//return false; to cancel
});
family.load(nodes);
node data json object
svg or html element of the filed, can be changed in the event
field template name
name of the field
the node
value of the filed, can be changed in the event
Occurs when the nodes in FamilyTree has been created and loaded to the DOM.
var family = new FamilyTree('#tree', {});
family.onInit(() => {
});
family.load(nodes);
On node click event listener.
var family = new FamilyTree('#tree', {});
family.onNodeClick(() => {
//return false; to cancel the operation
});
family.load(nodes);
On node double click event listener.
var family = new FamilyTree('#tree', {});
family.onNodeDoubleClick(() => {
//return false; to cancel the operation
});
family.load(nodes);
clicked node data
Occurs when node tree menu button is clicked. Use this event to modify the nodes in the tree menu.
var family = new FamilyTree('#tree', {});
family.onNodeTreeMenuShow((args) => {
});
The onRedraw event occurs when the family is redrawed.
var family = new FamilyTree('#tree', {});
family.onRedraw(() => {
});
family.load(nodes);
Occurs when the node data has been updated, removed or added.
var family = new FamilyTree('#tree', {});
family.onUpdateNode((args) => {
//return false; to cancel the operation
});
Adds new node to the nodes collection
node data
Adds child and partner
id of the existing partner node
child data
partner data
called at the end of the animation
indicates if the update event will be called or not See doc...
Adds child
child node data
called at the end of the animation
indicates if the update event will be called or not See doc...
Adds curved link.
from node with id
to node with id
link label
link template, for example 'orange'
Adds new node to the nodes collection, redraws the family and fires remove event
node data
called at the end of animation
indicates if the add event will be called or not
Adds parrent
node child id
mother or father
new added parent data
called at the end of the animation
indicates if the update event will be called or not See doc...
id of the existing partner node
ids of the child nodes
partner data
called at the end of the animation
indicates if the update event will be called or not See doc...
Adds partner node
data.pids partner id should be an existing id
new added partner data
called at the end of the animation
indicates if the update event will be called or not See doc...
Adds second link.
from node with id
to node with id
link label
link template, for example 'orange'
If specified node has assistant/s or partner/s as children will return false.
identification number of the node
Centers specified node on the screen.
the id of the node
parentState: FamilyTree.COLLAPSE_PARENT_NEIGHBORS, childrenState: FamilyTree.COLLAPSE_SUB_CHILDRENS, rippleId: rippleId, vertical: false, horizontal: false
called when the animation completes
Changes roots order.
id of a node that will not change is position, can be null
roots id array in the required order
called after the roots are changed and animation completes
Clears all Redo stack steps.
Clears all Undo stack steps.
Collapses specified nodes.
the id of the node that will not move
node ids that will be collapsed
called after the animation completes
Destroys the object.
Draws the family.
Action for example FamilyTree.action.centerNode, default is FamilyTree.action.update
parameters for the action
called when the animation completes
Expands specified nodes.
the id of the node that will not move during the animation
node ids that will be expanded
called after the animation completes
Expand/Collapse lists of nodes.
the id of the node that will not move
expand all nodes with ids
collpase all nodes with ids
called after the animation completes
Exports to CSV
The name of the exported file See doc...
Exports to JSON
The name of the exported file See doc...
Exports to PDF document
export options
called when the export completes See doc...
Exports the details form to PDF.
export options
called when the export completes See doc...
Exports to PNG document
export options
called when the export completes See doc...
Exports the details form to PDF.
export options
called when the export completes See doc...
Exports to SVG document
export options
called when the export completes See doc...
Exports to XML
The name of the exported file See doc...
Fits the content to the visible area.
called when the animation completes
Genereates unique identification number that can be used for new nodes
Gets node data.
identification number of the node
Gets collpased node ids of the specifeid node
Gets menu button html element
Gets the node as FamilyTree.node object.
Gets node html element
node id
Gets the current scale of the family.
Gets svg html element
Gets the view box attribute of the svg html element.
Gets nodes as xml.
Gets the height of the container.
Hides the tree menu
called at the end of the animation
Imports CSV file. See doc...
Imports JSON file. See doc...
Imports XML file. See doc...
Load nodes data.
node data array
function called after the load
Loads nodes from xml.
Xml with node structure
function called after the load
Magnify(Zoom in) specific node in the family.
id of the node
scale to magnify
show on front or back
animation type
Maximize the node. Without parameters maximize all nodes.
the id of the node, if id is null, undefined ot empty string will maximize all nodes
center horizontally
center vertically
called when the animation completes
Minimize the node. Without parameters minimize all nodes.
the id of the node, if id is null, undefined ot empty string will minimize all nodes
called when the animation completes
Ends the move
Moves specified nodes to the visible area.
Array of node ids
called at the end of animation
Redo data operations like adding/removing nodes. Set undoRedoStorageName option before calling this method.
called when the animation completes
Returns the number of Redo stack steps
Removes specified node from nodes collection
identification number of the node
Removes curved link.
from node with id
to node with id
Removes an event listener previously registered. The event listener to be removed is identified using a combination of the event type and the event listener function itself. Returns true if success and false if fail.
A string which specifies the type of event for which to remove an event listener
The event listener function of the event handler to remove from the event target
Removes node if the node can be removed
node id to be removed
called at the end of the animation
indicates if the update event will be called or not See doc...
Removes second link.
from node with id
to node with id
Replaces the id, pid, stpid, ppid and the ids in clinks, slinks, dottedLines, groupDottedLines. After the replacment updates the UI
dictionary containing old and new ids
called when the replacment completes
Animates specified node with ripple animation - highlight the node.
the id of the node
x value of the ripple center in the node
y value of the ripple center in the node
Search in the family.
search for value
search in field names
retrive data for fields See doc...
Sets orientation.
orientation type
lyout config name for the specified sub tree
called at the end of animation
Sets the current scale of the family. Returns the actual scale limited by scaleMax and scaleMin
new scale value
Sets the view box attribute of the svg html element.
Shares node data, uses build-in device sharing functionallity.
node id See doc...
Shows tree menu
node id
called at the end of the animation
State to url. See doc...
Toggles full screen mode.
Undo data operations like adding/removing nodes. Set undoRedoStorageName option before calling this method.
called when the animation completes
Returns the number of Undo stack steps
Updates the node data
node data
Updates the node data, redraws the family and fires update event.
node data
function called when the animation completes
if it set to true the update event is called
Gets the width of the container.
Zoom out or zoom in the family.
true for zoom in, false for zoom out or scale number, if scale is > 1 it will zoom in and scale < 1 zoom out.
array [x, y], where x is x percantege from the width and y is y percentage from the height.
should animate
called when the animation completes
Count all children nodes of the specified id.
FamilyTree instance
is null, empty or undefined
Checks if the used libraris is licnsed or not
SVG Path rounding function. Takes an input path string or commands and outputs a path string where all line-line corners have been rounded.
The SVG input path or commands array
The amount to round the corners, either a value in the SVG coordinate space, or, if useFractionalRadius is true, a value from 0 to 1.
A new SVG path string with the rounding
Generated using TypeDoc
HTML element or string selector for example '#tree'