diff --git a/docs/timeline/index.html b/docs/timeline/index.html index e1219ee0..a529c1d1 100644 --- a/docs/timeline/index.html +++ b/docs/timeline/index.html @@ -455,6 +455,12 @@ var groups = [ The title can only contain plain text. + + visible + Boolean + no + Provides a means to toggle the whether a group is displayed or not. Defaults to true. + diff --git a/examples/timeline/groups/groupsEditable.html b/examples/timeline/groups/groupsEditable.html index a7d275fa..d8a578ad 100644 --- a/examples/timeline/groups/groupsEditable.html +++ b/examples/timeline/groups/groupsEditable.html @@ -28,7 +28,8 @@

- This example demonstrates editable groups (for now only reordering). + This example demonstrates editable groups (reordering and hiding). +

@@ -55,7 +56,14 @@ {"content": "WEC", "id": "WEC", "value": 18, className:'endurance'}, {"content": "GP2", "id": "GP2", "value": 19, className:'openwheel'} ]); - + + // function to make all groups visible again + function showAllGroups(){ + groups.forEach(function(group){ + groups.update({id: group.id, visible: true}); + }) + }; + // create a dataset with items // note that months are zero-based in the JavaScript Date object, so month 3 is April var items = new vis.DataSet([ @@ -299,6 +307,20 @@ a.value = b.value; b.value = v; }, + groupTemplate: function(group){ + var container = document.createElement('div'); + var label = document.createElement('span'); + label.innerHTML = group.content + ' '; + container.insertAdjacentElement('afterBegin',label); + var hide = document.createElement('button'); + hide.innerHTML = 'hide'; + hide.style.fontSize = 'small'; + hide.addEventListener('click',function(){ + groups.update({id: group.id, visible: false}); + }); + container.insertAdjacentElement('beforeEnd',hide); + return container; + }, orientation: 'both', editable: true, groupEditable: true, diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js index aeae38c6..7f5d463c 100644 --- a/lib/timeline/Timeline.js +++ b/lib/timeline/Timeline.js @@ -259,14 +259,22 @@ Timeline.prototype.setGroups = function(groups) { if (!groups) { newDataSet = null; } - else if (groups instanceof DataSet || groups instanceof DataView) { - newDataSet = groups; - } else { - // turn an array into a dataset - newDataSet = new DataSet(groups); + var filter = { + filter : function(group){ + return group.visible !== false; + } + } + if (groups instanceof DataSet || groups instanceof DataView) { + newDataSet = new DataView(groups,filter); + } + else { + // turn an array into a dataset + newDataSet = new DataSet(groups.filter(filter)); + } } + this.groupsData = newDataSet; this.itemSet.setGroups(newDataSet); };