diff --git a/docs/timeline.html b/docs/timeline.html index 66efe864..33e5beee 100644 --- a/docs/timeline.html +++ b/docs/timeline.html @@ -39,6 +39,7 @@
selectable
is true
. See also the callbacks onAdd
, onUpdate
, onMove
, and onRemove
, described in detail in section Editing Items.
+ selectable
and editable
are set true
.
+ selectable
and editable
are set true
.
+ selectable
and editable
are set true
.
+ selectable
and editable
are set true
.
+
+ When the Timeline is configured to be editable (both options selectable
and editable
are true
), the user can move items by dragging them, can create a new item by double tapping on an empty space, can update an item by double tapping it, and can delete a selected item by clicking the delete button on the top right.
+
+ One can specify callback functions to validate changes made by the user. There are a number of callback functions for this purpose: +
+ +onAdd(item, callback)
Fired when a new item is about to be added. If not implemented, the item will be added with default text contents.onUpdate(item, callback)
Fired when an item is about to be updated. This function typically has to show a dialog where the user change the item. If not implemented, nothing happens.onMove(item, callback)
Fired when an item has been moved. If not implemented, the move action will be accepted.onRemove(item, callback)
Fired when an item is about to be deleted. If not implemented, the item will be always removed.+ Each of the callbacks is invoked with two arguments: +
+item
: the item being manipulatedcallback
: a callback function which must be invoked to report back. The callback must be invoked as callback(item | null)
. Here, item
can contain changes to the passed item. When invoked as callback(null)
, the action will be cancelled.+ Example code: +
+ +var options = { + onUpdate: function (item, callback) { + item.content = prompt('Edit items text:', item.content); + if (item.content != null) { + callback(item); // send back adjusted item + } + else { + callback(null); // cancel updating the item + } + } +} ++ +A full example is available here: 08_validate_changes.html. +
@@ -746,7 +820,7 @@ timeline.off('select', onSelect);
For example, to change the border and background color of all items, include the following code inside the head of your html code or in a separate stylesheet.
<style> - .graph .item { + .vis.timeline .item { border-color: orange; background-color: yellow; } diff --git a/examples/timeline/08_validate_changes.html b/examples/timeline/08_validate_changes.html index 2964f10c..7b41f780 100644 --- a/examples/timeline/08_validate_changes.html +++ b/examples/timeline/08_validate_changes.html @@ -59,7 +59,7 @@ callback(item); // send back adjusted item } else { - callback(null); // cancel editing item + callback(null); // cancel updating the item } },