diff --git a/examples/timeline/05_groups.html b/examples/timeline/05_groups.html
index a103d1a3..982cb7fd 100644
--- a/examples/timeline/05_groups.html
+++ b/examples/timeline/05_groups.html
@@ -60,7 +60,7 @@
// create visualization
var container = document.getElementById('visualization');
var options = {
- groupOrder: 'content'
+ groupOrder: 'content' // groupOrder can be a property name or a sorting function
};
var timeline = new vis.Timeline(container);
diff --git a/examples/timeline/09_order_groups.html b/examples/timeline/09_order_groups.html
new file mode 100644
index 00000000..d7556491
--- /dev/null
+++ b/examples/timeline/09_order_groups.html
@@ -0,0 +1,67 @@
+
+
+
+ Timeline | Order groups
+
+
+
+
+
+
+
+
+ This example demonstrate custom ordering of groups.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/timeline/index.html b/examples/timeline/index.html
index 4017ec88..5c933428 100644
--- a/examples/timeline/index.html
+++ b/examples/timeline/index.html
@@ -20,6 +20,7 @@
06_event_listeners.html
07_custom_time_bar.html
08_edit_items.html
+ 09_order_groups.html
diff --git a/src/timeline/component/Group.js b/src/timeline/component/Group.js
index 2c4043c5..282bc97d 100644
--- a/src/timeline/component/Group.js
+++ b/src/timeline/component/Group.js
@@ -91,6 +91,7 @@ Group.prototype.setItems = function setItems(itemsData) {
if (this.itemSet) {
// remove current item set
this.itemSet.setItems();
+ this.itemSet.hide();
this.groupPanel.frame.removeChild(this.itemSet.getFrame());
this.itemSet = null;
}
@@ -129,16 +130,14 @@ Group.prototype.show = function show() {
this.labelPanel.frame.appendChild(this.dom.label);
}
- if (this.itemSet) {
- this.itemSet.show();
- }
-
var itemSetFrame = this.itemSet && this.itemSet.getFrame();
if (itemSetFrame) {
if (itemSetFrame.parentNode) {
itemSetFrame.parentNode.removeChild(itemSetFrame);
}
this.groupPanel.frame.appendChild(itemSetFrame);
+
+ this.itemSet.show();
}
};
diff --git a/test/timeline.html b/test/timeline.html
index 2c842cdf..44c020ce 100644
--- a/test/timeline.html
+++ b/test/timeline.html
@@ -113,15 +113,9 @@
});
*/
- items.on('add', function (nodes) {
- console.log('add', nodes);
- });
- items.on('update', function (nodes) {
- console.log('update', nodes);
- });
- items.on('remove', function (nodes) {
- console.log('remove', nodes);
- });
+ items.on('add', console.log.bind(console));
+ items.on('update', console.log.bind(console));
+ items.on('remove', console.log.bind(console));
diff --git a/test/timeline_groups.html b/test/timeline_groups.html
index d2c3c49c..d6ad61b5 100644
--- a/test/timeline_groups.html
+++ b/test/timeline_groups.html
@@ -107,25 +107,13 @@
});
*/
- items.on('add', function (nodes) {
- console.log('items add', nodes);
- });
- items.on('update', function (nodes) {
- console.log('items update', nodes);
- });
- items.on('remove', function (nodes) {
- console.log('items remove', nodes);
- });
+ items.on('add', console.log.bind(console));
+ items.on('update', console.log.bind(console));
+ items.on('remove', console.log.bind(console));
- groups.on('add', function (nodes) {
- console.log('groups add', nodes);
- });
- groups.on('update', function (nodes) {
- console.log('groups update', nodes);
- });
- groups.on('remove', function (nodes) {
- console.log('groups remove', nodes);
- });
+ groups.on('add', console.log.bind(console));
+ groups.on('update', console.log.bind(console));
+ groups.on('remove', console.log.bind(console));