@refinitiv-ui/efx-grid 6.0.16 → 6.0.18

package/lib/tr-grid-column-grouping/es6/ColumnGrouping.js

@@ -31,6 +31,7 @@ var ColumnGroupingPlugin = function ColumnGroupingPlugin(options) {
   t._onColumnChanged = t._onColumnChanged.bind(t);
   t._onColumnAdded = t._onColumnAdded.bind(t);
   t._onColumnMoved = t._onColumnMoved.bind(t);
+  t._onColumnRemoved = t._onColumnRemoved.bind(t);
   t._requestApplyAddChildGroup = t._requestApplyAddChildGroup.bind(this);
   t._onPostSectionRender = t._onPostSectionRender.bind(t);
   t._onBeforeColumnBoundUpdate = t._onBeforeColumnBoundUpdate.bind(t);
@@ -60,6 +61,11 @@ ColumnGroupingPlugin.prototype._groupMap;
 * @private
 */
 ColumnGroupingPlugin.prototype._childToParent;
+/** @type {!Object.<string, ColumnGroupingPlugin~GroupDefinition>}
+* @description A map of visible group id to group defintion
+* @private
+*/
+ColumnGroupingPlugin.prototype._visibleGroupMap;
 /** @type {number}
 * @private
 */
@@ -99,20 +105,6 @@ ColumnGroupingPlugin._getTooltip = function (groupingOptions) {
   }
   return title;
 };
-/** Prevent built-in config
-* @public
-* @param {string} optionName
-* @param {Object} optionValue
-* @return {*}
-*/
-ColumnGroupingPlugin.prototype.beforeProcessOption = function (optionName, optionValue) {
-  if (optionName === "columnGroups") {
-    this._legacyColumnGroups = optionValue;
-    return false; // eslint-disable-line
-  }
-
-  return; // eslint-disable-line
-};
 /** @public
 * @return {string}
 */
