@syncfusion/ej2-angular-grids 19.3.48 → 19.3.56

package/CHANGELOG.md

@@ -6,6 +6,43 @@
 
 #### Bug Fixes
 
+- `#I338678` - frozen horizontal scroll issue in `Ipad` device has been fixed.
+- `#I348728` - Throws script error while cancel the Excel filter is fixed.
+
+## 19.3.55 (2021-11-23)
+
+### Grid
+
+#### Bug Fixes
+
+- `#F170201` - Passed `groupcaption` details in the `exportGroupCaption` event arguments.
+- `#I347287` - Maximum call stack issue occurs when checkbox columns set visible property as false for first column has been fixed.
+- `#I347439` - The last row bottom border issue in Frozen right part has been fixed.
+- `#I348589` - Changing grid height programmatically throws script error while scrolling issue has been fixed.
+
+## 19.3.54 (2021-11-17)
+
+### Grid
+
+#### Bug Fixes
+
+- `#I346575` - Command button click event argument type not returned properly is fixed.
+- `#I347290` - Persist selection is not working properly when enable selection dynamically is fixed.
+- `#I344276` - `HTMLtag` is not disable properly in tooltip has been fixed.
+- `#I346882` - Throws script error while enabling with `filterbarTemplate` with `ShowFilterBarOperator` is fixed.
+- `#F170007` - Autofit issue while render empty records has been fixed.
+- `#I345285` - Footer aggregate is not aligned properly has been fixed.
+
+#### New Features
+
+- `#I338539` - Provided the tag helper support for single level stacked header in Angular Grid.
+
+## 19.3.48 (2021-11-02)
+
+### Grid
+
+#### Bug Fixes
+
 - `#I345881` - Script error while reordering with the column `virtualization` is resolved.
 - `#I345229` - `expandAll` and `CollapseAll` in grouping issue has been fixed.
 - `#I343503` - row Selected data is incorrect while apply Sorting and Grouping is fixed.

package/dist/ej2-angular-grids.umd.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-angular-grids.umd.js
-*  version : 19.3.48
+*  version : 19.3.56
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing
@@ -40,23 +40,27 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 var input = ['allowEditing', 'allowFiltering', 'allowGrouping', 'allowReordering', 'allowResizing', 'allowSearching', 'allowSorting', 'autoFit', 'clipMode', 'columns', 'commands', 'customAttributes', 'dataSource', 'defaultValue', 'disableHtmlEncode', 'displayAsCheckBox', 'edit', 'editTemplate', 'editType', 'enableGroupByFormat', 'field', 'filter', 'filterBarTemplate', 'filterTemplate', 'foreignKeyField', 'foreignKeyValue', 'format', 'formatter', 'freeze', 'headerTemplate', 'headerText', 'headerTextAlign', 'headerValueAccessor', 'hideAtMedia', 'index', 'isFrozen', 'isIdentity', 'isPrimaryKey', 'lockColumn', 'maxWidth', 'minWidth', 'showColumnMenu', 'showInColumnChooser', 'sortComparer', 'template', 'textAlign', 'type', 'uid', 'validationRules', 'valueAccessor', 'visible', 'width'];
 var outputs = [];
 /**
- * `e-column` directive represent a column of the Angular Grid.
- * It must be contained in a Grid component(`ejs-grid`).
+ * `e-stacked-column` directive represent the stacked column of the Angular Grid.
+ * It must be contained in a StackedColumns component(`e-stacked-columns`).
  * ```html
  * <ejs-grid [dataSource]='data' allowPaging='true' allowSorting='true'>
  *   <e-columns>
- *    <e-column field='ID' width='100'></e-column>
- *    <e-column field='name' headerText='Name' width='100'></e-column>
+ *     <e-column field='ID' width='100'></e-column>
+ *     <e-column headerText='Details' width='100'>
+ *       <e-stacked-columns>
+ *         <e-stacked-column field='Name' width='140'></e-stacked-column>
+ *       </e-stacked-columns>
+ *     </e-column>
  *   </e-columns>
  * </ejs-grid>
  * ```
  */
