An organizational chart widget for creating hierarchical diagrams.
The component supports data loading from different sources. You can customize the look and feel of Organogram items by using templates,
uniting child elements of items into list blocks and redefining the applied css styles.
It's also possible to create your own css style for Organogram. Check Organogram documentation for more detailed description.
add | adds an item to the store |
addCss | applied CSS class to a component item |
adjust | adjusts the component to the size of the parent HTML container |
attachEvent | attaches the handler to an inner event of the component |
bind | binds components |
blockEvent | temporarily blocks triggering of ALL events of the calling object |
callEvent | calls an inner event |
clearAll | removes all items from the component |
clearCss | removes CSS class from all items |
close | closes the branch with the specified id |
closeAll | closes all branches in the tree |
count | returns the number of currently visible items |
customize | redefines the "type" property |
define | redefines a single configuration property (or a object with properties) |
destructor | destructs the calling object |
detachEvent | detaches a handler from an event (which was attached before by the attachEvent method) |
disable | disables the calling view (makes it dimmed and unclickable) |
enable | enables the calling view that was disabled by the 'disable' method |
exists | checks whether an item with the specified ID exists |
filter | filters the component |
find | returns all rows that match the criterion, or only the first one |
getBranchIndex | gets index of the node in a specific branch |
getChildViews | returns child views of the calling component |
getFirstChildId | gets the ID of the first child of the specified branch |
getFirstId | returns the ID of the first item |
getFormView | returns master form for the input |
getIdByIndex | returns the ID of the item with the specified index |
getIndexById | returns the index of the item with the specified ID |
getItem | gets the object of the data item with the specified ID |
getItemNode | returns HTML element of the item |
getLastId | returns the ID of the last item |
getNextId | returns the ID of an item that is after the specified item, either directly after or after a number of items (defined by the step) |
getNextSiblingId | returns the ID of the next sibling of the specified node |
getNode | returns the main HTML container for the calling object |
getOpenItems | returns ids of the opened branches |
getParentId | get the ID of the parent node of the specified item |
getParentView | returns the parent view of the component |
getPrevId | returns the ID of an item that is before the specified item, either directly before or before a number of items (defined by the step) |
getPrevSiblingId | returns the id of the previous sibling of the specified node |
getScrollState | returns the scroll position |
getSelectedId | returns the id(s) of the selected item(s) |
getSelectedItem | returns selected object |
getState | returns the current state of the view |
getTopParentView | returns the top parent view |
group | groups data by the specified data property |
hasCss | checks if item has specific css class |
hasEvent | checks whether the component has the specified event handler |
hide | hides the view |
isBranch | checks whether the node has any children |
isBranchOpen | checks whether the specified branch is open or closed |
isEnabled | checks whether the view is enabled |
isSelected | checks whether the specified item is selected or not |
isVisible | checks whether the view is visible |
load | loads data from an external data source |
loadBranch | loads data to the specified branch, as direct children of the node with the ID provided |
loadNext | sends a request to load the specified number of records to the end of the client-side dataset or to the specified position |
locate | gets the id of an item from the specified HTML event |
mapEvent | routes events from one object to another |
open | opens the branch with the specified id |
openAll | opens all branches in the tree |
parse | loads data to the component from an inline data source |
queryView | returns inner element/elements of a widget that correspond(s) to the defined parameters |
refresh | repaints the whole view or a certain item |
remove | removes the specified item/items from datastore |
removeCss | removes CSS class from a component item |
render | renders the specified item or the whole component |
resize | adjusts the view to a new size |
scrollTo | scrolls the data container to a certain position |
select | selects the specified item(s) |
selectAll | selects all items or the specified range |
serialize | serializes data to an array of JSON objects |
setState | restores the specified state of a view |
show | makes the component visible |
showItem | scrolls the component to make the specified item visible |
sort | sorts datastore |
sync | allows syncing two copies of data (all or just a part of it) from one DataCollection to another |
unbind | breaks "bind" link |
unblockEvent | cancels events blocking that was enabled by the 'blockEvent' command |
ungroup | ungroups data |
unselect | removes selection from the specified item |
unselectAll | removes selection from all items |
updateItem | updates the data item with new properties |
waitSave | allows to catch the moment when a data operation was saved to the server |
onAfterAdd | fires after adding an item to the datastore |
onAfterClose | fires after the branch has been closed |
onAfterContextMenu | fires after the context menu was called in the item area |
onAfterDelete | fires after an item is removed |
onAfterLoad | fires after data loading is complete |
onAfterOpen | fires after the branch has been opened |
onAfterRender | occurs immediately after the component has been rendered |
onAfterScroll | occurs when some webix view has been scrolled |
onAfterSelect | fires after item was selected |
onAfterSort | fires after sorting dataset |
onBeforeAdd | fires before adding an item to the datastore |
onBeforeClose | fires the moment you attempt to close the tree branch |
onBeforeContextMenu | fires before the context menu is called in the item area |
onBeforeDelete | fires before an item is removed |
onBeforeLoad | fires immediately before data loading has started |
onBeforeOpen | fires the moment you attempt to open the tree branch |
onBeforeRender | occurs immediately before the component has been rendered |
onBeforeSelect | fires before item selection is started |
onBeforeSort | fires before sorting of the dataset |
onBindRequest | fires when the component is ready to receive data from the master component |
onBlur | fires when focus is moved out of the view |
onDataRequest | fires when data from the server is requested for linear data structures (List, DataTable, DataView etc.) to implement dynamic data loading |
onDataUpdate | fires when a data item is being updated |
onDestruct | occurs when component destroyed |
onEnter | fires when the Enter key has been pressed |
onFocus | fires when a view gets focus |
onItemCheck | called when the checkbox inside the tree item was checked |
onItemClick | fires when a component item was clicked |
onItemDblClick | fires when a component item was double-clicked |
onItemRender | for each item rendering, occurs only for items with custom templates |
onKeyPress | occurs when keyboard key is pressed for the control in focus |
onLoadError | fires when an error occurs during data loading (invalid server side response) |
onLongTouch | fires on holding finger in some position for a certain period of time |
onMouseMove | fires when the mouse was moved over the specified component |
onMouseMoving | fires when the mouse was moved over the component |
onMouseOut | fires when the mouse was moved out from the specified item |
onSelectChange | fires after selection state was changed |
onSwipeX | occurs on a horizontal swipe movement |
onSwipeY | occurs on a vertical swipe movement |
onTabFocus | fires after a tab focus has been changed |
onTimedKeyPress | fires after typing has been finished in the field |
onTouchEnd | occurs when the touch event is ended |
onTouchMove | occurs during touch movement |
onTouchStart | fires when some webix view has been touched |
onViewResize | fires when the size of a view has been changed by resizer |
onViewShow | fires when any hidden view is shown |
animate | defines the type of animation, with which the view is shown, if it is a Multiview cell |
ariaLabel | sets a screen readable label for Organogram |
autoheight | adjusts Organogram to the parent container size vertically |
autowidth | adjusts Organogram to the parent container size horizontally |
borderless | used to hide the component borders |
click | sets an action happening on a button click |
container | an HTML container (or its ID) where the component should be initialized |
css | the name of the CSS class that will be applied to the view container or the object with styles |
data | JavaScript array containing data for the component |
dataFeed | alternative data source for filtered and bound data |
datathrottle | sets the polling interval (the time period between the completion of a network request and the next request for data) |
datatype | the type of loaded data |
disabled | indicates whether an item is enabled |
filterMode | defines the pattern for tree item filtering |
gravity | sets the view gravity |
height | sets the height of the component |
hidden | defines whether the view will be hidden initially |
id | the ID of a widget |
item | alias to the type property |
keyPressTimeout | a delay between the key press and the action |
maxHeight | sets the maximum height for the view |
maxWidth | sets the maximum width for the view |
minHeight | sets the minimal height for the view |
minWidth | sets the minimal width for the view |
mouseEventDelay | the delay between a real mouse action and invoking the related events |
multiselect | enables multiselect mode |
on | allows attaching custom handlers to inner events of the component |
onClick | attaches a click handler for component parts with the specified CSS class |
onContext | a property used to define custom context-click (right click) handlers for elements in the DataTable cells
|
onDblClick | attaches a dblclick behavior for component items with the specified CSS class. |
onMouseMove | attaches a mousemove behavior for component items with the specified CSS class. |
ready | the event handler is called just after the component has been completely initialized |
removeMissed | defines how to treat items in case of reloading |
save | defines URLs for data saving |
scheme | defines schemes for data processing |
scroll | enables/disables the scroll bar |
scrollSpeed | the time during which the component is scrolled to the specified position (in milliseconds) |
select | enables/disables items selection or multiselection in widgets |
template | the component template |
threeState | enable three-state checkboxes |
tooltip | sets a popup message next to the item when the cursor points to it |
type | an object that specifies items presentation |
url | the URL which the component will use to load data after its initialization |
width | sets the width of a widget |
$getSize | returns the current size of the component |
$height | the current height of the view |
$scope | scope for resolving event and method names |
$setNode | defines HTML element for the component |
$setSize | sets the component size |
$skin | the method which will be called when skin is defined |
$tooltipIn | shows a tooltip |
$tooltipMove | defines the tooltip while the cursor moves over a view or an HTML area |
$tooltipOut | defines the behavior of a tooltip when the cursor is out of the target widget or HTML area |
$view | reference to the top HTML element of the view |
$width | the current width of the view |
config | all options from the initial component configuration |
data | inner DataStore |
name | indicates the name of the component (a read-only property) |
on_click | redefines default click behavior for component items. |
on_context | a property used to define custom context-click (right click) handlers for elements in widgets |
on_dblclick | attaches a dblclick behavior for component items with the specified CSS class |
on_mouse_move | attaches a mouse move behavior for component items with the specified CSS class |
type | set of properties and helpers for item rendering |
types | collection of possible types |
waitData | eventual result of an asynchronous operation ('promise' object) for the loaded data |