igniteui-angular 12.3.27 → 12.3.28

package/bundles/igniteui-angular.umd.js

@@ -7658,7 +7658,7 @@
             this.destroyMap = new Map();
         }
         GridBaseAPIService.prototype.get_column_by_name = function (name) {
-            return this.grid.columnList.find(function (col) { return col.field === name; });
+            return this.grid.columns.find(function (col) { return col.field === name; });
         };
         GridBaseAPIService.prototype.get_summary_data = function () {
             var grid = this.grid;
@@ -11855,8 +11855,7 @@
         IgxColumnComponent.prototype.move = function (index) {
             var _this = this;
             var target;
-            var grid = this.grid;
-            var columns = grid.columnList.filter(function (c) { return c.visibleIndex > -1; });
+            var columns = this.grid.columns.filter(function (c) { return c.visibleIndex > -1; });
             // grid last visible index
             var li = columns.map(function (c) { return c.visibleIndex; }).reduce(function (a, b) { return Math.max(a, b); });
             var parent = this.parent;
@@ -11874,7 +11873,8 @@
             /* eslint-enable max-len */
             if (isPreceding) {
                 columns = columns.filter(function (c) { return c.visibleIndex > _this.visibleIndex; });
-                target = columns.find(function (c) { return c.level === _this.level && c.visibleIndex + c.calcChildren() - _this.calcChildren() === index; });
+                target = columns.find(function (c) { return c.level === _this.level &&
+                    c.visibleIndex + c.calcChildren() - _this.calcChildren() === index; });
             }
             else {
                 columns = columns.filter(function (c) { return c.visibleIndex < _this.visibleIndex; });
@@ -11884,7 +11884,7 @@
                 return;
             }
             var pos = isPreceding ? DropPosition.AfterDropTarget : DropPosition.BeforeDropTarget;
-            grid.moveColumn(this, target, pos);
+            this.grid.moveColumn(this, target, pos);
         };
         /**
          * No children for the column, so will returns 1 or 0, if the column is hidden.
@@ -12900,7 +12900,7 @@
                 throw Error('No options provided!');
             }
             this.options = options;
-            var columns = grid.columnList.toArray();
+            var columns = grid.columns;
             if (this.options.ignoreMultiColumnHeaders) {
                 columns = columns.filter(function (col) { return col.children === undefined; });
             }
@@ -13658,7 +13658,7 @@
                 columnList = this.getAutoGeneratedColumns(islandData);
             }
             else {
-                var islandColumnList = island.childColumns.toArray();
+                var islandColumnList = island.columns;
                 columnList = this.getColumns(islandColumnList);
             }
             this._ownersMap.set(island, columnList);
@@ -49494,7 +49494,7 @@
                 this.removeSummaries(rowID);
             }
             if (args.rowID !== undefined && args.rowID !== null) {
-                var columnName = args.cellID ? this.grid.columnList.find(function (col) { return col.index === args.cellID.columnID; }).field : undefined;
+                var columnName = args.cellID ? this.grid.columns.find(function (col) { return col.index === args.cellID.columnID; }).field : undefined;
                 if (columnName && this.grid.rowEditable) {
                     return;
                 }
@@ -49552,7 +49552,7 @@
                 return this.summaryHeight = 0;
             }
             var maxSummaryLength = 0;
-            this.grid.columnList.filter(function (col) { return col.hasSummary && !col.hidden; }).forEach(function (column) {
+            this.grid.columns.filter(function (col) { return col.hasSummary && !col.hidden; }).forEach(function (column) {
                 var getCurrentSummaryColumn = column.summaries.operate([], [], column.field).length;
                 if (getCurrentSummaryColumn) {
                     if (maxSummaryLength < getCurrentSummaryColumn) {
@@ -49574,7 +49574,7 @@
             if (!this.hasSummarizedColumns || !data) {
                 return rowSummaries;
             }
-            this.grid.columnList.filter(function (col) { return col.hasSummary; }).forEach(function (column) {
+            this.grid.columns.filter(function (col) { return col.hasSummary; }).forEach(function (column) {
                 if (!rowSummaries.get(column.field)) {
                     var summaryResult = column.summaries.operate(data.map(function (r) { return resolveNestedPath(r, column.field); }), data, column.field, _this.grid.locale, column.pipeArgs);
                     rowSummaries.set(column.field, summaryResult);
@@ -49610,7 +49610,7 @@
         };
         Object.defineProperty(IgxGridSummaryService.prototype, "hasSummarizedColumns", {
             get: function () {
-                var summarizedColumns = this.grid.columnList.filter(function (col) { return col.hasSummary && !col.hidden; });
+                var summarizedColumns = this.grid.columns.filter(function (col) { return col.hasSummary && !col.hidden; });
                 return summarizedColumns.length > 0;
             },
             enumerable: false,
@@ -57140,8 +57140,8 @@
             get: function () {
                 if (this._maxLevelHeaderDepth === null) {
                     this._maxLevelHeaderDepth = this.hasColumnLayouts ?
-                        this.columnList.reduce(function (acc, col) { return Math.max(acc, col.rowStart); }, 0) :
-                        this.columnList.reduce(function (acc, col) { return Math.max(acc, col.level); }, 0);
+                        this._columns.reduce(function (acc, col) { return Math.max(acc, col.rowStart); }, 0) :
+                        this._columns.reduce(function (acc, col) { return Math.max(acc, col.level); }, 0);
                 }
                 return this._maxLevelHeaderDepth;
             },
@@ -57158,7 +57158,7 @@
              * ``
              */
             get: function () {
-                return this.columnList.filter(function (col) { return col.columnGroup === false && col.hidden === true; }).length;
+                return this._columns.filter(function (col) { return col.columnGroup === false && col.hidden === true; }).length;
             },
             enumerable: false,
             configurable: true
@@ -58005,14 +58005,14 @@
          * @internal
          */
         IgxGridBaseDirective.prototype.resetColumnsCaches = function () {
-            this.columnList.forEach(function (column) { return column.resetCaches(); });
+            this._columns.forEach(function (column) { return column.resetCaches(); });
         };
         /**
          * @hidden @internal
          */
         IgxGridBaseDirective.prototype.generateRowID = function () {
             var _this = this;
-            var primaryColumn = this.columnList.find(function (col) { return col.field === _this.primaryKey; });
+            var primaryColumn = this._columns.find(function (col) { return col.field === _this.primaryKey; });
             var idType = this.data.length ?
                 this.resolveDataTypes(this.data[0][this.primaryKey]) : primaryColumn ? primaryColumn.dataType : 'string';
             return idType === 'string' ? uuid.v4() : FAKE_ROW_ID--;
@@ -58080,7 +58080,7 @@
             this.resetColumnCollections();
             this.resetCachedWidths();
             this.hasVisibleColumns = undefined;
-            this._columnGroups = this.columnList.some(function (col) { return col.columnGroup; });
+            this._columnGroups = this._columns.some(function (col) { return col.columnGroup; });
         };
         /**
          * @hidden
@@ -58315,7 +58315,7 @@
          * ```
          */
         IgxGridBaseDirective.prototype.toggleColumnVisibility = function (args) {
-            var col = args.column ? this.columnList.find(function (c) { return c === args.column; }) : undefined;
+            var col = args.column ? this._columns.find(function (c) { return c === args.column; }) : undefined;
             if (!col) {
                 return;
             }
@@ -58593,17 +58593,6 @@
             configurable: true
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "columns", {
-            /**
-             * @hidden
-             * @internal
-             */
-            get: function () {
-                return this._columns;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(IgxGridBaseDirective.prototype, "columnsCollection", {
             /**
              * Gets an array of `IgxColumnComponent`s.
              *
@@ -58613,7 +58602,7 @@
              * ```
              */
             get: function () {
-                return this._rendered ? this._columns : [];
+                return this._columns || [];
             },
             enumerable: false,
             configurable: true
@@ -58695,7 +58684,7 @@
          * @param name
          */
         IgxGridBaseDirective.prototype.getColumnByName = function (name) {
-            return this.columnList.find(function (col) { return col.field === name; });
+            return this._columns.find(function (col) { return col.field === name; });
         };
         IgxGridBaseDirective.prototype.getColumnByVisibleIndex = function (index) {
             return this.visibleColumns.find(function (col) { return !col.columnGroup && !col.columnLayout &&
@@ -58714,7 +58703,7 @@
                 if (this._visibleColumns.length) {
                     return this._visibleColumns;
                 }
-                this._visibleColumns = this.columnList.filter(function (c) { return !c.hidden; });
+                this._visibleColumns = this._columns.filter(function (c) { return !c.hidden; });
                 return this._visibleColumns;
             },
             enumerable: false,
@@ -58873,7 +58862,7 @@
              * @internal
              */
             get: function () {
-                return this.rowEditable && this.dataView.length === 0 && this.columns.length > 0;
+                return this.rowEditable && this.dataView.length === 0 && this._columns.length > 0;
             },
             enumerable: false,
             configurable: true
@@ -58884,7 +58873,7 @@
              * @internal
              */
             get: function () {
-                return this.rowDraggable && this.columns.length > this.hiddenColumnsCount;
+                return this.rowDraggable && this._columns.length > this.hiddenColumnsCount;
             },
             enumerable: false,
             configurable: true
@@ -58925,12 +58914,12 @@
                 var index = pos === DropPosition.AfterDropTarget ? unpinnedIndex + 1 : unpinnedIndex;
                 columnPinStateChanged = column.unpin(index);
             }
-            if (target.pinned && column.pinned && !columnPinStateChanged) {
-                this._reorderColumns(column, target, pos, this._pinnedColumns);
-            }
-            if (!target.pinned && !column.pinned && !columnPinStateChanged) {
-                this._reorderColumns(column, target, pos, this._unpinnedColumns);
-            }
+            // if (target.pinned && column.pinned && !columnPinStateChanged) {
+            //     this._reorderColumns(column, target, pos, this._pinnedColumns);
+            // }
+            // if (!target.pinned && !column.pinned && !columnPinStateChanged) {
+            //     this._reorderColumns(column, target, pos, this._unpinnedColumns);
+            // }
             this._moveColumns(column, target, pos);
             this._columnsReordered(column);
         };
@@ -59048,7 +59037,7 @@
          */
         IgxGridBaseDirective.prototype.updateCell = function (value, rowSelector, column) {
             if (this.isDefined(this.primaryKey)) {
-                var col = this.columnList.toArray().find(function (c) { return c.field === column; });
+                var col = this._columns.find(function (c) { return c.field === column; });
                 if (col) {
                     // Simplify
                     var rowData = this.gridAPI.getRowData(rowSelector);
@@ -59531,7 +59520,7 @@
              * ```
              */
             get: function () {
-                return this.columnList.some(function (col) { return col.sortable; });
+                return this._columns.some(function (col) { return col.sortable; });
             },
             enumerable: false,
             configurable: true
@@ -59546,7 +59535,7 @@
              * ```
              */
             get: function () {
-                return this.columnList.some(function (col) { return col.editable; });
+                return this._columns.some(function (col) { return col.editable; });
             },
             enumerable: false,
             configurable: true
@@ -59561,7 +59550,7 @@
              * ```
              */
             get: function () {
-                return this.columnList.some(function (col) { return col.filterable; });
+                return this._columns.some(function (col) { return col.filterable; });
             },
             enumerable: false,
             configurable: true
@@ -59576,7 +59565,7 @@
              * ```
              */
             get: function () {
-                var summarizedColumns = this.columnList.filter(function (col) { return col.hasSummary && !col.hidden; });
+                var summarizedColumns = this._columns.filter(function (col) { return col.hasSummary && !col.hidden; });
                 return summarizedColumns.length > 0;
             },
             enumerable: false,
@@ -59598,7 +59587,7 @@
              */
             get: function () {
                 if (this._hasVisibleColumns === undefined) {
-                    return this.columnList ? this.columnList.some(function (c) { return !c.hidden; }) : false;
+                    return this._columns ? this._columns.some(function (c) { return !c.hidden; }) : false;
                 }
                 return this._hasVisibleColumns;
             },
@@ -59618,7 +59607,7 @@
              * ```
              */
             get: function () {
-                return this.columnList && this.columnList.some(function (col) { return col.movable; });
+                return this.columns && this.columns.some(function (col) { return col.movable; });
             },
             enumerable: false,
             configurable: true
@@ -59648,7 +59637,7 @@
              * ```
              */
             get: function () {
-                return !!this.columnList.some(function (col) { return col.columnLayout; });
+                return !!this._columns.some(function (col) { return col.columnLayout; });
             },
             enumerable: false,
             configurable: true
@@ -60178,7 +60167,7 @@
          * ```
          */
         IgxGridBaseDirective.prototype.selectAllColumns = function () {
-            this.selectColumns(this.columnList.filter(function (c) { return !c.columnGroup; }));
+            this.selectColumns(this._columns.filter(function (c) { return !c.columnGroup; }));
         };
         /**
          *
@@ -60303,7 +60292,7 @@
             var _a;
             var totalItems = (_a = this.totalItemCount) !== null && _a !== void 0 ? _a : this.dataView.length - 1;
             if (rowIndex < 0 || rowIndex > totalItems || (visibleColIndex !== -1
-                && this.columnList.map(function (col) { return col.visibleIndex; }).indexOf(visibleColIndex) === -1)) {
+                && this._columns.map(function (col) { return col.visibleIndex; }).indexOf(visibleColIndex) === -1)) {
                 return;
             }
             if (this.dataView.slice(rowIndex, rowIndex + 1).find(function (rec) { return rec.expression || rec.childGridsData; })) {
@@ -60350,7 +60339,7 @@
          */
         IgxGridBaseDirective.prototype.getNextCell = function (currRowIndex, curVisibleColIndex, callback) {
             if (callback === void 0) { callback = null; }
-            var columns = this.columnList.filter(function (col) { return !col.columnGroup && col.visibleIndex >= 0; });
+            var columns = this._columns.filter(function (col) { return !col.columnGroup && col.visibleIndex >= 0; });
             var dataViewIndex = this._getDataViewIndex(currRowIndex);
             if (!this.isValidPosition(dataViewIndex, curVisibleColIndex)) {
                 return { rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex };
@@ -60386,7 +60375,7 @@
          */
         IgxGridBaseDirective.prototype.getPreviousCell = function (currRowIndex, curVisibleColIndex, callback) {
             if (callback === void 0) { callback = null; }
-            var columns = this.columnList.filter(function (col) { return !col.columnGroup && col.visibleIndex >= 0; });
+            var columns = this._columns.filter(function (col) { return !col.columnGroup && col.visibleIndex >= 0; });
             var dataViewIndex = this._getDataViewIndex(currRowIndex);
             if (!this.isValidPosition(dataViewIndex, curVisibleColIndex)) {
                 return { rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex };
@@ -60657,21 +60646,6 @@
                 console.warn('The row with the specified PK or index is outside of the current data view.');
             }
         };
-        /**
-         * Update internal column's collection.
-         *
-         * @hidden
-         */
-        IgxGridBaseDirective.prototype.updateColumns = function (newColumns) {
-            var _this = this;
-            // update internal collections to retain order.
-            this._pinnedColumns = newColumns
-                .filter(function (c) { return c.pinned; }).sort(function (a, b) { return _this._pinnedColumns.indexOf(a) - _this._pinnedColumns.indexOf(b); });
-            this._unpinnedColumns = newColumns.filter(function (c) { return !c.pinned; });
-            this.columnList.reset(newColumns);
-            this.columnList.notifyOnChanges();
-            this._columns = this.columnList.toArray();
-        };
         /**
          * Enters add mode by spawning the UI at the specified index.
          *
@@ -60689,6 +60663,19 @@
             }
             return this.beginAddRowById(this.gridAPI.get_rec_id_by_index(index - 1, this.dataView));
         };
+        /**
+         * Update internal column's collection.
+         *
+         * @hidden
+         */
+        IgxGridBaseDirective.prototype.updateColumns = function (newColumns) {
+            // update internal collections to retain order.
+            this._pinnedColumns = newColumns
+                .filter(function (c) { return c.pinned; });
+            this._unpinnedColumns = newColumns.filter(function (c) { return !c.pinned; });
+            this._columns = newColumns;
+            this.resetCaches();
+        };
         IgxGridBaseDirective.prototype.beginAddRowForIndex = function (index, asChild) {
             if (asChild === void 0) { asChild = false; }
             var row = index == null ?
@@ -60841,7 +60828,7 @@
             if (!this.columnWidthSetByUser) {
                 this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : MINIMUM_COLUMN_WIDTH + 'px';
             }
-            this.columnList.forEach(function (column) {
+            this._columns.forEach(function (column) {
                 if (_this.hasColumnLayouts && parseInt(_this._columnWidth, 10)) {
                     var columnWidthCombined = parseInt(_this._columnWidth, 10) * (column.colEnd ? column.colEnd - column.colStart : 1);
                     column.defaultWidth = columnWidthCombined + 'px';
@@ -60893,7 +60880,8 @@
          * @hidden
          */
         IgxGridBaseDirective.prototype._moveColumns = function (from, to, pos) {
-            var list = this.columnList.toArray();
+            var orderedList = this._pinnedColumns.concat(this._unpinnedColumns);
+            var list = orderedList;
             this._reorderColumns(from, to, pos, list);
             var newList = this._resetColumnList(list);
             this.updateColumns(newList);
@@ -60903,7 +60891,7 @@
          */
         IgxGridBaseDirective.prototype._resetColumnList = function (list) {
             if (!list) {
-                list = this.columnList.toArray();
+                list = this._columns;
             }
             var newList = [];
             list.filter(function (c) { return c.level === 0; }).forEach(function (p) {
@@ -60950,7 +60938,10 @@
             if (this.autoGenerate) {
                 this.autogenerateColumns();
             }
-            this.initColumns(this.columnList, function (col) { return _this.columnInit.emit(col); });
+            else {
+                this._columns = this.getColumnList();
+            }
+            this.initColumns(this._columns, function (col) { return _this.columnInit.emit(col); });
             this.columnListDiffer.diff(this.columnList);
             this.columnList.changes
                 .pipe(operators.takeUntil(this.destroy$))
@@ -60958,6 +60949,9 @@
                 _this.onColumnsChanged(change);
             });
         };
+        IgxGridBaseDirective.prototype.getColumnList = function () {
+            return this.columnList.toArray();
+        };
         /**
          * @hidden
          */
@@ -61000,10 +60994,10 @@
         IgxGridBaseDirective.prototype.onColumnsChanged = function (change) {
             var _this = this;
             var diff = this.columnListDiffer.diff(change);
-            if (this.autoGenerate && this.columnList.length === 0 && this._autoGeneratedCols.length > 0) {
+            if (this.autoGenerate && this._columns.length === 0 && this._autoGeneratedCols.length > 0) {
                 // In Ivy if there are nested conditional templates the content children are re-evaluated
                 // hence autogenerated columns are cleared and need to be reset.
-                this.columnList.reset(this._autoGeneratedCols);
+                this.updateColumns(this._autoGeneratedCols);
                 return;
             }
             if (diff) {
@@ -61018,7 +61012,7 @@
                         _this._unpinnedColumns.push(record.item);
                     }
                 });
-                this.initColumns(this.columnList, function (col) { return _this.columnInit.emit(col); });
+                this.initColumns(this.columnList.toArray(), function (col) { return _this.columnInit.emit(col); });
                 diff.forEachRemovedItem(function (record) {
                     var isColumnGroup = record.item instanceof IgxColumnGroupComponent;
                     if (!isColumnGroup) {
@@ -61324,7 +61318,7 @@
                 columns.push(ref.instance);
             });
             this._autoGeneratedCols = columns;
-            this.columnList.reset(columns);
+            this.updateColumns(columns);
             if (data && data.length > 0) {
                 this.shouldGenerate = false;
             }
@@ -61352,10 +61346,10 @@
         IgxGridBaseDirective.prototype.initColumns = function (collection, cb) {
             var _this = this;
             if (cb === void 0) { cb = null; }
-            this._columnGroups = this.columnList.some(function (col) { return col.columnGroup; });
+            this._columnGroups = collection.some(function (col) { return col.columnGroup; });
             if (this.hasColumnLayouts) {
                 // Set overall row layout size
-                this.columnList.forEach(function (col) {
+                collection.forEach(function (col) {
                     if (col.columnLayout) {
                         var layoutSize = col.children ?
                             col.children.reduce(function (acc, val) { return Math.max(val.rowStart + val.gridRowSpan - 1, acc); }, 1) :
@@ -61367,18 +61361,17 @@
             if (this.hasColumnLayouts && this.hasColumnGroups) {
                 // invalid configuration - multi-row and column groups
                 // remove column groups
-                var columnLayoutColumns = this.columnList.filter(function (col) { return col.columnLayout || col.columnLayoutChild; });
-                this.columnList.reset(columnLayoutColumns);
+                var columnLayoutColumns = collection.filter(function (col) { return col.columnLayout || col.columnLayoutChild; });
+                collection = columnLayoutColumns;
             }
             this._maxLevelHeaderDepth = null;
-            this._columns = this.columnList.toArray();
             collection.forEach(function (column) {
                 column.defaultWidth = _this.columnWidthSetByUser ? _this._columnWidth : column.defaultWidth ? column.defaultWidth : '';
                 if (cb) {
                     cb(column);
                 }
             });
-            this.reinitPinStates();
+            this.updateColumns(collection);
             if (this.hasColumnLayouts) {
                 collection.forEach(function (column) {
                     column.populateVisibleIndexes();
@@ -61390,13 +61383,11 @@
          */
         IgxGridBaseDirective.prototype.reinitPinStates = function () {
             var _this = this;
-            this._pinnedColumns = this.columnList
-                .filter(function (c) { return c.pinned; })
-                .sort(function (a, b) { return _this._pinnedColumns.indexOf(a) - _this._pinnedColumns.indexOf(b); });
-            this._unpinnedColumns = this.hasColumnGroups ? this.columnList.filter(function (c) { return !c.pinned; }) :
-                this.columnList.filter(function (c) { return !c.pinned; })
-                    .sort(function (a, b) { return _this._unpinnedColumns.findIndex(function (x) { return x.field === a.field; }) -
-                    _this._unpinnedColumns.findIndex(function (x) { return x.field === b.field; }); });
+            this._pinnedColumns = this._columns
+                .filter(function (c) { return c.pinned; }).sort(function (a, b) { return _this._pinnedColumns.indexOf(a) - _this._pinnedColumns.indexOf(b); });
+            this._unpinnedColumns = this.hasColumnGroups ? this._columns.filter(function (c) { return !c.pinned; }) :
+                this._columns.filter(function (c) { return !c.pinned; })
+                    .sort(function (a, b) { return _this._unpinnedColumns.indexOf(a) - _this._unpinnedColumns.indexOf(b); });
         };
         IgxGridBaseDirective.prototype.extractDataFromSelection = function (source, formatters, headers, columnData) {
             var e_4, _h, e_5, _j, e_6, _k;
@@ -61785,7 +61776,7 @@
         IgxGridBaseDirective.prototype._columnsReordered = function (column) {
             this.notifyChanges();
             if (this.hasColumnLayouts) {
-                this.columns.filter(function (x) { return x.columnLayout; }).forEach(function (x) { return x.populateVisibleIndexes(); });
+                this._columns.filter(function (x) { return x.columnLayout; }).forEach(function (x) { return x.populateVisibleIndexes(); });
             }
             // after reordering is done reset cached column collections.
             this.resetColumnCollections();
@@ -61953,7 +61944,7 @@
         };
         IgxGridBaseDirective.prototype.isValidPosition = function (rowIndex, colIndex) {
             var rows = this.summariesRowList.filter(function (s) { return s.index !== 0; }).concat(this.rowList.toArray()).length;
-            var cols = this.columnList.filter(function (col) { return !col.columnGroup && col.visibleIndex >= 0 && !col.hidden; }).length;
+            var cols = this._columns.filter(function (col) { return !col.columnGroup && col.visibleIndex >= 0 && !col.hidden; }).length;
             if (rows < 1 || cols < 1) {
                 return false;
             }
@@ -62573,7 +62564,7 @@
             get: function () {
                 var _this = this;
                 var res = [];
-                this.grid.columnList.forEach(function (col) {
+                this.grid.columns.forEach(function (col) {
                     var cell = new IgxGridCell(_this.grid, _this.index, col.field);
                     res.push(cell);
                 });
@@ -62953,7 +62944,7 @@
             get: function () {
                 var _this = this;
                 var res = [];
-                this.grid.columnList.forEach(function (col) {
+                this.grid.columns.forEach(function (col) {
                     var cell = new IgxGridCell(_this.grid, _this.index, col.field);
                     res.push(cell);
                 });
@@ -69155,7 +69146,7 @@
                 col.visibleIndex > _this.activeNode.column && col.colStart > _this.activeNode.layout.colStart; });
             if (!column || (previous && this.activeNode.layout.colStart === 1)) {
                 var index_1 = previous ? parent.visibleIndex - 1 : parent.visibleIndex + 1;
-                var children = this.grid.columnList.find(function (cols) { return cols.columnLayout && cols.visibleIndex === index_1; }).children;
+                var children = this.grid.columns.find(function (cols) { return cols.columnLayout && cols.visibleIndex === index_1; }).children;
                 column = previous ? children.toArray().reverse().find(function (child) { return child.rowStart <= _this.activeNode.layout.rowStart; }) :
                     children.find(function (child) { return _this.rowEnd(child) > _this.activeNode.layout.rowStart && child.colStart === 1; });
             }
@@ -69637,7 +69628,7 @@
                     // setter called before grid is registered in grid API service
                     this.sortingExpressions.unshift.apply(this.sortingExpressions, this._groupingExpressions);
                 }
-                if (!this._init && JSON.stringify(oldExpressions) !== JSON.stringify(newExpressions) && this.columnList) {
+                if (!this._init && JSON.stringify(oldExpressions) !== JSON.stringify(newExpressions) && this._columns) {
                     var groupedCols_1 = [];
                     var ungroupedCols_1 = [];
                     var groupedColsArr = newExpressions.filter(function (obj) { return !oldExpressions.some(function (obj2) { return obj.fieldName === obj2.fieldName; }); });
@@ -69709,7 +69700,7 @@
                 else {
                     this.groupingDiffer = null;
                 }
-                if (this.columnList && this.groupingExpressions) {
+                if (this._columns && this.groupingExpressions) {
                     this._setGroupColsVisibility(value);
                 }
                 this._hideGroupedColumns = value;
@@ -69775,7 +69766,7 @@
         IgxGridComponent.prototype.getCellByColumnVisibleIndex = function (rowIndex, index) {
             var _a;
             var row = this.getRowByIndex(rowIndex);
-            var column = this.columnList.find(function (col) { return col.visibleIndex === index; });
+            var column = this._columns.find(function (col) { return col.visibleIndex === index; });
             if (row && row instanceof IgxGridRow && !((_a = row.data) === null || _a === void 0 ? void 0 : _a.detailsData) && column) {
                 return new IgxGridCell(this, rowIndex, column.field);
             }
@@ -70066,7 +70057,7 @@
              * ```
              */
             get: function () {
-                return this.columnList.some(function (col) { return col.groupable && !col.columnGroup; });
+                return this._columns.some(function (col) { return col.groupable && !col.columnGroup; });
             },
             enumerable: false,
             configurable: true
@@ -70207,7 +70198,7 @@
                 this._groupRowTemplate = this.groupTemplate.template;
             }
             this.detailTemplate.changes.subscribe(function () { return _this.trackChanges = function (_, rec) { return ((rec === null || rec === void 0 ? void 0 : rec.detailsData) !== undefined ? rec.detailsData : rec); }; });
-            if (this.hideGroupedColumns && this.columnList && this.groupingExpressions) {
+            if (this.hideGroupedColumns && this._columns && this.groupingExpressions) {
                 this._setGroupColsVisibility(this.hideGroupedColumns);
             }
             this._setupNavigationService();
@@ -70258,9 +70249,9 @@
          */
         IgxGridComponent.prototype.ngDoCheck = function () {
             var _this = this;
-            if (this.groupingDiffer && this.columnList && !this.hasColumnLayouts) {
+            if (this.groupingDiffer && this._columns && !this.hasColumnLayouts) {
                 var changes = this.groupingDiffer.diff(this.groupingExpressions);
-                if (changes && this.columnList.length > 0) {
+                if (changes && this._columns.length > 0) {
                     changes.forEachAddedItem(function (rec) {
                         var col = _this.getColumnByName(rec.item.fieldName);
                         if (col) {
@@ -70403,7 +70394,7 @@
         IgxGridComponent.prototype.getCellByColumn = function (rowIndex, columnField) {
             var _a;
             var row = this.getRowByIndex(rowIndex);
-            var column = this.columnList.find(function (col) { return col.field === columnField; });
+            var column = this._columns.find(function (col) { return col.field === columnField; });
             if (row && row instanceof IgxGridRow && !((_a = row.data) === null || _a === void 0 ? void 0 : _a.detailsData) && column) {
                 if (this.pagingMode === 1 && this.gridAPI.grid.page !== 0) {
                     row.index = rowIndex + this.paginator.perPage * this.paginator.page;
@@ -70425,7 +70416,7 @@
          */
         IgxGridComponent.prototype.getCellByKey = function (rowSelector, columnField) {
             var row = this.getRowByKey(rowSelector);
-            var column = this.columnList.find(function (col) { return col.field === columnField; });
+            var column = this._columns.find(function (col) { return col.field === columnField; });
             if (row && column) {
                 return new IgxGridCell(this, row.index, columnField);
             }
@@ -70542,7 +70533,7 @@
         };
         IgxGridComponent.prototype._setGroupColsVisibility = function (value) {
             var _this = this;
-            if (this.columnList.length > 0 && !this.hasColumnLayouts) {
+            if (this._columns.length > 0 && !this.hasColumnLayouts) {
                 this.groupingExpressions.forEach(function (expr) {
                     var col = _this.getColumnByName(expr.fieldName);
                     col.hidden = value;
@@ -70756,6 +70747,9 @@
                             }
                         });
                         context.grid.updateColumns(newColumns);
+                        newColumns.forEach(function (col) {
+                            context.grid.columnInit.emit(col);
+                        });
                     }
                 },
                 groupBy: {
@@ -71002,17 +70996,14 @@
          * The method that calls corresponding methods to restore features from the passed IGridState object.
          */
         IgxGridStateDirective.prototype.restoreGridState = function (state, features) {
-            var _this = this;
             // TODO Notify the grid that columnList.changes is triggered by the state directive
             // instead of piping it like below
             var columns = 'columns';
-            this.grid.columnList.changes.pipe(operators.delay(0), operators.take(1)).subscribe(function () {
-                _this.featureKeys = _this.featureKeys.filter(function (f) { return f !== columns; });
-                _this.restoreFeatures(state);
-            });
             this.applyFeatures(features);
             if (this.featureKeys.includes(columns) && this.options[columns] && state[columns]) {
                 this.getFeature(columns).restoreFeatureState(this, state[columns]);
+                this.featureKeys = this.featureKeys.filter(function (f) { return f !== columns; });
+                this.restoreFeatures(state);
             }
             else {
                 this.restoreFeatures(state);
@@ -71076,8 +71067,8 @@
                 else {
                     var expr_1 = item;
                     var dataType = void 0;
-                    if (this_1.currGrid.columnList.length > 0) {
-                        dataType = this_1.currGrid.columnList.find(function (c) { return c.field === expr_1.fieldName; }).dataType;
+                    if (this_1.currGrid.columns.length > 0) {
+                        dataType = this_1.currGrid.columns.find(function (c) { return c.field === expr_1.fieldName; }).dataType;
                     }
                     else if (this_1.state.columns) {
                         dataType = this_1.state.columns.find(function (c) { return c.field === expr_1.fieldName; }).dataType;
@@ -71132,6 +71123,9 @@
                 case GridColumnDataType.Date:
                     filters = IgxDateFilteringOperand.instance();
                     break;
+                case GridColumnDataType.DateTime:
+                    filters = IgxDateTimeFilteringOperand.instance();
+                    break;
                 case GridColumnDataType.String:
                 default:
                     filters = IgxStringFilteringOperand.instance();
@@ -73439,7 +73433,7 @@
                 return this._hideGroupedColumns;
             },
             set: function (value) {
-                if (this.grid.columnList && this.expressions) {
+                if (this.grid.columns && this.expressions) {
                     this.setColumnsVisibility(value);
                 }
                 this._hideGroupedColumns = value;
@@ -73449,7 +73443,7 @@
         });
         IgxTreeGridGroupByAreaComponent.prototype.ngAfterContentInit = function () {
             var _this = this;
-            if (this.grid.columnList && this.expressions) {
+            if (this.grid.columns && this.expressions) {
                 this.groupingDiffer = this.differs.find(this.expressions).create();
                 this.updateColumnsVisibility();
             }
@@ -73529,9 +73523,9 @@
         };
         IgxTreeGridGroupByAreaComponent.prototype.updateColumnsVisibility = function () {
             var _this = this;
-            if (this.groupingDiffer && this.grid.columnList && !this.grid.hasColumnLayouts) {
+            if (this.groupingDiffer && this.grid.columns && !this.grid.hasColumnLayouts) {
                 var changes = this.groupingDiffer.diff(this.expressions);
-                if (changes && this.grid.columnList.length > 0) {
+                if (changes && this.grid.columns.length > 0) {
                     changes.forEachAddedItem(function (rec) {
                         var col = _this.grid.getColumnByName(rec.item.fieldName);
                         col.hidden = _this.hideGroupedColumns;
@@ -73545,7 +73539,7 @@
         };
         IgxTreeGridGroupByAreaComponent.prototype.setColumnsVisibility = function (value) {
             var _this = this;
-            if (this.grid.columnList.length > 0 && !this.grid.hasColumnLayouts) {
+            if (this.grid.columns.length > 0 && !this.grid.hasColumnLayouts) {
                 this.expressions.forEach(function (expr) {
                     var col = _this.grid.getColumnByName(expr.fieldName);
                     col.hidden = value;
@@ -73796,7 +73790,7 @@
          */
         IgxTreeGridComponent.prototype.getCellByColumnVisibleIndex = function (rowIndex, index) {
             var row = this.getRowByIndex(rowIndex);
-            var column = this.columnList.find(function (col) { return col.visibleIndex === index; });
+            var column = this.columns.find(function (col) { return col.visibleIndex === index; });
             if (row && row instanceof IgxTreeGridRow && column) {
                 return new IgxGridCell(this, rowIndex, column.field);
             }
@@ -74143,7 +74137,7 @@
          */
         IgxTreeGridComponent.prototype.getCellByColumn = function (rowIndex, columnField) {
             var row = this.getRowByIndex(rowIndex);
-            var column = this.columnList.find(function (col) { return col.field === columnField; });
+            var column = this.columns.find(function (col) { return col.field === columnField; });
             if (row && row instanceof IgxTreeGridRow && column) {
                 return new IgxGridCell(this, rowIndex, columnField);
             }
@@ -74162,7 +74156,7 @@
          */
         IgxTreeGridComponent.prototype.getCellByKey = function (rowSelector, columnField) {
             var row = this.getRowByKey(rowSelector);
-            var column = this.columnList.find(function (col) { return col.field === columnField; });
+            var column = this.columns.find(function (col) { return col.field === columnField; });
             if (row && column) {
                 return new IgxGridCell(this, row.index, columnField);
             }
@@ -74222,7 +74216,7 @@
              * ```
              */
             get: function () {
-                return this.columnList.some(function (col) { return col.groupable && !col.columnGroup; });
+                return this.columns.some(function (col) { return col.groupable && !col.columnGroup; });
             },
             enumerable: false,
             configurable: true
@@ -74319,8 +74313,8 @@
             if (this.hasColumnLayouts) {
                 // invalid configuration - tree grid should not allow column layouts
                 // remove column layouts
-                var nonColumnLayoutColumns = this.columnList.filter(function (col) { return !col.columnLayout && !col.columnLayoutChild; });
-                this.columnList.reset(nonColumnLayoutColumns);
+                var nonColumnLayoutColumns = this.columns.filter(function (col) { return !col.columnLayout && !col.columnLayoutChild; });
+                this.updateColumns(nonColumnLayoutColumns);
             }
             _super.prototype.initColumns.call(this, collection, cb);
         };
@@ -76103,7 +76097,7 @@
              */
             get: function () {
                 if (this._maxLevelHeaderDepth === null) {
-                    this._maxLevelHeaderDepth = this.columnList.reduce(function (acc, col) { return Math.max(acc, col.level); }, 0);
+                    this._maxLevelHeaderDepth = this.columns.reduce(function (acc, col) { return Math.max(acc, col.level); }, 0);
                 }
                 return this._maxLevelHeaderDepth;
             },
@@ -76158,13 +76152,12 @@
                 columns.push(ref.instance);
             });
             var result = flatten(columns);
-            this.columnList.reset(result);
-            this.columnList.notifyOnChanges();
+            this.updateColumns(result);
             this.initPinning();
             var factoryColumn = this.resolver.resolveComponentFactory(IgxColumnComponent);
             var outputs = factoryColumn.outputs.filter(function (o) { return o.propName !== 'columnChange'; });
             outputs.forEach(function (output) {
-                _this.columnList.forEach(function (column) {
+                _this.columns.forEach(function (column) {
                     if (column[output.propName]) {
                         column[output.propName].pipe(operators.takeUntil(column.destroy$)).subscribe(function (args) {
                             var rowIslandColumn = _this.parentIsland.childColumns.find(function (col) { return col.field === column.field; });
@@ -76522,6 +76515,7 @@
              * @hidden
              */
             _this.rootGrid = null;
+            _this._childColumns = [];
             _this.layout_id = "igx-row-island-";
             _this.isInit = false;
             _this.hgridAPI = gridAPI;
@@ -76632,7 +76626,8 @@
             var nestedColumns = this.children.map(function (layout) { return layout.columnList.toArray(); });
             var colsArray = [].concat.apply([], nestedColumns);
             var topCols = this.columnList.filter(function (item) { return colsArray.indexOf(item) === -1; });
-            this.childColumns.reset(topCols);
+            this._childColumns = topCols;
+            this.updateColumns(this._childColumns);
             this.columnList.changes.pipe(operators.takeUntil(this.destroy$)).subscribe(function () {
                 Promise.resolve().then(function () {
                     _this.updateColumnList();
@@ -76640,7 +76635,7 @@
             });
             // handle column changes so that they are passed to child grid instances when columnChange is emitted.
             this.ri_columnListDiffer.diff(this.childColumns);
-            this.childColumns.toArray().forEach(function (x) { return x.columnChange.pipe(operators.takeUntil(x.destroy$)).subscribe(function () { return _this.updateColumnList(); }); });
+            this._childColumns.forEach(function (x) { return x.columnChange.pipe(operators.takeUntil(x.destroy$)).subscribe(function () { return _this.updateColumnList(); }); });
             this.childColumns.changes.pipe(operators.takeUntil(this.destroy$)).subscribe(function (change) {
                 var diff = _this.ri_columnListDiffer.diff(change);
                 if (diff) {
@@ -76735,15 +76730,9 @@
                 }
                 return false;
             });
-            this.childColumns.reset(topCols);
-            if (this.parentIsland) {
-                this.parentIsland.columnList.notifyOnChanges();
-            }
-            else {
-                this.rootGrid.columnList.notifyOnChanges();
-            }
+            this._childColumns = topCols;
             this.rowIslandAPI.getChildGrids().forEach(function (grid) {
-                grid.createColumnsList(_this.childColumns.toArray());
+                grid.createColumnsList(_this._childColumns);
                 if (!document.body.contains(grid.nativeElement)) {
                     grid.updateOnRender = true;
                 }
@@ -77011,7 +77000,7 @@
          */
         IgxHierarchicalGridComponent.prototype.getCellByColumnVisibleIndex = function (rowIndex, index) {
             var row = this.getRowByIndex(rowIndex);
-            var column = this.columnList.find(function (col) { return col.visibleIndex === index; });
+            var column = this.columns.find(function (col) { return col.visibleIndex === index; });
             if (row && row instanceof IgxHierarchicalGridRow && column) {
                 return new IgxGridCell(this, rowIndex, column.field);
             }
@@ -77270,7 +77259,7 @@
          */
         IgxHierarchicalGridComponent.prototype.getCellByColumn = function (rowIndex, columnField) {
             var row = this.getRowByIndex(rowIndex);
-            var column = this.columnList.find(function (col) { return col.field === columnField; });
+            var column = this.columns.find(function (col) { return col.field === columnField; });
             if (row && row instanceof IgxHierarchicalGridRow && column) {
                 return new IgxGridCell(this, rowIndex, columnField);
             }
@@ -77289,7 +77278,7 @@
          */
         IgxHierarchicalGridComponent.prototype.getCellByKey = function (rowSelector, columnField) {
             var row = this.getRowByKey(rowSelector);
-            var column = this.columnList.find(function (col) { return col.field === columnField; });
+            var column = this.columns.find(function (col) { return col.field === columnField; });
             if (row && column) {
                 return new IgxGridCell(this, row.index, columnField);
             }
@@ -77575,8 +77564,8 @@
             if (this.hasColumnLayouts) {
                 // invalid configuration - hierarchical grid should not allow column layouts
                 // remove column layouts
-                var nonColumnLayoutColumns = this.columnList.filter(function (col) { return !col.columnLayout && !col.columnLayoutChild; });
-                this.columnList.reset(nonColumnLayoutColumns);
+                var nonColumnLayoutColumns = this.columns.filter(function (col) { return !col.columnLayout && !col.columnLayoutChild; });
+                this.updateColumns(nonColumnLayoutColumns);
             }
             _super.prototype.initColumns.call(this, collection, cb);
         };
@@ -77584,17 +77573,26 @@
             if (this.parentIsland && this.parentIsland.childColumns.length > 0 && !this.autoGenerate) {
                 this.createColumnsList(this.parentIsland.childColumns.toArray());
             }
-            _super.prototype.setupColumns.call(this);
+            else {
+                _super.prototype.setupColumns.call(this);
+            }
+        };
+        IgxHierarchicalGridComponent.prototype.getColumnList = function () {
+            var childLayouts = this.parent ? this.childLayoutList : this.allLayoutList;
+            var nestedColumns = childLayouts.map(function (layout) { return layout.columnList.toArray(); });
+            var colsArray = [].concat.apply([], nestedColumns);
+            if (colsArray.length > 0) {
+                var topCols = this.columnList.filter(function (item) { return colsArray.indexOf(item) === -1; });
+                return topCols;
+            }
+            else {
+                return this.columnList.toArray();
+            }
         };
         IgxHierarchicalGridComponent.prototype.onColumnsChanged = function (change) {
             var _this = this;
             Promise.resolve().then(function () {
                 _this.updateColumnList();
-                var cols = change.filter(function (c) { return c.gridAPI.grid === _this; });
-                if (cols.length > 0 || _this.autoGenerate) {
-                    _this.columnList.reset(cols);
-                    _super.prototype.onColumnsChanged.call(_this, _this.columnList);
-                }
             });
         };
         IgxHierarchicalGridComponent.prototype._shouldAutoSize = function (renderedHeight) {
@@ -77611,8 +77609,8 @@
             var colLength = this.columnList.length;
             if (colsArray.length > 0) {
                 var topCols = this.columnList.filter(function (item) { return colsArray.indexOf(item) === -1; });
-                this.columnList.reset(topCols);
-                if (recalcColSizes && this.columnList.length !== colLength) {
+                this.updateColumns(topCols);
+                if (recalcColSizes && this.columns.length !== colLength) {
                     this.calculateGridSizes(false);
                 }
             }