From 88807e48da5f1e9aa2b54d17eda34f8914f4b7b5 Mon Sep 17 00:00:00 2001 From: RealRegatta Date: Sat, 4 Mar 2017 22:46:48 +0100 Subject: [PATCH 1/9] Add edited data as argument to the template function with update documentation (#2802) * Add edited data as argument to the template function * Update index.html --- docs/timeline/index.html | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/docs/timeline/index.html b/docs/timeline/index.html index 7ec093ae..c540e724 100644 --- a/docs/timeline/index.html +++ b/docs/timeline/index.html @@ -1044,7 +1044,7 @@ function (option, path) { template function none - A template function used to generate the contents of the items. The function is called by the Timeline with an items' data as the first argument and the item element as the second, and must return HTML code, a string or a template as result. When the option template is specified, the items do not need to have a field content. See section Templates for a detailed explanation. + A template function used to generate the contents of the items. The function is called by the Timeline with an items' data as the first argument, the item element as the second argument and the edited data as the third argument, and must return HTML code, a string or a template as result. When the option template is specified, the items do not need to have a field content. See section Templates for a detailed explanation. @@ -1743,11 +1743,11 @@ var items = new vis.DataSet([

Templates

- Timeline supports templates to format item contents. Any template engine (such as handlebars or mustache) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an item's data as argument, and outputs formatted HTML: + Timeline supports templates to format item contents. Any template engine (such as handlebars or mustache) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an item's data as the first argument, the item element as the second argument and the edited data as the third argument, and outputs formatted HTML:

var options = {
-  template: function (item) {
+  template: function (item, element, data) {
     var html = ... // generate HTML markup for this item
     return html;
   }
@@ -1759,8 +1759,11 @@ var items = new vis.DataSet([
   The HTML for an item can be created manually:
 
 
var options = {
-  template: function (item) {
-    return '<h1>' + item.header + '</h1><p>' + item.description + '</p>';
+  template: function (item, element, data) {
+    return '<h1>' + item.header + data.moving?' '+ data.start:'' + '</h1><p>' + item.description + '</p>';
+  },
+  onMoving: function (item, callback) {
+    item.moving = true;
   }
 };
 
@@ -1795,7 +1798,7 @@ var template = Handlebars.compile(source); You can use a React component for the templates by rendering them to the templates' element directly:
-  template: function (item, element) {
+  template: function (item, element, data) {
     return ReactDOM.render(<b>{item.content}</b>, element);
   },
 
@@ -1814,7 +1817,7 @@ var templates = { }; var options = { - template: function (item) { + template: function (item, element, data) { var template = templates[item.template]; // choose the right template return template(item); // execute the template } From eba3cf82b76ec65dd48fab3ad55ceb24947a39d2 Mon Sep 17 00:00:00 2001 From: yotamberk Date: Sun, 5 Mar 2017 09:56:19 +0200 Subject: [PATCH 2/9] fix(timeline): #2725 background items positioning when `orientation: top` (#2831) * Fix background items when orientation top --- lib/timeline/component/item/BackgroundItem.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/timeline/component/item/BackgroundItem.js b/lib/timeline/component/item/BackgroundItem.js index f0255415..a4ec1bd9 100644 --- a/lib/timeline/component/item/BackgroundItem.js +++ b/lib/timeline/component/item/BackgroundItem.js @@ -143,6 +143,7 @@ BackgroundItem.prototype.repositionX = RangeItem.prototype.repositionX; */ BackgroundItem.prototype.repositionY = function(margin) { var height; + var orientation = this.options.orientation.item; // special positioning for subgroups if (this.data.subgroup !== undefined) { @@ -154,7 +155,6 @@ BackgroundItem.prototype.repositionY = function(margin) { this.dom.box.style.height = this.parent.subgroups[itemSubgroup].height + 'px'; - var orientation = this.options.orientation.item; if (orientation == 'top') { this.dom.box.style.top = this.parent.top + this.parent.subgroups[itemSubgroup].top + 'px'; } else { @@ -170,8 +170,8 @@ BackgroundItem.prototype.repositionY = function(margin) { height = Math.max(this.parent.height, this.parent.itemSet.body.domProps.center.height, this.parent.itemSet.body.domProps.centerContainer.height); + this.dom.box.style.bottom = orientation == 'bottom' ? '0' : ''; this.dom.box.style.top = orientation == 'top' ? '0' : ''; - this.dom.box.style.bottom = orientation == 'top' ? '' : '0'; } else { height = this.parent.height; From 3a2b781e9cd48e6d29c5083ca730a7a293b454d5 Mon Sep 17 00:00:00 2001 From: Brad Hards Date: Sun, 5 Mar 2017 19:05:32 +1100 Subject: [PATCH 3/9] docs(timeline): Update docs and example to suggest being explicit about item overrides. (#2806) This is to reduce breakage if the fallback / default changes in a future release. --- docs/timeline/index.html | 10 +++++++++- examples/timeline/editing/individualEditableItems.html | 10 +++++----- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/docs/timeline/index.html b/docs/timeline/index.html index c540e724..cfaee114 100644 --- a/docs/timeline/index.html +++ b/docs/timeline/index.html @@ -357,7 +357,7 @@ var items = new vis.DataSet([ editable.updateTime boolean no - If true, items can be dragged to another moment int time. See section Editing Items for a detailed explanation. + If true, items can be dragged to another moment in time. See section Editing Items for a detailed explanation. @@ -1698,6 +1698,14 @@ var items = new vis.DataSet([ ]);
+

+ Individual manipulation actions (updateTime, updateGroup and remove) can also be set on individual items. If any of the item-level + actions are specified (and overrideItems is not false) then that takes precedence over the settings at the timeline level. Current behavior is + that if any of the item-level actions are not specified, those items get undefined value (rather than inheriting from the timeline level). This may change + in future major releases, and code that specifies all item level values will handle major release changes better. That is, instead of using + editable: {updateTime : true}, use editable: {updateTime : true, updateGroup: false, remove: false}. +

+

One can specify callback functions to validate changes made by the user. There are a number of callback functions for this purpose:

diff --git a/examples/timeline/editing/individualEditableItems.html b/examples/timeline/editing/individualEditableItems.html index ef7f0987..095c1574 100644 --- a/examples/timeline/editing/individualEditableItems.html +++ b/examples/timeline/editing/individualEditableItems.html @@ -34,7 +34,7 @@
- \ No newline at end of file + From abb3afa361fb56a5c2702461483e5625e6e66180 Mon Sep 17 00:00:00 2001 From: wimrijnders Date: Sun, 5 Mar 2017 09:10:21 +0100 Subject: [PATCH 4/9] docs(graph3d): Adjusted graph3d doc for autoscaling; ref Issue #2540 (#2812) * Adjusted doc for autoscaling; ref Issue #2540 * Edited Defaults column for Min/Max options for completeness --- docs/graph3d/index.html | 40 ++++++++++++++++++++++++++-------------- 1 file changed, 26 insertions(+), 14 deletions(-) diff --git a/docs/graph3d/index.html b/docs/graph3d/index.html index 974e2d27..1a7223d4 100644 --- a/docs/graph3d/index.html +++ b/docs/graph3d/index.html @@ -547,14 +547,18 @@ var options = { xMax number - none - The maximum value for the x-axis. + from data + The maximum value for the x-axis. + If not set, the largest value for x in the data set is used. + xMin number - none - The minimum value for the x-axis. + from data + The minimum value for the x-axis. + If not set, the smallest value for x in the data set is used. + xStep @@ -590,14 +594,18 @@ var options = { yMax number - none - The maximum value for the y-axis. + from data + The maximum value for the y-axis. + If not set, the largest value for y in the data set is used. + yMin number - none - The minimum value for the y-axis. + from data + The minimum value for the y-axis. + If not set, the smallest value for y in the data set is used. + yStep @@ -615,16 +623,20 @@ var options = { - zMin + zMax number - none - The minimum value for the z-axis. + from data + The maximum value for the z-axis. + If not set, the largest value for z in the data set is used. + - zMax + zMin number - none - The maximum value for the z-axis. + from data + The minimum value for the z-axis. + If not set, the smallest value for z in the data set is used. + zStep From 6586c53dd15686ab858878954d046f00e33f9cae Mon Sep 17 00:00:00 2001 From: yotamberk Date: Sun, 5 Mar 2017 23:54:58 +0200 Subject: [PATCH 5/9] Remove all `Object.assign` from examples (for browsers that don;t support es5+) (#2829) * Fix redraw order * Fix error when option is not defined * Allow template labels * Add .travis.yml file * Add experiment travis code * Fix react example * Remove assign from examples * Use jQuery --- examples/timeline/editing/tooltipOnItemChange.html | 13 +++++++------ examples/timeline/other/rtl.html | 5 +++-- examples/timeline/other/verticalScroll.html | 5 +++-- 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/examples/timeline/editing/tooltipOnItemChange.html b/examples/timeline/editing/tooltipOnItemChange.html index dd72fb79..fbdcb33b 100644 --- a/examples/timeline/editing/tooltipOnItemChange.html +++ b/examples/timeline/editing/tooltipOnItemChange.html @@ -2,6 +2,7 @@ Timeline | Tooltip on item onUpdateTime Option + @@ -63,20 +64,20 @@ editable: true }; - var options1 = Object.assign({ + var options1 = jQuery.extend(options, { tooltipOnItemUpdateTime: true - }, options) + }) var container1 = document.getElementById('mytimeline1'); timeline1 = new vis.Timeline(container1, items, null, options1); - var options2 = Object.assign({ + var options2 = jQuery.extend(options, { orientation: 'top', tooltipOnItemUpdateTime: { template: function(item) { return 'html template for tooltip with item.start: ' + item.start; } } - }, options) + }) var container2 = document.getElementById('mytimeline2'); timeline2 = new vis.Timeline(container2, items, null, options2); @@ -117,10 +118,10 @@ } - var options3 = Object.assign({ + var options3 = jQuery.extend(options, { orientation: 'top', tooltipOnItemUpdateTime: true - }, options) + }) var container3 = document.getElementById('mytimeline3'); timeline3 = new vis.Timeline(container3, itemsWithGroups, groups, options3); diff --git a/examples/timeline/other/rtl.html b/examples/timeline/other/rtl.html index b6a33d8b..7939c51c 100644 --- a/examples/timeline/other/rtl.html +++ b/examples/timeline/other/rtl.html @@ -3,6 +3,7 @@ Timeline | RTL example + @@ -39,10 +40,10 @@ height: '300px', }; - var options1 = Object.assign({}, options) + var options1 = jQuery.extend(options, {}) var timeline1 = new vis.Timeline(container1, items, options1); - var options2 = Object.assign({rtl: true}, options) + var options2 = jQuery.extend(options, {rtl: true}) var timeline2 = new vis.Timeline(container2, items, options2); diff --git a/examples/timeline/other/verticalScroll.html b/examples/timeline/other/verticalScroll.html index 3ebec29b..1aebae6f 100644 --- a/examples/timeline/other/verticalScroll.html +++ b/examples/timeline/other/verticalScroll.html @@ -2,6 +2,7 @@ Timeline | Vertical Scroll Option + @@ -75,11 +76,11 @@ zoomKey: 'ctrlKey' // create a Timeline - options1 = Object.assign({}, options) + options1 = jQuery.extend(options, {}); var container1 = document.getElementById('mytimeline1'); timeline1 = new vis.Timeline(container1, items, groups, options1); - options2 = Object.assign({horizontalScroll: true}, options) + options2 = jQuery.extend(options, {horizontalScroll: true}); var container2 = document.getElementById('mytimeline2'); timeline2 = new vis.Timeline(container2, items, groups, options2); From f8be0a5a21d7ae93e768520909b8ce072407e956 Mon Sep 17 00:00:00 2001 From: yotamberk Date: Sun, 5 Mar 2017 23:55:22 +0200 Subject: [PATCH 6/9] Add animation options for zoomIn/zoomOut funtions (#2830) * Fix redraw order * Fix error when option is not defined * Allow template labels * Add .travis.yml file * Add experiment travis code * Fix react example * Add animation options for zoomIn and zoomOut --- docs/timeline/index.html | 14 ++++++++++---- lib/timeline/Core.js | 28 ++++++++++++++++++---------- 2 files changed, 28 insertions(+), 14 deletions(-) diff --git a/docs/timeline/index.html b/docs/timeline/index.html index cfaee114..b69d05bd 100644 --- a/docs/timeline/index.html +++ b/docs/timeline/index.html @@ -1439,15 +1439,21 @@ document.getElementById('myTimeline').onclick = function (event) { - zoomIn(percentage) + zoomIn(percentage [, options]) none - Zoom in the current visible window. The parameter percentage can be a Number and must be between 0 and 1. If the parameter value of percentage is null, the window will be left unchanged. + Zoom in the current visible window. The parameter percentage can be a Number and must be between 0 and 1. If the parameter value of percentage is null, the window will be left unchanged. Available options: +
    +
  • animation: boolean or {duration: number, easingFunction: string}
    If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is 'easeInOutQuad'. Available easing functions: "linear", "easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint".
  • +
- zoomOut(percentage) + zoomOut(percentage [, options]) none - Zoom out the current visible window. The parameter percentage can be a Number and must be between 0 and 1. If the parameter value of percentage is null, the window will be left unchanged. + Zoom out the current visible window. The parameter percentage can be a Number and must be between 0 and 1. If the parameter value of percentage is null, the window will be left unchanged. Available options: +
    +
  • animation: boolean or {duration: number, easingFunction: string}
    If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is 'easeInOutQuad'. Available easing functions: "linear", "easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint".
  • +
diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js index 0d42edf5..01bf3993 100644 --- a/lib/timeline/Core.js +++ b/lib/timeline/Core.js @@ -708,8 +708,15 @@ Core.prototype.getWindow = function() { /** * Zoom in the window such that given time is centered on screen. * @param {Number} percentage - must be between [0..1] + * @param {Object} [options] Available options: + * `animation: boolean | {duration: number, easingFunction: string}` + * If true (default), the range is animated + * smoothly to the new window. An object can be + * provided to specify duration and easing function. + * Default duration is 500 ms, and default easing + * function is 'easeInOutQuad'. */ -Core.prototype.zoomIn = function(percentage) { +Core.prototype.zoomIn = function(percentage, options) { if (!percentage || percentage < 0 || percentage > 1) return var range = this.getWindow(); var start = range.start.valueOf(); @@ -720,17 +727,21 @@ Core.prototype.zoomIn = function(percentage) { var newStart = start + distance; var newEnd = end - distance; - this.setWindow({ - start : newStart, - end : newEnd - }); + this.setWindow(newStart, newEnd, options); }; /** * Zoom out the window such that given time is centered on screen. * @param {Number} percentage - must be between [0..1] + * @param {Object} [options] Available options: + * `animation: boolean | {duration: number, easingFunction: string}` + * If true (default), the range is animated + * smoothly to the new window. An object can be + * provided to specify duration and easing function. + * Default duration is 500 ms, and default easing + * function is 'easeInOutQuad'. */ -Core.prototype.zoomOut = function(percentage) { +Core.prototype.zoomOut = function(percentage, options) { if (!percentage || percentage < 0 || percentage > 1) return var range = this.getWindow(); var start = range.start.valueOf(); @@ -739,10 +750,7 @@ Core.prototype.zoomOut = function(percentage) { var newStart = start - interval * percentage / 2; var newEnd = end + interval * percentage / 2; - this.setWindow({ - start : newStart, - end : newEnd - }); + this.setWindow(newStart, newEnd, options); }; /** From 659af5805b5ff8de56ab88b076ee60b0079edc2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marco=20Schn=C3=BCriger?= Date: Mon, 6 Mar 2017 06:37:53 +0100 Subject: [PATCH 7/9] fix(timeline): #2795 fix date for custom format function (#2826) * Fix #2795 issue --- lib/timeline/TimeStep.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/lib/timeline/TimeStep.js b/lib/timeline/TimeStep.js index 2ea1a4fa..d0f230f6 100644 --- a/lib/timeline/TimeStep.js +++ b/lib/timeline/TimeStep.js @@ -521,6 +521,9 @@ TimeStep.prototype.getLabelMinor = function(date) { if (date == undefined) { date = this.current; } + if (date instanceof Date) { + date = this.moment(date) + } if (typeof(this.format.minorLabels) === "function") { return this.format.minorLabels(date, this.scale, this.step); @@ -540,7 +543,10 @@ TimeStep.prototype.getLabelMajor = function(date) { if (date == undefined) { date = this.current; } - + if (date instanceof Date) { + date = this.moment(date) + } + if (typeof(this.format.majorLabels) === "function") { return this.format.majorLabels(date, this.scale, this.step); } From a9e14d33d4412d9c27fa21f206a96f262fa65a5f Mon Sep 17 00:00:00 2001 From: p-a Date: Thu, 9 Mar 2017 21:16:26 +0100 Subject: [PATCH 8/9] Graph3d tooltip styling (#2780) * styling support for graph3d tooltips * styling support for graph3d tooltips * graph3d styling example, deleted new example and altered the original * graph3d tooltip styling, documentation * graph3d tooltip styling, use the util module's method for merging objects --- docs/graph3d/index.html | 32 ++++++++++++++++++++++++ examples/graph3d/11_tooltips.html | 16 +++++++++++- lib/graph3d/Graph3d.js | 41 ++++++++++++++++++++----------- lib/graph3d/Settings.js | 10 +++++--- 4 files changed, 80 insertions(+), 19 deletions(-) diff --git a/docs/graph3d/index.html b/docs/graph3d/index.html index 1a7223d4..85829ad1 100644 --- a/docs/graph3d/index.html +++ b/docs/graph3d/index.html @@ -498,6 +498,38 @@ var options = { + + tooltipStyle + Object + +
+{ 
+  content: {
+    padding: '10px',
+    border: '1px solid #4d4d4d',
+    color: '#1a1a1a',
+    background: 'rgba(255,255,255,0.7)',
+    borderRadius: '2px',
+    boxShadow: '5px 5px 10px rgba(128,128,128,0.5)'
+  },
+  line: {
+    height: '40px',
+    width: '0',
+    borderLeft: '1px solid #4d4d4d'
+  },
+  dot: {
+    height: '0',
+    width: '0',
+    border: '5px solid #4d4d4d',
+    borderRadius: '5px'
+  }
+}
+ + Tooltip style properties. + Provided properties will be merged with the default object. + + + valueMax number diff --git a/examples/graph3d/11_tooltips.html b/examples/graph3d/11_tooltips.html index 67d84443..d2821071 100644 --- a/examples/graph3d/11_tooltips.html +++ b/examples/graph3d/11_tooltips.html @@ -64,12 +64,26 @@ showShadow: false, // Option tooltip can be true, false, or a function returning a string with HTML contents - //tooltip: true, tooltip: function (point) { // parameter point contains properties x, y, z, and data // data is the original object passed to the point constructor return 'value: ' + point.z + '
' + point.data.extra; }, + + // Tooltip default styling can be overridden + tooltipStyle: { + content: { + background : 'rgba(255, 255, 255, 0.7)', + padding : '10px', + borderRadius : '10px' + }, + line: { + borderLeft : '1px dotted rgba(0, 0, 0, 0.5)' + }, + dot: { + border : '5px solid rgba(0, 0, 0, 0.5)' + } + }, keepAspectRatio: true, verticalRatio: 0.5 diff --git a/lib/graph3d/Graph3d.js b/lib/graph3d/Graph3d.js index 7a1884cc..e24ed2e4 100755 --- a/lib/graph3d/Graph3d.js +++ b/lib/graph3d/Graph3d.js @@ -67,6 +67,29 @@ var DEFAULTS = { style : Graph3d.STYLE.DOT, tooltip : false, + + tooltipStyle : { + content : { + padding : '10px', + border : '1px solid #4d4d4d', + color : '#1a1a1a', + background : 'rgba(255,255,255,0.7)', + borderRadius : '2px', + boxShadow : '5px 5px 10px rgba(128,128,128,0.5)' + }, + line : { + height : '40px', + width : '0', + borderLeft : '1px solid #4d4d4d' + }, + dot : { + height : '0', + width : '0', + border : '5px solid #4d4d4d', + borderRadius : '5px' + } + }, + showLegend : autoByDefault, // determined by graph style backgroundColor : autoByDefault, @@ -2314,26 +2337,16 @@ Graph3d.prototype._showTooltip = function (dataPoint) { if (!this.tooltip) { content = document.createElement('div'); + Object.assign(content.style, {}, this.tooltipStyle.content); content.style.position = 'absolute'; - content.style.padding = '10px'; - content.style.border = '1px solid #4d4d4d'; - content.style.color = '#1a1a1a'; - content.style.background = 'rgba(255,255,255,0.7)'; - content.style.borderRadius = '2px'; - content.style.boxShadow = '5px 5px 10px rgba(128,128,128,0.5)'; - + line = document.createElement('div'); + Object.assign(line.style, {}, this.tooltipStyle.line); line.style.position = 'absolute'; - line.style.height = '40px'; - line.style.width = '0'; - line.style.borderLeft = '1px solid #4d4d4d'; dot = document.createElement('div'); + Object.assign(dot.style, {}, this.tooltipStyle.dot); dot.style.position = 'absolute'; - dot.style.height = '0'; - dot.style.width = '0'; - dot.style.border = '5px solid #4d4d4d'; - dot.style.borderRadius = '5px'; this.tooltip = { dataPoint: null, diff --git a/lib/graph3d/Settings.js b/lib/graph3d/Settings.js index 75566748..484a40b0 100755 --- a/lib/graph3d/Settings.js +++ b/lib/graph3d/Settings.js @@ -2,6 +2,7 @@ // This modules handles the options for Graph3d. // //////////////////////////////////////////////////////////////////////////////// +var util = require('../util'); var Camera = require('./Camera'); var Point3d = require('./Point3d'); @@ -69,7 +70,7 @@ var OPTIONKEYS = [ 'axisColor', 'gridColor', 'xCenter', - 'yCenter' + 'yCenter', ]; @@ -115,7 +116,6 @@ function isEmpty(obj) { } - /** * Make first letter of parameter upper case. * @@ -241,7 +241,6 @@ function setOptions(options, dst) { throw new Error('DEFAULTS not set for module Settings'); } - // Handle the parameters which can be simply copied over safeCopy(options, dst, OPTIONKEYS); safeCopy(options, dst, PREFIXEDOPTIONKEYS, 'default'); @@ -250,7 +249,6 @@ function setOptions(options, dst) { setSpecialSettings(options, dst); } - /** * Special handling for certain parameters * @@ -274,6 +272,10 @@ function setSpecialSettings(src, dst) { if (src.onclick != undefined) { dst.onclick_callback = src.onclick; } + + if (src.tooltipStyle !== undefined) { + util.selectiveDeepExtend(['tooltipStyle'], dst, src); + } } From 76ed8ca42b38d07326a04ea655151f46965de744 Mon Sep 17 00:00:00 2001 From: Franki Sans Date: Thu, 9 Mar 2017 21:38:56 +0100 Subject: [PATCH 9/9] Fix to sort nested groups - Related to #2810 (#2817) --- lib/timeline/component/ItemSet.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js index 28d610f5..d3f670fe 100644 --- a/lib/timeline/component/ItemSet.js +++ b/lib/timeline/component/ItemSet.js @@ -1157,7 +1157,8 @@ ItemSet.prototype._orderNestedGroups = function(groupIds) { var nestedGroups = this.groupsData.get({ filter: function(nestedGroup) { return nestedGroup.nestedInGroup == groupId; - } + }, + order: this.options.groupOrder }); var nestedGroupIds = nestedGroups.map(function(nestedGroup) { return nestedGroup.id }) newGroupIdsOrder = newGroupIdsOrder.concat(nestedGroupIds);