@@ -142,7 +134,7 @@ ColumnGroupingPlugin.prototype.initialize = function (host, options) {
   if (this._hosts.length === 1) {
     host.listen("columnAdded", this._onColumnAdded);
     host.listen("columnMoved", this._onColumnMoved);
-    host.listen("columnRemoved", this._onColumnChanged);
+    host.listen("columnRemoved", this._onColumnRemoved);
     host.listen("columnVisibilityChanged", this._onColumnChanged);
     host.listen("postSectionRender", this._onPostSectionRender);
     host.listen("beforeColumnBoundUpdate", this._onBeforeColumnBoundUpdate);
@@ -162,6 +154,20 @@ ColumnGroupingPlugin.prototype.initialize = function (host, options) {
   }
   // TODO: wrong render group in hide/show column
 };
+/** Prevent built-in config
+* @public
+* @param {string} optionName
+* @param {Object} optionValue
+* @return {*}
+*/
+ColumnGroupingPlugin.prototype.beforeProcessOption = function (optionName, optionValue) {
+  if (optionName === "columnGroups") {
+    this._legacyColumnGroups = optionValue;
+    return false; // eslint-disable-line
+  }
+
+  return; // eslint-disable-line
+};
 /**
 * @protected
 * @ignore
@@ -180,7 +186,7 @@ ColumnGroupingPlugin.prototype.unload = function (host) {
   this._hosts.splice(at, 1);
   host.unlisten("columnAdded", this._onColumnChanged);
   host.unlisten("columnMoved", this._onColumnMoved);
-  host.unlisten("columnRemoved", this._onColumnChanged);
+  host.unlisten("columnRemoved", this._onColumnRemoved);
   host.unlisten("postSectionRender", this._onPostSectionRender);
   host.unlisten("beforeColumnBoundUpdate", this._onBeforeColumnBoundUpdate);
   if (!this._hosts.length) {
@@ -205,8 +211,20 @@ ColumnGroupingPlugin.prototype.config = function (options) {
   }
   var extOptions = options["columnGrouping"];
   if (Array.isArray(extOptions)) {
-    this._groupDefs = extOptions.filter(ColumnGroupingPlugin._isValidGroup).map(ColumnGroupingPlugin._cloneObject);
+    var groupDefs = extOptions.map(ColumnGroupingPlugin._cloneObject);
+    this._groupDefs = groupDefs.filter(ColumnGroupingPlugin._isValidGroup);
   }
+  var columns = options["columns"];
+  if (!columns) {
+    return;
+  }
+  var len = columns.length;
+  for (var i = 0; i < len; ++i) {
+    this._setColumnGrouping(i, {
+      id: columns[i].id
+    }); // used for columnRemoved event
+  }
+
   this._migrateLegacyStructure(options["columns"]);
 };
 /** @public
@@ -218,13 +236,26 @@ ColumnGroupingPlugin.prototype.getConfigObject = function (gridOptions) {
 
   // TODO: Handle legacyRender method that has been migrated
   var columnGroupingDefs = this.getGroupDefinitions();
-  for (var i = 0; i < columnGroupingDefs.length; i++) {
-    columnGroupingDefs[i] = this._groupMap[columnGroupingDefs[i].id];
-  }
   obj.columnGrouping = columnGroupingDefs;
   return obj;
 };
 
+/** @private
+* @param {number} colIndex
+* @param {Object} data
+*/
+ColumnGroupingPlugin.prototype._setColumnGrouping = function (colIndex, data) {
+  var colData = this._newColumnData(colIndex);
+  colData["columnGrouping"] = data;
+};
+/** @private
+* @param {number} colIndex
+* @return {Object}
+*/
+ColumnGroupingPlugin.prototype._getColumnGrouping = function (colIndex) {
+  return this._getColumnOption(colIndex, "columnGrouping");
+};
+
 /** Legacy group structure from composite grid will be converted to the new structure
 * @private
 * @param {Object.<string, Array>} objMap
@@ -274,7 +305,7 @@ ColumnGroupingPlugin.prototype._migrateLegacyStructure = function (colModels) {
 
   // Add new definitions and structure to the given legacy objects
   for (i = 0; i < groupCount; ++i) {
-    groupDef = legacyColumnGroups[i];
+    groupDef = ColumnGroupingPlugin._cloneObject(legacyColumnGroups[i]);
     if (groupDef && groupDef.id) {
       // WARNING: Modify user's object
       var childAry = groupMap[groupDef.id];
@@ -286,6 +317,7 @@ ColumnGroupingPlugin.prototype._migrateLegacyStructure = function (colModels) {
       this._groupDefs.push(groupDef);
     }
   }
+  this._groupDefs = this._groupDefs.filter(ColumnGroupingPlugin._isValidGroup);
 };
 
 /** Consolidate and process configuration. Force rerendering on column adding, removing, moving, initializaing, and run-time API execution.
@@ -313,6 +345,7 @@ ColumnGroupingPlugin.prototype._applyGrouping = function () {
         for (r = 0; r < rowCount; r++) {
           cell = section.getCell(c, r, false);
           if (cell) {
+            cell.reset();
             cell.removeClass("no-sort");
             cell.removeAttribute("group-id");
           }
@@ -333,6 +366,173 @@ ColumnGroupingPlugin.prototype._applyGrouping = function () {
     }
   }
 };
+/** @private
+*/
+ColumnGroupingPlugin.prototype._evaluateGroupStructure = function () {
+  // Clear existing group structure
+  var groupMap = this._groupMap = {};
+  var childToParent = this._childToParent = {};
+  var visibleGroupMap = this._visibleGroupMap = {};
+  this._maxDepth = -1;
+
+  // Flatten tree structure to simple dictionary
+  var groupDefs = this._groupDefs;
+  var len = groupDefs.length;
+  var i;
+  for (i = 0; i < len; i++) {
+    this._flattenGroupDefs(groupDefs[i], groupDefs);
+  }
+
+  // Create group map
+  var groupDef;
+  len = groupDefs.length; // length can be changed after flattening
+  for (i = 0; i < len; i++) {
+    groupDef = groupDefs[i];
+    groupMap[groupDef.id] = groupDef;
+
+    // Clone group definitions for rendering
+    visibleGroupMap[groupDef.id] = ColumnGroupingPlugin._cloneObject(groupDef);
+    visibleGroupMap[groupDef.id].children = groupDef.children.slice();
+  }
+
+  // Create child to parent map
+  var gid, children, member;
+  for (gid in groupMap) {
+    groupDef = groupMap[gid];
+    children = groupDef.children;
+    for (i = 0; i < children.length; i++) {
+      member = children[i];
+      childToParent[member] = gid;
+    }
+  }
+
+  // Apply a parent id to group definition to make it easier to find depth
+  var parentId;
+  for (gid in visibleGroupMap) {
+    parentId = childToParent[gid];
+    if (parentId) {
+      visibleGroupMap[gid].parent = parentId;
+      groupMap[gid].parent = parentId;
+    }
+  }
+
+  // Filter invisible groups out
+  var rootGroup = [];
+  for (gid in visibleGroupMap) {
+    groupDef = visibleGroupMap[gid];
+    if (this._findGroupTreeDepth(groupDef, 1) === 1) {
+      rootGroup.push(groupDef);
+    }
+  }
+  len = rootGroup.length;
+  for (i = 0; i < len; i++) {
+    this._verifySingleChild(rootGroup[i]);
+  }
+
+  // Determine the depth of each group
+  var depth;
+  for (gid in visibleGroupMap) {
+    groupDef = visibleGroupMap[gid];
+    depth = this._findGroupTreeDepth(groupDef, 1);
+    groupDef["onRow"] = depth - 1;
+  }
+
+  // Calculate the maximum depth
+  var maxDepth = -1;
+  for (gid in visibleGroupMap) {
+    groupDef = visibleGroupMap[gid];
+    depth = groupDef["onRow"];
+    if (depth > maxDepth) {
+      maxDepth = depth;
+    }
+  }
+  this._maxDepth = maxDepth + 1; // Column header depth = maximum group depth + 1
+};
+
+/** Flatten group definition structure by using group ID instead of nested group definitions.
+*  @private
+* @param {Object} groupDef
+* @param {Array} groupDefs
+*/
+ColumnGroupingPlugin.prototype._flattenGroupDefs = function (groupDef, groupDefs) {
+  if (groupDef && groupDef.children) {
+    var children = groupDef.children;
+    var member, groupId;
+    for (var i = 0; i < children.length; i++) {
+      member = children[i];
+      if (typeof member !== "string") {
+        // member is nested group definition
+        groupId = member.id;
+        if (groupId) {
+          children[i] = groupId; // Use group ID instead of nested group definition
+          if (groupDefs.indexOf(member) < 0) {
+            groupDefs.push(member);
+          }
+          this._flattenGroupDefs(member, groupDefs);
+        }
+      }
+    }
+  }
+};
+
+/** @private
+* @param {Object} groupDef
+* @param {number} currentDepth
+* @return {number}
+*/
+ColumnGroupingPlugin.prototype._findGroupTreeDepth = function (groupDef, currentDepth) {
+  var parentId = groupDef["parent"];
+  var parentNode = this._visibleGroupMap[parentId];
+  if (parentNode) {
+    return this._findGroupTreeDepth(parentNode, currentDepth + 1);
+  } else {
+    return currentDepth;
+  }
+};
+
+/** @private
+* @param {Object} groupDef
+* @return {boolean}
+*/
+ColumnGroupingPlugin.prototype._verifySingleChild = function (groupDef) {
+  var children = groupDef.children;
+  var visibleChildCount = 0;
+  var visibleChildGroupCount = 0;
+  var invisibleMembers = [];
+  var i, member;
+  for (i = 0; i < children.length; i++) {
+    member = children[i];
+    if (this._visibleGroupMap[member]) {
+      if (this._verifySingleChild(this._visibleGroupMap[member])) {
+        ++visibleChildCount;
+        ++visibleChildGroupCount;
+      } else {
+        invisibleMembers.push(member);
+      }
+    } else {
+      if (this._getColumnIndexById(member) > -1) {
+        ++visibleChildCount;
+      } else {
+        invisibleMembers.push(member);
+      }
+    }
+  }
+
+  // Remove invisible members, keep only visible members
+  if (invisibleMembers.length) {
+    for (i = 0; i < invisibleMembers.length; i++) {
+      member = invisibleMembers[i];
+      groupDef.children.splice(children.indexOf(member), 1);
+    }
+  }
+  if (visibleChildCount > 1 || visibleChildGroupCount > 1) {
+    return true;
+  } else {
+    delete this._visibleGroupMap[groupDef.id];
+    return false;
+  }
+};
+
 /** Set a timer to call applyGrouping only once to avoid performance issue
 * @private
 */
@@ -354,7 +554,14 @@ ColumnGroupingPlugin.prototype._applyNearestGrouping = function (colIndex) {
   var groupLeftIds = this.getGroupIds(colIndexLeft);
   var groupRightIds = this.getGroupIds(colIndexRight);
   if (groupLeftIds && groupRightIds) {
-    var i, j, groupLeftId, groupRightId, field;
+    var colId = this.getColumnId(colIndex);
+    var groupId = this._childToParent[colId];
+    if (groupId) {
+      if (groupLeftIds.indexOf(groupId) > -1 || groupRightIds.indexOf(groupId) > -1) {
+        return;
+      }
+    }
+    var i, j, groupLeftId, groupRightId;
     var found = false;
     for (i = 0; i < groupLeftIds.length; i++) {
       groupLeftId = groupLeftIds[i];
@@ -362,12 +569,15 @@ ColumnGroupingPlugin.prototype._applyNearestGrouping = function (colIndex) {
         groupRightId = groupRightIds[j];
         if (groupLeftId === groupRightId) {
           // found same Id between group
-          field = this.getColumnId(colIndex);
-          this._addGroupChild(field, groupRightId);
+
+          // This method modifies the group definition and outdates the group structure.
+          // It is necessary to recalculate group structure manually.
+          this._addGroupChild(colId, groupRightId);
           found = true;
         }
       }
       if (found) {
+        this._evaluateGroupStructure();
         break;
       }
     }
@@ -404,7 +614,7 @@ ColumnGroupingPlugin.prototype._spanGroupVertically = function (titleSection) {
 */
 ColumnGroupingPlugin.prototype._spanGroupHorizontally = function (titleSection) {
   var section = titleSection;
-  var groupTable = this._groupMap;
+  var groupTable = this._visibleGroupMap;
 
   // Span column of column group
   for (var id in groupTable) {
@@ -427,7 +637,7 @@ ColumnGroupingPlugin.prototype._spanGroupHorizontally = function (titleSection)
 */
 ColumnGroupingPlugin.prototype._renderGroups = function () {
   var hostCount = this._hosts.length;
-  var groupMap = this._groupMap;
+  var groupMap = this._visibleGroupMap;
   for (var i = 0; i < hostCount; ++i) {
     var section = this._hosts[i].getSection("title");
     if (!section) {
@@ -515,12 +725,20 @@ ColumnGroupingPlugin.prototype._applyTimeSeries = function (e) {
         var parentName = tsParentDef.getName();
         var parentId = tsParentDef.getId();
         var groupId = "timeSerieGroup_" + parentId;
-        var getGroupDefintion = this.getGroupDefinition(groupId);
-        if (getGroupDefintion) {
+        var groupDef = this._groupMap[groupId];
+        if (groupDef) {
           // add children time series field to parent
+          var dirty = false;
+          var child;
           for (i = 0; i < children.length; i++) {
-            var child = children[i];
-            this._addGroupChild(child, groupId);
+            child = children[i];
+
+            // This method modifies the group definition and outdates the group structure.
+            // It is necessary to recalculate group structure manually.
+            dirty |= this._addGroupChild(child, groupId);
+          }
+          if (dirty) {
+            this._evaluateGroupStructure();
           }
         } else {
           // create new group
@@ -558,29 +776,52 @@ ColumnGroupingPlugin.prototype._onColumnMoved = function (e) {
   var toColIndex = e.toColIndex;
   var colId = this.getColumnId(toColIndex);
   var groupId = this._childToParent[colId];
-  var colIndexLeft = toColIndex - 1;
-  var colIndexRight = toColIndex + 1;
-  var colIdLeft = this.getColumnId(colIndexLeft);
-  var colIdRight = this.getColumnId(colIndexRight);
-  var groupIdLeft = this._childToParent[colIdLeft];
-  var groupIdRight = this._childToParent[colIdRight];
-  if (groupId != groupIdLeft && groupId != groupIdRight) {
-    // remove column from previous group
-    if (groupId) {
-      var groupChild = this.getGroupChildren(groupId);
-      var removeIndex = groupChild.indexOf(colId);
+  if (groupId) {
+    var colIdLeft = this.getColumnId(toColIndex - 1);
+    var colIdRight = this.getColumnId(toColIndex + 1);
+    var groupIdLeft = this._childToParent[colIdLeft];
+    var groupIdRight = this._childToParent[colIdRight];
+    if (groupId != groupIdLeft && groupId != groupIdRight) {
+      // Remove column from previous group
+      var children = this.getGroupChildren(groupId);
+      var removeIndex = children.indexOf(colId);
       if (removeIndex > -1) {
-        groupChild.splice(removeIndex, 1);
+        children.splice(removeIndex, 1);
       }
-      this.setGroupChildren(groupId, groupChild);
+      this.setGroupChildren(groupId, children);
     }
-    this._applyNearestGrouping(toColIndex);
   }
+  this._applyNearestGrouping(toColIndex);
   this._requestApplyGrouping();
 };
 /** @private
 * @param {Object} e
 */
+ColumnGroupingPlugin.prototype._onColumnRemoved = function (e) {
+  var colData = e.columnData;
+  if (colData && colData.columnGrouping) {
+    var colId = colData.columnGrouping.id;
+    var groupId = this._childToParent[colId];
+    if (groupId) {
+      var groupDef = this._groupMap[groupId];
+      if (groupDef) {
+        var children = groupDef.children;
+        var index = children.indexOf(colId);
+        if (index > -1) {
+          if (children.length < 3) {
+            this._groupDefs.splice(this._groupDefs.indexOf(groupDef), 1);
+          } else {
+            children.splice(index, 1);
+          }
+          this._requestApplyGrouping();
+        }
+      }
+    }
+  }
+};
+/** @private
+* @param {Object} e
+*/
 ColumnGroupingPlugin.prototype._onBeforeColumnBoundUpdate = function (e) {
   var selectedColumns = e.selectedColumns;
   var parentMap = this._childToParent;
@@ -668,7 +909,13 @@ ColumnGroupingPlugin.prototype._onBeforeColumnBoundUpdate = function (e) {
 ColumnGroupingPlugin.prototype.addColumnToGroup = function (column, groupId, colIndex) {
   if (!column || !groupId) return;
   var columnIndex = colIndex || this.getColumnCount();
-  this._addGroupChild(column.id, groupId);
+
+  // This method modifies the group definition and outdates the group structure.
+  // It is necessary to recalculate group structure manually.
+  if (this._addGroupChild(column.id, groupId)) {
+    this._evaluateGroupStructure(); // To prevent event handler from using outdated group structure
+  }
+
   if (this._realTimeGrid) {
     this._realTimeGrid.insertColumn(column, columnIndex);
   } else if (this._compositeGrid) {
@@ -685,7 +932,7 @@ ColumnGroupingPlugin.prototype.addGroup = function (groupDef) {
   if (groupDef && groupDef.id) {
     var curDef = this.getGroupDefinition(groupDef.id);
     if (!curDef) {
-      var newGroupDef = cloneObject(groupDef);
+      var newGroupDef = ColumnGroupingPlugin._cloneObject(groupDef);
       this._groupDefs.push(newGroupDef);
       this._applyGrouping();
       return true;
@@ -721,6 +968,7 @@ ColumnGroupingPlugin.prototype.removeGroup = function (groupId) {
 */
 ColumnGroupingPlugin.prototype.setGroupDefinitions = function (groupDefs) {
   if (Array.isArray(groupDefs)) {
+    groupDefs = groupDefs.map(ColumnGroupingPlugin._cloneObject);
     groupDefs = groupDefs.filter(ColumnGroupingPlugin._isValidGroup);
     if (!groupDefs.length) {
       groupDefs = null;
@@ -744,10 +992,6 @@ ColumnGroupingPlugin.prototype.setGroupDefinitions = function (groupDefs) {
 ColumnGroupingPlugin._isValidGroup = function (groupDef) {
   if (groupDef) {
     if (groupDef.id) {
-      if (!groupDef.children) {
-        groupDef.children = []; // WARNING: Modify user's object
-      }
-
       return true;
     }
   }
@@ -759,7 +1003,13 @@ ColumnGroupingPlugin._isValidGroup = function (groupDef) {
 * @return {boolean}
 */
 ColumnGroupingPlugin._cloneObject = function (obj) {
-  return cloneObject(obj);
+  var newObj = cloneObject(obj);
+  if (Array.isArray(newObj.children)) {
+    newObj.children = newObj.children;
+  } else {
+    newObj.children = [];
+  }
+  return newObj;
 };
 /** Get a shallow copy of all existing group definitions
 * @public
@@ -777,6 +1027,7 @@ ColumnGroupingPlugin.prototype.setGroupDefinition = function (groupId, newDef) {
   var curDef = this.getGroupDefinition(groupId);
   if (curDef) {
     var at = this._groupDefs.indexOf(curDef);
+    newDef = ColumnGroupingPlugin._cloneObject(newDef);
     newDef.id = groupId;
     this._groupDefs[at] = newDef;
     this._applyGrouping();
@@ -801,6 +1052,7 @@ ColumnGroupingPlugin.prototype.setGroupChildren = function (groupId, newChildLis
   var groupDef = this.getGroupDefinition(groupId);
   if (groupDef) {
     if (Array.isArray(newChildList)) {
+      groupDef.aaa = 0; // TODO: for testing, need to be removed
       groupDef.children = newChildList.slice();
       this._applyGrouping();
     } else if (!newChildList && groupDef.children.length) {
@@ -816,9 +1068,8 @@ ColumnGroupingPlugin.prototype.setGroupChildren = function (groupId, newChildLis
 ColumnGroupingPlugin.prototype.getGroupChildren = function (groupId) {
   var groupDef = this.getGroupDefinition(groupId);
   if (groupDef) {
-    return groupDef.children.slice(); // Shallow copy
+    return groupDef.children;
   }
-
   return null;
 };
 
@@ -832,11 +1083,11 @@ ColumnGroupingPlugin.prototype.getChildColumnIndices = function (groupId) {
   if (group) {
     var colIds = this._getGroupMembers(group);
     var colIndices = [];
-    var id;
+    var index;
     for (var i = 0; i < colIds.length; i++) {
-      id = this._getColumnIndexById(colIds[i]);
-      if (id > -1) {
-        colIndices.push(id);
+      index = this.getColumnIndex(colIds[i]);
+      if (index > -1) {
+        colIndices.push(index);
       }
     }
     return colIndices.sort();
@@ -860,7 +1111,7 @@ ColumnGroupingPlugin.prototype.getGroupIds = function (colRef) {
         var groupIds = [groupId];
         var group = this._groupMap[groupId];
         while (group && group.parent) {
-          group = this.getGroupDefinition(group.parent);
+          group = this._groupMap[group.parent];
           if (group) {
             groupIds.push(group.id);
           }
@@ -886,7 +1137,7 @@ ColumnGroupingPlugin.prototype.getMaxGroupLevel = function () {
 * @return {number}
 */
 ColumnGroupingPlugin.prototype.getGroupLevel = function (groupId) {
-  var group = this._groupMap[groupId];
+  var group = this._visibleGroupMap[groupId];
   if (group) {
     return group.onRow;
   }
@@ -927,106 +1178,11 @@ ColumnGroupingPlugin.prototype._getRootGroup = function (groupId) {
   }
   var group = this._groupMap[groupId];
   while (group.parent) {
-    group = this.getGroupDefinition(group.parent);
+    group = this._groupMap[group.parent];
   }
   return group;
 };
 
-/** @private
-*/
-ColumnGroupingPlugin.prototype._evaluateGroupStructure = function () {
-  // Clear existing group structure
-  this._groupMap = {};
-  this._childToParent = {};
-  this._maxDepth = -1;
-
-  // Flatten tree to dictionary
-  var columnGroups = this._groupDefs;
-  var inUsedGroup = {};
-  var node;
-  for (var cg = 0; cg < columnGroups.length; cg++) {
-    // node can be a root or child
-    node = columnGroups[cg];
-    // skip tree that don't have a child
-    if (node.children && node.children.length) {
-      this._flattenTree(node, inUsedGroup);
-    }
-  }
-  var id;
-  // Apply parent id to columnGroup for easy to find depth
-  for (id in this._groupMap) {
-    node = this._groupMap[id];
-    if (this._childToParent[node.id]) {
-      var parentId = this._childToParent[node.id];
-      node["parent"] = parentId;
-    }
-  }
-
-  // find depth of each group
-  for (id in this._groupMap) {
-    node = this._groupMap[id];
-    var depth = this._findGroupTreeDepth(node, 1);
-    node["onRow"] = depth - 1; // Modify user's object
-  }
-
-  // Calculate max depth
-  var maxDepth = 0;
-  for (id in this._groupMap) {
-    node = this._groupMap[id];
-    depth = node["onRow"] + 1;
-    if (depth > maxDepth) {
-      maxDepth = depth;
-    }
-  }
-  this._maxDepth = maxDepth;
-};
-/** @private
-* @param {Object} node
-* @param {boolean} inUsedGroup
-*/
-ColumnGroupingPlugin.prototype._flattenTree = function (node, inUsedGroup) {
-  var childrens = node.children;
-  if (childrens && childrens.length > 0) {
-    var childId;
-    for (var c = 0; c < childrens.length; c++) {
-      var child = childrens[c];
-      if (child.id) {
-        // child is group object
-        childId = child.id;
-        this._flattenTree(child, inUsedGroup);
-      } else {
-        // child can be column id or group id
-        childId = child;
-        if (inUsedGroup[childId] || this._getColumnIndexById(childId) !== -1) {
-          inUsedGroup[node.id] = true;
-        }
-      }
-      if (!this._childToParent[childId] && childId != node.id) {
-        this._childToParent[childId] = node.id;
-      }
-    }
-
-    // Create Tree node for only in-used group
-    if (!this._groupMap[node.id] && inUsedGroup[node.id]) {
-      this._groupMap[node.id] = cloneObject(node); // clone node
-    }
-  }
-};
-/** @private
-* @param {Object} node
-* @param {number} currentDepth
-* @return {number}
-*/
-ColumnGroupingPlugin.prototype._findGroupTreeDepth = function (node, currentDepth) {
-  var parentId = node["parent"];
-  var parentNode = this._groupMap[parentId];
-  if (parentNode) {
-    return this._findGroupTreeDepth(parentNode, currentDepth + 1);
-  } else {
-    return currentDepth;
-  }
-};
-
 /** This version exclude invisible column unlike the one in GridPlugin
 * @private
 * @param {string} id
@@ -1056,20 +1212,20 @@ ColumnGroupingPlugin.prototype._findColumnIndexArr = function (node, cluster) {
       for (var i = 0; i < childrens.length; i++) {
         var child = childrens[i];
         if (!child.id) {
-          if (!this._groupMap[child]) {
+          if (!this._visibleGroupMap[child]) {
             var colIndex = this._getColumnIndexById(child);
             if (colIndex !== -1) {
               cluster.push(colIndex);
             }
           } else {
-            this._findColumnIndexArr(this._groupMap[child], cluster);
+            this._findColumnIndexArr(this._visibleGroupMap[child], cluster);
           }
         } else {
           // skip children that has same id as parent
           if (child.id === node.id) {
             return;
           }
-          this._findColumnIndexArr(this._groupMap[child.id], cluster);
+          this._findColumnIndexArr(this._visibleGroupMap[child.id], cluster);
         }
       }
     }
@@ -1118,26 +1274,29 @@ ColumnGroupingPlugin._groupConsecutiveArr = function (arr) {
   }
   return result;
 };
-/** @private
+/** This method modifies the group definition and outdates the group structure. It is necessary to recalculate group structure manually.
+* @private
 * @param {string} childId
 * @param {string} groupId
+* @return {boolean}
 */
 ColumnGroupingPlugin.prototype._addGroupChild = function (childId, groupId) {
-  var groupDef = this.getGroupDefinition(groupId);
+  var groupDef = this._groupMap[groupId];
   if (childId && groupDef) {
     var chdr = groupDef.children;
     if (chdr && chdr.indexOf(childId) < 0) {
-      this._childToParent[childId] = groupId;
       chdr.push(childId);
+      return true;
     }
   }
+  return false;
 };
 /** @private
 * @param {string} childId
 * @return {ColumnGroupingPlugin~GroupDefinition}
 */
 ColumnGroupingPlugin.prototype._getParentGroup = function (childId) {
-  return this.getGroupDefinition(this._childToParent[childId]);
+  return this._visibleGroupMap[this._childToParent[childId]];
 };
 /** @private
 * @param {string} colId
@@ -1195,16 +1354,16 @@ ColumnGroupingPlugin.prototype.getCellInfo = function (e) {
   return cellInfo;
 };
 /** @public
-* @param {number|string} from //Column index or id that should be moved
+* @param {number|string} colRef //Column index or id that should be moved
 * @param {number} to
 * @param {string} groupId
 */
-ColumnGroupingPlugin.prototype.moveColumnIntoGroup = function (from, to, groupId) {
+ColumnGroupingPlugin.prototype.moveColumnIntoGroup = function (colRef, to, groupId) {
   var fromIndex = -1;
-  if (typeof from == "string") {
-    fromIndex = this._getColumnIndexById(from);
+  if (typeof colRef == "string") {
+    fromIndex = this._getColumnIndexById(colRef);
   } else {
-    fromIndex = from;
+    fromIndex = colRef;
   }
   if (fromIndex == -1) {
     return;
@@ -1255,42 +1414,42 @@ ColumnGroupingPlugin.prototype.moveColumnIntoGroup = function (from, to, groupId
       }
     }
   }
+
+  // Get column id before start moving
+  var colId = this.getColumnId(fromIndex);
   for (var gridIndex = this._hosts.length; --gridIndex >= 0;) {
     var host = this._hosts[gridIndex];
     host.moveColumn(fromIndex, to);
   }
+  if (colId) {
+    // Remove from current group
+    var previousGroup = this._childToParent[colId];
+    if (previousGroup) {
+      var previousGroupChild = this.getGroupChildren(previousGroup);
+      previousGroupChild.splice(previousGroupChild.indexOf(colId), 1);
+      this.setGroupChildren(previousGroup, previousGroupChild);
+    }
 
-  //remove previous group apply to column
-  var colId = this.getColumnId(to);
-  var previousGroup = this._childToParent[colId];
-  if (previousGroup) {
-    var previousGroupChild = this.getGroupChildren(previousGroup);
-    previousGroupChild.splice(previousGroupChild.indexOf(colId), 1);
-    this.setGroupChildren(previousGroup, previousGroupChild);
-  }
-
-  //apply new group
-  var children = this.getGroupChildren(groupId);
-  if (children.indexOf(colId) == -1) {
-    if (colId) {
+    // Add to new group
+    var children = this.getGroupChildren(groupId);
+    if (children.indexOf(colId) < 0) {
       children.push(colId);
+      this.setGroupChildren(groupId, children);
     }
   }
-  this.setGroupChildren(groupId, children);
-  this._requestApplyGrouping();
 };
 /** @public
-* @param {number|string} columnIndex //Column index or id that should be moved
+* @param {number|string} colRef //Column index or id that should be moved
 * @param {string} groupId
 */
-ColumnGroupingPlugin.prototype.setColumnParent = function (columnIndex, groupId) {
+ColumnGroupingPlugin.prototype.setColumnParent = function (colRef, groupId) {
   var api = this.getGridApi();
   if (!api) {
     return;
   }
   var grid = this._hosts[0];
   var colCount = grid.getColumnCount();
-  this.moveColumnIntoGroup(columnIndex, colCount, groupId);
+  this.moveColumnIntoGroup(colRef, colCount, groupId);
 };
 export default ColumnGroupingPlugin;
 export { ColumnGroupingPlugin, ColumnGroupingPlugin as ColumnGrouping, ColumnGroupingPlugin as ColumnGroupingExtension };