-var ColumnDirective = /** @class */ (function (_super) {
-    __extends(ColumnDirective, _super);
+var StackedColumnDirective = /** @class */ (function (_super) {
+    __extends(StackedColumnDirective, _super);
     /**
      * @param {?} viewContainerRef
      */
-    function ColumnDirective(viewContainerRef) {
+    function StackedColumnDirective(viewContainerRef) {
         var _this = _super.call(this) || this;
         _this.viewContainerRef = viewContainerRef;
         ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
@@ -64,11 +68,11 @@ var ColumnDirective = /** @class */ (function (_super) {
         _this.directivePropList = input;
         return _this;
     }
-    return ColumnDirective;
+    return StackedColumnDirective;
 }(ej2AngularBase.ComplexBase));
-ColumnDirective.decorators = [
+StackedColumnDirective.decorators = [
     { type: core.Directive, args: [{
-                selector: 'ejs-grid>e-columns>e-column',
+                selector: 'ejs-grid>e-columns>e-column>e-stacked-columns>e-stacked-column',
                 inputs: input,
                 outputs: outputs,
                 queries: {}
@@ -77,10 +81,10 @@ ColumnDirective.decorators = [
 /**
  * @nocollapse
  */
-ColumnDirective.ctorParameters = function () { return [
+StackedColumnDirective.ctorParameters = function () { return [
     { type: core.ViewContainerRef, },
 ]; };
-ColumnDirective.propDecorators = {
+StackedColumnDirective.propDecorators = {
     'template': [{ type: core.ContentChild, args: ['template',] },],
     'headerTemplate': [{ type: core.ContentChild, args: ['headerTemplate',] },],
     'commandsTemplate': [{ type: core.ContentChild, args: ['commandsTemplate',] },],
@@ -91,26 +95,140 @@ ColumnDirective.propDecorators = {
 __decorate([
     ej2AngularBase.Template(),
     __metadata("design:type", Object)
-], ColumnDirective.prototype, "template", void 0);
+], StackedColumnDirective.prototype, "template", void 0);
 __decorate([
     ej2AngularBase.Template(),
     __metadata("design:type", Object)
-], ColumnDirective.prototype, "headerTemplate", void 0);
+], StackedColumnDirective.prototype, "headerTemplate", void 0);
 __decorate([
     ej2AngularBase.Template(),
     __metadata("design:type", Object)
-], ColumnDirective.prototype, "commandsTemplate", void 0);
+], StackedColumnDirective.prototype, "commandsTemplate", void 0);
 __decorate([
     ej2AngularBase.Template(),
     __metadata("design:type", Object)
-], ColumnDirective.prototype, "filter_itemTemplate", void 0);
+], StackedColumnDirective.prototype, "filter_itemTemplate", void 0);
 __decorate([
     ej2AngularBase.Template(),
     __metadata("design:type", Object)
-], ColumnDirective.prototype, "editTemplate", void 0);
+], StackedColumnDirective.prototype, "editTemplate", void 0);
 __decorate([
     ej2AngularBase.Template(),
     __metadata("design:type", Object)
+], StackedColumnDirective.prototype, "filterTemplate", void 0);
+/**
+ * StackedColumn Array Directive
+ */
+var StackedColumnsDirective = /** @class */ (function (_super) {
+    __extends(StackedColumnsDirective, _super);
+    function StackedColumnsDirective() {
+        return _super.call(this, 'columns') || this;
+    }
+    return StackedColumnsDirective;
+}(ej2AngularBase.ArrayBase));
+StackedColumnsDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'ejs-grid>e-columns>e-column>e-stacked-columns',
+                queries: {
+                    children: new core.ContentChildren(StackedColumnDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+StackedColumnsDirective.ctorParameters = function () { return []; };
+var __decorate$1 = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata$1 = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+var input$1 = ['allowEditing', 'allowFiltering', 'allowGrouping', 'allowReordering', 'allowResizing', 'allowSearching', 'allowSorting', 'autoFit', 'clipMode', 'columns', 'commands', 'customAttributes', 'dataSource', 'defaultValue', 'disableHtmlEncode', 'displayAsCheckBox', 'edit', 'editTemplate', 'editType', 'enableGroupByFormat', 'field', 'filter', 'filterBarTemplate', 'filterTemplate', 'foreignKeyField', 'foreignKeyValue', 'format', 'formatter', 'freeze', 'headerTemplate', 'headerText', 'headerTextAlign', 'headerValueAccessor', 'hideAtMedia', 'index', 'isFrozen', 'isIdentity', 'isPrimaryKey', 'lockColumn', 'maxWidth', 'minWidth', 'showColumnMenu', 'showInColumnChooser', 'sortComparer', 'template', 'textAlign', 'type', 'uid', 'validationRules', 'valueAccessor', 'visible', 'width'];
+var outputs$1 = [];
+/**
+ * `e-column` directive represent a column of the Angular Grid.
+ * It must be contained in a Grid component(`ejs-grid`).
+ * ```html
+ * <ejs-grid [dataSource]='data' allowPaging='true' allowSorting='true'>
+ *   <e-columns>
+ *    <e-column field='ID' width='100'></e-column>
+ *    <e-column field='name' headerText='Name' width='100'></e-column>
+ *   </e-columns>
+ * </ejs-grid>
+ * ```
+ */
+var ColumnDirective = /** @class */ (function (_super) {
+    __extends(ColumnDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function ColumnDirective(viewContainerRef) {
+        var _this = _super.call(this) || this;
+        _this.viewContainerRef = viewContainerRef;
+        _this.tags = ['columns'];
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.registerEvents(outputs$1);
+        _this.directivePropList = input$1;
+        return _this;
+    }
+    return ColumnDirective;
+}(ej2AngularBase.ComplexBase));
+ColumnDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'ejs-grid>e-columns>e-column',
+                inputs: input$1,
+                outputs: outputs$1,
+                queries: {
+                    childColumns: new core.ContentChild(StackedColumnsDirective)
+                }
+            },] },
+];
+/**
+ * @nocollapse
+ */
+ColumnDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+ColumnDirective.propDecorators = {
+    'template': [{ type: core.ContentChild, args: ['template',] },],
+    'headerTemplate': [{ type: core.ContentChild, args: ['headerTemplate',] },],
+    'commandsTemplate': [{ type: core.ContentChild, args: ['commandsTemplate',] },],
+    'filter_itemTemplate': [{ type: core.ContentChild, args: ['filterItemTemplate',] },],
+    'editTemplate': [{ type: core.ContentChild, args: ['editTemplate',] },],
+    'filterTemplate': [{ type: core.ContentChild, args: ['filterTemplate',] },],
+};
+__decorate$1([
+    ej2AngularBase.Template(),
+    __metadata$1("design:type", Object)
+], ColumnDirective.prototype, "template", void 0);
+__decorate$1([
+    ej2AngularBase.Template(),
+    __metadata$1("design:type", Object)
+], ColumnDirective.prototype, "headerTemplate", void 0);
+__decorate$1([
+    ej2AngularBase.Template(),
+    __metadata$1("design:type", Object)
+], ColumnDirective.prototype, "commandsTemplate", void 0);
+__decorate$1([
+    ej2AngularBase.Template(),
+    __metadata$1("design:type", Object)
+], ColumnDirective.prototype, "filter_itemTemplate", void 0);
+__decorate$1([
+    ej2AngularBase.Template(),
+    __metadata$1("design:type", Object)
+], ColumnDirective.prototype, "editTemplate", void 0);
+__decorate$1([
+    ej2AngularBase.Template(),
+    __metadata$1("design:type", Object)
 ], ColumnDirective.prototype, "filterTemplate", void 0);
 /**
  * Column Array Directive
@@ -134,7 +252,7 @@ ColumnsDirective.decorators = [
  * @nocollapse
  */
 ColumnsDirective.ctorParameters = function () { return []; };
-var __decorate$1 = (this && this.__decorate) || function (decorators, target, key, desc) {
+var __decorate$2 = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
         r = Reflect.decorate(decorators, target, key, desc);
@@ -144,12 +262,12 @@ var __decorate$1 = (this && this.__decorate) || function (decorators, target, ke
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$1 = (this && this.__metadata) || function (k, v) {
+var __metadata$2 = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
         return Reflect.metadata(k, v);
 };
-var input$1 = ['columnName', 'customAggregate', 'field', 'footerTemplate', 'format', 'groupCaptionTemplate', 'groupFooterTemplate', 'type'];
-var outputs$1 = [];
+var input$2 = ['columnName', 'customAggregate', 'field', 'footerTemplate', 'format', 'groupCaptionTemplate', 'groupFooterTemplate', 'type'];
+var outputs$2 = [];
 /**
  * `e-aggregate->e-column` directive represent a aggregate column of the Angular Grid.
  * ```html
@@ -177,8 +295,8 @@ var AggregateColumnDirective = /** @class */ (function (_super) {
         var _this = _super.call(this) || this;
         _this.viewContainerRef = viewContainerRef;
         ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.registerEvents(outputs$1);
-        _this.directivePropList = input$1;
+        _this.registerEvents(outputs$2);
+        _this.directivePropList = input$2;
         return _this;
     }
     return AggregateColumnDirective;
@@ -186,8 +304,8 @@ var AggregateColumnDirective = /** @class */ (function (_super) {
 AggregateColumnDirective.decorators = [
     { type: core.Directive, args: [{
                 selector: 'ejs-grid>e-aggregates>e-aggregate>e-columns>e-column',
-                inputs: input$1,
-                outputs: outputs$1,
+                inputs: input$2,
+                outputs: outputs$2,
                 queries: {}
             },] },
 ];
@@ -202,17 +320,17 @@ AggregateColumnDirective.propDecorators = {
     'groupFooterTemplate': [{ type: core.ContentChild, args: ['groupFooterTemplate',] },],
     'groupCaptionTemplate': [{ type: core.ContentChild, args: ['groupCaptionTemplate',] },],
 };
-__decorate$1([
+__decorate$2([
     ej2AngularBase.Template(),
-    __metadata$1("design:type", Object)
+    __metadata$2("design:type", Object)
 ], AggregateColumnDirective.prototype, "footerTemplate", void 0);
-__decorate$1([
+__decorate$2([
     ej2AngularBase.Template(),
-    __metadata$1("design:type", Object)
+    __metadata$2("design:type", Object)
 ], AggregateColumnDirective.prototype, "groupFooterTemplate", void 0);
-__decorate$1([
+__decorate$2([
     ej2AngularBase.Template(),
-    __metadata$1("design:type", Object)
+    __metadata$2("design:type", Object)
 ], AggregateColumnDirective.prototype, "groupCaptionTemplate", void 0);
 /**
  * AggregateColumn Array Directive
@@ -236,8 +354,8 @@ AggregateColumnsDirective.decorators = [
  * @nocollapse
  */
 AggregateColumnsDirective.ctorParameters = function () { return []; };
-var input$2 = ['columns'];
-var outputs$2 = [];
+var input$3 = ['columns'];
+var outputs$3 = [];
 /**
  * `e-aggregate` directive represent a aggregate row of the Angular Grid.
  * It must be contained in a Grid component(`ejs-grid`).
@@ -267,8 +385,8 @@ var AggregateDirective = /** @class */ (function (_super) {
         _this.viewContainerRef = viewContainerRef;
         _this.tags = ['columns'];
         ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.registerEvents(outputs$2);
-        _this.directivePropList = input$2;
+        _this.registerEvents(outputs$3);
+        _this.directivePropList = input$3;
         return _this;
     }
     return AggregateDirective;
@@ -276,8 +394,8 @@ var AggregateDirective = /** @class */ (function (_super) {
 AggregateDirective.decorators = [
     { type: core.Directive, args: [{
                 selector: 'ejs-grid>e-aggregates>e-aggregate',
-                inputs: input$2,
-                outputs: outputs$2,
+                inputs: input$3,
+                outputs: outputs$3,
                 queries: {
                     childColumns: new core.ContentChild(AggregateColumnsDirective)
                 }
@@ -311,7 +429,7 @@ AggregatesDirective.decorators = [
  * @nocollapse
  */
 AggregatesDirective.ctorParameters = function () { return []; };
-var __decorate$2 = (this && this.__decorate) || function (decorators, target, key, desc) {
+var __decorate$3 = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
         r = Reflect.decorate(decorators, target, key, desc);
@@ -321,12 +439,12 @@ var __decorate$2 = (this && this.__decorate) || function (decorators, target, ke
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$2 = (this && this.__metadata) || function (k, v) {
+var __metadata$3 = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
         return Reflect.metadata(k, v);
 };
 var inputs = ['aggregates', 'allowExcelExport', 'allowFiltering', 'allowGrouping', 'allowKeyboard', 'allowMultiSorting', 'allowPaging', 'allowPdfExport', 'allowReordering', 'allowResizing', 'allowRowDragAndDrop', 'allowSelection', 'allowSorting', 'allowTextWrap', 'childGrid', 'clipMode', 'columnChooserSettings', 'columnMenuItems', 'columnQueryMode', 'columns', 'contextMenuItems', 'currencyCode', 'currentAction', 'dataSource', 'detailTemplate', 'editSettings', 'ej2StatePersistenceVersion', 'enableAdaptiveUI', 'enableAltRow', 'enableAutoFill', 'enableColumnVirtualization', 'enableHeaderFocus', 'enableHover', 'enableImmutableMode', 'enableInfiniteScrolling', 'enablePersistence', 'enableRtl', 'enableStickyHeader', 'enableVirtualization', 'filterSettings', 'frozenColumns', 'frozenRows', 'gridLines', 'groupSettings', 'height', 'hierarchyPrintMode', 'infiniteScrollSettings', 'locale', 'pageSettings', 'pagerTemplate', 'parentDetails', 'printMode', 'query', 'queryString', 'resizeSettings', 'rowDropSettings', 'rowHeight', 'rowRenderingMode', 'rowTemplate', 'searchSettings', 'selectedRowIndex', 'selectionSettings', 'showColumnChooser', 'showColumnMenu', 'sortSettings', 'textWrapSettings', 'toolbar', 'toolbarTemplate', 'width'];
-var outputs$3 = ['actionBegin', 'actionComplete', 'actionFailure', 'batchAdd', 'batchCancel', 'batchDelete', 'beforeAutoFill', 'beforeBatchAdd', 'beforeBatchDelete', 'beforeBatchSave', 'beforeCopy', 'beforeDataBound', 'beforeExcelExport', 'beforeOpenAdaptiveDialog', 'beforeOpenColumnChooser', 'beforePaste', 'beforePdfExport', 'beforePrint', 'beginEdit', 'cellDeselected', 'cellDeselecting', 'cellEdit', 'cellSave', 'cellSaved', 'cellSelected', 'cellSelecting', 'checkBoxChange', 'columnDataStateChange', 'columnDeselected', 'columnDeselecting', 'columnDrag', 'columnDragStart', 'columnDrop', 'columnMenuClick', 'columnMenuOpen', 'columnSelected', 'columnSelecting', 'commandClick', 'contextMenuClick', 'contextMenuOpen', 'created', 'dataBound', 'dataSourceChanged', 'dataStateChange', 'destroyed', 'detailDataBound', 'excelAggregateQueryCellInfo', 'excelExportComplete', 'excelHeaderQueryCellInfo', 'excelQueryCellInfo', 'exportDetailDataBound', 'exportGroupCaption', 'headerCellInfo', 'keyPressed', 'lazyLoadGroupCollapse', 'lazyLoadGroupExpand', 'load', 'pdfAggregateQueryCellInfo', 'pdfExportComplete', 'pdfHeaderQueryCellInfo', 'pdfQueryCellInfo', 'printComplete', 'queryCellInfo', 'recordClick', 'recordDoubleClick', 'resizeStart', 'resizeStop', 'resizing', 'rowDataBound', 'rowDeselected', 'rowDeselecting', 'rowDrag', 'rowDragStart', 'rowDragStartHelper', 'rowDrop', 'rowSelected', 'rowSelecting', 'toolbarClick', 'dataSourceChange'];
+var outputs$4 = ['actionBegin', 'actionComplete', 'actionFailure', 'batchAdd', 'batchCancel', 'batchDelete', 'beforeAutoFill', 'beforeBatchAdd', 'beforeBatchDelete', 'beforeBatchSave', 'beforeCopy', 'beforeDataBound', 'beforeExcelExport', 'beforeOpenAdaptiveDialog', 'beforeOpenColumnChooser', 'beforePaste', 'beforePdfExport', 'beforePrint', 'beginEdit', 'cellDeselected', 'cellDeselecting', 'cellEdit', 'cellSave', 'cellSaved', 'cellSelected', 'cellSelecting', 'checkBoxChange', 'columnDataStateChange', 'columnDeselected', 'columnDeselecting', 'columnDrag', 'columnDragStart', 'columnDrop', 'columnMenuClick', 'columnMenuOpen', 'columnSelected', 'columnSelecting', 'commandClick', 'contextMenuClick', 'contextMenuOpen', 'created', 'dataBound', 'dataSourceChanged', 'dataStateChange', 'destroyed', 'detailDataBound', 'excelAggregateQueryCellInfo', 'excelExportComplete', 'excelHeaderQueryCellInfo', 'excelQueryCellInfo', 'exportDetailDataBound', 'exportGroupCaption', 'headerCellInfo', 'keyPressed', 'lazyLoadGroupCollapse', 'lazyLoadGroupExpand', 'load', 'pdfAggregateQueryCellInfo', 'pdfExportComplete', 'pdfHeaderQueryCellInfo', 'pdfQueryCellInfo', 'printComplete', 'queryCellInfo', 'recordClick', 'recordDoubleClick', 'resizeStart', 'resizeStop', 'resizing', 'rowDataBound', 'rowDeselected', 'rowDeselecting', 'rowDrag', 'rowDragStart', 'rowDragStartHelper', 'rowDrop', 'rowSelected', 'rowSelecting', 'toolbarClick', 'dataSourceChange'];
 var twoWays = ['dataSource'];
 /**
  * `ejs-grid` represents the Angular Grid Component.
@@ -519,7 +637,7 @@ exports.GridComponent = /** @class */ (function (_super) {
             }
         }
         catch (_z) { }
-        _this.registerEvents(outputs$3);
+        _this.registerEvents(outputs$4);
         _this.addTwoWay.call(_this, twoWays);
         ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
         _this.context = new ej2AngularBase.ComponentBase();
@@ -559,7 +677,7 @@ exports.GridComponent.decorators = [
     { type: core.Component, args: [{
                 selector: 'ejs-grid',
                 inputs: inputs,
-                outputs: outputs$3,
+                outputs: outputs$4,
                 template: '',
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 queries: {
@@ -585,33 +703,33 @@ exports.GridComponent.propDecorators = {
     'editSettings_template': [{ type: core.ContentChild, args: ['editSettingsTemplate',] },],
     'groupSettings_captionTemplate': [{ type: core.ContentChild, args: ['groupSettingsCaptionTemplate',] },],
 };
-__decorate$2([
+__decorate$3([
     ej2AngularBase.Template(),
-    __metadata$2("design:type", Object)
+    __metadata$3("design:type", Object)
 ], exports.GridComponent.prototype, "rowTemplate", void 0);
-__decorate$2([
+__decorate$3([
     ej2AngularBase.Template(),
-    __metadata$2("design:type", Object)
+    __metadata$3("design:type", Object)
 ], exports.GridComponent.prototype, "detailTemplate", void 0);
-__decorate$2([
+__decorate$3([
     ej2AngularBase.Template(),
-    __metadata$2("design:type", Object)
+    __metadata$3("design:type", Object)
 ], exports.GridComponent.prototype, "toolbarTemplate", void 0);
-__decorate$2([
+__decorate$3([
     ej2AngularBase.Template(),
-    __metadata$2("design:type", Object)
+    __metadata$3("design:type", Object)
 ], exports.GridComponent.prototype, "pagerTemplate", void 0);
-__decorate$2([
+__decorate$3([
     ej2AngularBase.Template(),
-    __metadata$2("design:type", Object)
+    __metadata$3("design:type", Object)
 ], exports.GridComponent.prototype, "editSettings_template", void 0);
-__decorate$2([
+__decorate$3([
     ej2AngularBase.Template(),
-    __metadata$2("design:type", Object)
+    __metadata$3("design:type", Object)
 ], exports.GridComponent.prototype, "groupSettings_captionTemplate", void 0);
-exports.GridComponent = __decorate$2([
+exports.GridComponent = __decorate$3([
     ej2AngularBase.ComponentMixins([ej2AngularBase.ComponentBase]),
-    __metadata$2("design:paramtypes", [core.ElementRef,
+    __metadata$3("design:paramtypes", [core.ElementRef,
         core.Renderer2,
         core.ViewContainerRef,
         core.Injector])
@@ -629,6 +747,8 @@ GridModule.decorators = [
                 imports: [common.CommonModule],
                 declarations: [
                     exports.GridComponent,
+                    StackedColumnDirective,
+                    StackedColumnsDirective,
                     ColumnDirective,
                     ColumnsDirective,
                     AggregateColumnDirective,
@@ -638,6 +758,8 @@ GridModule.decorators = [
                 ],
                 exports: [
                     exports.GridComponent,
+                    StackedColumnDirective,
+                    StackedColumnsDirective,
                     ColumnDirective,
                     ColumnsDirective,
                     AggregateColumnDirective,
@@ -721,7 +843,7 @@ GridAllModule.decorators = [
  * @nocollapse
  */
 GridAllModule.ctorParameters = function () { return []; };
-var __decorate$3 = (this && this.__decorate) || function (decorators, target, key, desc) {
+var __decorate$4 = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
         r = Reflect.decorate(decorators, target, key, desc);
@@ -731,12 +853,12 @@ var __decorate$3 = (this && this.__decorate) || function (decorators, target, ke
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$3 = (this && this.__metadata) || function (k, v) {
+var __metadata$4 = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
         return Reflect.metadata(k, v);
 };
 var inputs$1 = ['currentPage', 'customText', 'enableExternalMessage', 'enablePagerMessage', 'enablePersistence', 'enableQueryString', 'enableRtl', 'externalMessage', 'locale', 'pageCount', 'pageSize', 'pageSizes', 'template', 'totalRecordsCount'];
-var outputs$4 = ['click', 'created', 'dropDownChanged'];
+var outputs$5 = ['click', 'created', 'dropDownChanged'];
 var twoWays$1 = [];
 /**
  * `ejs-pager` represents the Angular Pager Component.
@@ -760,7 +882,7 @@ exports.PagerComponent = /** @class */ (function (_super) {
         _this.injector = injector;
         _this.element = _this.ngEle.nativeElement;
         _this.injectedModules = _this.injectedModules || [];
-        _this.registerEvents(outputs$4);
+        _this.registerEvents(outputs$5);
         _this.addTwoWay.call(_this, twoWays$1);
         ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
         _this.context = new ej2AngularBase.ComponentBase();
@@ -796,7 +918,7 @@ exports.PagerComponent.decorators = [
     { type: core.Component, args: [{
                 selector: 'ejs-pager',
                 inputs: inputs$1,
-                outputs: outputs$4,
+                outputs: outputs$5,
                 template: '',
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 queries: {}
@@ -814,13 +936,13 @@ exports.PagerComponent.ctorParameters = function () { return [
 exports.PagerComponent.propDecorators = {
     'template': [{ type: core.ContentChild, args: ['template',] },],
 };
-__decorate$3([
+__decorate$4([
     ej2AngularBase.Template(),
-    __metadata$3("design:type", Object)
+    __metadata$4("design:type", Object)
 ], exports.PagerComponent.prototype, "template", void 0);
-exports.PagerComponent = __decorate$3([
+exports.PagerComponent = __decorate$4([
     ej2AngularBase.ComponentMixins([ej2AngularBase.ComponentBase]),
-    __metadata$3("design:paramtypes", [core.ElementRef,
+    __metadata$4("design:paramtypes", [core.ElementRef,
         core.Renderer2,
         core.ViewContainerRef,
         core.Injector])
@@ -870,6 +992,8 @@ PagerAllModule.decorators = [
  */
 PagerAllModule.ctorParameters = function () { return []; };
 
+exports.StackedColumnDirective = StackedColumnDirective;
+exports.StackedColumnsDirective = StackedColumnsDirective;
 exports.ColumnDirective = ColumnDirective;
 exports.ColumnsDirective = ColumnsDirective;
 exports.AggregateColumnDirective = AggregateColumnDirective;
@@ -905,9 +1029,9 @@ exports.LazyLoadGroupService = LazyLoadGroupService;
 exports.PagerModule = PagerModule;
 exports.PagerAllModule = PagerAllModule;
 exports.ɵa = inputs;
-exports.ɵb = outputs$3;
+exports.ɵb = outputs$4;
 exports.ɵc = inputs$1;
-exports.ɵd = outputs$4;
+exports.ɵd = outputs$5;
 exports.CheckBoxFilterBase = ej2Grids.CheckBoxFilterBase;
 exports.ExcelFilterBase = ej2Grids.ExcelFilterBase;
 exports.SortDescriptor = ej2Grids.SortDescriptor;
@@ -1383,6 +1507,8 @@ exports.InfiniteScroll = ej2Grids.InfiniteScroll;
 exports.LazyLoadGroup = ej2Grids.LazyLoadGroup;
 exports.Column = ej2Grids.Column;
 exports.CommandColumnModel = ej2Grids.CommandColumnModel;
+exports.GridColumn = ej2Grids.GridColumn;
+exports.StackedColumn = ej2Grids.StackedColumn;
 exports.Row = ej2Grids.Row;
 exports.Cell = ej2Grids.Cell;
 exports.HeaderRender = ej2Grids.HeaderRender;