@syncfusion/ej2-pivotview 19.3.55 → 19.4.41

package/src/pivotview/base/pivotview.js

@@ -313,6 +313,8 @@ var PivotView = /** @class */ (function (_super) {
         _this_1.request = new XMLHttpRequest();
         /** @hidden */
         _this_1.isServerWaitingPopup = false;
+        /** @hidden */
+        _this_1.actionObj = {};
         _this_1.pivotView = _this_1;
         setValue('mergePersistData', _this_1.mergePersistPivotData, _this_1);
         return _this_1;
@@ -355,10 +357,10 @@ var PivotView = /** @class */ (function (_super) {
             modules.push({ args: [this], member: 'grouping' });
         }
         if (this.allowDrillThrough || (this.editSettings && this.editSettings.allowEditing)) {
-            modules.push({ args: [this], member: 'drillthrough' });
+            modules.push({ args: [this], member: 'drillThrough' });
         }
         if (this.displayOption.view !== 'Table') {
-            modules.push({ args: [this], member: 'pivotchart' });
+            modules.push({ args: [this], member: 'pivotChart' });
         }
         return modules;
     };
@@ -938,7 +940,7 @@ var PivotView = /** @class */ (function (_super) {
             this.setProperties({ gridSettings: { allowSelection: true, selectionSettings: { cellSelectionMode: 'Box', mode: 'Cell', type: 'Multiple' } } }, true);
         }
         if (this.displayOption.view !== 'Table') {
-            this.chartModule = new PivotChart();
+            this.pivotChartModule = new PivotChart();
         }
         this.currentView = this.currentView ? this.currentView : (this.displayOption.view === 'Both' ?
             this.displayOption.primary : this.displayOption.view);
@@ -1205,32 +1207,37 @@ var PivotView = /** @class */ (function (_super) {
     };
     PivotView.prototype.initialLoad = function () {
         var _this_1 = this;
-        this.cellTemplateFn = this.templateParser(this.cellTemplate);
-        this.tooltipTemplateFn = this.templateParser(this.tooltipTemplate);
-        if (this.spinnerTemplate) {
-            createSpinner({ target: this.element, template: this.spinnerTemplate }, this.createElement);
+        try {
+            this.cellTemplateFn = this.templateParser(this.cellTemplate);
+            this.tooltipTemplateFn = this.templateParser(this.tooltipTemplate);
+            if (this.spinnerTemplate) {
+                createSpinner({ target: this.element, template: this.spinnerTemplate }, this.createElement);
+            }
+            else {
+                createSpinner({ target: this.element }, this.createElement);
+            }
+            var loadArgs = {
+                dataSourceSettings: this.dataSourceSettings,
+                pivotview: this,
+                fieldsType: {}
+            };
+            this.trigger(events.load, loadArgs, function (observedArgs) {
+                _this_1.dataSourceSettings = observedArgs.dataSourceSettings;
+                _this_1.fieldsType = observedArgs.fieldsType;
+                _this_1.updateClass();
+                _this_1.notify(events.initSubComponent, {});
+                if (_this_1.dataSourceSettings.mode !== 'Server') {
+                    _this_1.notify(events.initialLoad, {});
+                }
+                if (_this_1.isAdaptive) {
+                    _this_1.contextMenuModule.render();
+                }
+                _this_1.notify(events.initToolbar, {});
+            });
         }
-        else {
-            createSpinner({ target: this.element }, this.createElement);
+        catch (execption) {
+            this.actionFailureMethod(execption);
         }
-        var loadArgs = {
-            dataSourceSettings: this.dataSourceSettings,
-            pivotview: this,
-            fieldsType: {}
-        };
-        this.trigger(events.load, loadArgs, function (observedArgs) {
-            _this_1.dataSourceSettings = observedArgs.dataSourceSettings;
-            _this_1.fieldsType = observedArgs.fieldsType;
-            _this_1.updateClass();
-            _this_1.notify(events.initSubComponent, {});
-            if (_this_1.dataSourceSettings.mode !== 'Server') {
-                _this_1.notify(events.initialLoad, {});
-            }
-            if (_this_1.isAdaptive) {
-                _this_1.contextMenuModule.render();
-            }
-            _this_1.notify(events.initToolbar, {});
-        });
     };
     /**
      * Register the internal events.
@@ -1261,12 +1268,32 @@ var PivotView = /** @class */ (function (_super) {
         /* eslint-disable */
         var columnRender = this.gridSettings['columnRender'];
         var chartLoadEvent = this.chartSettings['load'];
+        var chartLoadedEvent = this.chartSettings['loaded'];
+        var chartTextRenderEvent = this.chartSettings['textRender'];
+        var chartPointRenderEvent = this.chartSettings['pointRender'];
+        var chartSeriesRenderEvent = this.chartSettings['seriesRender'];
+        var chartLegendRenderEvent = this.chartSettings['legendRender'];
+        var chartPointClickEvent = this.chartSettings['pointClick'];
+        var chartTooltipRenderEvent = this.chartSettings['tooltipRender'];
         this.gridSettings['columnRender'] = undefined;
         this.chartSettings['tooltipRender'] = undefined;
         this.chartSettings['load'] = undefined;
+        this.chartSettings['loaded'] = undefined;
+        this.chartSettings['textRender'] = undefined;
+        this.chartSettings['pointRender'] = undefined;
+        this.chartSettings['seriesRender'] = undefined;
+        this.chartSettings['legendRender'] = undefined;
+        this.chartSettings['pointClick'] = undefined;
         var persistData = this.addOnPersist(keyEntity);
         this.gridSettings['columnRender'] = columnRender;
         this.chartSettings['load'] = chartLoadEvent;
+        this.chartSettings['loaded'] = chartLoadedEvent;
+        this.chartSettings['textRender'] = chartTextRenderEvent;
+        this.chartSettings['pointRender'] = chartPointRenderEvent;
+        this.chartSettings['seriesRender'] = chartSeriesRenderEvent;
+        this.chartSettings['legendRender'] = chartLegendRenderEvent;
+        this.chartSettings['pointClick'] = chartPointClickEvent;
+        this.chartSettings['tooltipRender'] = chartTooltipRenderEvent;
         /* eslint-enable */
         return persistData;
     };
@@ -1449,15 +1476,15 @@ var PivotView = /** @class */ (function (_super) {
                         if (!this.grid && newProp.displayOption.view !== 'Chart') {
                             this.renderEmptyGrid();
                             if (newProp.displayOption.view === 'Table') {
-                                if (this.chartModule) {
-                                    this.chartModule.destroy();
+                                if (this.pivotChartModule) {
+                                    this.pivotChartModule.destroy();
                                     this.chart = undefined;
-                                    this.chartModule = undefined;
+                                    this.pivotChartModule = undefined;
                                 }
                             }
                         }
-                        else if (!this.chartModule && this.displayOption.view !== 'Table') {
-                            this.chartModule = new PivotChart();
+                        else if (!this.pivotChartModule && this.displayOption.view !== 'Table') {
+                            this.pivotChartModule = new PivotChart();
                         }
                     }
                     else if (this.showToolbar && !isNullOrUndefined(newProp.displayOption) && newProp.displayOption.view) {
@@ -1487,12 +1514,12 @@ var PivotView = /** @class */ (function (_super) {
                             (newProp.chartSettings.chartSeries && Object.keys(newProp.chartSettings.chartSeries).indexOf('type') !== -1))) {
                         this.groupingBarModule.renderLayout();
                     }
-                    if (isNullOrUndefined(this.chartModule) && this.displayOption.view !== 'Table') {
-                        this.chartModule = new PivotChart();
+                    if (isNullOrUndefined(this.pivotChartModule) && this.displayOption.view !== 'Table') {
+                        this.pivotChartModule = new PivotChart();
                     }
                     var engineModule = this.dataType === 'pivot' ? this.engineModule : this.olapEngineModule;
-                    if (!isNullOrUndefined(this.chartModule) && !isNullOrUndefined(engineModule.pivotValues)) {
-                        this.chartModule.loadChart(this, this.chartSettings);
+                    if (!isNullOrUndefined(this.pivotChartModule) && !isNullOrUndefined(engineModule.pivotValues)) {
+                        this.pivotChartModule.loadChart(this, this.chartSettings);
                     }
                     if (!isNullOrUndefined(engineModule.pivotValues) && !isNullOrUndefined(engineModule.fieldList)) {
                         this.notify(events.uiUpdate, this);
@@ -1519,6 +1546,9 @@ var PivotView = /** @class */ (function (_super) {
                     if (this.element.querySelector('.e-grouping-bar')) {
                         this.element.querySelector('.e-grouping-bar').remove();
                     }
+                    else if (this.groupingBarModule) {
+                        this.groupingBarModule.renderLayout();
+                    }
                     if (isNullOrUndefined(newProp.showFieldList))
                         this.renderPivotGrid();
                     break;
@@ -1612,9 +1642,9 @@ var PivotView = /** @class */ (function (_super) {
      */
     PivotView.prototype.renderPivotGrid = function () {
         this.clearTemplate();
-        if (this.chartModule) {
-            this.chartModule.engineModule = this.engineModule;
-            this.chartModule.loadChart(this, this.chartSettings);
+        if (this.pivotChartModule) {
+            this.pivotChartModule.engineModule = this.engineModule;
+            this.pivotChartModule.loadChart(this, this.chartSettings);
             if (this.enableRtl && this.chart && document.body.getAttribute('dir') !== 'rtl') {
                 addClass([this.chart.element], cls.PIVOTCHART_LTR);
             }
@@ -1645,7 +1675,7 @@ var PivotView = /** @class */ (function (_super) {
                 this.applyHyperlinkSettings();
             }
             this.renderModule = this.renderModule ? this.renderModule : new Render(this);
-            this.renderModule.render();
+            this.renderModule.render(true);
         }
         else if (this.grid) {
             remove(this.grid.element);
@@ -1661,7 +1691,9 @@ var PivotView = /** @class */ (function (_super) {
                 if (this.toolbarModule && this.toolbarModule.toolbar) {
                     this.toolbarModule.toolbar.width = this.getGridWidthAsNumber() - 2;
                 }
-                this.chart.element.style.width = formatUnit(this.getGridWidthAsNumber());
+                if (this.chartSettings.enableScrollOnMultiAxis && this.chartSettings.enableMultipleAxis) {
+                    this.element.querySelector('.' + cls.PIVOTCHART).style.width = formatUnit(this.getGridWidthAsNumber());
+                }
                 this.chart.width = formatUnit(this.getGridWidthAsNumber());
                 if (this.currentView === 'Table') {
                     this.grid.element.style.display = '';
@@ -1681,7 +1713,13 @@ var PivotView = /** @class */ (function (_super) {
         }
         if (this.toolbarModule) {
             if (this.showFieldList && select('#' + this.element.id + '_PivotFieldList', this.element)) {
-                select('#' + this.element.id + '_PivotFieldList', this.element).style.display = 'none';
+                if (this.toolbar && this.toolbar.indexOf('FieldList') !== -1) {
+                    select('#' + this.element.id + '_PivotFieldList', this.element).style.display = 'none';
+                }
+                else {
+                    select('#' + this.element.id + '_PivotFieldList', this.element).style.top = this.element.querySelector('.' + cls.GRID_TOOLBAR).offsetHeight.toString() + 'px';
+                    select('#' + this.element.id + '_PivotFieldList', this.element).style.position = 'relative';
+                }
             }
             if (this.toolbar && this.toolbar.indexOf('FieldList') !== -1 &&
                 this.showToolbar && this.element.querySelector('.e-toggle-field-list')) {
@@ -1834,7 +1872,9 @@ var PivotView = /** @class */ (function (_super) {
                         isDrillThrough: (pivot.allowDrillThrough || pivot.editSettings.allowEditing),
                         localeObj: pivot.localeObj,
                         fieldsType: pivot.fieldsType,
-                        clonedReport: pivot.clonedReport
+                        clonedReport: pivot.clonedReport,
+                        globalize: pivot.globalize,
+                        currenyCode: pivot.currencyCode
                     };
                     /* eslint-enable @typescript-eslint/indent */
                     if (pivot.dataSourceSettings.mode === 'Server') {
@@ -1884,6 +1924,14 @@ var PivotView = /** @class */ (function (_super) {
             this.exportType = 'Excel';
             this.grid.excelExport(excelExportProperties, isMultipleExport, workbook, isBlob);
         }
+        this.actionObj.actionName = this.getActionCompleteName();
+        var actionInfo = {
+            exportInfo: { type: this.exportType, info: excelExportProperties }
+        };
+        this.actionObj.actionInfo = actionInfo;
+        if (this.actionObj.actionName) {
+            this.actionCompleteMethod();
+        }
     };
     /**
      * Export PivotGrid data to CSV file.
@@ -1901,6 +1949,14 @@ var PivotView = /** @class */ (function (_super) {
             this.exportType = 'CSV';
             this.grid.csvExport(excelExportProperties, isMultipleExport, workbook, isBlob);
         }
+        this.actionObj.actionName = this.getActionCompleteName();
+        var actionInfo = {
+            exportInfo: { type: this.exportType, info: excelExportProperties }
+        };
+        this.actionObj.actionInfo = actionInfo;
+        if (this.actionObj.actionName) {
+            this.actionCompleteMethod();
+        }
     };
     /**
      * Export Pivot widget data to PDF document.
@@ -1917,6 +1973,14 @@ var PivotView = /** @class */ (function (_super) {
         else {
             this.grid.pdfExport(pdfExportProperties, isMultipleExport, pdfDoc, isBlob);
         }
+        this.actionObj.actionName = this.getActionCompleteName();
+        var actionInfo = {
+            exportInfo: { type: 'PDF', info: pdfExportProperties }
+        };
+        this.actionObj.actionInfo = actionInfo;
+        if (this.actionObj.actionName) {
+            this.actionCompleteMethod();
+        }
     };
     /**
      * Export method for the chart.
@@ -1931,6 +1995,14 @@ var PivotView = /** @class */ (function (_super) {
         if (this.chart && this.chart.enableExport) {
             this.chart.exportModule.export(type, fileName, orientation, null, width, height);
         }
+        this.actionObj.actionName = this.getActionCompleteName();
+        var actionInfo = {
+            exportInfo: { type: type, info: fileName }
+        };
+        this.actionObj.actionInfo = actionInfo;
+        if (this.actionObj.actionName) {
+            this.actionCompleteMethod();
+        }
     };
     /**
      * Print method for the chart.
@@ -2042,6 +2114,10 @@ var PivotView = /** @class */ (function (_super) {
                     };
                     _this_1.trigger(events.enginePopulated, eventArgs);
                     pivot_1.engineModule.pivotValues = eventArgs.pivotValues;
+                    var actionInfo = {
+                        drillInfo: drilledItem_1
+                    };
+                    _this_1.actionObj.actionInfo = actionInfo;
                     pivot_1.renderPivotGrid();
                 }
                 else {
@@ -2394,6 +2470,12 @@ var PivotView = /** @class */ (function (_super) {
         this.unwireEvents();
         this.wireEvents();
         this.isChartLoaded = false;
+        this.actionObj.actionName = this.getActionCompleteName();
+        if (this.actionObj.actionName) {
+            if (this.actionObj.actionName !== events.windowResize) {
+                this.actionCompleteMethod();
+            }
+        }
     };
     PivotView.prototype.setToolTip = function (args) {
         var colIndex = Number(args.target.getAttribute('aria-colindex'));
@@ -2425,6 +2507,13 @@ var PivotView = /** @class */ (function (_super) {
             if (cell && this.engineModule.fieldList[cell.actualText]) {
                 var field = this.engineModule.fieldList[cell.actualText];
                 aggregateType = field.aggregateType;
+                if ((aggregateType !== 'DistinctCount') && (field.type !== 'number' || field.type === 'include' ||
+                    field.type === 'exclude')) {
+                    aggregateType = 'Count';
+                }
+                else {
+                    aggregateType = (aggregateType === undefined) ? 'Sum' : field.aggregateType;
+                }
                 caption = field.caption;
                 hasField = true;
             }
@@ -2644,76 +2733,105 @@ var PivotView = /** @class */ (function (_super) {
                 ele = target.parentElement.parentElement;
             }
             this.CellClicked(target, e);
-            if ((ele.parentElement.parentElement.parentElement.parentElement.classList.contains('e-movableheader')
-                && this.dataSourceSettings.valueAxis === 'column') || (ele.parentElement.classList.contains('e-row') &&
-                this.dataSourceSettings.valueAxis === 'row') && (ele.classList.contains('e-rowsheader') ||
-                ele.classList.contains('e-stot'))) {
-                var colIndex = Number(ele.getAttribute('aria-colindex'));
-                var rowIndex = Number(ele.getAttribute('index'));
-                if (this.dataSourceSettings.valueAxis === 'row' && (this.dataSourceSettings.values.length > 1 || this.dataSourceSettings.alwaysShowValueHeader)) {
-                    var header = this.pivotValues[rowIndex][colIndex];
-                    if (this.dataSourceSettings.valueIndex === -1) {
-                        rowIndex = header.type === 'value' ? rowIndex : (rowIndex + 1);
-                    }
-                    else {
-                        var level = this.getLevel(header);
-                        rowIndex = (level <= this.engineModule.measureIndex &&
-                            header.members && header.members.length > 0) ? header.members[0].rowIndex : rowIndex;
+            try {
+                if ((ele.parentElement.parentElement.parentElement.parentElement.classList.contains('e-movableheader')
+                    && this.dataSourceSettings.valueAxis === 'column') || (ele.parentElement.classList.contains('e-row') &&
+                    this.dataSourceSettings.valueAxis === 'row') && (ele.classList.contains('e-rowsheader') ||
+                    ele.classList.contains('e-stot'))) {
+                    var FieldName = target.parentElement.getAttribute('fieldname');
+                    var fieldInfo = PivotUtil.getFieldInfo(FieldName, this);
+                    this.actionObj.actionName = events.sortValue;
+                    this.actionObj.fieldInfo = fieldInfo.fieldItem;
+                    if (this.actionBeginMethod()) {
+                        return;
                     }
-                }
-                else if (this.dataSourceSettings.valueAxis === 'column' && (this.dataSourceSettings.values.length > 1 || this.dataSourceSettings.alwaysShowValueHeader)) {
-                    colIndex = (Number(ele.getAttribute('aria-colindex')) + Number(ele.getAttribute('aria-colspan')) - 1);
-                    rowIndex = this.engineModule.headerContent.length - 1;
-                }
-                this.setProperties({
-                    dataSourceSettings: {
-                        valueSortSettings: {
-                            columnIndex: (Number(ele.getAttribute('aria-colindex')) +
-                                Number(ele.getAttribute('aria-colspan')) - 1),
-                            sortOrder: this.dataSourceSettings.valueSortSettings.sortOrder === 'Descending' ? 'Ascending' : 'Descending',
-                            headerText: this.pivotValues[rowIndex][colIndex].valueSort.levelName,
-                            headerDelimiter: this.dataSourceSettings.valueSortSettings.headerDelimiter ?
-                                this.dataSourceSettings.valueSortSettings.headerDelimiter : '.'
+                    var colIndex = Number(ele.getAttribute('aria-colindex'));
+                    var rowIndex = Number(ele.getAttribute('index'));
+                    if (this.dataSourceSettings.valueAxis === 'row' && (this.dataSourceSettings.values.length > 1 || this.dataSourceSettings.alwaysShowValueHeader)) {
+                        var header = this.pivotValues[rowIndex][colIndex];
+                        if (this.dataSourceSettings.valueIndex === -1) {
+                            rowIndex = header.type === 'value' ? rowIndex : (rowIndex + 1);
+                        }
+                        else {
+                            var level = this.getLevel(header);
+                            rowIndex = (level <= this.engineModule.measureIndex &&
+                                header.members && header.members.length > 0) ? header.members[0].rowIndex : rowIndex;
                         }
                     }
-                }, true);
-                this.showWaitingPopup();
-                var pivot = this; /* eslint-disable-line */
-                pivot.engineModule.enableValueSorting = true;
-                if (pivot.enableVirtualization) {
-                    if (pivot.dataSourceSettings.enableSorting) {
-                        for (var _i = 0, _a = Object.keys(pivot.engineModule.fieldList); _i < _a.length; _i++) {
-                            var key = _a[_i];
-                            pivot.engineModule.fieldList[key].sort = 'Ascending';
+                    else if (this.dataSourceSettings.valueAxis === 'column' && (this.dataSourceSettings.values.length > 1 || this.dataSourceSettings.alwaysShowValueHeader)) {
+                        colIndex = (Number(ele.getAttribute('aria-colindex')) + Number(ele.getAttribute('aria-colspan')) - 1);
+                        rowIndex = this.engineModule.headerContent.length - 1;
+                    }
+                    this.setProperties({
+                        dataSourceSettings: {
+                            valueSortSettings: {
+                                columnIndex: (Number(ele.getAttribute('aria-colindex')) +
+                                    Number(ele.getAttribute('aria-colspan')) - 1),
+                                sortOrder: this.dataSourceSettings.valueSortSettings.sortOrder === 'Descending' ? 'Ascending' : 'Descending',
+                                headerText: this.pivotValues[rowIndex][colIndex].valueSort.levelName,
+                                headerDelimiter: this.dataSourceSettings.valueSortSettings.headerDelimiter ?
+                                    this.dataSourceSettings.valueSortSettings.headerDelimiter : '.'
+                            }
+                        }
+                    }, true);
+                    this.showWaitingPopup();
+                    var pivot = this; /* eslint-disable-line */
+                    pivot.engineModule.enableValueSorting = true;
+                    if (pivot.enableVirtualization) {
+                        if (pivot.dataSourceSettings.enableSorting) {
+                            for (var _i = 0, _a = Object.keys(pivot.engineModule.fieldList); _i < _a.length; _i++) {
+                                var key = _a[_i];
+                                pivot.engineModule.fieldList[key].sort = 'Ascending';
+                            }
+                            pivot.setProperties({ dataSourceSettings: { sortSettings: [] } }, true);
+                        }
+                        if (pivot.dataSourceSettings.mode === 'Server') {
+                            pivot.getEngine('onValueSort', null, null, null, null, null, null);
+                        }
+                        else {
+                            pivot.engineModule.rMembers = pivot.engineModule.headerCollection.rowHeaders;
+                            pivot.engineModule.cMembers = pivot.engineModule.headerCollection.columnHeaders;
+                            pivot.engineModule.applyValueSorting();
+                            pivot.engineModule.updateEngine();
                         }
-                        pivot.setProperties({ dataSourceSettings: { sortSettings: [] } }, true);
                     }
-                    if (pivot.dataSourceSettings.mode === 'Server') {
+                    else if (pivot.dataSourceSettings.mode === 'Server') {
                         pivot.getEngine('onValueSort', null, null, null, null, null, null);
                     }
                     else {
-                        pivot.engineModule.rMembers = pivot.engineModule.headerCollection.rowHeaders;
-                        pivot.engineModule.cMembers = pivot.engineModule.headerCollection.columnHeaders;
-                        pivot.engineModule.applyValueSorting();
-                        pivot.engineModule.updateEngine();
+                        pivot.engineModule.generateGridData(pivot.dataSourceSettings, true);
                     }
+                    pivot.allowServerDataBinding = false;
+                    pivot.setProperties({ pivotValues: pivot.engineModule.pivotValues }, true);
+                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                    delete pivot.bulkChanges.pivotValues;
+                    pivot.allowServerDataBinding = true;
+                    var actionInfo = {
+                        valueSortInfo: this.engineModule.valueSortSettings
+                    };
+                    this.actionObj.actionInfo = actionInfo;
+                    pivot.renderPivotGrid();
                 }
-                else if (pivot.dataSourceSettings.mode === 'Server') {
-                    pivot.getEngine('onValueSort', null, null, null, null, null, null);
-                }
-                else {
-                    pivot.engineModule.generateGridData(pivot.dataSourceSettings, true);
-                }
-                pivot.allowServerDataBinding = false;
-                pivot.setProperties({ pivotValues: pivot.engineModule.pivotValues }, true);
-                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                delete pivot.bulkChanges.pivotValues;
-                pivot.allowServerDataBinding = true;
-                pivot.renderPivotGrid();
+            }
+            catch (execption) {
+                this.actionFailureMethod(execption);
             }
         }
         else if (target.classList.contains(cls.COLLAPSE) || target.classList.contains(cls.EXPAND)) {
-            this.onDrill(target);
+            var drillFieldName = target.parentElement.getAttribute('fieldname');
+            var fieldInfo = PivotUtil.getFieldInfo(drillFieldName, this);
+            var actionName = target.classList.contains(cls.COLLAPSE) ? this.actionObj.actionName = events.drillUp : target.classList.contains(cls.EXPAND) ? this.actionObj.actionName = events.drillDown : '';
+            this.actionObj.actionName = actionName;
+            this.actionObj.fieldInfo = fieldInfo.fieldItem;
+            if (this.actionBeginMethod()) {
+                return;
+            }
+            try {
+                this.onDrill(target);
+            }
+            catch (execption) {
+                this.actionFailureMethod(execption);
+            }
         }
         else {
             this.CellClicked(target, e);
@@ -2815,7 +2933,8 @@ var PivotView = /** @class */ (function (_super) {
         var firstColWidth = this.pivotColumns[0].width;
         var eventArgs = {
             columns: this.pivotColumns,
-            dataSourceSettings: this.dataSourceSettings
+            dataSourceSettings: this.dataSourceSettings,
+            stackedColumns: this.getStackedColumns(gridcolumns, [])
         };
         this.trigger(events.beforeColumnsRender, eventArgs);
         if (this.enableVirtualization && eventArgs.columns.length > 0 && eventArgs.columns[0].width !== gridcolumns[0].width) {
@@ -2920,8 +3039,16 @@ var PivotView = /** @class */ (function (_super) {
     /* eslint-disable-next-line */
     /** @hidden */
     PivotView.prototype.onWindowResize = function () {
+        this.actionObj.actionName = events.windowResize;
+        if (this.actionBeginMethod()) {
+            return;
+        }
         clearTimeout(this.timeOutObj);
         this.timeOutObj = setTimeout(this.layoutRefresh.bind(this), 500);
+        this.actionObj.actionName = this.getActionCompleteName();
+        if (this.actionObj.actionName) {
+            this.actionCompleteMethod();
+        }
     };
     /**
      * Refreshes the Pivot Table for blazor layoutRefresh is called for other base refresh is called.
@@ -3316,7 +3443,9 @@ var PivotView = /** @class */ (function (_super) {
                 isDrillThrough: (_this_1.allowDrillThrough || _this_1.editSettings.allowEditing),
                 localeObj: _this_1.localeObj,
                 fieldsType: _this_1.fieldsType,
-                clonedReport: _this_1.clonedReport
+                clonedReport: _this_1.clonedReport,
+                globalize: _this_1.globalize,
+                currenyCode: _this_1.currencyCode
             };
             if (_this_1.dataType === 'pivot') {
                 if (_this_1.dataSourceSettings.groupSettings && _this_1.dataSourceSettings.groupSettings.length > 0) {
@@ -3542,7 +3671,8 @@ var PivotView = /** @class */ (function (_super) {
                 var str = 'color: ' + format[k].style.color + '!important;background-color: ' + format[k].style.backgroundColor +
                     '!important;font-size: ' + format[k].style.fontSize + '!important;font-family: ' + format[k].style.fontFamily +
                     ' !important;';
-                sheet.insertRule('.format' + this.element.id + k + '{' + str + '}', 0);
+                var formatClass = '.format' + this.element.id + k;
+                sheet.insertRule(formatClass + ', ' + formatClass + ' .e-cellvalue' + '{' + str + '}', 0);
             }
         }
     };
@@ -3769,6 +3899,65 @@ var PivotView = /** @class */ (function (_super) {
         EventHandler.remove(document, this.isAdaptive ? 'touchend' : 'click', this.removeButtonFocus);
         window.removeEventListener('resize', this.onWindowResize.bind(this), true);
     };
+    /** @hidden */
+    PivotView.prototype.actionBeginMethod = function () {
+        var eventArgs = {
+            dataSourceSettings: PivotUtil.getClonedDataSourceSettings(this.dataSourceSettings),
+            actionName: this.actionObj.actionName,
+            fieldInfo: this.actionObj.fieldInfo,
+            cancel: false
+        };
+        this.trigger(events.actionBegin, eventArgs);
+        return eventArgs.cancel;
+    };
+    /** @hidden */
+    PivotView.prototype.actionCompleteMethod = function () {
+        var eventArgs = {
+            dataSourceSettings: PivotUtil.getClonedDataSourceSettings(this.dataSourceSettings),
+            actionName: this.actionObj.actionName,
+            fieldInfo: this.actionObj.fieldInfo,
+            actionInfo: this.actionObj.actionInfo
+        };
+        this.trigger(events.actionComplete, eventArgs);
+        this.actionObj.actionName = '';
+        this.actionObj.actionInfo = undefined;
+        this.actionObj.fieldInfo = undefined;
+    };
+    /** @hidden */
+    PivotView.prototype.actionFailureMethod = function (error) {
+        var eventArgs = {
+            actionName: this.actionObj.actionName,
+            errorInfo: error
+        };
+        this.trigger(events.actionFailure, eventArgs);
+    };
+    /** @hidden */
+    PivotView.prototype.getActionCompleteName = function () {
+        var actionName = (this.actionObj.actionName == events.openConditionalFormatting) ? events.conditionallyFormatted : (this.actionObj.actionName == events.openNumberFormatting) ? events.numberFormatted
+            : (this.actionObj.actionName == events.tableView) ? events.tableViewed : (this.actionObj.actionName == events.chartView) ? events.chartViewed : (this.actionObj.actionName == events.hideSubTotals) ? events.subTotalsHidden : (this.actionObj.actionName == events.subTotalsRow) ? events.subTotalsRowShown
+                : (this.actionObj.actionName == events.subTotalsColumn) ? events.subTotalsColumnShown : (this.actionObj.actionName == events.showSubTotals) ? events.subTotalsShown : (this.actionObj.actionName == events.hideGrandTotals) ? events.grandTotalsHidden
+                    : (this.actionObj.actionName == events.grandTotalsRow) ? events.grandTotalsRowShown : (this.actionObj.actionName == events.grandTotalsColumn) ? events.grandTotalsColumnShown : (this.actionObj.actionName == events.showGrandTotals) ? events.grandTotalsShown
+                        : (this.actionObj.actionName == events.sortValue) ? events.valueSorted : (this.actionObj.actionName == events.openCalculatedField) ? events.calculatedFieldApplied : (this.actionObj.actionName == events.editCalculatedField) ? events.calculatedFieldEdited : (this.actionObj.actionName == events.sortField) ? events.fieldSorted
+                            : (this.actionObj.actionName == events.filterField) ? events.fieldFiltered : (this.actionObj.actionName == events.removeField) ? events.fieldRemoved : (this.actionObj.actionName == events.aggregateField) ? events.fieldAggregated : this.actionObj.actionName == events.editRecord ? events.recordEdited : this.actionObj.actionName == events.reportChange ? events.reportChanged
+                                : this.actionObj.actionName == events.saveEditedRecords ? events.editedRecordsSaved : this.actionObj.actionName == events.addNewRecord ? events.newRecordAdded
+                                    : this.actionObj.actionName == events.removeRecord ? events.recordRemoved : (this.actionObj.actionName == events.pngExport) ? events.pngExported : (this.actionObj.actionName == events.jpegExport) ? events.jpegExported
+                                        : (this.actionObj.actionName == events.svgExport) ? events.svgExported : (this.actionObj.actionName == events.pdfExport) ? events.pdfExported : (this.actionObj.actionName == events.csvExport) ? events.csvExported : (this.actionObj.actionName == events.excelExport) ? events.excelExported : this.actionObj.actionName == events.windowResize ? events.windowResized
+                                            : this.actionObj.actionName == events.saveCurrentReport ? events.reportSaved : (this.actionObj.actionName == events.addNewReport) ? events.newReportAdded : (this.actionObj.actionName == events.saveAsCurrentReport) ? events.reportReSaved
+                                                : (this.actionObj.actionName == events.renameCurrentReport) ? events.reportRenamed : this.actionObj.actionName;
+        return actionName;
+    };
+    /* eslint-disable-next-line */
+    /** @hidden */
+    PivotView.prototype.getStackedColumns = function (gridcolumns, stackedColumns) {
+        for (var _i = 0, gridcolumns_4 = gridcolumns; _i < gridcolumns_4.length; _i++) {
+            var column = gridcolumns_4[_i];
+            stackedColumns.push(column);
+            if (column.columns && column.columns.length > 0) {
+                this.getStackedColumns(column.columns, stackedColumns);
+            }
+        }
+        return stackedColumns;
+    };
     /**
      * To destroy the PivotView elements.
      * @returns {void}
@@ -3832,8 +4021,8 @@ var PivotView = /** @class */ (function (_super) {
         if (this.commonModule) {
             this.commonModule.destroy();
         }
-        if (this.chartModule) {
-            this.chartModule.destroy();
+        if (this.pivotChartModule) {
+            this.pivotChartModule.destroy();
         }
         if (this.pivotButtonModule && !this.pivotButtonModule.isDestroyed) {
             this.pivotButtonModule.destroy();
@@ -3888,8 +4077,8 @@ var PivotView = /** @class */ (function (_super) {
         if (this.commonModule) {
             this.commonModule = null;
         }
-        if (this.chartModule) {
-            this.chartModule = null;
+        if (this.pivotChartModule) {
+            this.pivotChartModule = null;
         }
         if (this.pivotButtonModule) {
             this.pivotButtonModule = null;
@@ -3909,6 +4098,12 @@ var PivotView = /** @class */ (function (_super) {
         if (this.drillThroughModule) {
             this.drillThroughModule = null;
         }
+        if (this.clonedDataSet) {
+            this.clonedDataSet = null;
+        }
+        if (this.clonedReport) {
+            this.clonedReport = null;
+        }
         this.element.innerHTML = '';
         removeClass([this.element], cls.ROOT);
         removeClass([this.element], cls.RTL);
@@ -4251,6 +4446,15 @@ var PivotView = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], PivotView.prototype, "beforeServiceInvoke", void 0);
+    __decorate([
+        Event()
+    ], PivotView.prototype, "actionBegin", void 0);
+    __decorate([
+        Event()
+    ], PivotView.prototype, "actionComplete", void 0);
+    __decorate([
+        Event()
+    ], PivotView.prototype, "actionFailure", void 0);
     PivotView = __decorate([
         NotifyPropertyChanges
     ], PivotView);