@syncfusion/ej2-pivotview 19.3.57 → 19.4.38

package/dist/es6/ej2-pivotview.es2015.js

@@ -60,41 +60,6 @@ class PivotUtil {
         }
         return clonedData;
     }
-    static getClonedPivotValues(pivotValues) {
-        let clonedSets = [];
-        for (let i = 0; i < pivotValues.length; i++) {
-            if (pivotValues[i]) {
-                clonedSets[i] = [];
-                for (let j = 0; j < pivotValues[i].length; j++) {
-                    if (pivotValues[i][j]) {
-                        /* eslint-disable */
-                        clonedSets[i][j] = this.getClonedPivotValueObj(pivotValues[i][j]);
-                        /* eslint-enable */
-                    }
-                }
-            }
-        }
-        return clonedSets;
-    }
-    /* eslint-disable */
-    static getClonedPivotValueObj(data) {
-        /* eslint-enable */
-        let keyPos = 0;
-        /* eslint-disable @typescript-eslint/no-explicit-any */
-        let framedSet = {};
-        /* eslint-enable @typescript-eslint/no-explicit-any */
-        if (!(data === null || data === undefined)) {
-            let fields = Object.keys(data);
-            while (keyPos < fields.length) {
-                framedSet[fields[keyPos]] = data[fields[keyPos]];
-                keyPos++;
-            }
-        }
-        else {
-            framedSet = data;
-        }
-        return framedSet;
-    }
     /* eslint-disable @typescript-eslint/no-explicit-any */
     static getDefinedObj(data) {
         let keyPos = 0;
@@ -127,18 +92,6 @@ class PivotUtil {
         return -1;
     }
     /* eslint-disable */
-    static isContainCommonElements(collection1, collection2) {
-        /* eslint-enable */
-        for (let i = 0, cnt = collection1.length; i < cnt; i++) {
-            for (let j = 0, lnt = collection2.length; j < lnt; j++) {
-                if (collection2[j] === collection1[i]) {
-                    return true;
-                }
-            }
-        }
-        return false;
-    }
-    /* eslint-disable */
     static setPivotProperties(control, properties) {
         /* eslint-enable */
         control.allowServerDataBinding = false;
@@ -175,6 +128,7 @@ class PivotUtil {
             drilledMembers: this.cloneDrillMemberSettings(dataSourceSettings.drilledMembers),
             valueSortSettings: this.CloneValueSortObject(dataSourceSettings.valueSortSettings),
             valueAxis: dataSourceSettings.valueAxis,
+            grandTotalsPosition: dataSourceSettings.grandTotalsPosition,
             formatSettings: this.cloneFormatSettings(dataSourceSettings.formatSettings),
             calculatedFieldSettings: this.cloneCalculatedFieldSettings(dataSourceSettings.calculatedFieldSettings),
             fieldMapping: this.cloneFieldSettings(dataSourceSettings.fieldMapping),
@@ -221,6 +175,7 @@ class PivotUtil {
                     drilledMembers: dataSourceSettings.drilledMembers,
                     valueSortSettings: dataSourceSettings.valueSortSettings,
                     valueAxis: dataSourceSettings.valueAxis,
+                    grandTotalsPosition: dataSourceSettings.grandTotalsPosition,
                     formatSettings: dataSourceSettings.formatSettings,
                     calculatedFieldSettings: dataSourceSettings.calculatedFieldSettings,
                     fieldMapping: dataSourceSettings.fieldMapping,
@@ -632,174 +587,6 @@ class PivotUtil {
         return values;
     }
     /* eslint-disable */
-    static formatPdfHeaderFooter(pdf) {
-        let contents = [];
-        if (!isNullOrUndefined(pdf)) {
-            for (let i = 0; i < pdf.length; i++) {
-                let a = pdf[i];
-                let content = {
-                    /* eslint-enable */
-                    type: a.Type,
-                    pageNumberType: a.PageNumberType,
-                    style: a.Style ? {
-                        penColor: a.Style.PenColor,
-                        penSize: a.Style.PenSize,
-                        dashStyle: a.Style.DashStyle,
-                        textBrushColor: a.Style.TextBrushColor,
-                        textPenColor: a.Style.TextPenColor,
-                        fontSize: a.Style.FontSize,
-                        hAlign: a.Style.HAlign,
-                        vAlign: a.Style.VAlign
-                    } : a.Style,
-                    points: a.Points !== null ? {
-                        x1: a.Points.X1,
-                        y1: a.Points.Y1,
-                        x2: a.Points.X2,
-                        y2: a.Points.Y2
-                    } : null,
-                    format: a.Format,
-                    position: a.Position !== null ? {
-                        x: a.Position.X,
-                        y: a.Position.Y
-                    } : null,
-                    size: a.Size !== null ? {
-                        height: a.Size.Height,
-                        width: a.Size.Width
-                    } : null,
-                    src: a.Src,
-                    value: a.Value,
-                    font: a.Font
-                };
-                contents.push(content);
-            }
-        }
-        return contents;
-    }
-    /* eslint-disable */
-    static formatPdfExportProperties(pdf) {
-        let values;
-        /* eslint-enable */
-        values = this.getDefinedObj({
-            pageOrientation: typeof pdf.PageOrientation === 'string' ? pdf.PageOrientation : null,
-            pageSize: typeof pdf.PageSize === 'string' ? pdf.PageSize : null,
-            header: !isNullOrUndefined(pdf.Header) ? {
-                fromTop: pdf.Header.FromTop,
-                height: pdf.Header.Height,
-                contents: this.formatPdfHeaderFooter(pdf.Header.Contents)
-            } : null,
-            columns: pdf.Columns,
-            footer: !isNullOrUndefined(pdf.Footer) ? {
-                fromTop: pdf.Footer.FromBottom,
-                height: pdf.Footer.Height,
-                contents: this.formatPdfHeaderFooter(pdf.Footer.Contents)
-            } : null,
-            includeHiddenColumn: pdf.IncludeHiddenColumn,
-            dataSource: pdf.DataSource,
-            exportType: typeof pdf.ExportType === 'string' ? pdf.ExportType : null,
-            theme: !isNullOrUndefined(pdf.Theme) ? {
-                header: pdf.Theme.Header,
-                record: pdf.Theme.Record,
-                caption: pdf.Theme.Caption
-            } : null,
-            fileName: pdf.FileName,
-            hierarchyExportMode: typeof pdf.HierarchyExportMode === 'string' ? pdf.HierarchyExportMode : null,
-            allowHorizontalOverflow: pdf.AllowHorizontalOverflow
-        });
-        return values;
-    }
-    /* eslint-disable */
-    static formatExcelStyle(style) {
-        let prop;
-        /* eslint-enable */
-        if (!isNullOrUndefined(style)) {
-            prop = this.getDefinedObj({
-                fontColor: style.FontColor,
-                fontName: style.FontName,
-                fontSize: style.FontSize,
-                hAlign: style.HAlign === String ? style.HAlign : null,
-                vAlign: style.VAlign === String ? style.VAlign : null,
-                bold: style.Bold,
-                indent: style.Indent,
-                italic: style.Italic,
-                underline: style.Underline,
-                backColor: style.BackColor,
-                wrapText: style.WrapText,
-                borders: style.Borders,
-                numberFormat: style.NumberFormat,
-                type: style.Type
-            });
-        }
-        return prop;
-    }
-    /* eslint-disable */
-    static formatExcelCell(cell) {
-        let cells = [];
-        if (!isNullOrUndefined(cell)) {
-            for (let i = 0; i < cell.length; i++) {
-                this.getDefinedObj({
-                    index: !isNullOrUndefined(cell[i].Index) ? cell[i].Index : null,
-                    colSpan: !isNullOrUndefined(cell[i].ColSpan) ? cell[i].ColSpan : null,
-                    value: !isNullOrUndefined(cell[i].Value) ? cell[i].Value : null,
-                    hyperlink: {
-                        target: !isNullOrUndefined(cell[i].Hyperlink) ? cell[i].Hyperlink.Target : null,
-                        displayText: !isNullOrUndefined(cell[i].Hyperlink) ? cell[i].Hyperlink.DisplayText : null
-                    },
-                    styles: this.formatExcelStyle(cell[i].Style),
-                    rowSpan: !isNullOrUndefined(cell[i].RowSpan) ? cell[i].RowSpan : null
-                });
-                /* eslint-enable */
-            }
-        }
-        return cells;
-    }
-    /* eslint-disable */
-    static formatExcelHeaderFooter(excel) {
-        let rows = [];
-        if (!isNullOrUndefined(excel)) {
-            for (let i = 0; i < excel.Rows.length; i++) {
-                let row = excel.Rows[i];
-                let prop = this.getDefinedObj({
-                    index: !isNullOrUndefined(row.Index) ? row.Index : null,
-                    cells: this.formatExcelCell(row.Cells),
-                    grouping: !isNullOrUndefined(row.Grouping) ? row.Grouping : null
-                });
-                rows.push(prop);
-            }
-        }
-        return rows;
-    }
-    static formatExcelExportProperties(excel) {
-        /* eslint-enable */
-        let prop;
-        prop = this.getDefinedObj({
-            dataSource: excel.DataSource,
-            query: excel.Query,
-            multipleExport: this.getDefinedObj({
-                type: !isNullOrUndefined(excel.MultipleExport) ? excel.MultipleExport.Type : null,
-                blankRows: !isNullOrUndefined(excel.MultipleExport) ? excel.MultipleExport.BlankRows : null
-            }),
-            header: this.getDefinedObj({
-                headerRows: !isNullOrUndefined(excel.Header) ? excel.Header.HeaderRows : null,
-                rows: this.formatExcelHeaderFooter(excel.Header)
-            }),
-            footer: this.getDefinedObj({
-                footerRows: !isNullOrUndefined(excel.Footer) ? excel.Footer.FooterRows : null,
-                rows: this.formatExcelHeaderFooter(excel.Footer)
-            }),
-            columns: excel.Columns,
-            exportType: typeof excel.ExportType === 'string' ? excel.ExportType : undefined,
-            includeHiddenColumn: excel.IncludeHiddenColumn,
-            theme: !isNullOrUndefined(excel.Theme) ? {
-                header: this.formatExcelStyle(excel.Theme.Header),
-                record: this.formatExcelStyle(excel.Theme.Record),
-                caption: this.formatExcelStyle(excel.Theme.Caption)
-            } : undefined,
-            fileName: excel.FileName,
-            hierarchyExportMode: typeof excel.HierarchyExportMode === 'string' ? excel.HierarchyExportMode : undefined
-        });
-        return prop;
-    }
-    /* eslint-disable */
     static formatFieldList(fieldList) {
         let keys = Object.keys(fieldList);
         let fList = {};
@@ -1099,7 +886,8 @@ class PivotEngine {
         this.isLastHeaderHasMeasures = true;
         this.isEditing = false;
         let fields;
-        this.globalize = new Internationalization();
+        this.globalize = (customProperties && customProperties.globalize) ? customProperties.globalize : new Internationalization();
+        this.currencyCode = (customProperties && customProperties.currenyCode) ? customProperties.currenyCode : undefined;
         this.localeObj = customProperties ? customProperties.localeObj : undefined;
         this.fieldsType = customProperties ? customProperties.fieldsType : {};
         this.clonedReport = customProperties ? (customProperties.clonedReport &&
@@ -1113,6 +901,7 @@ class PivotEngine {
         this.showRowSubTotals = isNullOrUndefined(dataSource.showRowSubTotals) ? true : dataSource.showRowSubTotals;
         this.showColumnSubTotals = isNullOrUndefined(dataSource.showColumnSubTotals) ? true : dataSource.showColumnSubTotals;
         this.showGrandTotals = isNullOrUndefined(dataSource.showGrandTotals) ? true : dataSource.showGrandTotals;
+        this.grandTotalsPosition = isNullOrUndefined(dataSource.grandTotalsPosition) ? 'Bottom' : dataSource.grandTotalsPosition;
         this.showRowGrandTotals = isNullOrUndefined(dataSource.showRowGrandTotals) ? true : dataSource.showRowGrandTotals;
         this.showColumnGrandTotals = isNullOrUndefined(dataSource.showColumnGrandTotals) ? true : dataSource.showColumnGrandTotals;
         this.allowValueFilter = dataSource.allowValueFilter;
@@ -1226,6 +1015,7 @@ class PivotEngine {
             this.showRowSubTotals = isNullOrUndefined(dataSource.showRowSubTotals) ? true : dataSource.showRowSubTotals;
             this.showColumnSubTotals = isNullOrUndefined(dataSource.showColumnSubTotals) ? true : dataSource.showColumnSubTotals;
             this.showGrandTotals = isNullOrUndefined(dataSource.showGrandTotals) ? true : dataSource.showGrandTotals;
+            this.grandTotalsPosition = isNullOrUndefined(dataSource.grandTotalsPosition) ? 'Bottom' : dataSource.grandTotalsPosition;
             this.showRowGrandTotals = isNullOrUndefined(dataSource.showRowGrandTotals) ? true : dataSource.showRowGrandTotals;
             this.showColumnGrandTotals = isNullOrUndefined(dataSource.showColumnGrandTotals) ? true : dataSource.showColumnGrandTotals;
             this.allowValueFilter = dataSource.allowValueFilter;
@@ -1524,6 +1314,7 @@ class PivotEngine {
                                         }
                                         if (!PivotUtil.getFieldByName(groupKeys[gCnt], dataFields)) {
                                             groupField = groupFields[groupKeys[gCnt]];
+                                            caption = (caption.indexOf(' (') !== -1 && caption.indexOf(')') !== -1) ? caption.slice(caption.indexOf('(') + 1, caption.length - 1) : caption;
                                             let newField = {
                                                 name: groupKeys[gCnt],
                                                 caption: (this.localeObj ? this.localeObj.getConstant(groupField) : groupField) + ' (' + caption + ')',
@@ -1551,6 +1342,8 @@ class PivotEngine {
                         }
                     }
                     gCnt = Object.keys(groupKeys).length;
+                    let field = this.getMappingField(fieldName, this.clonedReport ? this.clonedReport.fieldMapping : this.fieldMapping);
+                    let caption = field.caption ? field.caption : fieldName;
                     while (gCnt--) {
                         groupField = groupFields[groupKeys[gCnt]];
                         for (let i = 0, len = this.formats.length; i < len; i++) {
@@ -1569,6 +1362,33 @@ class PivotEngine {
                             };
                             this.formats.push(formatSettings);
                         }
+                        if (!isDataSource) {
+                            let mappingField = this.getMappingField(groupKeys[gCnt], this.fieldMapping);
+                            if (groupKeys[gCnt] !== fieldName && isNullOrUndefined(mappingField.name)) {
+                                let newField = {
+                                    name: groupKeys[gCnt],
+                                    caption: (this.localeObj ? this.localeObj.getConstant(groupField) : groupField) + ' (' + caption + ')'
+                                };
+                                this.fieldMapping.push(newField);
+                            }
+                            else if (groupKeys[gCnt] !== fieldName) {
+                                mappingField.caption = (this.localeObj ? this.localeObj.getConstant(groupField) : groupField) + ' (' + caption + ')';
+                            }
+                        }
+                    }
+                    if (!isDataSource) {
+                        let mappingField = this.getMappingField(fieldName, this.fieldMapping);
+                        groupField = groupFields[fieldName];
+                        if (groupKeys[gCnt] !== fieldName && isNullOrUndefined(mappingField.name)) {
+                            let newField = {
+                                name: fieldName,
+                                caption: (this.localeObj ? this.localeObj.getConstant(groupField) : groupField) + ' (' + caption + ')'
+                            };
+                            this.fieldMapping.push(newField);
+                        }
+                        else {
+                            mappingField.caption = (this.localeObj ? this.localeObj.getConstant(groupField) : groupField) + ' (' + caption + ')';
+                        }
                     }
                 }
                 else if (group.type === 'Number' && group.rangeInterval) {
@@ -1807,7 +1627,7 @@ class PivotEngine {
             this.fieldList = this.savedFieldList;
             while (len--) { /** while is used for better performance than for */
                 let key = keys[len];
-                let field = this.getMappingField(key);
+                let field = this.getMappingField(key, this.fieldMapping);
                 if (this.fieldList[key]) {
                     this.fieldList[key].isSelected = false;
                     this.fieldList[key].index = len;
@@ -1886,7 +1706,7 @@ class PivotEngine {
             this.fieldList = {};
             while (len--) { /** while is used for better performance than for */
                 let key = keys[len];
-                let field = this.getMappingField(key);
+                let field = this.getMappingField(key, this.fieldMapping);
                 type = (field && 'dataType' in field && field.dataType && dataTypes.indexOf(field.dataType.toLowerCase()) > -1) ?
                     field.dataType.toLowerCase() : PivotUtil.getType(fields[this.fieldKeys[key]]);
                 this.fieldList[key] = {
@@ -1930,12 +1750,12 @@ class PivotEngine {
         }
         this.updateTreeViewData(dataFields);
     }
-    getMappingField(key) {
+    getMappingField(key, fieldMapping) {
         let field = {};
-        if (this.fieldMapping.length > 0) {
-            for (let index = 0, cnt = this.fieldMapping.length; index < cnt; index++) {
-                if (this.fieldMapping[index].name === key) {
-                    field = this.fieldMapping[index];
+        if (fieldMapping.length > 0) {
+            for (let index = 0, cnt = fieldMapping.length; index < cnt; index++) {
+                if (fieldMapping[index].name === key) {
+                    field = fieldMapping[index];
                     break;
                 }
             }
@@ -2496,8 +2316,8 @@ class PivotEngine {
         field.filter = filter;
         field.filterType = type;
         field.isExcelFilter = isLabelFilter;
-        let members = (this.formatFields[name] &&
-            (['date', 'dateTime', 'time'].indexOf(this.formatFields[name].type) > -1)) ?
+        let members = ((this.formatFields[name] &&
+            (['date', 'dateTime', 'time'].indexOf(this.formatFields[name].type) > -1)) || (name in this.groupingFields)) ?
             field.formattedMembers : field.members;
         let allowFil = isInclude;
         let final = {};
@@ -2544,7 +2364,7 @@ class PivotEngine {
     }
     applyValueFiltering(rowData, level, rows, columns, valueFilter, rowFilterData, type) {
         this.isValueFiltered = false;
-        let allMember = extend({}, (type === 'row' && this.rowGrandTotal ? this.rowGrandTotal : type === 'column' && this.columnGrandTotal ? this.columnGrandTotal : rows[rows.length - 1]), null, true);
+        let allMember = extend({}, (type === 'row' && this.rowGrandTotal ? this.rowGrandTotal : type === 'column' && this.columnGrandTotal ? this.columnGrandTotal : (!(this.grandTotalsPosition === 'Top') ? rows[rows.length - 1] : rows[0])), null, true);
         this.getFilteredData(rows, columns, valueFilter, rowFilterData, level, rowData.name, allMember, type);
         if (this.isValueFiltered) {
             if ((type === 'row' && this.rowGrandTotal === null) || (type === 'column' && this.columnGrandTotal === null)) {
@@ -2879,14 +2699,14 @@ class PivotEngine {
                         for (let i = 0; i < rLen; i++) {
                             if (filterElement.name === rows[i].name && valueFields[filterElement.measure] && !isAvail) {
                                 isAvail = true;
-                                rowFilteredData = this.applyValueFiltering(rows[i], i, rowHeaders, (this.columnGrandTotal ? this.columnGrandTotal : columnHeaders[columnHeaders.length - 1]), valueFilters, this.valueFilteredData, 'row');
+                                rowFilteredData = this.applyValueFiltering(rows[i], i, rowHeaders, (this.columnGrandTotal ? this.columnGrandTotal : (this.grandTotalsPosition === 'Top' && this.showGrandTotals) ? columnHeaders[0] : columnHeaders[columnHeaders.length - 1]), valueFilters, this.valueFilteredData, 'row');
                                 break;
                             }
                         }
                         for (let j = 0; j < cLen; j++) {
                             if (filterElement.name === columns[j].name && valueFields[filterElement.measure] && !isAvail) {
                                 isAvail = true;
-                                columnFilteredData = this.applyValueFiltering(columns[j], j, columnHeaders, (this.rowGrandTotal ? this.rowGrandTotal : rowHeaders[rowHeaders.length - 1]), valueFilters, this.valueFilteredData, 'column');
+                                columnFilteredData = this.applyValueFiltering(columns[j], j, columnHeaders, (this.rowGrandTotal ? this.rowGrandTotal : (this.grandTotalsPosition === 'Top' && this.showGrandTotals) ? rowHeaders[0] : rowHeaders[rowHeaders.length - 1]), valueFilters, this.valueFilteredData, 'column');
                                 break;
                             }
                         }
@@ -3191,7 +3011,7 @@ class PivotEngine {
         }
         let engine = this;
         return headers.filter((item) => {
-            return item.members.length > 0 ? item.members.length > 0 : engine.matchIndexes(item.indexObject, filterObjects);
+            return (item.members.length > 0 || item.type === 'grand sum') ? true : engine.matchIndexes(item.indexObject, filterObjects);
         });
     }
     matchIndexes(index, filterObjects) {
@@ -3408,8 +3228,8 @@ class PivotEngine {
                     }
                 }
                 if (stringValue.length > 0) {
-                    stringValue = childrens.sort === 'Ascending' ? (stringValue.sort((a, b) => (a.actualText > b.actualText) ? 1 : ((b.actualText > a.actualText) ? -1 : 0))) :
-                        childrens.sort === 'Descending' ? (stringValue.sort((a, b) => (a.actualText < b.actualText) ? 1 : ((b.actualText < a.actualText) ? -1 : 0))) : stringValue;
+                    stringValue = childrens.sort === 'Ascending' ? (stringValue.sort((a, b) => (a.actualText === 'Grand Total' || b.actualText === 'Grand Total') ? 0 : ((a.actualText > b.actualText) ? 1 : ((b.actualText > a.actualText) ? -1 : 0)))) :
+                        childrens.sort === 'Descending' ? (stringValue.sort((a, b) => (a.actualText === 'Grand Total' || b.actualText === 'Grand Total') ? 0 : ((a.actualText < b.actualText) ? 1 : ((b.actualText < a.actualText) ? -1 : 0)))) : stringValue;
                 }
                 if (alphaNumbervalue.length > 0) {
                     alphaNumbervalue = childrens.sort === 'Ascending' ?
@@ -3422,9 +3242,9 @@ class PivotEngine {
             }
             else {
                 return sortOrder === 'Ascending' ?
-                    (headers.sort(function (a, b) { return (a.actualText > b.actualText) ? 1 : ((b.actualText > a.actualText) ? -1 : 0); })) :
+                    (headers.sort(function (a, b) { return (a.actualText === 'Grand Total' || b.actualText === 'Grand Total') ? 0 : ((a.actualText > b.actualText) ? 1 : ((b.actualText > a.actualText) ? -1 : 0)); })) :
                     sortOrder === 'Descending' ?
-                        (headers.sort(function (a, b) { return (a.actualText < b.actualText) ? 1 : ((b.actualText < a.actualText) ? -1 : 0); })) :
+                        (headers.sort(function (a, b) { return (a.actualText === 'Grand Total' || b.actualText === 'Grand Total') ? 0 : ((a.actualText < b.actualText) ? 1 : ((b.actualText < a.actualText) ? -1 : 0)); })) :
                         headers;
             }
         }
@@ -3444,7 +3264,8 @@ class PivotEngine {
             this.valueSortHeaderText = undefined;
             if (this.enableValueSorting && this.valueSortSettings.headerText && !this.valueSortHeaderText &&
                 this.valueSortSettings.headerText !== '' && this.values.length > 0) {
-                let textArray = this.valueSortSettings.headerText.split(this.valueSortSettings.headerDelimiter);
+                this.valueSortHeaderText = this.valueSortSettings.headerText;
+                let textArray = this.valueSortHeaderText.split(this.valueSortSettings.headerDelimiter);
                 for (let field of this.values) {
                     let name = field.caption ? field.caption : field.name;
                     let valueIndex = textArray.indexOf(name);
@@ -4228,7 +4049,7 @@ class PivotEngine {
     insertAllMember(set, filter, customText, axis) {
         let len = set.length;
         customText = ' Total';
-        set[len] = {
+        let grandTotalSet = {
             hasChild: false,
             index: filter,
             level: 0,
@@ -4242,13 +4063,14 @@ class PivotEngine {
             type: 'grand sum',
             valueSort: {}
         };
-        set[len].valueSort[set[len].formattedText] = 1;
-        set[len].valueSort.levelName = set[len].formattedText;
-        set[len].valueSort[set[len].actualText] = 1;
-        set[len].valueSort.uniqueName = set[len].actualText;
+        grandTotalSet.valueSort[grandTotalSet.formattedText] = 1;
+        grandTotalSet.valueSort.levelName = grandTotalSet.formattedText;
+        grandTotalSet.valueSort[grandTotalSet.actualText] = 1;
+        grandTotalSet.valueSort.uniqueName = grandTotalSet.actualText;
         for (let ln = 0, lt = filter.length; ln < lt; ln++) {
-            set[len].indexObject[filter[ln]] = filter[ln];
+            grandTotalSet.indexObject[filter[ln]] = filter[ln];
         }
+        (this.dataSourceSettings.grandTotalsPosition === 'Top' && this.dataSourceSettings.showGrandTotals) ? set.unshift(grandTotalSet) : set.push(grandTotalSet);
         // if (axis === 'row') {
         //     this.rowCount += this.rowValuesLength;
         // } else {
@@ -4296,7 +4118,7 @@ class PivotEngine {
                         for (let cln = 0, dln = 1, clt = columns.length; cln < clt; ++cln) {
                             if (!isValueIndexFound) {
                                 for (vln = 0; vln < vlt; vln++) {
-                                    if (row.valueSort.uniqueName && row.valueSort.uniqueName.toString().split(this.valueSortSettings.headerDelimiter).indexOf(this.values[vln].name) > -1) {
+                                    if (row.valueSort.uniqueName && row.valueSort.uniqueName.toString().indexOf(this.values[vln].name) > -1) {
                                         isValueIndexFound = true;
                                         isValueCellUpdated = true;
                                         break;
@@ -4331,7 +4153,7 @@ class PivotEngine {
                     for (let cln = 0, dln = 1, clt = columns.length; cln < clt; ++cln) {
                         for (let vln = 0; vln < vlt; vln++) {
                             if (!this.valueAxis && !this.isLastHeaderHasMeasures) {
-                                if (columns[cln].valueSort.uniqueName && columns[cln].valueSort.uniqueName.toString().split(this.valueSortSettings.headerDelimiter).indexOf(this.values[vln].name) > -1) {
+                                if (columns[cln].valueSort.uniqueName && columns[cln].valueSort.uniqueName.toString().indexOf(this.values[vln].name) > -1) {
                                     this.updateRowData(rows, columns, tnum, data, vln, rln, cln, dln, actCnt, rTotal, cTotal);
                                     dln = data[tnum].length;
                                 }
@@ -5251,6 +5073,10 @@ class PivotEngine {
                 this.updateValueMembers(this.measureIndex === 0 && axis.length > 1, null, null, columnHeaders, axis.slice(0, axis.length - 1), vcnt, 0);
                 this.updateValueMembers(false, null, null, columnHeaders, axis.slice(axis.length - 1, axis.length), vcnt, -1);
             }
+            else if (this.grandTotalsPosition === 'Top' && this.showGrandTotals && this.measureIndex === 0) {
+                this.updateValueMembers(false, null, null, columnHeaders, axis.slice(0, 1), vcnt, -1);
+                this.updateValueMembers(this.measureIndex === 0 && axis.length > 1, null, null, columnHeaders, axis.slice(1, axis.length), vcnt, 0);
+            }
             else {
                 let hasColumnTotal = columns.length === 0 && axis.length === 1 && axis[0].type == 'grand sum';
                 this.updateValueMembers(!hasColumnTotal && this.measureIndex === 0, null, null, columnHeaders, axis, vcnt, hasColumnTotal ? -1 : 0);
@@ -5290,6 +5116,10 @@ class PivotEngine {
                 this.updateValueMembers(this.measureIndex == 0 && this.rMembers.length > 1, null, null, rowAxis, this.rMembers.slice(0, this.rMembers.length - 1), this.values.length, 0);
                 this.updateValueMembers(false, null, null, rowAxis, this.rMembers.slice(this.rMembers.length - 1, this.rMembers.length), this.values.length, -1);
             }
+            else if (this.grandTotalsPosition === 'Top' && this.showGrandTotals && this.measureIndex === 0) {
+                this.updateValueMembers(false, null, null, rowAxis, this.rMembers.slice(0, 1), this.values.length, -1);
+                this.updateValueMembers(this.measureIndex == 0 && this.rMembers.length > 1, null, null, rowAxis, this.rMembers.slice(1, this.rMembers.length), this.values.length, 0);
+            }
             else {
                 let hasRowTotal = rows.length === 0 && this.rMembers.length === 1 && this.rMembers[0].type == 'grand sum';
                 this.updateValueMembers(!hasRowTotal && this.measureIndex == 0, null, null, rowAxis, this.rMembers, this.values.length, hasRowTotal ? -1 : 0);
@@ -5893,6 +5723,12 @@ const fieldDragStart = 'fieldDragStart';
 const chartPointClick = 'chartPointClick';
 /** @hidden */
 const beforeServiceInvoke = 'beforeServiceInvoke';
+/** @hidden */
+const actionBegin = 'actionBegin';
+/** @hidden */
+const actionComplete = 'actionComplete';
+/** @hidden */
+const actionFailure = 'actionFailure';
 /**
  * Specifies pivot internal events
  */
@@ -5922,6 +5758,186 @@ const initToolbar = 'init-toolbar';
 const initFormatting = 'init-formatting';
 /** @hidden */
 const initGrouping = 'init-grouping';
+/**
+ * Specifies action names of actionBegin events
+ */
+/** @hidden */
+const sortValue = 'Sort value';
+/** @hidden */
+const drillUp = 'Drill up';
+/** @hidden */
+const drillDown = 'Drill down';
+/** @hidden */
+const addNewReport = 'Add new report';
+/** @hidden */
+const saveCurrentReport = 'Save current report';
+/** @hidden */
+const saveAsCurrentReport = 'Save as current report';
+/** @hidden */
+const renameCurrentReport = 'Rename current report';
+/** @hidden */
+const removeCurrentReport = 'Remove current report';
+/** @hidden */
+const loadReports = 'Load report';
+/** @hidden */
+const openConditionalFormatting = 'Open conditional formatting dialog';
+/** @hidden */
+const openNumberFormatting = 'Open number formatting dialog';
+/** @hidden */
+const MdxQuery = 'MdxQuery';
+/** @hidden */
+const showFieldList = 'Open field list';
+/** @hidden */
+const tableView = 'Show table view';
+/** @hidden */
+const chartView = 'Show chart view';
+/** @hidden */
+const multipleAxis = 'Multiple Axis';
+/** @hidden */
+const showLegend = 'Show legend';
+/** @hidden */
+const pdfExport = 'PDF export';
+/** @hidden */
+const pngExport = 'PNG export';
+/** @hidden */
+const excelExport = 'Excel export';
+/** @hidden */
+const csvExport = 'CSV export';
+/** @hidden */
+const jpegExport = 'JPEG export';
+/** @hidden */
+const svgExport = 'SVG export';
+/** @hidden */
+const hideSubTotals = 'Hide sub-totals';
+/** @hidden */
+const subTotalsRow = 'Show row sub-totals';
+/** @hidden */
+const subTotalsColumn = 'Show column sub-totals';
+/** @hidden */
+const showSubTotals = 'Show sub-totals';
+/** @hidden */
+const hideGrandTotals = 'Hide grand totals';
+/** @hidden */
+const grandTotalsRow = 'Show row grand totals';
+/** @hidden */
+const grandTotalsColumn = 'Show column grand totals';
+/** @hidden */
+const showGrandTotals = 'Show grand totals';
+/** @hidden */
+const numberFormattingMenu = 'Number Formatting menu';
+/** @hidden */
+const conditionalFormattingMenu = 'Conditional Formatting menu';
+/** @hidden */
+const reportChange = 'Report change';
+/** @hidden */
+const sortFieldTree = 'Sort field tree';
+/** @hidden */
+const editCalculatedField = 'Edit calculated field';
+/** @hidden */
+const sortField = 'Sort field';
+/** @hidden */
+const filterField = 'Filter field';
+/** @hidden */
+const removeField = 'Remove field';
+/** @hidden */
+const openCalculatedField = 'Open calculated field dialog';
+/** @hidden */
+const editRecord = 'Edit record';
+/** @hidden */
+const saveEditedRecords = 'Save edited records';
+/** @hidden */
+const addNewRecord = 'Add new record';
+/** @hidden */
+const removeRecord = 'Remove record';
+/** @hidden */
+const aggregateField = 'Aggregate field';
+/** @hidden */
+const contextMenuCalculatedField = 'CalculatedField Context menu';
+/** @hidden */
+const windowResize = 'Window resize';
+/**
+ * Specifies action names of actionComplete events
+ */
+/** @hidden */
+const calculatedFieldApplied = 'Calculated field applied';
+/** @hidden */
+const editedRecordsSaved = 'Edited records saved';
+/** @hidden */
+const newRecordAdded = 'New record added';
+/** @hidden */
+const recordRemoved = 'Record removed';
+/** @hidden */
+const closeFieldlist = 'Field list closed';
+/** @hidden */
+const fieldTreeSorted = 'Field tree sorted';
+/** @hidden */
+const reportSaved = 'Report saved';
+/** @hidden */
+const newReportAdded = 'New report added';
+/** @hidden */
+const reportReSaved = 'Report re-saved';
+/** @hidden */
+const reportRenamed = 'Report renamed';
+/** @hidden */
+const reportRemoved = 'Report removed';
+/** @hidden */
+const excelExported = 'Excel exported';
+/** @hidden */
+const csvExported = 'CSV exported';
+/** @hidden */
+const pdfExported = 'PDF exported';
+/** @hidden */
+const pngExported = 'PNG exported';
+/** @hidden */
+const jpegExported = 'JPEG exported';
+/** @hidden */
+const svgExported = 'SVG exported';
+/** @hidden */
+const conditionallyFormatted = 'Conditional formatting applied';
+/** @hidden */
+const numberFormatted = 'Number formatting applied';
+/** @hidden */
+const tableViewed = 'Table view shown';
+/** @hidden */
+const chartViewed = 'Chart view shown';
+/** @hidden */
+const subTotalsHidden = 'Sub-totals hidden';
+/** @hidden */
+const subTotalsRowShown = 'Row sub-totals shown';
+/** @hidden */
+const subTotalsColumnShown = 'Column sub-totals shown';
+/** @hidden */
+const subTotalsShown = 'Sub-totals shown';
+/** @hidden */
+const grandTotalsHidden = 'Grand totals hidden';
+/** @hidden */
+const grandTotalsRowShown = 'Row grand totals shown';
+/** @hidden */
+const grandTotalsColumnShown = 'Column grand totals shown';
+/** @hidden */
+const grandTotalsShown = 'Grand totals shown';
+/** @hidden */
+const valueSorted = 'Value sorted';
+/** @hidden */
+const calculatedFieldEdited = 'Calculated field edited';
+/** @hidden */
+const fieldSorted = 'Field sorted';
+/** @hidden */
+const fieldFiltered = 'Field filtered';
+/** @hidden */
+const fieldRemoved = 'Field removed';
+/** @hidden */
+const fieldAggregated = 'Field aggregated';
+/** @hidden */
+const recordEdited = 'Record edited';
+/** @hidden */
+const reportChanged = 'Report changed';
+/** @hidden */
+const windowResized = 'Window resized';
+/** @hidden */
+const recordUpdated = 'Records updated';
+/** @hidden */
+const drillThroughClosed = 'Drill-through closed';
 
 /**
  * CSS Constants
@@ -6595,6 +6611,8 @@ const PIVOTCHART_TYPE_DIALOG = 'e-pivotchart-type-dialog';
 const FORMAT_FONT_COLOR_PICKER = 'e-format-font-color-picker';
 /** @hidden */
 const GROUP_PIVOT_ROW = 'e-group-pivot-rows';
+/** @hidden */
+const TOOLBAR_MENU = 'e-pivot-toolbar-menu';
 
 /**
  * `AggregateMenu` module to create aggregate type popup.
@@ -6623,28 +6641,39 @@ class AggregateMenu {
     }
     openContextMenu(args) {
         let fieldName = args.target.parentElement.id;
+        let fieldInfo = PivotUtil.getFieldInfo(fieldName, this.parent);
         this.buttonElement = args.target.parentElement;
         let isStringField = this.parent.engineModule.fieldList[fieldName].type !== 'number' ? 1 : 0;
         this.summaryTypes = [...this.getMenuItem(isStringField)];
+        this.parent.actionObj.actionName = aggregateField;
+        this.parent.actionObj.fieldInfo = fieldInfo.fieldItem;
+        if (this.parent.actionBeginMethod()) {
+            return;
+        }
         let eventArgs = {
             cancel: false, fieldName: fieldName, aggregateTypes: this.summaryTypes, displayMenuCount: 7
         };
         let control = this.parent.getModuleName() === 'pivotfieldlist' && this.parent.isPopupView ?
             this.parent.pivotGridModule : this.parent;
-        control.trigger(aggregateMenuOpen, eventArgs, (observedArgs) => {
-            if (!observedArgs.cancel) {
-                this.summaryTypes = observedArgs.aggregateTypes;
-                this.createContextMenu(isStringField, observedArgs.displayMenuCount);
-                this.currentMenu = args.target;
-                let pos = this.currentMenu.getBoundingClientRect();
-                if (this.parent.enableRtl) {
-                    this.menuInfo[isStringField].open(pos.top + (window.scrollY || document.documentElement.scrollTop), pos.left - 105);
-                }
-                else {
-                    this.menuInfo[isStringField].open(pos.top + (window.scrollY || document.documentElement.scrollTop), pos.left);
+        try {
+            control.trigger(aggregateMenuOpen, eventArgs, (observedArgs) => {
+                if (!observedArgs.cancel) {
+                    this.summaryTypes = observedArgs.aggregateTypes;
+                    this.createContextMenu(isStringField, observedArgs.displayMenuCount);
+                    this.currentMenu = args.target;
+                    let pos = this.currentMenu.getBoundingClientRect();
+                    if (this.parent.enableRtl) {
+                        this.menuInfo[isStringField].open(pos.top + (window.scrollY || document.documentElement.scrollTop), pos.left - 105);
+                    }
+                    else {
+                        this.menuInfo[isStringField].open(pos.top + (window.scrollY || document.documentElement.scrollTop), pos.left);
+                    }
                 }
-            }
-        });
+            });
+        }
+        catch (execption) {
+            this.parent.actionFailureMethod(execption);
+        }
     }
     createContextMenu(isStringField, displayMenuCount) {
         let menuItems = [];
@@ -6918,31 +6947,42 @@ class AggregateMenu {
     selectOptionInContextMenu(menu) {
         if (menu.item.text !== null) {
             let buttonElement = this.currentMenu.parentElement;
-            let type = menu.item.id.split('_').pop();
-            if (type === 'MoreOption' || type === 'PercentageOfDifferenceFrom'
-                || type === 'PercentageOfParentTotal' || type === 'DifferenceFrom') {
-                this.createValueSettingsDialog(buttonElement, this.parentElement, type);
+            let fieldInfo = PivotUtil.getFieldInfo((buttonElement ? buttonElement.id : ''), this.parent);
+            this.parent.actionObj.actionName = aggregateField;
+            this.parent.actionObj.fieldInfo = fieldInfo.fieldItem;
+            if (this.parent.actionBeginMethod()) {
+                return;
             }
-            else {
-                let field = buttonElement.getAttribute('data-uid');
-                let valuefields = this.parent.dataSourceSettings.values;
-                let contentElement = buttonElement.querySelector('.e-content');
-                let captionName = menu.item.text + ' ' + this.parent.localeObj.getConstant('of') + ' ' +
-                    this.parent.engineModule.fieldList[field].caption;
-                contentElement.innerHTML = captionName;
-                contentElement.setAttribute('title', captionName);
-                buttonElement.setAttribute('data-type', type);
-                for (let vCnt = 0; vCnt < this.parent.dataSourceSettings.values.length; vCnt++) {
-                    if (this.parent.dataSourceSettings.values[vCnt].name === field) {
-                        let dataSourceItem = extend({}, valuefields[vCnt].properties ?
-                            valuefields[vCnt].properties : valuefields[vCnt], null, true);
-                        dataSourceItem.type = type;
-                        this.parent.engineModule.fieldList[field].aggregateType = type;
-                        valuefields.splice(vCnt, 1, dataSourceItem);
-                        this.parent.lastAggregationInfo = dataSourceItem;
+            let type = menu.item.id.split('_').pop();
+            try {
+                if (type === 'MoreOption' || type === 'PercentageOfDifferenceFrom'
+                    || type === 'PercentageOfParentTotal' || type === 'DifferenceFrom') {
+                    this.createValueSettingsDialog(buttonElement, this.parentElement, type);
+                }
+                else {
+                    let field = buttonElement.getAttribute('data-uid');
+                    let valuefields = this.parent.dataSourceSettings.values;
+                    let contentElement = buttonElement.querySelector('.e-content');
+                    let captionName = menu.item.text + ' ' + this.parent.localeObj.getConstant('of') + ' ' +
+                        this.parent.engineModule.fieldList[field].caption;
+                    contentElement.innerHTML = captionName;
+                    contentElement.setAttribute('title', captionName);
+                    buttonElement.setAttribute('data-type', type);
+                    for (let vCnt = 0; vCnt < this.parent.dataSourceSettings.values.length; vCnt++) {
+                        if (this.parent.dataSourceSettings.values[vCnt].name === field) {
+                            let dataSourceItem = extend({}, valuefields[vCnt].properties ?
+                                valuefields[vCnt].properties : valuefields[vCnt], null, true);
+                            dataSourceItem.type = type;
+                            this.parent.engineModule.fieldList[field].aggregateType = type;
+                            valuefields.splice(vCnt, 1, dataSourceItem);
+                            this.parent.lastAggregationInfo = dataSourceItem;
+                        }
                     }
+                    this.updateDataSource();
                 }
-                this.updateDataSource();
+            }
+            catch (execption) {
+                this.parent.actionFailureMethod(execption);
             }
         }
     }
@@ -7058,13 +7098,16 @@ class Render {
         this.resColWidth = (this.parent.showGroupingBar && this.parent.groupingBarModule) ? (this.parent.isAdaptive ? 180 : 250) :
             (this.parent.isAdaptive ? 140 : 200);
         this.engine = this.parent.dataType === 'olap' ? this.parent.olapEngineModule : this.parent.engineModule;
-        this.gridSettings = parent.gridSettings;
+        this.gridSettings = this.parent.gridSettings;
         this.formatList = this.getFormatList();
         this.aggMenu = new AggregateMenu(this.parent);
     }
     /* eslint-disable-next-line */
     /** @hidden */
-    render() {
+    render(refreshRequired) {
+        if (refreshRequired) {
+            this.initProperties();
+        }
         this.resColWidth = (this.parent.showGroupingBar && this.parent.groupingBarModule) ? (this.parent.isAdaptive ? 180 : 250) :
             (this.parent.isAdaptive ? 140 : 200);
         this.engine = this.parent.dataType === 'olap' ? this.parent.olapEngineModule : this.parent.engineModule;
@@ -7128,6 +7171,30 @@ class Render {
         }
         this.parent.grid.on(headerRefreshed, this.refreshHeader, this);
     }
+    initProperties() {
+        this.rowStartPos = undefined;
+        this.maxIndent = undefined;
+        this.resColWidth = undefined;
+        this.isOverflows = undefined;
+        this.indentCollection = {};
+        this.formatList = undefined;
+        this.colPos = 0;
+        this.colGrandPos = undefined;
+        this.rowGrandPos = undefined;
+        this.lastSpan = 0;
+        this.field = undefined;
+        this.fieldCaption = undefined;
+        this.lvlCollection = {};
+        this.hierarchyCollection = {};
+        this.lvlPosCollection = {};
+        this.hierarchyPosCollection = {};
+        this.position = 0;
+        this.measurePos = 0;
+        this.maxMeasurePos = 0;
+        this.hierarchyCount = 0;
+        this.actualText = '';
+        this.timeOutObj = undefined;
+    }
     refreshHeader() {
         if (this.parent.enableVirtualization) {
             let mHdr = this.parent.element.querySelector('.' + MOVABLEHEADER_DIV);
@@ -7328,9 +7395,9 @@ class Render {
             this.parent.renderReactTemplates(); /* eslint-disable-line */
         }
         if (this.parent.isInitial) {
+            this.parent.isInitial = false;
             this.parent.refreshData();
         }
-        this.parent.isInitial = false;
         this.parent.notify(contentReady, {});
     }
     setFocusOnLastCell() {
@@ -8134,7 +8201,7 @@ class Render {
                 if (cell.isSum) {
                     tCell.classList.add(SUMMARY);
                 }
-                let isGrandSum = (isNullOrUndefined(cell.isGrandSum) && this.parent.dataSourceSettings.valueAxis === 'column' && this.parent.dataType === 'olap' &&
+                let isGrandSum = (isNullOrUndefined(cell.isGrandSum) && (!isNullOrUndefined(this.parent.olapEngineModule) && this.parent.olapEngineModule.olapValueAxis === 'column') && this.parent.dataType === 'olap' &&
                     ((this.colGrandPos - this.parent.dataSourceSettings.values.length) < Number(tCell.getAttribute('aria-colindex'))));
                 if (cell.isGrandSum || (isGrandSum || this.colGrandPos === Number(tCell.getAttribute('aria-colindex'))) || this.rowGrandPos === Number(tCell.getAttribute('index'))) {
                     tCell.classList.add('e-gtot');
@@ -8275,6 +8342,12 @@ class Render {
                 }
                 lvlPos++;
             }
+            if (this.parent.dataSourceSettings.grandTotalsPosition === 'Top' && (!isNullOrUndefined(this.parent.olapEngineModule) && this.parent.olapEngineModule.olapValueAxis === 'row') && this.parent.dataType === 'olap' &&
+                (cell.valueSort.levelName.toString()).indexOf(this.parent.localeObj.getConstant('grandTotal') + this.parent.dataSourceSettings.valueSortSettings.headerDelimiter) === 0) {
+                tCell.appendChild(createElement('span', {
+                    className: NEXTSPAN,
+                }));
+            }
             if (cell.memberType === 3 && cell.level === -1 && Object.keys(this.lvlCollection).length > 1) {
                 tCell.appendChild(createElement('span', {
                     className: NEXTSPAN,
@@ -8586,8 +8659,8 @@ class Render {
         if (this.parent.currentView !== 'Chart') {
             if (this.gridSettings.height === 'auto' && parHeight && this.parent.element.querySelector('.' + GRID_HEADER)) {
                 let rowColHeight = this.parent.element.querySelector('.' + GRID_HEADER).offsetHeight;
-                let gBarHeight = rowColHeight + (this.parent.element.querySelector('.' + GROUPING_BAR_CLASS) ?
-                    this.parent.element.querySelector('.' + GROUPING_BAR_CLASS).offsetHeight : 0);
+                let gBarHeight = rowColHeight + (this.parent.element.querySelector('.' + GRID_GROUPING_BAR_CLASS) ?
+                    this.parent.element.querySelector('.' + GRID_GROUPING_BAR_CLASS).offsetHeight : 0);
                 let toolBarHeight = this.parent.element.querySelector('.' + GRID_TOOLBAR) ? 42 : 0;
                 gridHeight = parHeight - (gBarHeight + toolBarHeight) - 1;
                 gridHeight = gridHeight < 40 ? 40 : gridHeight;
@@ -10295,7 +10368,6 @@ class FilterDialog {
                 if (this.allowExcelLikeFilter) {
                     this.dialogPopUp.element.querySelector('.e-dlg-closeicon-btn').focus();
                 }
-                this.parent.control.pivotButtonModule.memberTreeView = this.parent.filterDialog.memberTreeView;
                 this.memberTreeView.nodeChecked =
                     this.parent.control.pivotButtonModule.nodeStateModified.bind(this.parent.control.pivotButtonModule);
                 this.allMemberSelect.nodeChecked =
@@ -11298,6 +11370,15 @@ class FilterDialog {
         if (this.dropMenu && !this.dropMenu.isDestroyed) {
             this.dropMenu.destroy();
         }
+        if (this.memberTreeView && !this.memberTreeView.isDestroyed) {
+            this.memberTreeView.destroy();
+        }
+        if (this.allMemberSelect && !this.allMemberSelect.isDestroyed) {
+            this.allMemberSelect.destroy();
+        }
+        if (this.editorSearch && !this.editorSearch.isDestroyed) {
+            this.editorSearch.destroy();
+        }
         if (document.getElementById(this.parent.parentID + '_LevelDiv-popup')) {
             remove(document.getElementById(this.parent.parentID + '_LevelDiv-popup'));
         }
@@ -11306,11 +11387,23 @@ class FilterDialog {
     removeFilterDialog() {
         if (this.dialogPopUp && !this.dialogPopUp.isDestroyed) {
             this.dialogPopUp.destroy();
+            setTimeout(this.setFocus.bind(this));
         }
         if (document.getElementById(this.parent.parentID + '_EditorTreeView')) {
             remove(document.getElementById(this.parent.parentID + '_EditorTreeView'));
         }
     }
+    setFocus() {
+        if (this.parent.control.pivotButtonModule.parentElement) {
+            let pivotButtons = [].slice.call(this.parent.control.pivotButtonModule.parentElement.querySelectorAll('.e-pivot-button'));
+            for (let item of pivotButtons) {
+                if (item.getAttribute('data-uid') === this.parent.control.pivotButtonModule.fieldName) {
+                    item.focus();
+                    break;
+                }
+            }
+        }
+    }
 }
 
 /**
@@ -11942,6 +12035,9 @@ __decorate$1([
 __decorate$1([
     Property(true)
 ], DataSourceSettings.prototype, "showGrandTotals", void 0);
+__decorate$1([
+    Property('Bottom')
+], DataSourceSettings.prototype, "grandTotalsPosition", void 0);
 __decorate$1([
     Property(true)
 ], DataSourceSettings.prototype, "showRowGrandTotals", void 0);
@@ -13160,138 +13256,155 @@ class DrillThroughDialog {
             this.clonedData.push(this.frameHeaderWithKeys(eventArgs.rawData[i]));
         }
         let actualText = eventArgs.currentCell.actualText.toString();
-        if (this.parent.currentView === 'Table' && this.engine.fieldList[actualText].aggregateType !== 'Count' && this.parent.editSettings.allowInlineEditing &&
-            this.parent.editSettings.allowEditing && eventArgs.rawData.length === 1 &&
-            this.engine.fieldList[actualText].aggregateType !== 'DistinctCount' && typeof (eventArgs.rawData[0][actualText]) !== 'string') {
-            this.editCell(eventArgs);
-        }
-        else {
-            this.removeDrillThroughDialog();
-            let drillThroughDialog = createElement('div', {
-                id: this.parent.element.id + '_drillthrough',
-                className: DRILLTHROUGH_DIALOG
-            });
-            this.parent.element.appendChild(drillThroughDialog);
-            this.dialogPopUp = new Dialog({
-                animationSettings: { effect: 'Fade' },
-                allowDragging: false,
-                header: this.parent.localeObj.getConstant('details'),
-                content: this.createDrillThroughGrid(eventArgs),
-                beforeOpen: () => {
-                    this.drillThroughGrid.setProperties({
-                        dataSource: this.parent.editSettings.allowEditing ?
-                            this.dataWithPrimarykey(eventArgs) : this.gridData,
-                        height: !this.parent.editSettings.allowEditing ? 300 : 220
-                    }, false);
-                },
-                beforeClose: () => {
-                    if (this.parent.editSettings.allowEditing && this.isUpdated) {
-                        if (this.parent.dataSourceSettings.type === 'CSV') {
-                            this.updateData(this.drillThroughGrid.dataSource);
-                        }
-                        let gridIndexObjectsValue = Object.keys(this.gridIndexObjects);
-                        let previousPosition = [];
-                        for (let value of gridIndexObjectsValue) {
-                            previousPosition.push(this.gridIndexObjects[value]);
-                        }
-                        let count = Object.keys(this.gridIndexObjects).length;
-                        let addItems = [];
-                        let prevItems = [];
-                        let index = 0;
-                        /* eslint-disable @typescript-eslint/dot-notation */
-                        for (let item of this.drillThroughGrid.dataSource) {
-                            if (isNullOrUndefined(item['__index']) || item['__index'] === '') {
-                                for (let field of this.engine.fields) {
-                                    if (isNullOrUndefined(item[field])) {
-                                        delete item[field];
-                                    }
-                                }
-                                delete item['__index'];
-                                addItems.push(item);
+        try {
+            if (this.parent.currentView === 'Table' && this.engine.fieldList[actualText].aggregateType !== 'Count' && this.parent.editSettings.allowInlineEditing &&
+                this.parent.editSettings.allowEditing && eventArgs.rawData.length === 1 &&
+                this.engine.fieldList[actualText].aggregateType !== 'DistinctCount' && typeof (eventArgs.rawData[0][actualText]) !== 'string') {
+                this.parent.actionObj.actionName = editRecord;
+                if (this.parent.actionBeginMethod()) {
+                    return;
+                }
+                this.editCell(eventArgs);
+            }
+            else {
+                this.removeDrillThroughDialog();
+                let drillThroughDialog = createElement('div', {
+                    id: this.parent.element.id + '_drillthrough',
+                    className: DRILLTHROUGH_DIALOG
+                });
+                this.parent.element.appendChild(drillThroughDialog);
+                this.dialogPopUp = new Dialog({
+                    animationSettings: { effect: 'Fade' },
+                    allowDragging: false,
+                    header: this.parent.localeObj.getConstant('details'),
+                    content: this.createDrillThroughGrid(eventArgs),
+                    beforeOpen: () => {
+                        this.drillThroughGrid.setProperties({
+                            dataSource: this.parent.editSettings.allowEditing ?
+                                this.dataWithPrimarykey(eventArgs) : this.gridData,
+                            height: !this.parent.editSettings.allowEditing ? 300 : 220
+                        }, false);
+                    },
+                    beforeClose: () => {
+                        if (this.parent.editSettings.allowEditing && this.isUpdated) {
+                            if (this.parent.dataSourceSettings.type === 'CSV') {
+                                this.updateData(this.drillThroughGrid.dataSource);
                             }
-                            else if (count > 0) {
-                                delete this.gridIndexObjects[item['__index'].toString()];
-                                prevItems.push(item);
-                                count--;
+                            let gridIndexObjectsValue = Object.keys(this.gridIndexObjects);
+                            let previousPosition = [];
+                            for (let value of gridIndexObjectsValue) {
+                                previousPosition.push(this.gridIndexObjects[value]);
                             }
-                            if (this.parent.dataSourceSettings.mode === 'Server') {
-                                if (item['__index']) {
+                            let count = Object.keys(this.gridIndexObjects).length;
+                            let addItems = [];
+                            let prevItems = [];
+                            let index = 0;
+                            /* eslint-disable @typescript-eslint/dot-notation */
+                            for (let item of this.drillThroughGrid.dataSource) {
+                                if (isNullOrUndefined(item['__index']) || item['__index'] === '') {
+                                    for (let field of this.engine.fields) {
+                                        if (isNullOrUndefined(item[field])) {
+                                            delete item[field];
+                                        }
+                                    }
                                     delete item['__index'];
+                                    addItems.push(item);
                                 }
-                                if (this.gridData[index]['__index']) {
-                                    delete this.gridData[index]['__index'];
+                                else if (count > 0) {
+                                    delete this.gridIndexObjects[item['__index'].toString()];
+                                    prevItems.push(item);
+                                    count--;
                                 }
+                                if (this.parent.dataSourceSettings.mode === 'Server') {
+                                    if (item['__index']) {
+                                        delete item['__index'];
+                                    }
+                                    if (this.gridData[index]['__index']) {
+                                        delete this.gridData[index]['__index'];
+                                    }
+                                }
+                                index++;
                             }
-                            index++;
-                        }
-                        count = 0;
-                        if (this.parent.dataSourceSettings.mode === 'Server') {
-                            let gridIndex = []; /* eslint-disable-line */
-                            let keys = Object.keys(this.gridIndexObjects);
-                            for (let len = 0; len < keys.length; len++) {
-                                delete this.parent.drillThroughValue.indexObject[this.gridIndexObjects[keys[len]]];
-                                gridIndex.push({ Key: keys[len], Value: this.gridIndexObjects[keys[len]] }); /* eslint-disable-line */
-                            }
-                            let indexObject = []; /* eslint-disable-line */
-                            keys = Object.keys(this.parent.drillThroughValue.indexObject);
-                            for (let len = 0; len < keys.length; len++) {
-                                indexObject.push({ Key: keys[len], Value: this.parent.drillThroughValue.indexObject[keys[len]] }); /* eslint-disable-line */
+                            count = 0;
+                            if (this.parent.dataSourceSettings.mode === 'Server') {
+                                let gridIndex = []; /* eslint-disable-line */
+                                let keys = Object.keys(this.gridIndexObjects);
+                                for (let len = 0; len < keys.length; len++) {
+                                    delete this.parent.drillThroughValue.indexObject[this.gridIndexObjects[keys[len]]];
+                                    gridIndex.push({ Key: keys[len], Value: this.gridIndexObjects[keys[len]] }); /* eslint-disable-line */
+                                }
+                                let indexObject = []; /* eslint-disable-line */
+                                keys = Object.keys(this.parent.drillThroughValue.indexObject);
+                                for (let len = 0; len < keys.length; len++) {
+                                    indexObject.push({ Key: keys[len], Value: this.parent.drillThroughValue.indexObject[keys[len]] }); /* eslint-disable-line */
+                                }
+                                this.parent.getEngine('updateRawData', null, null, null, null, null, null, null, { 'addedData': addItems, 'removedData': gridIndex, 'updatedData': prevItems, indexObject: indexObject });
                             }
-                            this.parent.getEngine('updateRawData', null, null, null, null, null, null, null, { 'addedData': addItems, 'removedData': gridIndex, 'updatedData': prevItems, indexObject: indexObject });
-                        }
-                        else {
-                            let items = [];
-                            let data = (this.parent.allowDataCompression && this.parent.enableVirtualization) ?
-                                this.parent.engineModule.actualData : this.parent.engineModule.data;
-                            for (let item of data) {
-                                delete item['__index'];
-                                if (this.gridIndexObjects[count.toString()] === undefined) {
-                                    items.push(item);
+                            else {
+                                let items = [];
+                                let data = (this.parent.allowDataCompression && this.parent.enableVirtualization) ?
+                                    this.parent.engineModule.actualData : this.parent.engineModule.data;
+                                for (let item of data) {
+                                    delete item['__index'];
+                                    if (this.gridIndexObjects[count.toString()] === undefined) {
+                                        items.push(item);
+                                    }
+                                    count++;
+                                }
+                                /* eslint-enable @typescript-eslint/dot-notation */
+                                items = items.concat(addItems);
+                                let eventArgs = {
+                                    currentData: this.drillThroughGrid.dataSource,
+                                    previousData: this.clonedData,
+                                    previousPosition: previousPosition,
+                                    cancel: false
+                                };
+                                this.parent.trigger(editCompleted, eventArgs);
+                                if (!eventArgs.cancel) {
+                                    this.parent.setProperties({ dataSourceSettings: { dataSource: items } }, true);
+                                    this.engine.updateGridData(this.parent.dataSourceSettings);
+                                    this.parent.pivotValues = this.engine.pivotValues;
                                 }
-                                count++;
                             }
-                            /* eslint-enable @typescript-eslint/dot-notation */
-                            items = items.concat(addItems);
-                            let eventArgs = {
-                                currentData: this.drillThroughGrid.dataSource,
-                                previousData: this.clonedData,
-                                previousPosition: previousPosition,
-                                cancel: false
+                            this.parent.actionObj.actionName = recordUpdated;
+                            let actionInfo = {
+                                editInfo: {
+                                    type: this.drillThroughGrid.editSettings.mode, action: 'Update', currentData: this.drillThroughGrid.dataSource,
+                                    previousData: this.clonedData, previousPosition: previousPosition
+                                }
                             };
-                            this.parent.trigger(editCompleted, eventArgs);
-                            if (!eventArgs.cancel) {
-                                this.parent.setProperties({ dataSourceSettings: { dataSource: items } }, true);
-                                this.engine.updateGridData(this.parent.dataSourceSettings);
-                                this.parent.pivotValues = this.engine.pivotValues;
-                            }
+                            this.parent.actionObj.actionInfo = actionInfo;
                         }
-                    }
-                    this.isUpdated = false;
-                    this.gridIndexObjects = {};
-                },
-                isModal: true,
-                visible: true,
-                showCloseIcon: true,
-                locale: this.parent.locale,
-                enableRtl: this.parent.enableRtl,
-                width: this.parent.isAdaptive ? '100%' : '60%',
-                position: { X: 'center', Y: 'center' },
-                closeOnEscape: !this.parent.editSettings.allowEditing,
-                target: document.body,
-                close: this.removeDrillThroughDialog.bind(this)
-            });
-            this.dialogPopUp.isStringTemplate = true;
-            this.dialogPopUp.appendTo(drillThroughDialog);
-            // this.dialogPopUp.element.querySelector('.e-dlg-header').innerHTML = this.parent.localeObj.getConstant('details');
-            setStyleAttribute(this.dialogPopUp.element, { 'visibility': 'visible' });
-            if (this.parent.editSettings.allowEditing) {
-                this.drillthroughKeyboardModule = new KeyboardEvents(this.dialogPopUp.element, {
-                    keyAction: this.drillthroughKeyActionHandler.bind(this),
-                    keyConfigs: this.drillKeyConfigs,
-                    eventName: 'keydown'
+                        this.isUpdated = false;
+                        this.gridIndexObjects = {};
+                    },
+                    isModal: true,
+                    visible: true,
+                    showCloseIcon: true,
+                    locale: this.parent.locale,
+                    enableRtl: this.parent.enableRtl,
+                    width: this.parent.isAdaptive ? '100%' : '60%',
+                    position: { X: 'center', Y: 'center' },
+                    closeOnEscape: !this.parent.editSettings.allowEditing,
+                    target: document.body,
+                    close: this.removeDrillThroughDialog.bind(this)
                 });
+                this.dialogPopUp.isStringTemplate = true;
+                this.dialogPopUp.appendTo(drillThroughDialog);
+                // this.dialogPopUp.element.querySelector('.e-dlg-header').innerHTML = this.parent.localeObj.getConstant('details');
+                setStyleAttribute(this.dialogPopUp.element, { 'visibility': 'visible' });
+                if (this.parent.editSettings.allowEditing) {
+                    this.drillthroughKeyboardModule = new KeyboardEvents(this.dialogPopUp.element, {
+                        keyAction: this.drillthroughKeyActionHandler.bind(this),
+                        keyConfigs: this.drillKeyConfigs,
+                        eventName: 'keydown'
+                    });
+                }
             }
         }
+        catch (execption) {
+            this.parent.actionFailureMethod(execption);
+        }
     }
     editCell(eventArgs) {
         let gridResize = this.parent.gridSettings.allowResizing;
@@ -13306,6 +13419,10 @@ class DrillThroughDialog {
         if (eventArgs.currentCell.actualText in previousData) {
             currentData[eventArgs.currentCell.actualText] = eventArgs.currentCell.actualValue;
         }
+        let actionInfo = {
+            editInfo: { type: 'Inline editing', action: 'update', data: this.gridData }
+        };
+        this.parent.actionObj.actionInfo = actionInfo;
         this.numericTextBox = new NumericTextBox({
             value: cellValue,
             enableRtl: this.parent.enableRtl,
@@ -13370,6 +13487,10 @@ class DrillThroughDialog {
     }
     removeDrillThroughDialog() {
         if (this.dialogPopUp && !this.dialogPopUp.isDestroyed) {
+            this.parent.actionObj.actionName = drillThroughClosed;
+            if (this.parent.actionObj.actionName) {
+                this.parent.actionCompleteMethod();
+            }
             this.dialogPopUp.destroy();
         }
         let dialogElement = document.getElementById(this.parent.element.id + '_drillthrough');
@@ -13459,31 +13580,53 @@ class DrillThroughDialog {
         }
         if (this.parent.editSettings.allowEditing) {
             Grid.Inject(Edit, Page);
-            this.drillThroughGrid.editSettings = this.parent.editSettings;
-            if (this.parent.editSettings.allowCommandColumns) {
-                this.drillThroughGrid.editSettings.mode = 'Normal';
-                this.drillThroughGrid.editSettings.allowEditOnDblClick = false;
-                Grid.Inject(CommandColumn);
+            try {
+                this.drillThroughGrid.editSettings = this.parent.editSettings;
+                this.drillThroughGrid.actionBegin = (args) => {
+                    let actionName = (args.requestType == 'save') ? saveEditedRecords : (args.requestType == 'add') ? addNewRecord : (args.requestType == 'delete') ? removeRecord : '';
+                    this.parent.actionObj.actionName = actionName;
+                    if (this.parent.actionObj.actionName) {
+                        if (this.parent.actionBeginMethod()) {
+                            return;
+                        }
+                    }
+                };
+                if (this.parent.editSettings.allowCommandColumns) {
+                    this.drillThroughGrid.editSettings.mode = 'Normal';
+                    this.drillThroughGrid.editSettings.allowEditOnDblClick = false;
+                    Grid.Inject(CommandColumn);
+                    this.drillThroughGrid.columns.push({
+                        headerText: this.parent.localeObj.getConstant('manageRecords'), width: 160, showInColumnChooser: false,
+                        commands: [
+                            { type: 'Edit', buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat' } },
+                            { type: 'Delete', buttonOption: { iconCss: 'e-icons e-delete', cssClass: 'e-flat' } },
+                            { type: 'Save', buttonOption: { iconCss: 'e-icons e-update', cssClass: 'e-flat' } },
+                            { type: 'Cancel', buttonOption: { iconCss: 'e-icons e-cancel-icon', cssClass: 'e-flat' } }
+                        ]
+                    });
+                }
+                else {
+                    this.drillThroughGrid.editSettings.allowEditOnDblClick = this.parent.editSettings.allowEditOnDblClick;
+                }
                 this.drillThroughGrid.columns.push({
-                    headerText: this.parent.localeObj.getConstant('manageRecords'), width: 160, showInColumnChooser: false,
-                    commands: [
-                        { type: 'Edit', buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat' } },
-                        { type: 'Delete', buttonOption: { iconCss: 'e-icons e-delete', cssClass: 'e-flat' } },
-                        { type: 'Save', buttonOption: { iconCss: 'e-icons e-update', cssClass: 'e-flat' } },
-                        { type: 'Cancel', buttonOption: { iconCss: 'e-icons e-cancel-icon', cssClass: 'e-flat' } }
-                    ]
+                    field: '__index', visible: false, isPrimaryKey: true, type: 'string', showInColumnChooser: false
                 });
             }
-            else {
-                this.drillThroughGrid.editSettings.allowEditOnDblClick = this.parent.editSettings.allowEditOnDblClick;
+            catch (execption) {
+                this.parent.actionFailureMethod(execption);
             }
-            this.drillThroughGrid.columns.push({
-                field: '__index', visible: false, isPrimaryKey: true, type: 'string', showInColumnChooser: false
-            });
             this.drillThroughGrid.actionComplete = (args) => {
                 if (args.requestType === 'batchsave' || args.requestType === 'save' || args.requestType === 'delete') {
                     dialogModule.isUpdated = true;
                 }
+                this.parent.actionObj.actionName = this.parent.getActionCompleteName();
+                let actionInfo = {
+                    editInfo: { type: this.drillThroughGrid.editSettings.mode, action: args.requestType, data: this.gridData }
+                };
+                this.parent.actionObj.actionInfo = actionInfo;
+                if (this.parent.actionObj.actionName) {
+                    this.parent.actionCompleteMethod();
+                }
                 if ((dialogModule.drillThroughGrid.editSettings.mode === 'Normal' && args.requestType === 'save' &&
                     dialogModule.drillThroughGrid.element.querySelectorAll('.e-tbar-btn:hover').length > 0 &&
                     !dialogModule.parent.editSettings.allowCommandColumns) || args.requestType === 'batchsave') {
@@ -13672,7 +13815,7 @@ class DrillThrough {
      * @hidden
      */
     getModuleName() {
-        return 'drillthrough';
+        return 'drillThrough';
     }
     addInternalEvents() {
         this.parent.on(contentReady, this.wireEvents, this);
@@ -13876,7 +14019,7 @@ class PivotChart {
      * @private
      */
     getModuleName() {
-        return 'pivotchart';
+        return 'pivotChart';
     }
     /* eslint-disable */
     loadChart(parent, chartSettings) {
@@ -14067,7 +14210,9 @@ class PivotChart {
                     this.maxLevel = currrentLevel > this.maxLevel ? currrentLevel : this.maxLevel;
                     let name = this.parent.dataType === 'olap' ? firstRowCell.formattedText :
                         (firstRowCell.actualText ? firstRowCell.actualText.toString() : firstRowCell.formattedText.toString());
-                    let text = firstRowCell.formattedText ? firstRowCell.formattedText.toString() : name;
+                    let values = this.engineModule.fieldList[this.currentMeasure];
+                    let text = this.parent.dataSourceSettings.rows.length === 0 ? this.parent.localeObj.getConstant('total') + ' ' + this.parent.localeObj.getConstant(values.aggregateType) + ' ' +
+                        this.parent.localeObj.getConstant('of') + ' ' + (!isNullOrUndefined(values.caption) ? values.caption : values.name) : firstRowCell.formattedText ? firstRowCell.formattedText.toString() : name;
                     let caption = (firstRowCell.hasChild && !firstRowCell.isNamedSet) ?
                         ((firstRowCell.isDrilled ? ' - ' : ' + ') + text) : text;
                     let levelName = tupInfo ? tupInfo.uNameCollection : firstRowCell.valueSort.levelName.toString();
@@ -14241,7 +14386,9 @@ class PivotChart {
                     this.chartSettings.palettes = currentSeries.palettes;
                 }
                 for (let i = 0; i < this.columnGroupObject[key].length; i++) {
-                    this.columnGroupObject[key][i].x = this.columnGroupObject[key][i].x === '' ? this.parent.localeObj.getConstant('blank') : this.columnGroupObject[key][i].x;
+                    let values = this.engineModule.fieldList[this.currentMeasure];
+                    this.columnGroupObject[key][i].x = (this.parent.dataSourceSettings.rows.length === 0 && !this.chartSettings.showMultiLevelLabels) ? this.parent.localeObj.getConstant('total') + ' ' + this.parent.localeObj.getConstant(values.aggregateType) + ' ' +
+                        this.parent.localeObj.getConstant('of') + ' ' + (!isNullOrUndefined(values.caption) ? values.caption : values.name) : this.columnGroupObject[key][i].x === '' ? this.parent.localeObj.getConstant('blank') : this.columnGroupObject[key][i].x;
                 }
                 currentSeries.dataSource = this.columnGroupObject[key];
                 currentSeries.xName = 'x';
@@ -14397,7 +14544,7 @@ class PivotChart {
                     enableSmartLabels: this.chartSettings.enableSmartLabels,
                     center: this.chartSettings.pieCenter,
                     enableBorderOnMouseMove: this.chartSettings.enableBorderOnMouseMove,
-                    highLightMode: this.chartSettings.highlightMode,
+                    highlightMode: this.chartSettings.highlightMode,
                     highlightPattern: this.chartSettings.highlightPattern,
                     titleStyle: this.chartSettings.titleStyle,
                     subTitle: this.chartSettings.subTitle,
@@ -14525,7 +14672,7 @@ class PivotChart {
             this.parent.chart.highlightPattern = this.parent.chartSettings.highlightPattern;
             if (this.accumulationType.indexOf(type) > -1) {
                 this.parent.chart.enableBorderOnMouseMove = this.parent.chartSettings.enableBorderOnMouseMove;
-                this.parent.chart.highLightMode = this.parent.chartSettings.highlightMode;
+                this.parent.chart.highlightMode = this.parent.chartSettings.highlightMode;
                 this.parent.chart.enableSmartLabels = this.parent.chartSettings.enableSmartLabels;
             }
             else {
@@ -14632,9 +14779,14 @@ class PivotChart {
                 currentYAxis.labelFormat = currentYAxis.labelFormat ?
                     currentYAxis.labelFormat : (percentChart ? '' : (!resFormat ? format : 'N'));
                 currentYAxis.title = currentYAxis.title ? currentYAxis.title : measureAggregatedName;
-                currentYAxis.plotOffsetTop = currentYAxis.plotOffsetTop ? currentYAxis.plotOffsetTop :
-                    this.chartSettings.chartSeries.type === 'Bar' || this.chartSettings.chartSeries.type === 'StackingBar' ||
-                        this.chartSettings.chartSeries.type === 'StackingBar100' ? 50 : 30;
+                currentYAxis.edgeLabelPlacement = this.chartSettings.primaryYAxis.edgeLabelPlacement ? this.chartSettings.primaryYAxis.edgeLabelPlacement : this.persistSettings.primaryYAxis.edgeLabelPlacement;
+                if (this.chartSettings.chartSeries.type === 'Bar' || this.chartSettings.chartSeries.type === 'StackingBar' ||
+                    this.chartSettings.chartSeries.type === 'StackingBar100') {
+                    currentYAxis.plotOffsetRight = currentYAxis.plotOffsetRight ? currentYAxis.plotOffsetRight : 30;
+                }
+                else {
+                    currentYAxis.plotOffsetTop = currentYAxis.plotOffsetTop ? currentYAxis.plotOffsetTop : 30;
+                }
                 if (!resFormat) {
                     currentYAxis.name = this.measuresNames[item.name] ? this.measuresNames[item.name] : item.name;
                 }
@@ -14680,6 +14832,7 @@ class PivotChart {
             currentYAxis = this.persistSettings.primaryYAxis ? this.frameObjectWithKeys(this.persistSettings.primaryYAxis) : currentYAxis;
             currentYAxis.rowIndex = 0;
             currentYAxis.columnIndex = 0;
+            currentYAxis.edgeLabelPlacement = this.chartSettings.primaryYAxis.edgeLabelPlacement ? this.chartSettings.primaryYAxis.edgeLabelPlacement : this.persistSettings.primaryYAxis.edgeLabelPlacement;
             if (!(this.chartSettings.chartSeries.type === 'Polar' || this.chartSettings.chartSeries.type === 'Radar')) {
                 currentYAxis.name = this.measuresNames[this.currentMeasure] ? this.measuresNames[this.currentMeasure] : this.currentMeasure;
             }
@@ -14996,6 +15149,7 @@ class PivotChart {
     }
     loaded(args) {
         this.parent.isChartLoaded = true;
+        let width = this.parent.grid ? this.parent.getGridWidthAsNumber().toString() : this.parent.getWidthAsNumber().toString();
         if (this.parent.chart && this.parent.showGroupingBar && this.parent.groupingBarModule &&
             this.parent.showFieldList && this.parent.currentView === 'Chart') {
             this.parent.groupingBarModule.alignIcon();
@@ -15007,13 +15161,15 @@ class PivotChart {
                 this.parent.element.querySelector('#' + this.parent.element.id + multilabelAxisName).setAttribute('cursor', 'pointer');
             }
         }
-        if ((['Pie', 'Funnel', 'Pyramid', 'Doughnut', 'Radar', 'Polar'].indexOf(this.parent.chartSettings.chartSeries.type) >= 0)
-            && this.parent.chartSettings.enableScrollOnMultiAxis && this.parent.chartSettings.enableMultipleAxis) {
-            this.parent.element.querySelector('.' + PIVOTCHART).style.overflow = 'visible';
-        }
-        else if (this.parent.chartSettings.enableScrollOnMultiAxis && this.parent.chartSettings.enableMultipleAxis) {
-            this.parent.element.querySelector('.' + PIVOTCHART).style.overflow = 'auto';
-            this.parent.element.querySelector('.' + PIVOTCHART).style.overflowX = 'hidden';
+        if (this.parent.chartSettings.enableScrollOnMultiAxis && this.parent.chartSettings.enableMultipleAxis) {
+            if (['Pie', 'Funnel', 'Pyramid', 'Doughnut', 'Radar', 'Polar'].indexOf(this.parent.chartSettings.chartSeries.type) >= 0) {
+                this.parent.element.querySelector('.' + PIVOTCHART).style.overflow = 'visible';
+            }
+            else {
+                this.parent.element.querySelector('.' + PIVOTCHART).style.overflow = 'auto';
+                this.parent.element.querySelector('.' + PIVOTCHART).style.overflowX = 'hidden';
+            }
+            this.parent.element.querySelector('.' + PIVOTCHART).style.width = width + 'px';
         }
         this.parent.chart.height = ['Pie', 'Funnel', 'Pyramid', 'Doughnut', 'Radar', 'Polar'].indexOf(this.parent.chartSettings.chartSeries.type) < 0 &&
             this.parent.chartSettings.enableScrollOnMultiAxis && this.parent.chartSettings.enableMultipleAxis &&
@@ -15234,6 +15390,11 @@ class PivotChart {
             offSetHeight = this.parent.getHeightAsNumber() - offSetVal;
         }
         if (!isNullOrUndefined(this.parent.getHeightAsNumber())) {
+            let isNone = false;
+            if (this.parent.element.querySelector('.e-chart-grouping-bar') !== null && this.parent.element.querySelector('.e-chart-grouping-bar').style.display.toLowerCase() === 'none') {
+                isNone = true;
+                this.parent.element.querySelector('.e-chart-grouping-bar').style.display = "block";
+            }
             if (this.parent.showToolbar && this.parent.showGroupingBar) {
                 height = (offSetHeight - (this.parent.element.querySelector('.e-pivot-toolbar') ?
                     this.parent.element.querySelector('.e-pivot-toolbar').clientHeight : 42) -
@@ -15251,6 +15412,9 @@ class PivotChart {
             else if ((this.parent.chart && parseInt(this.parent.chart.height, 10) < 200) || offSetHeight < 200) {
                 height = '200';
             }
+            if (isNone) {
+                this.parent.element.querySelector('.e-chart-grouping-bar').style.display = "none";
+            }
         }
         else {
             height = 'auto';
@@ -16851,7 +17015,7 @@ __decorate$3([
     Property(0)
 ], PivotAxis.prototype, "plotOffset", void 0);
 __decorate$3([
-    Property('None')
+    Property('Shift')
 ], PivotAxis.prototype, "edgeLabelPlacement", void 0);
 __decorate$3([
     Property('BetweenTicks')
@@ -18146,6 +18310,7 @@ class OlapEngine {
             this.updateTupCollection(customArgs.drillInfo.axis === 'row' ? rowTuples.length : columnTuples.length);
         }
         if (customArgs.action === 'down' ? customArgs.drillInfo.axis === 'column' : true) {
+            this.olapValueAxis = isNullOrUndefined(this.getValueAxis(undefined, undefined)) ? 'column' : 'row';
             this.frameColumnHeader(columnTuples);
             if (!this.isPaging) {
                 this.performColumnSorting();
@@ -18200,6 +18365,7 @@ class OlapEngine {
     frameRowHeader(tuples) {
         this.headerGrouping = {};
         this.lastLevel = [];
+        let isGrandTotalAdd = true;
         let position = this.pivotValues.length;
         let pivotValues = [];
         let valueContent = [];
@@ -18260,6 +18426,7 @@ class OlapEngine {
         let startTupPos = tupPos;
         let pagingAllowFlag = true;
         let lastMesPos = 0;
+        let isGrandTotalTop = false;
         while (tupPos < tuplesLength && pagingAllowFlag) {
             let members = tuples[this.customArgs.action === 'down' ?
                 (tupPos - (this.customArgs.drillInfo.currentCell.ordinal + 1)) : tupPos].querySelectorAll('Member');
@@ -18314,35 +18481,25 @@ class OlapEngine {
                             (allStartPos === (drillStartPos + 1) || this.tupRowInfo[tupPos].measurePosition === (drillStartPos + 1))))
                     : drillAllow;
                 let withoutAllAllow = (withoutAllStartPos > -1 && allCount > 0) ? (attrDrill || allStartPos > withoutAllEndPos) : true;
-                if (members.length === allCount + (measure ? 1 : 0) && measure) {
+                isGrandTotalTop = this.dataSourceSettings.grandTotalsPosition === 'Top' && this.olapRowValueIndex === 0 && this.olapValueAxis === 'row'
+                    && this.dataSourceSettings.showGrandTotals && this.dataSourceSettings.showRowGrandTotals && (this.olapValueAxis === 'row' ? this.dataSourceSettings.rows.length > 1 : true);
+                if (isGrandTotalTop && gTotals.length === 1) {
+                    gTotals = this.frameGrandTotalValues(tuples, gTotals, typeColl, measurePos);
+                }
+                if (members.length === allCount + (measure ? 1 : 0) && measure && !isGrandTotalTop) {
                     let levelName = 'Grand Total.' + members[measurePos].querySelector('Caption').textContent;
-                    gTotals.push({
-                        axis: 'row',
-                        actualText: this.getUniqueName(members[measurePos].querySelector('UName').textContent),
-                        colIndex: 0,
-                        formattedText: (typeColl[measurePos] === '3' &&
-                            this.dataFields[this.getUniqueName(members[measurePos].querySelector('UName').textContent)] &&
-                            this.dataFields[this.getUniqueName(members[measurePos].querySelector('UName').textContent)].caption) ?
-                            this.dataFields[this.getUniqueName(members[measurePos].querySelector('UName').textContent)].caption :
-                            members[measurePos].querySelector('Caption').textContent,
-                        hasChild: false,
-                        level: -1,
-                        rowIndex: position,
-                        index: [],
-                        ordinal: tupPos,
-                        colSpan: 1,
-                        rowSpan: 1,
-                        memberType: Number(typeColl[measurePos]),
-                        isDrilled: false,
-                        parentUniqueName: members[measurePos].querySelector('PARENT_UNIQUE_NAME') ?
-                            members[measurePos].querySelector('PARENT_UNIQUE_NAME').textContent : undefined,
-                        levelUniqueName: members[measurePos].querySelector('LName').textContent,
-                        hierarchy: members[measurePos].getAttribute('Hierarchy'),
-                        valueSort: { levelName: levelName, axis: members[measurePos].getAttribute('Hierarchy') }
-                    });
+                    let formattedText = (typeColl[measurePos] === '3' && this.dataFields[this.getUniqueName(members[measurePos].querySelector('UName').textContent)] &&
+                        this.dataFields[this.getUniqueName(members[measurePos].querySelector('UName').textContent)].caption) ? this.dataFields[this.getUniqueName(members[measurePos].querySelector('UName').textContent)].caption :
+                        members[measurePos].querySelector('Caption').textContent;
+                    gTotals = this.frameGrandTotalAxisSet(gTotals, this.getUniqueName(members[measurePos].querySelector('UName').textContent), formattedText, position, tupPos, Number(typeColl[measurePos]), members[measurePos].querySelector('PARENT_UNIQUE_NAME') ? members[measurePos].querySelector('PARENT_UNIQUE_NAME').textContent : undefined, members[measurePos].querySelector('LName').textContent, members[measurePos].getAttribute('Hierarchy'), { levelName: levelName, axis: members[measurePos].getAttribute('Hierarchy') });
                     gTotals[gTotals.length - 1].valueSort['Grand Total.' + members[measurePos].querySelector('Caption').textContent] = 1;
                 }
                 else if (!(allStartPos === 0 || (measurePos === 0 && allStartPos === 1)) && drillAllow && withoutAllAllow) {
+                    if (this.dataSourceSettings.grandTotalsPosition === 'Top' && isGrandTotalAdd && this.dataSourceSettings.showGrandTotals && (this.olapValueAxis === 'row' ? this.dataSourceSettings.rows.length > 1 : true)) {
+                        this.insertRowGrandTotal(gTotals, valueContent, pivotValues, tuples, position);
+                        position = this.pivotValues.length;
+                        isGrandTotalAdd = false;
+                    }
                     prevTupInfo = this.tupRowInfo[tupPos];
                     let lastPos = position;
                     let lastMemPos = memPos;
@@ -18433,6 +18590,11 @@ class OlapEngine {
             }
             tupPos++;
         }
+        if (!(this.dataSourceSettings.grandTotalsPosition === 'Top') || (this.olapValueAxis === 'row' && this.dataSourceSettings.rows.length === 1 && this.dataSourceSettings.grandTotalsPosition === 'Top') || this.dataSourceSettings.rows.length === 0) {
+            this.insertRowGrandTotal(gTotals, valueContent, pivotValues, tuples, position);
+        }
+    }
+    insertRowGrandTotal(gTotals, valueContent, pivotValues, tuples, position) {
         if (gTotals.length > 1 && gTotals[0].memberType !== 3) {
             gTotals[0].ordinal = -1;
         }
@@ -18458,6 +18620,41 @@ class OlapEngine {
             this.updateRowEngine(pivotValues, valueContent, tuples.length);
             this.onDemandDrillEngine = pivotValues;
         }
+        return gTotals;
+    }
+    getValueAxis(valueAxis, valueIndex) {
+        this.olapValueAxis = valueAxis;
+        this.olapRowValueIndex = valueIndex;
+        for (let i = 0; i < this.dataSourceSettings.rows.length; i++) {
+            if (this.dataSourceSettings.rows[i].name === '[Measures]') {
+                this.olapValueAxis = 'row';
+                this.olapRowValueIndex = i;
+                break;
+            }
+        }
+        return this.olapValueAxis;
+    }
+    frameGrandTotalAxisSet(gTotals, actualText, formattedText, rowIndex, ordinal, memberType, parentUniqueName, levelUniqueName, hierarchy, valueSort) {
+        gTotals.push({
+            axis: 'row',
+            actualText: actualText,
+            colIndex: 0,
+            formattedText: formattedText,
+            hasChild: false,
+            level: -1,
+            rowIndex: rowIndex,
+            index: [],
+            ordinal: ordinal,
+            colSpan: 1,
+            rowSpan: 1,
+            memberType: memberType,
+            isDrilled: false,
+            parentUniqueName: parentUniqueName,
+            levelUniqueName: levelUniqueName,
+            hierarchy: hierarchy,
+            valueSort: valueSort
+        });
+        return gTotals;
     }
     getDepth(tupInfo, uniqueName, memberType) {
         let memberPosition = tupInfo.uNameCollection.indexOf(uniqueName);
@@ -18697,6 +18894,53 @@ class OlapEngine {
             currTupCount--;
         }
     }
+    frameGrandTotalValues(tuples, gTotals, typeColl, measurePos) {
+        let tupPos = 0;
+        let lastAllStartPos;
+        let lastAllCount;
+        let availAllMember = false;
+        let withoutAllEndPos = -1;
+        let isGrandtoalDataAdd = false;
+        let prevTupInfo;
+        let isGrandTotalTop = false;
+        while (tupPos < tuples.length && !isGrandtoalDataAdd) {
+            let members = tuples[this.customArgs.action === 'down' ?
+                (tupPos - (this.customArgs.drillInfo.currentCell.ordinal + 1)) : tupPos].querySelectorAll('Member');
+            let allCount = this.tupRowInfo[tupPos].allCount;
+            let allStartPos = this.tupRowInfo[tupPos].allStartPos;
+            let measure = this.tupRowInfo[tupPos].measure;
+            let typeColl = this.tupRowInfo[tupPos].typeCollection;
+            let drillStartPos = this.tupRowInfo[tupPos].drillStartPos;
+            let startDrillUniquename = this.tupRowInfo[tupPos].startDrillUniquename;
+            if (tupPos === 0 && (members.length > (allCount + (measure ? 1 : 0)) || (members.length === 1 && measure))) {
+                gTotals.pop();
+            }
+            if ((tupPos === 0 && this.isPaging) ? gTotals.length === 0 :
+                (!availAllMember || allCount === lastAllCount || allStartPos !== lastAllStartPos || (members.length === 1 && measure))) {
+                let attrDrill = this.checkAttributeDrill(this.tupRowInfo[tupPos].drillInfo, 'rows');
+                let drillAllow = drillStartPos > -1 ? (allCount > 0 ? (attrDrill || allStartPos > drillStartPos) : true) : true;
+                drillAllow = (prevTupInfo && drillAllow && drillStartPos > -1) ?
+                    (prevTupInfo.startDrillUniquename !== startDrillUniquename ? true :
+                        ((withoutAllEndPos > prevTupInfo.measurePosition ? false :
+                            prevTupInfo.measureName !== this.tupRowInfo[tupPos].measureName) &&
+                            (allStartPos === (drillStartPos + 1) || this.tupRowInfo[tupPos].measurePosition === (drillStartPos + 1))))
+                    : drillAllow;
+                if (members.length === allCount + (measure ? 1 : 0) && measure && !isGrandTotalTop) {
+                    let levelName = 'Grand Total.' + members[measurePos].querySelector('Caption').textContent;
+                    let formattedText = (typeColl[measurePos] === '3' && this.dataFields[this.getUniqueName(members[measurePos].querySelector('UName').textContent)] &&
+                        this.dataFields[this.getUniqueName(members[measurePos].querySelector('UName').textContent)].caption) ? this.dataFields[this.getUniqueName(members[measurePos].querySelector('UName').textContent)].caption :
+                        members[measurePos].querySelector('Caption').textContent;
+                    gTotals = this.frameGrandTotalAxisSet(gTotals, this.getUniqueName(members[measurePos].querySelector('UName').textContent), formattedText, this.pivotValues.length, tupPos, Number(typeColl[measurePos]), members[measurePos].querySelector('PARENT_UNIQUE_NAME') ? members[measurePos].querySelector('PARENT_UNIQUE_NAME').textContent : undefined, members[measurePos].querySelector('LName').textContent, members[measurePos].getAttribute('Hierarchy'), { levelName: levelName, axis: members[measurePos].getAttribute('Hierarchy') });
+                    gTotals[gTotals.length - 1].valueSort['Grand Total.' + members[measurePos].querySelector('Caption').textContent] = 1;
+                }
+                lastAllCount = allCount;
+                lastAllStartPos = allStartPos;
+            }
+            isGrandtoalDataAdd = this.dataSourceSettings.values.length + 1 === gTotals.length ? true : false;
+            tupPos++;
+        }
+        return gTotals;
+    }
     frameColumnHeader(tuples) {
         this.headerGrouping = {};
         this.lastLevel = [];
@@ -18760,8 +19004,18 @@ class OlapEngine {
                 withoutAllAvail = true;
                 isStartCol = (allCount > 0 && isStartCol) ? (allStartPos > withoutAllStartPos) : isStartCol;
             }
-            if (isStartCol) {
-                if (allCount === 0) {
+            let isGrandTotalTop = false;
+            if (this.dataSourceSettings.grandTotalsPosition === 'Top' && this.dataSourceSettings.showGrandTotals && this.dataSourceSettings.showColumnGrandTotals) {
+                let count = 0;
+                for (let i = 0; i < members.length; i++) {
+                    if ((members[i].querySelector('Caption').textContent).indexOf('All') === 0) {
+                        count++;
+                    }
+                }
+                isGrandTotalTop = count === (this.olapValueAxis === 'column' ? this.dataSourceSettings.columns.length - 1 : this.dataSourceSettings.columns.length);
+            }
+            if (isStartCol || isGrandTotalTop) {
+                if (allCount === 0 || isGrandTotalTop) {
                     let levelComp = [-1, -1, -1];
                     if (this.tupColumnInfo[tupPos - 1] && this.tupColumnInfo[tupPos - 1].allCount === 0) {
                         levelComp = this.levelCompare(levelColl, this.tupColumnInfo[tupPos - 1].levelCollection);
@@ -18798,8 +19052,10 @@ class OlapEngine {
                         }
                         this.setParentCollection(members);
                         if (withoutAllAvail ? (withoutAllEndPos <= drillStartPos) : true) {
-                            this.totalCollection[this.totalCollection.length] =
-                                ({ allCount: allCount, ordinal: tupPos, members: members, drillInfo: drillInfo });
+                            if (!isGrandTotalTop) {
+                                this.totalCollection[this.totalCollection.length] =
+                                    ({ allCount: allCount, ordinal: tupPos, members: members, drillInfo: drillInfo });
+                            }
                             lastSavedInfo.allCount = allCount;
                             lastSavedInfo.allStartPos = allStartPos;
                             lastSavedInfo.drillStartPos = drillStartPos;
@@ -18824,10 +19080,12 @@ class OlapEngine {
                         }
                         this.setParentCollection(members);
                         if ((withoutAllAvail && drillStartPos > -1) ? (withoutAllEndPos <= drillStartPos) : true) {
-                            this.totalCollection[this.totalCollection.length] =
-                                ({
-                                    allCount: allCount, ordinal: tupPos, members: members, allStartPos: allStartPos, drillInfo: drillInfo
-                                });
+                            if (!isGrandTotalTop) {
+                                this.totalCollection[this.totalCollection.length] =
+                                    ({
+                                        allCount: allCount, ordinal: tupPos, members: members, allStartPos: allStartPos, drillInfo: drillInfo
+                                    });
+                            }
                             lastSavedInfo.allCount = allCount;
                             lastSavedInfo.allStartPos = allStartPos;
                             lastSavedInfo.drillStartPos = drillStartPos;
@@ -19320,19 +19578,26 @@ class OlapEngine {
             }
             let newPos = 0;
             let totPos = 0;
+            let valuePos = 0;
             gSumFlag = false;
             gSumGrouping = this.sortRowHeaders(gSumGrouping);
             for (let rPos = this.colDepth; rPos < rowCount; rPos++) {
                 /* eslint-disable @typescript-eslint/dot-notation */
+                if (this.dataSourceSettings.grandTotalsPosition === 'Top' && (this.dataSourceSettings.showGrandTotals && this.dataSourceSettings.showRowGrandTotals) &&
+                    ((this.olapValueAxis === 'column' && this.colDepth + 1 === rPos) || (this.olapValueAxis === 'row' && this.colDepth + this.dataSourceSettings.values.length + 1 === rPos))) {
+                    newPos = 0;
+                    gSumFlag = false;
+                }
                 let cell = gSumFlag ? gSumGrouping : sortLvlGrouping[levels[0]]['parent'];
                 /* eslint-enable @typescript-eslint/dot-notation */
-                let currPos = gSumFlag ? (newPos - totPos) : newPos;
+                let currPos = (this.dataSourceSettings.grandTotalsPosition === 'Top' && (this.dataSourceSettings.showGrandTotals && this.dataSourceSettings.showRowGrandTotals) && this.colDepth === rPos) ? cell.length : gSumFlag ? (newPos - totPos) : newPos;
                 if (cell[currPos]) {
                     this.pivotValues[rPos] = [cell[currPos]];
                     this.pivotValues[rPos][0].rowIndex = rPos;
-                    this.valueContent[newPos][0] = this.pivotValues[rPos][0];
+                    this.valueContent[valuePos][0] = this.pivotValues[rPos][0];
                 }
                 newPos++;
+                valuePos++;
                 if (this.pivotValues[rPos][0].type === 'grand sum') {
                     gSumFlag = true;
                     totPos = newPos;
@@ -21574,6 +21839,8 @@ let PivotView = class PivotView extends Component {
         this.request = new XMLHttpRequest();
         /** @hidden */
         this.isServerWaitingPopup = false;
+        /** @hidden */
+        this.actionObj = {};
         this.pivotView = this;
         setValue('mergePersistData', this.mergePersistPivotData, this);
     }
@@ -21615,10 +21882,10 @@ let PivotView = class PivotView extends Component {
             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;
     }
@@ -22197,7 +22464,7 @@ let PivotView = class PivotView extends Component {
             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);
@@ -22462,32 +22729,37 @@ let PivotView = class PivotView extends Component {
         }
     }
     initialLoad() {
-        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);
-        }
-        let loadArgs = {
-            dataSourceSettings: this.dataSourceSettings,
-            pivotview: this,
-            fieldsType: {}
-        };
-        this.trigger(load, loadArgs, (observedArgs) => {
-            this.dataSourceSettings = observedArgs.dataSourceSettings;
-            this.fieldsType = observedArgs.fieldsType;
-            this.updateClass();
-            this.notify(initSubComponent, {});
-            if (this.dataSourceSettings.mode !== 'Server') {
-                this.notify(initialLoad, {});
+        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);
             }
-            if (this.isAdaptive) {
-                this.contextMenuModule.render();
+            else {
+                createSpinner({ target: this.element }, this.createElement);
             }
-            this.notify(initToolbar, {});
-        });
+            let loadArgs = {
+                dataSourceSettings: this.dataSourceSettings,
+                pivotview: this,
+                fieldsType: {}
+            };
+            this.trigger(load, loadArgs, (observedArgs) => {
+                this.dataSourceSettings = observedArgs.dataSourceSettings;
+                this.fieldsType = observedArgs.fieldsType;
+                this.updateClass();
+                this.notify(initSubComponent, {});
+                if (this.dataSourceSettings.mode !== 'Server') {
+                    this.notify(initialLoad, {});
+                }
+                if (this.isAdaptive) {
+                    this.contextMenuModule.render();
+                }
+                this.notify(initToolbar, {});
+            });
+        }
+        catch (execption) {
+            this.actionFailureMethod(execption);
+        }
     }
     /**
      * Register the internal events.
@@ -22725,15 +22997,15 @@ let PivotView = class PivotView extends Component {
                         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) {
@@ -22763,12 +23035,12 @@ let PivotView = class PivotView extends Component {
                             (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();
                     }
                     let 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(uiUpdate, this);
@@ -22891,9 +23163,9 @@ let PivotView = class PivotView extends Component {
      */
     renderPivotGrid() {
         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], PIVOTCHART_LTR);
             }
@@ -22924,7 +23196,7 @@ let PivotView = class PivotView extends Component {
                 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);
@@ -22940,7 +23212,9 @@ let PivotView = class PivotView extends Component {
                 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('.' + PIVOTCHART).style.width = formatUnit(this.getGridWidthAsNumber());
+                }
                 this.chart.width = formatUnit(this.getGridWidthAsNumber());
                 if (this.currentView === 'Table') {
                     this.grid.element.style.display = '';
@@ -22960,7 +23234,13 @@ let PivotView = class PivotView extends Component {
         }
         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('.' + 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')) {
@@ -23111,7 +23391,9 @@ let PivotView = class PivotView extends Component {
                         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') {
@@ -23161,6 +23443,14 @@ let PivotView = class PivotView extends Component {
             this.exportType = 'Excel';
             this.grid.excelExport(excelExportProperties, isMultipleExport, workbook, isBlob);
         }
+        this.actionObj.actionName = this.getActionCompleteName();
+        let actionInfo = {
+            exportInfo: { type: this.exportType, info: excelExportProperties }
+        };
+        this.actionObj.actionInfo = actionInfo;
+        if (this.actionObj.actionName) {
+            this.actionCompleteMethod();
+        }
     }
     /**
      * Export PivotGrid data to CSV file.
@@ -23178,6 +23468,14 @@ let PivotView = class PivotView extends Component {
             this.exportType = 'CSV';
             this.grid.csvExport(excelExportProperties, isMultipleExport, workbook, isBlob);
         }
+        this.actionObj.actionName = this.getActionCompleteName();
+        let actionInfo = {
+            exportInfo: { type: this.exportType, info: excelExportProperties }
+        };
+        this.actionObj.actionInfo = actionInfo;
+        if (this.actionObj.actionName) {
+            this.actionCompleteMethod();
+        }
     }
     /**
      * Export Pivot widget data to PDF document.
@@ -23194,6 +23492,14 @@ let PivotView = class PivotView extends Component {
         else {
             this.grid.pdfExport(pdfExportProperties, isMultipleExport, pdfDoc, isBlob);
         }
+        this.actionObj.actionName = this.getActionCompleteName();
+        let actionInfo = {
+            exportInfo: { type: 'PDF', info: pdfExportProperties }
+        };
+        this.actionObj.actionInfo = actionInfo;
+        if (this.actionObj.actionName) {
+            this.actionCompleteMethod();
+        }
     }
     /**
      * Export method for the chart.
@@ -23208,6 +23514,14 @@ let PivotView = class PivotView extends Component {
         if (this.chart && this.chart.enableExport) {
             this.chart.exportModule.export(type, fileName, orientation, null, width, height);
         }
+        this.actionObj.actionName = this.getActionCompleteName();
+        let actionInfo = {
+            exportInfo: { type: type, info: fileName }
+        };
+        this.actionObj.actionInfo = actionInfo;
+        if (this.actionObj.actionName) {
+            this.actionCompleteMethod();
+        }
     }
     /**
      * Print method for the chart.
@@ -23318,6 +23632,10 @@ let PivotView = class PivotView extends Component {
                     };
                     this.trigger(enginePopulated, eventArgs);
                     pivot.engineModule.pivotValues = eventArgs.pivotValues;
+                    let actionInfo = {
+                        drillInfo: drilledItem
+                    };
+                    this.actionObj.actionInfo = actionInfo;
                     pivot.renderPivotGrid();
                 }
                 else {
@@ -23665,6 +23983,12 @@ let PivotView = class PivotView extends Component {
         this.unwireEvents();
         this.wireEvents();
         this.isChartLoaded = false;
+        this.actionObj.actionName = this.getActionCompleteName();
+        if (this.actionObj.actionName) {
+            if (this.actionObj.actionName !== windowResize) {
+                this.actionCompleteMethod();
+            }
+        }
     }
     setToolTip(args) {
         let colIndex = Number(args.target.getAttribute('aria-colindex'));
@@ -23696,6 +24020,13 @@ let PivotView = class PivotView extends Component {
             if (cell && this.engineModule.fieldList[cell.actualText]) {
                 let 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;
             }
@@ -23915,75 +24246,104 @@ let PivotView = class PivotView extends Component {
                 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'))) {
-                let colIndex = Number(ele.getAttribute('aria-colindex'));
-                let rowIndex = Number(ele.getAttribute('index'));
-                if (this.dataSourceSettings.valueAxis === 'row' && (this.dataSourceSettings.values.length > 1 || this.dataSourceSettings.alwaysShowValueHeader)) {
-                    let header = this.pivotValues[rowIndex][colIndex];
-                    if (this.dataSourceSettings.valueIndex === -1) {
-                        rowIndex = header.type === 'value' ? rowIndex : (rowIndex + 1);
-                    }
-                    else {
-                        let 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'))) {
+                    let FieldName = target.parentElement.getAttribute('fieldname');
+                    let fieldInfo = PivotUtil.getFieldInfo(FieldName, this);
+                    this.actionObj.actionName = 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 : '.'
+                    let colIndex = Number(ele.getAttribute('aria-colindex'));
+                    let rowIndex = Number(ele.getAttribute('index'));
+                    if (this.dataSourceSettings.valueAxis === 'row' && (this.dataSourceSettings.values.length > 1 || this.dataSourceSettings.alwaysShowValueHeader)) {
+                        let header = this.pivotValues[rowIndex][colIndex];
+                        if (this.dataSourceSettings.valueIndex === -1) {
+                            rowIndex = header.type === 'value' ? rowIndex : (rowIndex + 1);
                         }
-                    }
-                }, true);
-                this.showWaitingPopup();
-                let pivot = this; /* eslint-disable-line */
-                pivot.engineModule.enableValueSorting = true;
-                if (pivot.enableVirtualization) {
-                    if (pivot.dataSourceSettings.enableSorting) {
-                        for (let key of Object.keys(pivot.engineModule.fieldList)) {
-                            pivot.engineModule.fieldList[key].sort = 'Ascending';
+                        else {
+                            let level = this.getLevel(header);
+                            rowIndex = (level <= this.engineModule.measureIndex &&
+                                header.members && header.members.length > 0) ? header.members[0].rowIndex : rowIndex;
+                        }
+                    }
+                    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();
+                    let pivot = this; /* eslint-disable-line */
+                    pivot.engineModule.enableValueSorting = true;
+                    if (pivot.enableVirtualization) {
+                        if (pivot.dataSourceSettings.enableSorting) {
+                            for (let key of Object.keys(pivot.engineModule.fieldList)) {
+                                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;
+                    let 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(COLLAPSE) || target.classList.contains(EXPAND)) {
-            this.onDrill(target);
+            let drillFieldName = target.parentElement.getAttribute('fieldname');
+            let fieldInfo = PivotUtil.getFieldInfo(drillFieldName, this);
+            let actionName = target.classList.contains(COLLAPSE) ? this.actionObj.actionName = drillUp : target.classList.contains(EXPAND) ? this.actionObj.actionName = 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);
@@ -24081,7 +24441,8 @@ let PivotView = class PivotView extends Component {
         let firstColWidth = this.pivotColumns[0].width;
         let eventArgs = {
             columns: this.pivotColumns,
-            dataSourceSettings: this.dataSourceSettings
+            dataSourceSettings: this.dataSourceSettings,
+            stackedColumns: this.getStackedColumns(gridcolumns, [])
         };
         this.trigger(beforeColumnsRender, eventArgs);
         if (this.enableVirtualization && eventArgs.columns.length > 0 && eventArgs.columns[0].width !== gridcolumns[0].width) {
@@ -24185,8 +24546,16 @@ let PivotView = class PivotView extends Component {
     /* eslint-disable-next-line */
     /** @hidden */
     onWindowResize() {
+        this.actionObj.actionName = 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.
@@ -24570,7 +24939,9 @@ let PivotView = class PivotView extends Component {
                 isDrillThrough: (this.allowDrillThrough || this.editSettings.allowEditing),
                 localeObj: this.localeObj,
                 fieldsType: this.fieldsType,
-                clonedReport: this.clonedReport
+                clonedReport: this.clonedReport,
+                globalize: this.globalize,
+                currenyCode: this.currencyCode
             };
             if (this.dataType === 'pivot') {
                 if (this.dataSourceSettings.groupSettings && this.dataSourceSettings.groupSettings.length > 0) {
@@ -24796,7 +25167,8 @@ let PivotView = class PivotView extends Component {
                 let 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);
+                let formatClass = '.format' + this.element.id + k;
+                sheet.insertRule(formatClass + ', ' + formatClass + ' .e-cellvalue' + '{' + str + '}', 0);
             }
         }
     }
@@ -25022,6 +25394,64 @@ let PivotView = class PivotView extends Component {
         EventHandler.remove(document, this.isAdaptive ? 'touchend' : 'click', this.removeButtonFocus);
         window.removeEventListener('resize', this.onWindowResize.bind(this), true);
     }
+    /** @hidden */
+    actionBeginMethod() {
+        let eventArgs = {
+            dataSourceSettings: PivotUtil.getClonedDataSourceSettings(this.dataSourceSettings),
+            actionName: this.actionObj.actionName,
+            fieldInfo: this.actionObj.fieldInfo,
+            cancel: false
+        };
+        this.trigger(actionBegin, eventArgs);
+        return eventArgs.cancel;
+    }
+    /** @hidden */
+    actionCompleteMethod() {
+        let eventArgs = {
+            dataSourceSettings: PivotUtil.getClonedDataSourceSettings(this.dataSourceSettings),
+            actionName: this.actionObj.actionName,
+            fieldInfo: this.actionObj.fieldInfo,
+            actionInfo: this.actionObj.actionInfo
+        };
+        this.trigger(actionComplete, eventArgs);
+        this.actionObj.actionName = '';
+        this.actionObj.actionInfo = undefined;
+        this.actionObj.fieldInfo = undefined;
+    }
+    /** @hidden */
+    actionFailureMethod(error) {
+        let eventArgs = {
+            actionName: this.actionObj.actionName,
+            errorInfo: error
+        };
+        this.trigger(actionFailure, eventArgs);
+    }
+    /** @hidden */
+    getActionCompleteName() {
+        let actionName = (this.actionObj.actionName == openConditionalFormatting) ? conditionallyFormatted : (this.actionObj.actionName == openNumberFormatting) ? numberFormatted
+            : (this.actionObj.actionName == tableView) ? tableViewed : (this.actionObj.actionName == chartView) ? chartViewed : (this.actionObj.actionName == hideSubTotals) ? subTotalsHidden : (this.actionObj.actionName == subTotalsRow) ? subTotalsRowShown
+                : (this.actionObj.actionName == subTotalsColumn) ? subTotalsColumnShown : (this.actionObj.actionName == showSubTotals) ? subTotalsShown : (this.actionObj.actionName == hideGrandTotals) ? grandTotalsHidden
+                    : (this.actionObj.actionName == grandTotalsRow) ? grandTotalsRowShown : (this.actionObj.actionName == grandTotalsColumn) ? grandTotalsColumnShown : (this.actionObj.actionName == showGrandTotals) ? grandTotalsShown
+                        : (this.actionObj.actionName == sortValue) ? valueSorted : (this.actionObj.actionName == openCalculatedField) ? calculatedFieldApplied : (this.actionObj.actionName == editCalculatedField) ? calculatedFieldEdited : (this.actionObj.actionName == sortField) ? fieldSorted
+                            : (this.actionObj.actionName == filterField) ? fieldFiltered : (this.actionObj.actionName == removeField) ? fieldRemoved : (this.actionObj.actionName == aggregateField) ? fieldAggregated : this.actionObj.actionName == editRecord ? recordEdited : this.actionObj.actionName == reportChange ? reportChanged
+                                : this.actionObj.actionName == saveEditedRecords ? editedRecordsSaved : this.actionObj.actionName == addNewRecord ? newRecordAdded
+                                    : this.actionObj.actionName == removeRecord ? recordRemoved : (this.actionObj.actionName == pngExport) ? pngExported : (this.actionObj.actionName == jpegExport) ? jpegExported
+                                        : (this.actionObj.actionName == svgExport) ? svgExported : (this.actionObj.actionName == pdfExport) ? pdfExported : (this.actionObj.actionName == csvExport) ? csvExported : (this.actionObj.actionName == excelExport) ? excelExported : this.actionObj.actionName == windowResize ? windowResized
+                                            : this.actionObj.actionName == saveCurrentReport ? reportSaved : (this.actionObj.actionName == addNewReport) ? newReportAdded : (this.actionObj.actionName == saveAsCurrentReport) ? reportReSaved
+                                                : (this.actionObj.actionName == renameCurrentReport) ? reportRenamed : this.actionObj.actionName;
+        return actionName;
+    }
+    /* eslint-disable-next-line */
+    /** @hidden */
+    getStackedColumns(gridcolumns, stackedColumns) {
+        for (let column of gridcolumns) {
+            stackedColumns.push(column);
+            if (column.columns && column.columns.length > 0) {
+                this.getStackedColumns(column.columns, stackedColumns);
+            }
+        }
+        return stackedColumns;
+    }
     /**
      * To destroy the PivotView elements.
      * @returns {void}
@@ -25085,8 +25515,8 @@ let PivotView = class PivotView extends Component {
         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();
@@ -25141,8 +25571,8 @@ let PivotView = class PivotView extends Component {
         if (this.commonModule) {
             this.commonModule = null;
         }
-        if (this.chartModule) {
-            this.chartModule = null;
+        if (this.pivotChartModule) {
+            this.pivotChartModule = null;
         }
         if (this.pivotButtonModule) {
             this.pivotButtonModule = null;
@@ -25162,6 +25592,12 @@ let PivotView = class PivotView extends Component {
         if (this.drillThroughModule) {
             this.drillThroughModule = null;
         }
+        if (this.clonedDataSet) {
+            this.clonedDataSet = null;
+        }
+        if (this.clonedReport) {
+            this.clonedReport = null;
+        }
         this.element.innerHTML = '';
         removeClass([this.element], ROOT);
         removeClass([this.element], RTL);
@@ -25505,6 +25941,15 @@ __decorate([
 __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);
@@ -25517,6 +25962,247 @@ PivotView = __decorate([
  * Renderer Export
  */
 
+/**
+ * This is a file to perform common utility for OLAP and Relational datasource
+ * @hidden
+ */
+class PivotExportUtil {
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+    static getDefinedObj(data) {
+        let keyPos = 0;
+        let framedSet = {};
+        /* eslint-enable @typescript-eslint/no-explicit-any */
+        if (!(data === null || data === undefined)) {
+            let fields = Object.keys(data);
+            while (keyPos < fields.length) {
+                if (!(data[fields[keyPos]] === null || data[fields[keyPos]] === undefined)) {
+                    framedSet[fields[keyPos]] = data[fields[keyPos]];
+                }
+                keyPos++;
+            }
+        }
+        else {
+            framedSet = data;
+        }
+        return framedSet;
+    }
+    static getClonedPivotValues(pivotValues) {
+        let clonedSets = [];
+        for (let i = 0; i < pivotValues.length; i++) {
+            if (pivotValues[i]) {
+                clonedSets[i] = [];
+                for (let j = 0; j < pivotValues[i].length; j++) {
+                    if (pivotValues[i][j]) {
+                        /* eslint-disable */
+                        clonedSets[i][j] = this.getClonedPivotValueObj(pivotValues[i][j]);
+                        /* eslint-enable */
+                    }
+                }
+            }
+        }
+        return clonedSets;
+    }
+    /* eslint-disable */
+    static getClonedPivotValueObj(data) {
+        /* eslint-enable */
+        let keyPos = 0;
+        /* eslint-disable @typescript-eslint/no-explicit-any */
+        let framedSet = {};
+        /* eslint-enable @typescript-eslint/no-explicit-any */
+        if (!(data === null || data === undefined)) {
+            let fields = Object.keys(data);
+            while (keyPos < fields.length) {
+                framedSet[fields[keyPos]] = data[fields[keyPos]];
+                keyPos++;
+            }
+        }
+        else {
+            framedSet = data;
+        }
+        return framedSet;
+    }
+    /* eslint-disable */
+    static isContainCommonElements(collection1, collection2) {
+        /* eslint-enable */
+        for (let i = 0, cnt = collection1.length; i < cnt; i++) {
+            for (let j = 0, lnt = collection2.length; j < lnt; j++) {
+                if (collection2[j] === collection1[i]) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    /* eslint-disable */
+    static formatPdfHeaderFooter(pdf) {
+        let contents = [];
+        if (!isNullOrUndefined(pdf)) {
+            for (let i = 0; i < pdf.length; i++) {
+                let a = pdf[i];
+                let content = {
+                    /* eslint-enable */
+                    type: a.Type,
+                    pageNumberType: a.PageNumberType,
+                    style: a.Style ? {
+                        penColor: a.Style.PenColor,
+                        penSize: a.Style.PenSize,
+                        dashStyle: a.Style.DashStyle,
+                        textBrushColor: a.Style.TextBrushColor,
+                        textPenColor: a.Style.TextPenColor,
+                        fontSize: a.Style.FontSize,
+                        hAlign: a.Style.HAlign,
+                        vAlign: a.Style.VAlign
+                    } : a.Style,
+                    points: a.Points !== null ? {
+                        x1: a.Points.X1,
+                        y1: a.Points.Y1,
+                        x2: a.Points.X2,
+                        y2: a.Points.Y2
+                    } : null,
+                    format: a.Format,
+                    position: a.Position !== null ? {
+                        x: a.Position.X,
+                        y: a.Position.Y
+                    } : null,
+                    size: a.Size !== null ? {
+                        height: a.Size.Height,
+                        width: a.Size.Width
+                    } : null,
+                    src: a.Src,
+                    value: a.Value,
+                    font: a.Font
+                };
+                contents.push(content);
+            }
+        }
+        return contents;
+    }
+    /* eslint-disable */
+    static formatPdfExportProperties(pdf) {
+        let values;
+        /* eslint-enable */
+        values = this.getDefinedObj({
+            pageOrientation: typeof pdf.PageOrientation === 'string' ? pdf.PageOrientation : null,
+            pageSize: typeof pdf.PageSize === 'string' ? pdf.PageSize : null,
+            header: !isNullOrUndefined(pdf.Header) ? {
+                fromTop: pdf.Header.FromTop,
+                height: pdf.Header.Height,
+                contents: this.formatPdfHeaderFooter(pdf.Header.Contents)
+            } : null,
+            columns: pdf.Columns,
+            footer: !isNullOrUndefined(pdf.Footer) ? {
+                fromTop: pdf.Footer.FromBottom,
+                height: pdf.Footer.Height,
+                contents: this.formatPdfHeaderFooter(pdf.Footer.Contents)
+            } : null,
+            includeHiddenColumn: pdf.IncludeHiddenColumn,
+            dataSource: pdf.DataSource,
+            exportType: typeof pdf.ExportType === 'string' ? pdf.ExportType : null,
+            theme: !isNullOrUndefined(pdf.Theme) ? {
+                header: pdf.Theme.Header,
+                record: pdf.Theme.Record,
+                caption: pdf.Theme.Caption
+            } : null,
+            fileName: pdf.FileName,
+            hierarchyExportMode: typeof pdf.HierarchyExportMode === 'string' ? pdf.HierarchyExportMode : null,
+            allowHorizontalOverflow: pdf.AllowHorizontalOverflow
+        });
+        return values;
+    }
+    /* eslint-disable */
+    static formatExcelStyle(style) {
+        let prop;
+        /* eslint-enable */
+        if (!isNullOrUndefined(style)) {
+            prop = this.getDefinedObj({
+                fontColor: style.FontColor,
+                fontName: style.FontName,
+                fontSize: style.FontSize,
+                hAlign: style.HAlign === String ? style.HAlign : null,
+                vAlign: style.VAlign === String ? style.VAlign : null,
+                bold: style.Bold,
+                indent: style.Indent,
+                italic: style.Italic,
+                underline: style.Underline,
+                backColor: style.BackColor,
+                wrapText: style.WrapText,
+                borders: style.Borders,
+                numberFormat: style.NumberFormat,
+                type: style.Type
+            });
+        }
+        return prop;
+    }
+    /* eslint-disable */
+    static formatExcelCell(cell) {
+        let cells = [];
+        if (!isNullOrUndefined(cell)) {
+            for (let i = 0; i < cell.length; i++) {
+                this.getDefinedObj({
+                    index: !isNullOrUndefined(cell[i].Index) ? cell[i].Index : null,
+                    colSpan: !isNullOrUndefined(cell[i].ColSpan) ? cell[i].ColSpan : null,
+                    value: !isNullOrUndefined(cell[i].Value) ? cell[i].Value : null,
+                    hyperlink: {
+                        target: !isNullOrUndefined(cell[i].Hyperlink) ? cell[i].Hyperlink.Target : null,
+                        displayText: !isNullOrUndefined(cell[i].Hyperlink) ? cell[i].Hyperlink.DisplayText : null
+                    },
+                    styles: this.formatExcelStyle(cell[i].Style),
+                    rowSpan: !isNullOrUndefined(cell[i].RowSpan) ? cell[i].RowSpan : null
+                });
+                /* eslint-enable */
+            }
+        }
+        return cells;
+    }
+    /* eslint-disable */
+    static formatExcelHeaderFooter(excel) {
+        let rows = [];
+        if (!isNullOrUndefined(excel)) {
+            for (let i = 0; i < excel.Rows.length; i++) {
+                let row = excel.Rows[i];
+                let prop = this.getDefinedObj({
+                    index: !isNullOrUndefined(row.Index) ? row.Index : null,
+                    cells: this.formatExcelCell(row.Cells),
+                    grouping: !isNullOrUndefined(row.Grouping) ? row.Grouping : null
+                });
+                rows.push(prop);
+            }
+        }
+        return rows;
+    }
+    static formatExcelExportProperties(excel) {
+        /* eslint-enable */
+        let prop;
+        prop = this.getDefinedObj({
+            dataSource: excel.DataSource,
+            query: excel.Query,
+            multipleExport: this.getDefinedObj({
+                type: !isNullOrUndefined(excel.MultipleExport) ? excel.MultipleExport.Type : null,
+                blankRows: !isNullOrUndefined(excel.MultipleExport) ? excel.MultipleExport.BlankRows : null
+            }),
+            header: this.getDefinedObj({
+                headerRows: !isNullOrUndefined(excel.Header) ? excel.Header.HeaderRows : null,
+                rows: this.formatExcelHeaderFooter(excel.Header)
+            }),
+            footer: this.getDefinedObj({
+                footerRows: !isNullOrUndefined(excel.Footer) ? excel.Footer.FooterRows : null,
+                rows: this.formatExcelHeaderFooter(excel.Footer)
+            }),
+            columns: excel.Columns,
+            exportType: typeof excel.ExportType === 'string' ? excel.ExportType : undefined,
+            includeHiddenColumn: excel.IncludeHiddenColumn,
+            theme: !isNullOrUndefined(excel.Theme) ? {
+                header: this.formatExcelStyle(excel.Theme.Header),
+                record: this.formatExcelStyle(excel.Theme.Record),
+                caption: this.formatExcelStyle(excel.Theme.Caption)
+            } : undefined,
+            fileName: excel.FileName,
+            hierarchyExportMode: typeof excel.HierarchyExportMode === 'string' ? excel.HierarchyExportMode : undefined
+        });
+        return prop;
+    }
+}
+
 /**
  * @hidden
  * `ExcelExport` module is used to handle the Excel export action.
@@ -25584,7 +26270,7 @@ class ExcelExport$1 {
         this.engine = this.parent.dataType === 'olap' ? this.parent.olapEngineModule : this.parent.engineModule;
         /** Event trigerring */
         let clonedValues;
-        let currentPivotValues = PivotUtil.getClonedPivotValues(this.engine.pivotValues);
+        let currentPivotValues = PivotExportUtil.getClonedPivotValues(this.engine.pivotValues);
         let customFileName = isFileNameSet ? exportProperties.fileName : 'default.xlsx';
         if (isHeaderSet) {
             this.addHeaderAndFooter(exportProperties.header, '', 'header', exportProperties.header.headerRows);
@@ -25594,7 +26280,7 @@ class ExcelExport$1 {
             this.engine.pageSettings = null;
             this.engine.generateGridData(this.parent.dataSourceSettings, true);
             this.parent.applyFormatting(this.engine.pivotValues);
-            clonedValues = PivotUtil.getClonedPivotValues(this.engine.pivotValues);
+            clonedValues = PivotExportUtil.getClonedPivotValues(this.engine.pivotValues);
             this.engine.pivotValues = currentPivotValues;
             this.engine.pageSettings = pageSettings;
         }
@@ -25638,15 +26324,17 @@ class ExcelExport$1 {
                             let pivotCell = pivotValues[rCnt][cCnt];
                             if (!(pivotCell.level === -1 && !pivotCell.rowSpan)) {
                                 let cellValue = pivotCell.axis === 'value' ? pivotCell.value : pivotCell.formattedText;
-                                if (pivotCell.type === 'grand sum') {
-                                    cellValue = (this.parent.dataSourceSettings.rows.length === 0 || this.parent.dataSourceSettings.columns.length === 0) ? this.parent.getValuesHeader(pivotCell, 'grandTotal') :
-                                        this.parent.localeObj.getConstant('grandTotal');
+                                let isgetValuesHeader = ((this.parent.dataSourceSettings.rows.length === 0 && this.parent.dataSourceSettings.valueAxis === 'row')
+                                    || (this.parent.dataSourceSettings.columns.length === 0 && this.parent.dataSourceSettings.valueAxis === 'column'));
+                                if (pivotCell.type === 'grand sum' && !(this.parent.dataSourceSettings.values.length === 1 && this.parent.dataSourceSettings.valueAxis === 'row' && pivotCell.axis === 'column')) {
+                                    cellValue = isgetValuesHeader ? this.parent.getValuesHeader(pivotCell, 'grandTotal') : this.parent.localeObj.getConstant('grandTotal');
                                 }
                                 else if (pivotCell.type === 'sum') {
                                     cellValue = cellValue.toString().replace('Total', this.parent.localeObj.getConstant('total'));
                                 }
                                 else {
-                                    cellValue = (this.parent.dataSourceSettings.rows.length === 0 || this.parent.dataSourceSettings.columns.length === 0) ? this.parent.getValuesHeader(pivotCell, 'value') : cellValue;
+                                    cellValue = (!isNullOrUndefined(pivotCell.valueSort) && (this.parent.localeObj.getConstant('grandTotal') + this.parent.dataSourceSettings.valueSortSettings.headerDelimiter + pivotCell.formattedText
+                                        === pivotCell.valueSort.levelName) && isgetValuesHeader) ? this.parent.getValuesHeader(pivotCell, 'value') : cellValue;
                                 }
                                 if (!(pivotCell.level === -1 && !pivotCell.rowSpan)) {
                                     cells.push({
@@ -26158,13 +26846,13 @@ class PDFExport {
     applyEvent() {
         /** Event trigerring */
         let clonedValues;
-        let currentPivotValues = PivotUtil.getClonedPivotValues(this.engine.pivotValues);
+        let currentPivotValues = PivotExportUtil.getClonedPivotValues(this.engine.pivotValues);
         if (this.parent.exportAllPages && this.parent.enableVirtualization && this.parent.dataType !== 'olap') {
             let pageSettings = this.engine.pageSettings;
             this.engine.pageSettings = null;
             this.engine.generateGridData(this.parent.dataSourceSettings, true);
             this.parent.applyFormatting(this.engine.pivotValues);
-            clonedValues = PivotUtil.getClonedPivotValues(this.engine.pivotValues);
+            clonedValues = PivotExportUtil.getClonedPivotValues(this.engine.pivotValues);
             this.engine.pivotValues = currentPivotValues;
             this.engine.pageSettings = pageSettings;
         }
@@ -26653,31 +27341,50 @@ class DialogRenderer {
         return axisWrapper;
     }
     showCalculatedField(event) {
-        if (!this.parent.isAdaptive) {
-            if (this.parent.dialogRenderer.fieldListDialog) {
-                this.parent.dialogRenderer.fieldListDialog.hide();
-                addClass([this.parent.element.querySelector('.' + TOGGLE_FIELD_LIST_CLASS)], ICON_HIDDEN);
+        try {
+            if (!this.parent.isAdaptive) {
+                this.parent.actionObj.actionName = openCalculatedField;
+                if (this.parent.actionBeginMethod()) {
+                    return;
+                }
+                if (this.parent.dialogRenderer.fieldListDialog) {
+                    this.parent.dialogRenderer.fieldListDialog.hide();
+                    addClass([this.parent.element.querySelector('.' + TOGGLE_FIELD_LIST_CLASS)], ICON_HIDDEN);
+                }
             }
+            this.parent.notify(initCalculatedField, {});
+        }
+        catch (execption) {
+            this.parent.actionFailureMethod(execption);
         }
-        this.parent.notify(initCalculatedField, {});
     }
     showFieldListDialog(event) {
         let activeindex = this.adaptiveElement.selectedItem;
         this.parent.treeViewModule.render(activeindex);
     }
     onShowFieldList() {
-        if (this.parent.allowDeferLayoutUpdate) {
-            if (this.parent.isAdaptive) {
-                this.parent.axisFieldModule.render();
+        this.parent.actionObj.actionName = showFieldList;
+        if (this.parent.actionBeginMethod()) {
+            return;
+        }
+        this.parent.actionObj.actionName = '';
+        try {
+            if (this.parent.allowDeferLayoutUpdate) {
+                if (this.parent.isAdaptive) {
+                    this.parent.axisFieldModule.render();
+                }
+                this.parent.clonedDataSource = extend({}, this.parent.dataSourceSettings, null, true);
+                this.parent.clonedFieldList = extend({}, this.parent.pivotFieldList, null, true);
             }
-            this.parent.clonedDataSource = extend({}, this.parent.dataSourceSettings, null, true);
-            this.parent.clonedFieldList = extend({}, this.parent.pivotFieldList, null, true);
+            addClass([this.parent.element.querySelector('.' + TOGGLE_FIELD_LIST_CLASS)], ICON_HIDDEN);
+            this.parent.dialogRenderer.fieldListDialog.show();
+            this.parent.dialogRenderer.fieldListDialog.element.style.top =
+                parseInt(this.parent.dialogRenderer.fieldListDialog.element.style.top, 10) < 0 ?
+                    '0px' : this.parent.dialogRenderer.fieldListDialog.element.style.top;
+        }
+        catch (execption) {
+            this.parent.actionFailureMethod(execption);
         }
-        addClass([this.parent.element.querySelector('.' + TOGGLE_FIELD_LIST_CLASS)], ICON_HIDDEN);
-        this.parent.dialogRenderer.fieldListDialog.show();
-        this.parent.dialogRenderer.fieldListDialog.element.style.top =
-            parseInt(this.parent.dialogRenderer.fieldListDialog.element.style.top, 10) < 0 ?
-                '0px' : this.parent.dialogRenderer.fieldListDialog.element.style.top;
     }
     onCloseFieldList() {
         if (this.parent.allowDeferLayoutUpdate) {
@@ -26705,6 +27412,10 @@ class DialogRenderer {
             }
         }
         this.parent.dialogRenderer.fieldListDialog.hide();
+        this.parent.actionObj.actionName = closeFieldlist;
+        if (this.parent.actionObj.actionName) {
+            this.parent.actionCompleteMethod();
+        }
     }
     removeFieldListIcon() {
         if (this.parent.isAdaptive && this.parent.allowCalculatedField && this.parent.calculatedFieldModule) {
@@ -27580,28 +28291,41 @@ class TreeViewRenderer {
     updateSorting(args) {
         let target = args.target;
         let option = target.getAttribute('data-sort');
-        if (target.className.indexOf('e-selected') === -1) {
-            switch (option) {
-                case 'None':
-                    this.fieldListSort = 'None';
-                    addClass([target], 'e-selected');
-                    removeClass([this.parentElement.querySelector('.e-sort-ascend')], 'e-selected');
-                    removeClass([this.parentElement.querySelector('.e-sort-descend')], 'e-selected');
-                    break;
-                case 'Ascend':
-                    this.fieldListSort = 'Ascend';
-                    addClass([target], 'e-selected');
-                    removeClass([this.parentElement.querySelector('.e-sort-none')], 'e-selected');
-                    removeClass([this.parentElement.querySelector('.e-sort-descend')], 'e-selected');
-                    break;
-                case 'Descend':
-                    this.fieldListSort = 'Descend';
-                    addClass([target], 'e-selected');
-                    removeClass([this.parentElement.querySelector('.e-sort-ascend')], 'e-selected');
-                    removeClass([this.parentElement.querySelector('.e-sort-none')], 'e-selected');
-                    break;
+        this.parent.actionObj.actionName = sortFieldTree;
+        if (this.parent.actionBeginMethod()) {
+            return;
+        }
+        try {
+            if (target.className.indexOf('e-selected') === -1) {
+                switch (option) {
+                    case 'None':
+                        this.fieldListSort = 'None';
+                        addClass([target], 'e-selected');
+                        removeClass([this.parentElement.querySelector('.e-sort-ascend')], 'e-selected');
+                        removeClass([this.parentElement.querySelector('.e-sort-descend')], 'e-selected');
+                        break;
+                    case 'Ascend':
+                        this.fieldListSort = 'Ascend';
+                        addClass([target], 'e-selected');
+                        removeClass([this.parentElement.querySelector('.e-sort-none')], 'e-selected');
+                        removeClass([this.parentElement.querySelector('.e-sort-descend')], 'e-selected');
+                        break;
+                    case 'Descend':
+                        this.fieldListSort = 'Descend';
+                        addClass([target], 'e-selected');
+                        removeClass([this.parentElement.querySelector('.e-sort-ascend')], 'e-selected');
+                        removeClass([this.parentElement.querySelector('.e-sort-none')], 'e-selected');
+                        break;
+                }
+                this.refreshTreeView();
             }
-            this.refreshTreeView();
+        }
+        catch (execption) {
+            this.parent.actionFailureMethod(execption);
+        }
+        this.parent.actionObj.actionName = this.parent.getActionCompleteName();
+        if (this.parent.actionObj.actionName) {
+            this.parent.actionCompleteMethod();
         }
     }
     /* eslint-disable */
@@ -27963,7 +28687,7 @@ class PivotButton {
                                         attrs: { 'tabindex': '-1', 'aria-disabled': 'false', 'title': this.parent.localeObj.getConstant('editCalculatedField') },
                                         className: ICON + ' ' + CALC_EDIT
                                     });
-                                    if (this.parent.allowCalculatedField && this.parent.calculatedFieldModule && field[i].showEditIcon) {
+                                    if (this.parent.allowCalculatedField && this.parent.calculatedFieldModule && (field[i].showEditIcon || field[i].showEditIcon === undefined)) {
                                         removeClass([calcElement], ICON_DISABLE);
                                     }
                                     else {
@@ -27976,7 +28700,7 @@ class PivotButton {
                                     className: ICON + ' ' + REMOVE_CLASS
                                 });
                                 if (this.parent.getModuleName() === 'pivotview') {
-                                    if ((this.parent.groupingBarSettings.showRemoveIcon && field[i].showRemoveIcon)) {
+                                    if ((this.parent.groupingBarSettings.showRemoveIcon && (field[i].showRemoveIcon || field[i].showRemoveIcon === undefined))) {
                                         removeClass([removeElement], ICON_DISABLE);
                                     }
                                     else {
@@ -27984,7 +28708,7 @@ class PivotButton {
                                     }
                                 }
                                 else {
-                                    if (field[i].showRemoveIcon) {
+                                    if (field[i].showRemoveIcon || field[i].showRemoveIcon === undefined) {
                                         removeClass([removeElement], ICON_DISABLE);
                                     }
                                     else {
@@ -28016,13 +28740,13 @@ class PivotButton {
                 }
                 if (axis === 'values') {
                     for (let element of this.parentElement.querySelectorAll('.e-group-' + axis)) {
-                        if (element.classList.contains(GROUP_CHART_VALUE) && this.parent.chartModule) {
+                        if (element.classList.contains(GROUP_CHART_VALUE) && this.parent.pivotChartModule) {
                             let valueData = field.map((item) => { return { text: item.caption ? item.caption : item.name, value: item.name }; });
                             let parent = this.parent;
                             if (this.valueFiedDropDownList && element.querySelector('.' + GROUP_CHART_VALUE_DROPDOWN_DIV)) {
                                 this.valueFiedDropDownList.dataSource = valueData;
                                 this.valueFiedDropDownList.value = !parent.chartSettings.enableMultipleAxis ?
-                                    parent.chartModule.currentMeasure : valueData[0].value;
+                                    parent.pivotChartModule.currentMeasure : valueData[0].value;
                             }
                             else {
                                 let ddlDiv = createElement('div', { className: GROUP_CHART_VALUE_DROPDOWN_DIV });
@@ -28032,7 +28756,7 @@ class PivotButton {
                                     enableRtl: this.parent.enableRtl,
                                     locale: this.parent.locale,
                                     value: !parent.chartSettings.enableMultipleAxis ?
-                                        parent.chartModule.currentMeasure : valueData[0].value,
+                                        parent.pivotChartModule.currentMeasure : valueData[0].value,
                                     width: 200,
                                     fields: { value: 'value', text: 'text' },
                                     cssClass: GROUP_CHART_VALUE_DROPDOWN,
@@ -28051,14 +28775,14 @@ class PivotButton {
                 else if (axis === 'columns') {
                     let availColindex = undefined;
                     for (let element of this.parentElement.querySelectorAll('.e-group-' + axis)) {
-                        if (element.classList.contains(GROUP_CHART_COLUMN) && this.parent.chartModule) {
-                            let currentMeasure = this.parent.chartModule.currentMeasure;
+                        if (element.classList.contains(GROUP_CHART_COLUMN) && this.parent.pivotChartModule) {
+                            let currentMeasure = this.parent.pivotChartModule.currentMeasure;
                             let delimiter = this.parent.chartSettings.columnDelimiter ? this.parent.chartSettings.columnDelimiter : '-';
                             let columnHeader = (this.parent.chartSettings.columnHeader && this.parent.chartSettings.columnHeader !== '') ?
                                 this.parent.chartSettings.columnHeader.split(delimiter).join(' - ') : '';
                             let engineModule = this.parent.dataType === 'olap' ? this.parent.olapEngineModule : this.parent.engineModule;
                             let pivotValues = engineModule.pivotValues;
-                            let totColIndex = this.parent.chartModule.getColumnTotalIndex(pivotValues);
+                            let totColIndex = this.parent.pivotChartModule.getColumnTotalIndex(pivotValues);
                             let rKeys = Object.keys(pivotValues);
                             let columnData = [];
                             let firstValueRow = false;
@@ -28168,7 +28892,7 @@ class PivotButton {
             },
             className: PIVOT_BUTTON_CONTENT_CLASS + ' ' +
                 (this.parent.getModuleName() === 'pivotview' ?
-                    this.parent.groupingBarSettings.allowDragAndDrop && field[i].allowDragAndDrop ? '' : DRAG_DISABLE_CLASS : ''),
+                    this.parent.groupingBarSettings.allowDragAndDrop && (field[i].allowDragAndDrop || field[i].allowDragAndDrop === undefined) ? '' : DRAG_DISABLE_CLASS : ''),
             innerHTML: axis === 'filters' ? (this.parent.dataType === 'olap' && engineModule.fieldList[field[i].name].type === 'CalculatedField') ?
                 text : (text + ' (' + filterMem + ')') : (this.parent.dataType === 'olap' ?
                 text : (!this.parent.dataSourceSettings.showAggregationOnValueField || axis !== 'values' || aggregation === 'CalculatedField' ?
@@ -28234,43 +28958,54 @@ class PivotButton {
     }
     openCalculatedFieldDialog(args) {
         let fieldName = args.target.parentElement.id;
-        if (this.parent.getModuleName() === 'pivotview') {
-            if (this.parent.isAdaptive && (this.parent.showFieldList &&
-                this.parent.pivotFieldListModule &&
-                !this.parent.pivotFieldListModule.isDestroyed)) {
-                this.parent.pivotFieldListModule.element
-                    .querySelector('.' + TOGGLE_FIELD_LIST_CLASS).click();
-                this.parent.pivotFieldListModule.dialogRenderer.adaptiveElement.select(4);
-                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                this.parent.pivotFieldListModule.calculatedFieldModule
-                    .updateAdaptiveCalculatedField(true, fieldName);
-            }
-            else {
-                if (!this.parent.isAdaptive) {
-                    this.parent.calculatedFieldModule.buttonCall = true;
-                }
-                this.parent.notify(initCalculatedField, { edit: true, fieldName: fieldName });
-            }
+        let fieldInfo = PivotUtil.getFieldInfo(fieldName, this.parent);
+        this.parent.actionObj.actionName = editCalculatedField;
+        this.parent.actionObj.fieldInfo = fieldInfo;
+        if (this.parent.actionBeginMethod()) {
+            return;
         }
-        else if (this.parent.getModuleName() === 'pivotfieldlist') {
-            if (this.parent.isAdaptive) {
-                this.parent.dialogRenderer.adaptiveElement.select(4);
-                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                this.parent.calculatedFieldModule
-                    .updateAdaptiveCalculatedField(true, fieldName);
-                this.parent.calculatedFieldModule.buttonCall = true;
-            }
-            else {
-                if (this.parent.dialogRenderer.fieldListDialog) {
-                    this.parent.dialogRenderer.fieldListDialog.hide();
-                    addClass([this.parent.element.querySelector('.' + TOGGLE_FIELD_LIST_CLASS)], ICON_HIDDEN);
+        try {
+            if (this.parent.getModuleName() === 'pivotview') {
+                if (this.parent.isAdaptive && (this.parent.showFieldList &&
+                    this.parent.pivotFieldListModule &&
+                    !this.parent.pivotFieldListModule.isDestroyed)) {
+                    this.parent.pivotFieldListModule.element
+                        .querySelector('.' + TOGGLE_FIELD_LIST_CLASS).click();
+                    this.parent.pivotFieldListModule.dialogRenderer.adaptiveElement.select(4);
+                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                    this.parent.pivotFieldListModule.calculatedFieldModule
+                        .updateAdaptiveCalculatedField(true, fieldName);
                 }
-                this.parent.notify(initCalculatedField, { edit: true, fieldName: fieldName });
-                if (this.parent.calculatedFieldModule) {
+                else {
+                    if (!this.parent.isAdaptive) {
+                        this.parent.calculatedFieldModule.buttonCall = true;
+                    }
+                    this.parent.notify(initCalculatedField, { edit: true, fieldName: fieldName });
+                }
+            }
+            else if (this.parent.getModuleName() === 'pivotfieldlist') {
+                if (this.parent.isAdaptive) {
+                    this.parent.dialogRenderer.adaptiveElement.select(4);
+                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                    this.parent.calculatedFieldModule
+                        .updateAdaptiveCalculatedField(true, fieldName);
                     this.parent.calculatedFieldModule.buttonCall = true;
                 }
+                else {
+                    if (this.parent.dialogRenderer.fieldListDialog) {
+                        this.parent.dialogRenderer.fieldListDialog.hide();
+                        addClass([this.parent.element.querySelector('.' + TOGGLE_FIELD_LIST_CLASS)], ICON_HIDDEN);
+                    }
+                    this.parent.notify(initCalculatedField, { edit: true, fieldName: fieldName });
+                    if (this.parent.calculatedFieldModule) {
+                        this.parent.calculatedFieldModule.buttonCall = true;
+                    }
+                }
             }
         }
+        catch (execption) {
+            this.parent.actionFailureMethod(execption);
+        }
     }
     createDraggable(field, target) {
         this.draggable = new Draggable(target, {
@@ -28294,7 +29029,7 @@ class PivotButton {
             attrs: {
                 'tabindex': '-1', 'aria-disabled': 'false', 'title': this.parent.localeObj.getConstant('drag')
             },
-            className: ICON + ' ' + DRAG_CLASS + ' ' + (field.allowDragAndDrop ? '' : DRAG_DISABLE_CLASS)
+            className: ICON + ' ' + DRAG_CLASS + ' ' + ((field.allowDragAndDrop || field.allowDragAndDrop === undefined) ? '' : DRAG_DISABLE_CLASS)
         });
         dragWrapper.appendChild(dragElement);
         if (this.parent.getModuleName() === 'pivotfieldlist') {
@@ -28655,38 +29390,52 @@ class PivotButton {
             !(args.target.classList.contains(DRAG_CLASS)) &&
             (buttonElement && fieldInfo.fieldItem && (fieldInfo.fieldItem.showSortIcon ||
                 isNullOrUndefined(fieldInfo.fieldItem.showSortIcon)))) {
-            if ((this.parent instanceof PivotFieldList || this.parent.groupingBarSettings.showSortIcon) &&
-                this.parent.dataSourceSettings.enableSorting &&
-                !(this.parent.dataType === 'olap' && ((this.parent.getModuleName() === 'pivotfieldlist' &&
-                    this.parent.pivotGridModule !== undefined &&
-                    this.parent.pivotGridModule.enableVirtualization) ||
-                    (this.parent.getModuleName() === 'pivotview' && this.parent.enableVirtualization)))) {
-                if (((this.parent.getModuleName() === 'pivotview' && this.parent.enableValueSorting) ||
-                    (this.parent.getModuleName() === 'pivotfieldlist' && this.parent.pivotGridModule !== undefined &&
-                        this.parent.pivotGridModule.enableValueSorting))) {
-                    if (this.parent.enableValueSorting || this.parent.pivotGridModule.enableValueSorting) { /* eslint-disable-line */
-                        if (args.target.classList.contains('e-pivot-button')) {
-                            if (args.target.parentElement.getAttribute('data-tag').split(':')[0] === 'rows') {
-                                this.parent.setProperties({ dataSourceSettings: { valueSortSettings: { headerText: '' } } }, true);
+            this.parent.actionObj.actionName = sortField;
+            this.parent.actionObj.fieldInfo = fieldInfo;
+            if (this.parent.actionBeginMethod()) {
+                return;
+            }
+            try {
+                if ((this.parent instanceof PivotFieldList || this.parent.groupingBarSettings.showSortIcon) &&
+                    this.parent.dataSourceSettings.enableSorting &&
+                    !(this.parent.dataType === 'olap' && ((this.parent.getModuleName() === 'pivotfieldlist' &&
+                        this.parent.pivotGridModule !== undefined &&
+                        this.parent.pivotGridModule.enableVirtualization) ||
+                        (this.parent.getModuleName() === 'pivotview' && this.parent.enableVirtualization)))) {
+                    if (((this.parent.getModuleName() === 'pivotview' && this.parent.enableValueSorting) ||
+                        (this.parent.getModuleName() === 'pivotfieldlist' && this.parent.pivotGridModule !== undefined &&
+                            this.parent.pivotGridModule.enableValueSorting))) {
+                        if (this.parent.enableValueSorting || this.parent.pivotGridModule.enableValueSorting) { /* eslint-disable-line */
+                            if (args.target.classList.contains('e-pivot-button')) {
+                                if (args.target.parentElement.getAttribute('data-tag').split(':')[0] === 'rows') {
+                                    this.parent.setProperties({ dataSourceSettings: { valueSortSettings: { headerText: undefined } } }, true);
+                                }
                             }
-                        }
-                        else {
-                            if (args.target.parentElement.parentElement.getAttribute('data-tag').split(':')[0] === 'rows') {
-                                this.parent.setProperties({ dataSourceSettings: { valueSortSettings: { headerText: '' } } }, true);
+                            else {
+                                if (args.target.parentElement.parentElement.getAttribute('data-tag').split(':')[0] === 'rows') {
+                                    this.parent.setProperties({ dataSourceSettings: { valueSortSettings: { headerText: undefined } } }, true);
+                                }
                             }
                         }
                     }
+                    this.parent.pivotCommon.eventBase.updateSorting(args);
+                    if (!this.parent.allowDeferLayoutUpdate || this.parent.getModuleName() !== 'pivotfieldlist') {
+                        let actionInfo = {
+                            sortInfo: this.parent.lastSortInfo
+                        };
+                        this.parent.actionObj.actionInfo = actionInfo;
+                        this.updateDataSource(true);
+                    }
+                    /* eslint-disable */
+                    let thisObj = this;
+                    /* eslint-enable */
+                    if (thisObj.parent instanceof PivotFieldList) {
+                        thisObj.axisField.render();
+                    }
                 }
-                this.parent.pivotCommon.eventBase.updateSorting(args);
-                if (!this.parent.allowDeferLayoutUpdate || this.parent.getModuleName() !== 'pivotfieldlist') {
-                    this.updateDataSource(true);
-                }
-                /* eslint-disable */
-                let thisObj = this;
-                /* eslint-enable */
-                if (thisObj.parent instanceof PivotFieldList) {
-                    thisObj.axisField.render();
-                }
+            }
+            catch (execption) {
+                this.parent.actionFailureMethod(execption);
             }
         }
     }
@@ -28718,26 +29467,37 @@ class PivotButton {
     updateFiltering(args) {
         /* eslint-disable */
         let pivotObj = this.parent.pivotGridModule ? this.parent.pivotGridModule : this.parent;
-        if (pivotObj.getModuleName() === 'pivotfieldlist') {
-            showSpinner(pivotObj.fieldListSpinnerElement);
-        }
-        else {
-            pivotObj.showWaitingPopup();
-        }
-        pivotObj.mouseEventArgs = args;
-        pivotObj.filterTargetID = this.parent.pivotCommon.moduleName !== 'pivotfieldlist' ?
-            this.parent.element : document.getElementById(this.parent.pivotCommon.parentID + '_Wrapper');
         let fieldName = args.target.parentElement.id;
-        if (pivotObj.dataSourceSettings.mode === 'Server') {
-            if (this.parent.engineModule.fieldList[fieldName].members && Object.keys(this.parent.engineModule.fieldList[fieldName].members).length > 0) {
-                this.updateFilterEvents();
+        let fieldInfo = PivotUtil.getFieldInfo(fieldName, this.parent);
+        this.parent.actionObj.actionName = filterField;
+        this.parent.actionObj.fieldInfo = fieldInfo;
+        if (this.parent.actionBeginMethod()) {
+            return;
+        }
+        try {
+            if (pivotObj.getModuleName() === 'pivotfieldlist') {
+                showSpinner(pivotObj.fieldListSpinnerElement);
             }
             else {
-                pivotObj.getEngine('fetchFieldMembers', null, null, null, null, null, fieldName);
+                pivotObj.showWaitingPopup();
+            }
+            pivotObj.mouseEventArgs = args;
+            pivotObj.filterTargetID = this.parent.pivotCommon.moduleName !== 'pivotfieldlist' ?
+                this.parent.element : document.getElementById(this.parent.pivotCommon.parentID + '_Wrapper');
+            if (pivotObj.dataSourceSettings.mode === 'Server') {
+                if (this.parent.engineModule.fieldList[fieldName].members && Object.keys(this.parent.engineModule.fieldList[fieldName].members).length > 0) {
+                    this.updateFilterEvents();
+                }
+                else {
+                    pivotObj.getEngine('fetchFieldMembers', null, null, null, null, null, fieldName);
+                }
+            }
+            else {
+                this.updateFilterEvents();
             }
         }
-        else {
-            this.updateFilterEvents();
+        catch (execption) {
+            this.parent.actionFailureMethod(execption);
         }
         /* eslint-enable */
     }
@@ -28750,11 +29510,6 @@ class PivotButton {
         let target = pivotObj.mouseEventArgs.target;
         this.fieldName = target.parentElement.id;
         if (this.parent.pivotCommon.filterDialog.dialogPopUp) {
-            this.dialogPopUp = this.parent.pivotCommon.filterDialog.dialogPopUp;
-            this.parent.pivotCommon.filterDialog.dialogPopUp.close = this.removeFilterDialog.bind(this);
-            // this.memberTreeView = this.parent.pivotCommon.filterDialog.memberTreeView;
-            // this.parent.pivotCommon.filterDialog.memberTreeView.nodeChecked = this.nodeStateModified.bind(this);
-            // this.parent.pivotCommon.filterDialog.allMemberSelect.nodeChecked = this.nodeStateModified.bind(this);
             this.bindDialogEvents();
         }
         if (pivotObj.getModuleName() === 'pivotfieldlist') {
@@ -28768,8 +29523,8 @@ class PivotButton {
         if (this.parent.pivotCommon.filterDialog.allowExcelLikeFilter && this.parent.pivotCommon.filterDialog.tabObj) {
             this.index = this.parent.pivotCommon.filterDialog.tabObj.selectedItem;
             this.updateDialogButtonEvents();
-            this.dialogPopUp.buttons = this.buttonModel();
-            this.dialogPopUp.dataBind();
+            this.parent.pivotCommon.filterDialog.dialogPopUp.buttons = this.buttonModel();
+            this.parent.pivotCommon.filterDialog.dialogPopUp.dataBind();
             this.parent.pivotCommon.filterDialog.tabObj.selected = this.tabSelect.bind(this);
         }
         else if (this.parent.dataSourceSettings.allowMemberFilter) {
@@ -28794,7 +29549,7 @@ class PivotButton {
                 click: (this.index === 0 ? this.updateFilterState.bind(this, this.fieldName) : this.updateCustomFilter.bind(this))
             },
             {
-                click: this.parent.pivotCommon.filterDialog.closeFilterDialog.bind(this),
+                click: this.parent.pivotCommon.filterDialog.closeFilterDialog.bind(this.parent.pivotCommon.filterDialog),
                 buttonModel: { cssClass: CANCEL_BUTTON_CLASS, content: this.parent.localeObj.getConstant('cancel') }
             }
         ];
@@ -28802,24 +29557,24 @@ class PivotButton {
     tabSelect(e) {
         this.index = e.selectedIndex;
         this.updateDialogButtonEvents();
-        removeClass([].slice.call(this.dialogPopUp.element.querySelectorAll('.e-selected-tab')), 'e-selected-tab');
+        removeClass([].slice.call(this.parent.pivotCommon.filterDialog.dialogPopUp.element.querySelectorAll('.e-selected-tab')), 'e-selected-tab');
         if (e.selectedIndex > 0) {
-            addClass([this.dialogPopUp.element.querySelector('.e-filter-div-content' + '.' + (e.selectedIndex === 1 && this.parent.dataSourceSettings.allowLabelFilter ? 'e-label-filter' : 'e-value-filter'))], 'e-selected-tab');
+            addClass([this.parent.pivotCommon.filterDialog.dialogPopUp.element.querySelector('.e-filter-div-content' + '.' + (e.selectedIndex === 1 && this.parent.dataSourceSettings.allowLabelFilter ? 'e-label-filter' : 'e-value-filter'))], 'e-selected-tab');
         }
         if (e.selectedIndex === 0) {
             this.parent.pivotCommon.filterDialog.updateCheckedState();
         }
         else {
-            this.dialogPopUp.buttons[0].buttonModel.disabled = false;
-            this.dialogPopUp.element.querySelector('.' + OK_BUTTON_CLASS).removeAttribute('disabled');
+            this.parent.pivotCommon.filterDialog.dialogPopUp.buttons[0].buttonModel.disabled = false;
+            this.parent.pivotCommon.filterDialog.dialogPopUp.element.querySelector('.' + OK_BUTTON_CLASS).removeAttribute('disabled');
         }
     }
     updateDialogButtonEvents() {
-        this.dialogPopUp.buttons = this.buttonModel();
-        this.dialogPopUp.dataBind();
+        this.parent.pivotCommon.filterDialog.dialogPopUp.buttons = this.buttonModel();
+        this.parent.pivotCommon.filterDialog.dialogPopUp.dataBind();
     }
     updateCustomFilter(args) {
-        let dialogElement = this.dialogPopUp.element.querySelector('.e-selected-tab');
+        let dialogElement = this.parent.pivotCommon.filterDialog.dialogPopUp.element.querySelector('.e-selected-tab');
         let fieldName = dialogElement.getAttribute('data-fieldname');
         let levelName = dialogElement.getAttribute('data-selectedField');
         let filterType = dialogElement.getAttribute('data-type');
@@ -28889,38 +29644,18 @@ class PivotButton {
             if (type !== 'Value') {
                 this.parent.lastFilterInfo = PivotUtil.getFilterItemByName(fieldName, this.parent.dataSourceSettings.filterSettings);
             }
-            this.dialogPopUp.close();
+            this.parent.pivotCommon.filterDialog.dialogPopUp.close();
             if (!observedArgs.cancel) {
                 this.refreshPivotButtonState(fieldName, true);
                 this.updateDataSource(true);
             }
         });
     }
-    removeFilterDialog() {
-        if (this.dialogPopUp && !this.dialogPopUp.isDestroyed) {
-            this.dialogPopUp.destroy();
-            setTimeout(this.setFocus.bind(this));
-        }
-        if (document.getElementById(this.parentElement.id + '_EditorTreeView')) {
-            remove(document.getElementById(this.parentElement.id + '_EditorTreeView'));
-        }
-    }
-    setFocus() {
-        if (this.parentElement) {
-            let pivotButtons = [].slice.call(this.parentElement.querySelectorAll('.e-pivot-button'));
-            for (let item of pivotButtons) {
-                if (item.getAttribute('data-uid') === this.fieldName) {
-                    item.focus();
-                    break;
-                }
-            }
-        }
-    }
     ClearFilter(e) {
-        let dialogElement = this.dialogPopUp.element;
+        let dialogElement = this.parent.pivotCommon.filterDialog.dialogPopUp.element;
         let fieldName = dialogElement.getAttribute('data-fieldname');
         let tabElement = dialogElement.querySelector('.e-selected-tab');
-        this.dialogPopUp.close();
+        this.parent.pivotCommon.filterDialog.dialogPopUp.close();
         if (this.parent.dataType === 'olap' && tabElement) {
             let levelName = tabElement.getAttribute('data-selectedField');
             this.removeDataSourceSettings(fieldName, levelName);
@@ -28936,63 +29671,73 @@ class PivotButton {
         let target = args.target;
         let fieldName = target.parentElement.id;
         let fieldInfo = PivotUtil.getFieldInfo(fieldName, this.parent);
+        this.parent.actionObj.actionName = removeField;
+        this.parent.actionObj.fieldInfo = fieldInfo;
+        if (this.parent.actionBeginMethod()) {
+            return;
+        }
         let removeFieldArgs = {
             cancel: false, fieldName: fieldName,
             dataSourceSettings: PivotUtil.getClonedDataSourceSettings(this.parent.dataSourceSettings),
             fieldItem: fieldInfo.fieldItem, axis: fieldInfo.axis
         };
-        let control = this.parent.getModuleName() === 'pivotfieldlist' &&
-            this.parent.isPopupView ? this.parent.pivotGridModule : this.parent;
-        control.trigger(fieldRemove, removeFieldArgs, (observedArgs) => {
-            if (!observedArgs.cancel) {
-                if (target.parentElement.getAttribute('isvalue') === 'true') {
-                    this.parent.setProperties({ dataSourceSettings: { values: [] } }, true);
-                    if (this.parent.dataType === 'olap') {
-                        this.parent.pivotCommon.dataSourceUpdate.removeFieldFromReport('[Measures]');
+        try {
+            let control = this.parent.getModuleName() === 'pivotfieldlist' &&
+                this.parent.isPopupView ? this.parent.pivotGridModule : this.parent;
+            control.trigger(fieldRemove, removeFieldArgs, (observedArgs) => {
+                if (!observedArgs.cancel) {
+                    if (target.parentElement.getAttribute('isvalue') === 'true') {
+                        this.parent.setProperties({ dataSourceSettings: { values: [] } }, true);
+                        if (this.parent.dataType === 'olap') {
+                            this.parent.pivotCommon.dataSourceUpdate.removeFieldFromReport('[Measures]');
+                        }
                     }
-                }
-                else {
-                    this.parent.pivotCommon.dataSourceUpdate.removeFieldFromReport(fieldName);
-                    if (this.parent.dataType === 'pivot' && this.parent.showValuesButton && this.parent.dataSourceSettings.values.length > 1 &&
-                        fieldInfo.position < this.parent.dataSourceSettings.valueIndex && ((this.parent.dataSourceSettings.valueAxis === 'row' &&
-                        observedArgs.axis === 'rows') || (this.parent.dataSourceSettings.valueAxis === 'column' && observedArgs.axis === 'columns'))) {
-                        this.parent.setProperties({ dataSourceSettings: { valueIndex: this.parent.dataSourceSettings.valueIndex - 1 } }, true);
+                    else {
+                        this.parent.pivotCommon.dataSourceUpdate.removeFieldFromReport(fieldName);
+                        if (this.parent.dataType === 'pivot' && this.parent.showValuesButton && this.parent.dataSourceSettings.values.length > 1 &&
+                            fieldInfo.position < this.parent.dataSourceSettings.valueIndex && ((this.parent.dataSourceSettings.valueAxis === 'row' &&
+                            observedArgs.axis === 'rows') || (this.parent.dataSourceSettings.valueAxis === 'column' && observedArgs.axis === 'columns'))) {
+                            this.parent.setProperties({ dataSourceSettings: { valueIndex: this.parent.dataSourceSettings.valueIndex - 1 } }, true);
+                        }
+                        if (this.parent.dataType === 'olap' && this.parent.dataSourceSettings.values.length === 0) {
+                            this.parent.pivotCommon.dataSourceUpdate.removeFieldFromReport('[Measures]');
+                        }
                     }
-                    if (this.parent.dataType === 'olap' && this.parent.dataSourceSettings.values.length === 0) {
-                        this.parent.pivotCommon.dataSourceUpdate.removeFieldFromReport('[Measures]');
+                    if (this.parent.getModuleName() === 'pivotfieldlist') {
+                        this.parent.axisFieldModule.render();
                     }
+                    this.updateDataSource();
                 }
-                if (this.parent.getModuleName() === 'pivotfieldlist') {
-                    this.parent.axisFieldModule.render();
-                }
-                this.updateDataSource();
-            }
-        });
+            });
+        }
+        catch (execption) {
+            this.parent.actionFailureMethod(execption);
+        }
     }
     /** @hidden */
     nodeStateModified(args) {
         let target = closest(args.node, 'li');
         let fieldName = target.getAttribute('data-fieldname');
         if (target.getAttribute('data-memberId') === 'all') {
-            this.memberTreeView.nodeChecked = null;
+            this.parent.pivotCommon.filterDialog.memberTreeView.nodeChecked = null;
             if (args.action === 'check') {
-                this.memberTreeView.checkAll();
+                this.parent.pivotCommon.filterDialog.memberTreeView.checkAll();
             }
             else {
-                this.memberTreeView.uncheckAll();
+                this.parent.pivotCommon.filterDialog.memberTreeView.uncheckAll();
             }
             if (this.parent.dataType === 'olap' && this.parent.olapEngineModule &&
                 !this.parent.olapEngineModule.fieldList[fieldName].isHierarchy) {
-                this.updateNodeStates(this.memberTreeView.getAllCheckedNodes(), fieldName, args.action);
+                this.updateNodeStates(this.parent.pivotCommon.filterDialog.memberTreeView.getAllCheckedNodes(), fieldName, args.action);
             }
             this.checkedStateAll(args.action);
-            this.memberTreeView.nodeChecked = this.nodeStateModified.bind(this);
+            this.parent.pivotCommon.filterDialog.memberTreeView.nodeChecked = this.nodeStateModified.bind(this);
         }
         else {
             if (this.parent.dataType === 'olap' && this.parent.olapEngineModule &&
                 !this.parent.olapEngineModule.fieldList[fieldName].isHierarchy) {
                 // let st1: number = new Date().getTime();
-                let checkedNodes = this.memberTreeView.getAllCheckedNodes();
+                let checkedNodes = this.parent.pivotCommon.filterDialog.memberTreeView.getAllCheckedNodes();
                 // let st2: number = (new Date().getTime() - st1) / 1000;
                 // console.log('getAllCheckedNodes:' + st2);
                 this.updateNodeStates(checkedNodes, fieldName, args.action);
@@ -29032,8 +29777,8 @@ class PivotButton {
                 }
                 if (currentMembers[member]) {
                     currentMembers[member].isSelected = false;
-                    if (this.memberTreeView.element.querySelector('li[data-memberId="' + member + '"]')) {
-                        let element = this.memberTreeView.element.querySelector('li[data-memberId="' + member + '"]');
+                    if (this.parent.pivotCommon.filterDialog.memberTreeView.element.querySelector('li[data-memberId="' + member + '"]')) {
+                        let element = this.parent.pivotCommon.filterDialog.memberTreeView.element.querySelector('li[data-memberId="' + member + '"]');
                         if (element && !element.querySelector('ul')) {
                             this.parent.pivotCommon.eventBase.updateChildNodeStates(fieldList.filterMembers, fieldName, member, false);
                         }
@@ -29042,8 +29787,8 @@ class PivotButton {
             }
             for (let node of checkedNodes) {
                 if (currentMembers[node]) {
-                    if (this.memberTreeView.element.querySelector('li[data-memberId="' + node + '"]')) {
-                        let element = this.memberTreeView.element.querySelector('li[data-memberId="' + node + '"]');
+                    if (this.parent.pivotCommon.filterDialog.memberTreeView.element.querySelector('li[data-memberId="' + node + '"]')) {
+                        let element = this.parent.pivotCommon.filterDialog.memberTreeView.element.querySelector('li[data-memberId="' + node + '"]');
                         if (element && !element.querySelector('ul')) {
                             currentMembers[node].isSelected = true;
                             this.parent.pivotCommon.eventBase.updateChildNodeStates(fieldList.filterMembers, fieldName, node, true);
@@ -29078,10 +29823,10 @@ class PivotButton {
             !engineModule.fieldList[fieldName].isHierarchy) {
             let cMembers = engineModule.fieldList[fieldName].members;
             let sMembers = engineModule.fieldList[fieldName].currrentMembers;
-            filterItem.items = this.memberTreeView.getAllCheckedNodes();
+            filterItem.items = this.parent.pivotCommon.filterDialog.memberTreeView.getAllCheckedNodes();
             filterItem.levelCount = engineModule.fieldList[fieldName].levelCount;
             isNodeUnChecked = (filterItem.items.length ===
-                this.memberTreeView.fields.dataSource.length ? false : true);
+                this.parent.pivotCommon.filterDialog.memberTreeView.fields.dataSource.length ? false : true);
             if (engineModule.fieldList[fieldName].searchMembers.length > 0 && !isNodeUnChecked) {
                 let cNodeLength = Object.keys(cMembers).length;
                 let sNodeLength = Object.keys(sMembers).length;
@@ -29142,13 +29887,17 @@ class PivotButton {
                 }
                 this.parent.dataSourceSettings.filterSettings.push(filterItem);
             }
-            this.dialogPopUp.close();
+            this.parent.pivotCommon.filterDialog.dialogPopUp.close();
             if (!observedArgs.cancel) {
                 this.refreshPivotButtonState(fieldName, isNodeUnChecked);
                 if (!isNodeUnChecked) {
                     this.removeDataSourceSettings(fieldName);
                 }
                 this.parent.lastFilterInfo = filterItem;
+                let actionInfo = {
+                    filterInfo: this.parent.lastFilterInfo
+                };
+                this.parent.actionObj.actionInfo = actionInfo;
                 this.updateDataSource(true);
                 let thisObj = this;
                 //setTimeout(() => {
@@ -29302,14 +30051,6 @@ class PivotButton {
             this.columnFieldDropDownList.destroy();
             this.columnFieldDropDownList = null;
         }
-        if (this.memberTreeView && !this.memberTreeView.isDestroyed) {
-            this.memberTreeView.destroy();
-            this.memberTreeView = null;
-        }
-        if (this.dialogPopUp && !this.dialogPopUp.isDestroyed) {
-            this.dialogPopUp.destroy();
-            this.dialogPopUp = null;
-        }
         if (this.draggable && !this.draggable.isDestroyed) {
             this.draggable.destroy();
             this.draggable = null;
@@ -29449,6 +30190,8 @@ let PivotFieldList = class PivotFieldList extends Component {
         this.enableValueSorting = false;
         this.request = new XMLHttpRequest();
         this.remoteData = [];
+        /** @hidden */
+        this.actionObj = {};
     }
     /**
      * To provide the array of modules needed for control rendering
@@ -29679,7 +30422,9 @@ let PivotFieldList = class PivotFieldList extends Component {
                 enableValueSorting: enableValueSorting,
                 isDrillThrough: isDrillThrough,
                 localeObj: localeObj,
-                clonedReport: this.clonedReport
+                clonedReport: this.clonedReport,
+                globalize: this.globalize,
+                currenyCode: this.currencyCode
             };
         }
         return customProperties;
@@ -30364,6 +31109,11 @@ let PivotFieldList = class PivotFieldList extends Component {
                 pivot.pivotGridModule.fieldListSpinnerElement = pivot.fieldListSpinnerElement;
             }
         });
+        let actionName = this.getActionCompleteName();
+        this.actionObj.actionName = actionName;
+        if (this.actionObj.actionName) {
+            this.actionCompleteMethod();
+        }
     }
     updateOlapDataSource(pivot, isSorted, isCalcChange, isOlapDataRefreshed) {
         let customProperties = pivot.frameCustomProperties(pivot.olapEngineModule.fieldListData, pivot.olapEngineModule.fieldList);
@@ -30397,6 +31147,7 @@ let PivotFieldList = class PivotFieldList extends Component {
     update(control) {
         if (control) {
             this.clonedDataSet = control.clonedDataSet;
+            this.clonedReport = control.clonedReport;
             this.setProperties({ dataSourceSettings: control.dataSourceSettings, showValuesButton: control.showValuesButton }, true);
             this.engineModule = control.engineModule;
             this.olapEngineModule = control.olapEngineModule;
@@ -30431,6 +31182,7 @@ let PivotFieldList = class PivotFieldList extends Component {
     updateView(control) {
         if (control) {
             control.clonedDataSet = this.clonedDataSet;
+            control.clonedReport = this.clonedReport;
             control.setProperties({ dataSourceSettings: this.dataSourceSettings, showValuesButton: this.showValuesButton }, true);
             control.engineModule = this.engineModule;
             control.olapEngineModule = this.olapEngineModule;
@@ -30473,6 +31225,47 @@ let PivotFieldList = class PivotFieldList extends Component {
             }
         });
     }
+    /** @hidden */
+    actionBeginMethod() {
+        let eventArgs = {
+            dataSourceSettings: PivotUtil.getClonedDataSourceSettings(this.dataSourceSettings),
+            actionName: this.actionObj.actionName,
+            fieldInfo: this.actionObj.fieldInfo,
+            cancel: false
+        };
+        let control = this.isPopupView ? this.pivotGridModule : this;
+        control.trigger(actionBegin, eventArgs);
+        return eventArgs.cancel;
+    }
+    /** @hidden */
+    actionCompleteMethod() {
+        let eventArgs = {
+            dataSourceSettings: PivotUtil.getClonedDataSourceSettings(this.dataSourceSettings),
+            actionName: this.actionObj.actionName,
+            fieldInfo: this.actionObj.fieldInfo,
+            actionInfo: this.actionObj.actionInfo
+        };
+        let control = this.isPopupView ? this.pivotGridModule : this;
+        control.trigger(actionComplete, eventArgs);
+        this.actionObj.actionName = '';
+        this.actionObj.actionInfo = undefined;
+        this.actionObj.fieldInfo = undefined;
+    }
+    /** @hidden */
+    actionFailureMethod(error) {
+        let eventArgs = {
+            actionName: this.actionObj.actionName,
+            errorInfo: error
+        };
+        let control = this.isPopupView ? this.pivotGridModule : this;
+        control.trigger(actionFailure, eventArgs);
+    }
+    /** @hidden */
+    getActionCompleteName() {
+        let actionName = (this.actionObj.actionName == openCalculatedField) ? calculatedFieldApplied : (this.actionObj.actionName == editCalculatedField) ? calculatedFieldEdited : (this.actionObj.actionName == sortField) ? fieldSorted
+            : (this.actionObj.actionName == filterField) ? fieldFiltered : (this.actionObj.actionName == removeField) ? fieldRemoved : (this.actionObj.actionName == aggregateField) ? fieldAggregated : this.actionObj.actionName == sortFieldTree ? fieldTreeSorted : this.actionObj.actionName;
+        return actionName;
+    }
     /**
      * Destroys the Field Table component.
      * @function destroy
@@ -30547,6 +31340,9 @@ let PivotFieldList = class PivotFieldList extends Component {
         if (this.clonedDataSet) {
             this.clonedDataSet = null;
         }
+        if (this.clonedReport) {
+            this.clonedReport = null;
+        }
         if (this.clonedFieldList) {
             this.clonedFieldList = null;
         }
@@ -30595,6 +31391,9 @@ __decorate$4([
 __decorate$4([
     Property(['Sum', 'Count', 'DistinctCount', 'Product', 'Min', 'Max', 'Avg', 'Median', 'Index', 'PopulationVar', 'SampleVar', 'PopulationStDev', 'SampleStDev', 'RunningTotals', 'PercentageOfGrandTotal', 'PercentageOfColumnTotal', 'PercentageOfRowTotal', 'PercentageOfParentColumnTotal', 'PercentageOfParentRowTotal', 'DifferenceFrom', 'PercentageOfDifferenceFrom', 'PercentageOfParentTotal'])
 ], PivotFieldList.prototype, "aggregateTypes", void 0);
+__decorate$4([
+    Property('USD')
+], PivotFieldList.prototype, "currencyCode", void 0);
 __decorate$4([
     Event()
 ], PivotFieldList.prototype, "load", void 0);
@@ -30643,6 +31442,15 @@ __decorate$4([
 __decorate$4([
     Event()
 ], PivotFieldList.prototype, "beforeServiceInvoke", void 0);
+__decorate$4([
+    Event()
+], PivotFieldList.prototype, "actionBegin", void 0);
+__decorate$4([
+    Event()
+], PivotFieldList.prototype, "actionComplete", void 0);
+__decorate$4([
+    Event()
+], PivotFieldList.prototype, "actionFailure", void 0);
 PivotFieldList = __decorate$4([
     NotifyPropertyChanges
 ], PivotFieldList);
@@ -30875,105 +31683,114 @@ class CalculatedField {
     displayMenu(node, treeNode, target) {
         let edit = target ? target.classList.contains(CALC_EDIT) : true;
         let edited = target ? target.classList.contains(CALC_EDITED) : true;
-        if (this.parent.dataType === 'pivot' && node.querySelector('.e-list-icon.e-format') &&
-            node.querySelector('.e-list-icon.e-format').classList.contains(ICON) &&
-            !node.querySelector('.e-list-icon').classList.contains(CALC_EDITED) &&
-            !node.querySelector('.e-list-icon').classList.contains(GRID_REMOVE) &&
-            !node.querySelector('.e-list-icon').classList.contains(CALC_EDIT) && node.tagName === 'LI') {
-            if (this.menuObj && !this.menuObj.isDestroyed) {
-                this.menuObj.destroy();
-            }
-            this.curMenu = node.querySelector('.' + LIST_TEXT_CLASS);
-            this.openContextMenu(node);
-        }
-        else if (node.tagName === 'LI' && (node.querySelector('.' + CALC_EDIT) &&
-            node.querySelector('.' + CALC_EDIT).classList.contains('e-list-icon') && edit ||
-            (this.parent.dataType === 'olap' && node.getAttribute('data-type') === CALC && node.classList.contains('e-active') && ((target && !target.classList.contains(GRID_REMOVE)) || !target)))) {
-            this.isEdit = true;
-            let fieldName = node.getAttribute('data-field');
-            let caption = node.getAttribute('data-caption');
-            this.currentFieldName = fieldName;
-            this.inputObj.value = caption;
-            this.inputObj.dataBind();
-            let formatString = node.getAttribute('data-formatString');
-            let dialogElement = this.dialog.element;
-            let customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);
-            if (this.parent.dataType === 'olap') {
-                let memberType = node.getAttribute('data-membertype');
-                let parentHierarchy = node.getAttribute('data-hierarchy');
-                let expression = node.getAttribute('data-formula');
-                let customString = node.getAttribute('data-customString');
-                let fieldTitle = select('#' + this.parentID + '_' + 'FieldNameTitle', dialogElement);
-                let memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement), DropDownList);
-                let hierarchyDrop = getInstance(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement), DropDownList);
-                let formatDrop = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
-                /* eslint-enable max-len */
-                fieldTitle.innerHTML = this.parent.localeObj.getConstant('caption');
-                select('#' + this.parentID + 'droppable', document).value = expression;
-                memberTypeDrop.readonly = true;
-                memberTypeDrop.value = memberType;
-                memberTypeDrop.dataBind();
-                if (memberType === 'Dimension') {
-                    hierarchyDrop.value = parentHierarchy;
+        try {
+            if (this.parent.dataType === 'pivot' && node.querySelector('.e-list-icon.e-format') &&
+                node.querySelector('.e-list-icon.e-format').classList.contains(ICON) &&
+                !node.querySelector('.e-list-icon').classList.contains(CALC_EDITED) &&
+                !node.querySelector('.e-list-icon').classList.contains(GRID_REMOVE) &&
+                !node.querySelector('.e-list-icon').classList.contains(CALC_EDIT) && node.tagName === 'LI') {
+                if (this.menuObj && !this.menuObj.isDestroyed) {
+                    this.menuObj.destroy();
+                }
+                this.curMenu = node.querySelector('.' + LIST_TEXT_CLASS);
+                this.openContextMenu(node);
+            }
+            else if (node.tagName === 'LI' && (node.querySelector('.' + CALC_EDIT) &&
+                node.querySelector('.' + CALC_EDIT).classList.contains('e-list-icon') && edit ||
+                (this.parent.dataType === 'olap' && node.getAttribute('data-type') === CALC && node.classList.contains('e-active') && ((target && !target.classList.contains(GRID_REMOVE)) || !target)))) {
+                this.isEdit = true;
+                let fieldName = node.getAttribute('data-field');
+                let caption = node.getAttribute('data-caption');
+                this.currentFieldName = fieldName;
+                this.inputObj.value = caption;
+                this.inputObj.dataBind();
+                let formatString = node.getAttribute('data-formatString');
+                let dialogElement = this.dialog.element;
+                let customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);
+                if (this.parent.dataType === 'olap') {
+                    let memberType = node.getAttribute('data-membertype');
+                    let parentHierarchy = node.getAttribute('data-hierarchy');
+                    let expression = node.getAttribute('data-formula');
+                    let customString = node.getAttribute('data-customString');
+                    let fieldTitle = select('#' + this.parentID + '_' + 'FieldNameTitle', dialogElement);
+                    let memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement), DropDownList);
+                    let hierarchyDrop = getInstance(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement), DropDownList);
+                    let formatDrop = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
+                    /* eslint-enable max-len */
+                    fieldTitle.innerHTML = this.parent.localeObj.getConstant('caption');
+                    select('#' + this.parentID + 'droppable', document).value = expression;
+                    memberTypeDrop.readonly = true;
+                    memberTypeDrop.value = memberType;
+                    memberTypeDrop.dataBind();
+                    if (memberType === 'Dimension') {
+                        hierarchyDrop.value = parentHierarchy;
+                    }
+                    if (formatString !== '') {
+                        formatDrop.value = formatString;
+                        formatDrop.dataBind();
+                    }
+                    customFormat.value = customString;
+                }
+                else {
+                    customFormat.value = formatString;
+                    addClass(this.treeObj.element.querySelectorAll('.' + CALC_EDITED), CALC_EDIT);
+                    removeClass(this.treeObj.element.querySelectorAll('.' + CALC_EDITED), CALC_EDITED);
+                    addClass([node.querySelector('.e-list-icon')], CALC_EDITED);
+                    removeClass([node.querySelector('.e-list-icon')], CALC_EDIT);
+                    node.querySelector('.' + CALC_EDITED).setAttribute('title', this.parent.localeObj.getConstant('clearCalculatedField'));
+                    select('#' + this.parentID + 'droppable', document).value = node.getAttribute('data-uid');
                 }
-                if (formatString !== '') {
-                    formatDrop.value = formatString;
+                customFormat.dataBind();
+            }
+            else if (node.tagName === 'LI' && (node.querySelector('.' + CALC_EDITED) &&
+                node.querySelector('.' + CALC_EDITED).classList.contains('e-list-icon') && edited ||
+                (this.parent.dataType === 'olap' && !node.classList.contains('e-active')))) {
+                this.isEdit = false;
+                this.inputObj.value = '';
+                this.inputObj.dataBind();
+                let dialogElement = this.dialog.element;
+                let customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);
+                customFormat.value = '';
+                customFormat.dataBind();
+                if (this.parent.dataType === 'olap') {
+                    let hierarchyDrop = getInstance(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement), DropDownList);
+                    let formatDrop = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
+                    let memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement), DropDownList);
+                    let fieldTitle = select('#' + this.parentID + '_' + 'FieldNameTitle', dialogElement);
+                    /* eslint-enable max-len */
+                    fieldTitle.innerHTML = this.parent.localeObj.getConstant('fieldTitle');
+                    hierarchyDrop.index = 0;
+                    hierarchyDrop.dataBind();
+                    formatDrop.index = 0;
                     formatDrop.dataBind();
+                    memberTypeDrop.index = 0;
+                    memberTypeDrop.readonly = false;
+                    memberTypeDrop.dataBind();
+                }
+                else {
+                    addClass(this.treeObj.element.querySelectorAll('.' + CALC_EDITED), CALC_EDIT);
+                    removeClass(this.treeObj.element.querySelectorAll('.' + CALC_EDITED), CALC_EDITED);
+                    node.querySelector('.' + CALC_EDIT).setAttribute('title', this.parent.localeObj.getConstant('edit'));
                 }
-                customFormat.value = customString;
+                select('#' + this.parentID + 'droppable', document).value = '';
             }
-            else {
-                customFormat.value = formatString;
-                addClass(this.treeObj.element.querySelectorAll('.' + CALC_EDITED), CALC_EDIT);
-                removeClass(this.treeObj.element.querySelectorAll('.' + CALC_EDITED), CALC_EDITED);
-                addClass([node.querySelector('.e-list-icon')], CALC_EDITED);
-                removeClass([node.querySelector('.e-list-icon')], CALC_EDIT);
-                node.querySelector('.' + CALC_EDITED).setAttribute('title', this.parent.localeObj.getConstant('clearCalculatedField'));
-                select('#' + this.parentID + 'droppable', document).value = node.getAttribute('data-uid');
+            else if (node.tagName === 'LI' && (node.querySelector('.' + GRID_REMOVE) &&
+                node.querySelector('.' + GRID_REMOVE).classList.contains('e-list-icon')) && !edit && !edited) {
+                this.parent.actionObj.actionName = removeField;
+                if (this.parent.actionBeginMethod()) {
+                    return;
+                }
+                let dropField = select('#' + this.parentID + 'droppable', document);
+                let field = {
+                    name: this.isEdit ? this.currentFieldName : this.inputObj.value,
+                    caption: this.inputObj.value,
+                    formula: dropField.value
+                };
+                this.createConfirmDialog(this.parent.localeObj.getConstant('alert'), this.parent.localeObj.getConstant('removeCalculatedField'), field, true, treeNode);
             }
-            customFormat.dataBind();
         }
-        else if (node.tagName === 'LI' && (node.querySelector('.' + CALC_EDITED) &&
-            node.querySelector('.' + CALC_EDITED).classList.contains('e-list-icon') && edited ||
-            (this.parent.dataType === 'olap' && !node.classList.contains('e-active')))) {
-            this.isEdit = false;
-            this.inputObj.value = '';
-            this.inputObj.dataBind();
-            let dialogElement = this.dialog.element;
-            let customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);
-            customFormat.value = '';
-            customFormat.dataBind();
-            if (this.parent.dataType === 'olap') {
-                let hierarchyDrop = getInstance(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement), DropDownList);
-                let formatDrop = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
-                let memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement), DropDownList);
-                let fieldTitle = select('#' + this.parentID + '_' + 'FieldNameTitle', dialogElement);
-                /* eslint-enable max-len */
-                fieldTitle.innerHTML = this.parent.localeObj.getConstant('fieldTitle');
-                hierarchyDrop.index = 0;
-                hierarchyDrop.dataBind();
-                formatDrop.index = 0;
-                formatDrop.dataBind();
-                memberTypeDrop.index = 0;
-                memberTypeDrop.readonly = false;
-                memberTypeDrop.dataBind();
-            }
-            else {
-                addClass(this.treeObj.element.querySelectorAll('.' + CALC_EDITED), CALC_EDIT);
-                removeClass(this.treeObj.element.querySelectorAll('.' + CALC_EDITED), CALC_EDITED);
-                node.querySelector('.' + CALC_EDIT).setAttribute('title', this.parent.localeObj.getConstant('edit'));
-            }
-            select('#' + this.parentID + 'droppable', document).value = '';
-        }
-        else if (node.tagName === 'LI' && (node.querySelector('.' + GRID_REMOVE) &&
-            node.querySelector('.' + GRID_REMOVE).classList.contains('e-list-icon')) && !edit && !edited) {
-            let dropField = select('#' + this.parentID + 'droppable', document);
-            let field = {
-                name: this.isEdit ? this.currentFieldName : this.inputObj.value,
-                caption: this.inputObj.value,
-                formula: dropField.value
-            };
-            this.createConfirmDialog(this.parent.localeObj.getConstant('alert'), this.parent.localeObj.getConstant('removeCalculatedField'), field, true, treeNode);
+        catch (execption) {
+            this.parent.actionFailureMethod(execption);
         }
     }
     removeCalcField(node) {
@@ -31382,6 +32199,12 @@ class CalculatedField {
             this.parent.isRequiredUpdate = false;
         }
         try {
+            let actionInfo = {
+                calculatedFieldInfo: this.parent.lastCalcFieldInfo
+            };
+            this.parent.actionObj.actionInfo = actionInfo;
+            let actionName = (this.parent.actionObj.actionName == editCalculatedField) ? calculatedFieldEdited : calculatedFieldApplied;
+            this.parent.actionObj.actionName = actionName;
             this.parent.updateDataSource(false);
             let pivot = (this.parent.getModuleName() === 'pivotfieldlist' && this.parent.pivotGridModule) ?
                 this.parent.pivotGridModule : this.parent;
@@ -32823,7 +33646,7 @@ class FieldList {
     update() {
         let currentWidth;
         if (this.parent.currentView !== 'Table') {
-            currentWidth = this.parent.chart ? this.parent.chartModule.getCalulatedWidth() : currentWidth;
+            currentWidth = this.parent.chart ? this.parent.pivotChartModule.getCalulatedWidth() : currentWidth;
         }
         else {
             currentWidth = this.parent.grid ? this.parent.grid.element.offsetWidth : currentWidth;
@@ -33292,7 +34115,7 @@ class GroupingBar {
             currentWidth = this.parent.grid ? this.parent.grid.element.offsetWidth : currentWidth;
         }
         else {
-            currentWidth = this.parent.chart ? this.parent.chartModule.getCalulatedWidth() : currentWidth;
+            currentWidth = this.parent.chart ? this.parent.pivotChartModule.getCalulatedWidth() : currentWidth;
         }
         if (currentWidth) {
             let actWidth = currentWidth < 400 ? 400 : currentWidth;
@@ -33562,15 +34385,17 @@ class ConditionalFormatting {
             },
             {
                 click: this.applyButtonClick.bind(this),
+                isFlat: true,
                 buttonModel: {
-                    cssClass: FLAT_CLASS + ' ' + FORMAT_APPLY_BUTTON,
+                    isPrimary: true, cssClass: FORMAT_APPLY_BUTTON,
                     content: this.parent.localeObj.getConstant('apply')
                 }
             },
             {
                 click: this.cancelButtonClick.bind(this),
+                isFlat: true,
                 buttonModel: {
-                    cssClass: FLAT_CLASS + ' ' + FORMAT_CANCEL_BUTTON,
+                    cssClass: FORMAT_CANCEL_BUTTON,
                     content: this.parent.localeObj.getConstant('cancel')
                 }
             }
@@ -33623,6 +34448,10 @@ class ConditionalFormatting {
     applyButtonClick() {
         if (this.refreshConditionValues()) {
             this.parent.setProperties({ dataSourceSettings: { conditionalFormatSettings: this.newFormat } }, true);
+            let actionInfo = {
+                conditionalFormattingInfo: this.parent.dataSourceSettings.conditionalFormatSettings
+            };
+            this.parent.actionObj.actionInfo = actionInfo;
             this.parent.renderPivotGrid();
             this.dialog.close();
         }
@@ -34319,12 +35148,22 @@ class Toolbar$2 {
     }
     /* eslint-enable */
     reportChange(args) {
-        this.dropArgs = args;
-        if (this.parent.isModified && this.currentReport !== '') {
-            this.createConfirmDialog(this.parent.localeObj.getConstant('alert'), this.parent.localeObj.getConstant('newReportConfirm'));
+        this.parent.actionObj.actionName = reportChange;
+        if (this.parent.actionBeginMethod()) {
+            args.cancel = true;
+            return;
         }
-        else {
-            this.reportLoad(args);
+        try {
+            this.dropArgs = args;
+            if (this.parent.isModified && this.currentReport !== '') {
+                this.createConfirmDialog(this.parent.localeObj.getConstant('alert'), this.parent.localeObj.getConstant('newReportConfirm'));
+            }
+            else {
+                this.reportLoad(args);
+            }
+        }
+        catch (execption) {
+            this.parent.actionFailureMethod(execption);
         }
     }
     reportLoad(args) {
@@ -34332,6 +35171,10 @@ class Toolbar$2 {
             let loadArgs = {
                 reportName: args.itemData.value
             };
+            let actionInfo = {
+                reportName: args.itemData.value
+            };
+            this.parent.actionObj.actionInfo = actionInfo;
             this.parent.trigger(loadReport, loadArgs, (observedArgs) => {
                 this.currentReport = observedArgs.reportName;
                 this.parent.isModified = false;
@@ -34344,7 +35187,15 @@ class Toolbar$2 {
                 report: this.parent.getPersistData(),
                 reportName: this.currentReport
             };
+            this.parent.actionObj.actionName = this.parent.getActionCompleteName();
+            let actionInfo = {
+                reportName: this.currentReport
+            };
+            this.parent.actionObj.actionInfo = actionInfo;
             this.parent.trigger(saveReport, saveArgs);
+            if (this.parent.actionObj.actionName) {
+                this.parent.actionCompleteMethod();
+            }
             this.parent.isModified = false;
         }
         else if (this.currentReport === '' && (args.item.id === (this.parent.element.id + 'save') || args.item.id === (this.parent.element.id + 'saveas'))) {
@@ -34408,54 +35259,67 @@ class Toolbar$2 {
         }
     }
     actionClick(args) {
-        switch (args.item.id) {
-            case (this.parent.element.id + 'save'):
-            case (this.parent.element.id + 'saveas'):
-                this.saveReport(args);
-                break;
-            case (this.parent.element.id + 'remove'):
-                this.action = 'Remove';
-                if (this.currentReport && this.currentReport !== '') {
-                    this.createConfirmDialog(this.parent.localeObj.getConstant('alert'), this.parent.localeObj.getConstant('removeConfirm'));
-                }
-                else {
-                    this.parent.pivotCommon.errorDialog.createErrorDialog(this.parent.localeObj.getConstant('error'), this.parent.localeObj.getConstant('emptyReport'));
-                }
-                return;
-            case (this.parent.element.id + 'rename'):
-                this.renameReport(args);
-                break;
-            case (this.parent.element.id + 'new'):
-                this.action = 'New';
-                this.newArgs = args;
-                if (this.parent.isModified && this.currentReport && this.currentReport !== '') {
-                    this.createConfirmDialog(this.parent.localeObj.getConstant('alert'), this.parent.localeObj.getConstant('newReportConfirm'));
-                }
-                else {
-                    this.createNewReport(args);
-                }
-                break;
-            case (this.parent.element.id + 'load'):
-                this.action = 'Load';
-                break;
-            case (this.parent.element.id + 'fieldlist'):
-                if (this.parent.pivotFieldListModule && this.parent.pivotFieldListModule.dialogRenderer) {
-                    this.parent.pivotFieldListModule.dialogRenderer.fieldListDialog.show();
-                }
-                break;
-            case (this.parent.element.id + 'formatting'):
-                if (this.parent.conditionalFormattingModule) {
-                    this.parent.conditionalFormattingModule.showConditionalFormattingDialog();
-                }
-                break;
-            case (this.parent.element.id + 'mdxQuery'):
-                this.mdxQueryDialog(args);
-                break;
-            case (this.parent.element.id + 'numberFormatting'):
-                if (this.parent.numberFormattingModule) {
-                    this.parent.numberFormattingModule.showNumberFormattingDialog();
-                }
-                break;
+        let actionName = (args.item.id == "PivotViewnew") ? addNewReport : (args.item.id == "PivotViewsave") ? saveCurrentReport : (args.item.id == "PivotViewsaveas") ? saveAsCurrentReport
+            : (args.item.id == "PivotViewrename") ? renameCurrentReport : (args.item.id == "PivotViewremove") ? removeCurrentReport : (args.item.id == "PivotViewload") ? loadReports
+                : (args.item.id == "PivotViewformatting") ? openConditionalFormatting : (args.item.id == "PivotViewnumberFormatting") ? openNumberFormatting
+                    : (args.item.id == "PivotViewmdxQuery") ? MdxQuery : (args.item.id == "PivotViewfieldlist") ? showFieldList : '';
+        this.parent.actionObj.actionName = actionName;
+        if (this.parent.actionBeginMethod()) {
+            return;
+        }
+        try {
+            switch (args.item.id) {
+                case (this.parent.element.id + 'save'):
+                case (this.parent.element.id + 'saveas'):
+                    this.saveReport(args);
+                    break;
+                case (this.parent.element.id + 'remove'):
+                    this.action = 'Remove';
+                    if (this.currentReport && this.currentReport !== '') {
+                        this.createConfirmDialog(this.parent.localeObj.getConstant('alert'), this.parent.localeObj.getConstant('removeConfirm'));
+                    }
+                    else {
+                        this.parent.pivotCommon.errorDialog.createErrorDialog(this.parent.localeObj.getConstant('error'), this.parent.localeObj.getConstant('emptyReport'));
+                    }
+                    return;
+                case (this.parent.element.id + 'rename'):
+                    this.renameReport(args);
+                    break;
+                case (this.parent.element.id + 'new'):
+                    this.action = 'New';
+                    this.newArgs = args;
+                    if (this.parent.isModified && this.currentReport && this.currentReport !== '') {
+                        this.createConfirmDialog(this.parent.localeObj.getConstant('alert'), this.parent.localeObj.getConstant('newReportConfirm'));
+                    }
+                    else {
+                        this.createNewReport(args);
+                    }
+                    break;
+                case (this.parent.element.id + 'load'):
+                    this.action = 'Load';
+                    break;
+                case (this.parent.element.id + 'fieldlist'):
+                    if (this.parent.pivotFieldListModule && this.parent.pivotFieldListModule.dialogRenderer) {
+                        this.parent.pivotFieldListModule.dialogRenderer.fieldListDialog.show();
+                    }
+                    break;
+                case (this.parent.element.id + 'formatting'):
+                    if (this.parent.conditionalFormattingModule) {
+                        this.parent.conditionalFormattingModule.showConditionalFormattingDialog();
+                    }
+                    break;
+                case (this.parent.element.id + 'mdxQuery'):
+                    this.mdxQueryDialog(args);
+                    break;
+                case (this.parent.element.id + 'numberFormatting'):
+                    if (this.parent.numberFormattingModule) {
+                        this.parent.numberFormattingModule.showNumberFormattingDialog();
+                    }
+                    break;
+            }
+        }
+        catch (execption) {
+            this.parent.actionFailureMethod(execption);
         }
     }
     renderDialog() {
@@ -34578,6 +35442,10 @@ class Toolbar$2 {
                     report: _this.parent.getPersistData(),
                     reportName: reportInput.value
                 };
+                let actionInfo = {
+                    reportName: reportInput.value
+                };
+                this.parent.actionObj.actionInfo = actionInfo;
                 _this.parent.trigger(saveReport, saveArgs);
                 _this.parent.isModified = false;
                 _this.updateReportList();
@@ -34610,6 +35478,10 @@ class Toolbar$2 {
                     report: _this.parent.getPersistData(),
                     reportName: reportInput.value
                 };
+                let actionInfo = {
+                    reportName: reportInput.value
+                };
+                this.parent.actionObj.actionInfo = actionInfo;
                 _this.parent.trigger(saveReport, saveArgs);
                 _this.parent.isModified = false;
                 _this.updateReportList();
@@ -34644,12 +35516,20 @@ class Toolbar$2 {
                     reportName: _this.currentReport,
                     rename: reportInput.value
                 };
+                let actionInfo = {
+                    reportName: { oldName: _this.currentReport, newName: reportInput.value }
+                };
+                this.parent.actionObj.actionInfo = actionInfo;
                 _this.parent.trigger(renameReport, renameArgs);
                 _this.currentReport = reportInput.value;
                 _this.updateReportList();
                 _this.dialog.hide();
             });
         }
+        this.parent.actionObj.actionName = this.parent.getActionCompleteName();
+        if (this.parent.actionObj.actionName) {
+            this.parent.actionCompleteMethod();
+        }
     }
     createNewReport(args) {
         this.dialogShow(args);
@@ -34707,6 +35587,10 @@ class Toolbar$2 {
             let removeArgs = {
                 reportName: this.currentReport
             };
+            let actionInfo = {
+                reportName: this.currentReport
+            };
+            this.parent.actionObj.actionInfo = actionInfo;
             this.parent.trigger(removeReport, removeArgs);
             let reports = this.fetchReports();
             if (reports.reportName && reports.reportName.length > 0) {
@@ -34725,6 +35609,10 @@ class Toolbar$2 {
                 this.action = '';
             }
             this.updateReportList();
+            this.parent.actionObj.actionName = reportRemoved;
+            if (this.parent.actionObj.actionName) {
+                this.parent.actionCompleteMethod();
+            }
         }
         else if (this.action === 'New' || (this.action !== 'Save' && this.action !== 'Rename' && this.action !== 'New')) {
             if (this.currentReport && this.currentReport !== '' && this.parent.isModified) {
@@ -34732,12 +35620,22 @@ class Toolbar$2 {
                     report: this.parent.getPersistData(),
                     reportName: this.currentReport
                 };
+                let actionInfo = {
+                    reportName: this.currentReport
+                };
+                this.parent.actionObj.actionInfo = actionInfo;
+                this.parent.actionObj.actionName = reportSaved;
+                if (this.parent.actionObj.actionName) {
+                    this.parent.actionCompleteMethod();
+                }
                 this.parent.trigger(saveReport, saveArgs);
                 this.parent.isModified = false;
                 if (this.action === 'New') {
+                    this.parent.actionObj.actionName = addNewReport;
                     this.createNewReport(this.newArgs);
                 }
                 else {
+                    this.parent.actionObj.actionName = reportChange;
                     this.reportLoad(this.dropArgs);
                 }
             }
@@ -34842,6 +35740,7 @@ class Toolbar$2 {
             this.chartMenu = new Menu({
                 items: menu, enableRtl: this.parent.enableRtl,
                 locale: this.parent.locale,
+                cssClass: TOOLBAR_MENU,
                 select: this.menuItemClick.bind(this),
                 beforeOpen: this.whitespaceRemove.bind(this),
                 onClose: (args) => {
@@ -34897,6 +35796,7 @@ class Toolbar$2 {
             this.exportMenu = new Menu({
                 items: menu, enableRtl: this.parent.enableRtl,
                 locale: this.parent.locale,
+                cssClass: TOOLBAR_MENU,
                 select: this.menuItemClick.bind(this), beforeOpen: this.updateExportMenu.bind(this),
                 onClose: (args) => {
                     this.focusToolBar();
@@ -34934,6 +35834,7 @@ class Toolbar$2 {
             this.subTotalMenu = new Menu({
                 items: menu, enableRtl: this.parent.enableRtl,
                 locale: this.parent.locale,
+                cssClass: TOOLBAR_MENU,
                 select: this.menuItemClick.bind(this), beforeOpen: this.updateSubtotalSelection.bind(this),
                 onClose: (args) => {
                     this.focusToolBar();
@@ -34971,6 +35872,7 @@ class Toolbar$2 {
             this.grandTotalMenu = new Menu({
                 items: menu, enableRtl: this.parent.enableRtl,
                 locale: this.parent.locale,
+                cssClass: TOOLBAR_MENU,
                 select: this.menuItemClick.bind(this), beforeOpen: this.updateGrandtotalSelection.bind(this),
                 onClose: (args) => {
                     this.focusToolBar();
@@ -34998,6 +35900,7 @@ class Toolbar$2 {
             this.formattingMenu = new Menu({
                 items: menu, enableRtl: this.parent.enableRtl,
                 locale: this.parent.locale,
+                cssClass: TOOLBAR_MENU,
                 select: this.menuItemClick.bind(this)
             });
             this.formattingMenu.isStringTemplate = true;
@@ -35195,181 +36098,202 @@ class Toolbar$2 {
     menuItemClick(args) {
         let exportArgs = {};
         let type;
+        let actionName = (args.item.id == "PivotViewgrid") ? tableView : (args.item.id == "PivotView_Column") ? chartView : (args.item.id == "PivotView_Bar") ? chartView : (args.item.id == "PivotView_Line") ? chartView
+            : (args.item.id == "PivotView_Area") ? chartView : (args.item.id == "PivotView_Scatter") ? chartView : (args.item.id == "PivotView_Polar") ? chartView : (args.item.id == "PivotView_ChartMoreOption") ? chartView
+                : (args.item.id == "PivotView_multipleAxes") ? multipleAxis : (args.item.id == "PivotView_showLegend") ? showLegend : (args.item.id == "PivotViewpdf") ? pdfExport : (args.item.id == "PivotViewpng") ? pngExport
+                    : (args.item.id == "PivotViewexcel") ? excelExport : (args.item.id == "PivotViewcsv") ? csvExport : (args.item.id == "PivotViewjpeg") ? jpegExport : (args.item.id == "PivotViewsvg") ? svgExport
+                        : (args.item.id == "PivotViewnotsubtotal") ? hideSubTotals : (args.item.id == "PivotViewsubtotalrow") ? subTotalsRow : (args.item.id == "PivotViewsubtotalcolumn") ? subTotalsColumn
+                            : (args.item.id == "PivotViewsubtotal") ? showSubTotals : (args.item.id == "PivotViewnotgrandtotal") ? hideGrandTotals : (args.item.id == "PivotViewgrandtotalrow") ? grandTotalsRow
+                                : (args.item.id == "PivotViewgrandtotalcolumn") ? grandTotalsColumn : (args.item.id == "PivotViewgrandtotal") ? showGrandTotals
+                                    : (args.item.id == "PivotViewnumberFormattingMenu") ? numberFormattingMenu : (args.item.id == "PivotViewconditionalFormattingMenu") ? conditionalFormattingMenu : '';
+        this.parent.actionObj.actionName = actionName;
+        if (this.parent.actionBeginMethod()) {
+            return;
+        }
         if (this.getAllChartItems().indexOf(args.item.id.split(this.parent.element.id + '_')[1]) > -1 ||
             (args.item.id.split(this.parent.element.id + '_')[1] === 'ChartMoreOption') ||
             (args.item.id.split(this.parent.element.id + '_')[1] === 'multipleAxes') ||
             (args.item.id.split(this.parent.element.id + '_')[1] === 'showLegend')) {
             type = args.item.id.split(this.parent.element.id + '_')[1];
         }
-        switch (args.item.id) {
-            case (this.parent.element.id + 'grid'):
-                if (this.parent.grid && this.parent.chart) {
-                    this.parent.grid.element.style.display = '';
-                    this.parent.chart.element.style.display = 'none';
-                    if (this.parent.chartSettings.enableMultipleAxis && this.parent.chartSettings.enableScrollOnMultiAxis) {
-                        this.parent.element.querySelector('.e-pivotchart').style.display = 'none';
-                    }
-                    this.parent.currentView = 'Table';
-                    this.parent.setProperties({ displayOption: { primary: 'Table' } }, true);
-                    if (this.parent.showGroupingBar && this.parent.groupingBarModule) {
-                        this.parent.element.querySelector('.e-pivot-grouping-bar').style.display = '';
-                        this.parent.element.querySelector('.e-chart-grouping-bar').style.display = 'none';
+        try {
+            switch (args.item.id) {
+                case (this.parent.element.id + 'grid'):
+                    if (this.parent.grid && this.parent.chart) {
+                        this.parent.grid.element.style.display = '';
+                        this.parent.chart.element.style.display = 'none';
+                        if (this.parent.chartSettings.enableMultipleAxis && this.parent.chartSettings.enableScrollOnMultiAxis) {
+                            this.parent.element.querySelector('.e-pivotchart').style.display = 'none';
+                        }
+                        this.parent.currentView = 'Table';
+                        this.parent.setProperties({ displayOption: { primary: 'Table' } }, true);
+                        if (this.parent.showGroupingBar && this.parent.groupingBarModule) {
+                            this.parent.element.querySelector('.e-pivot-grouping-bar').style.display = '';
+                            this.parent.element.querySelector('.e-chart-grouping-bar').style.display = 'none';
+                        }
+                        let actionInfo = {
+                            toolbarInfo: { displayOption: this.parent.displayOption, gridSettings: this.parent.gridSettings }
+                        };
+                        this.parent.actionObj.actionInfo = actionInfo;
+                        this.parent.layoutRefresh();
                     }
-                    this.parent.layoutRefresh();
-                }
-                break;
-            case (this.parent.element.id + 'pdf'):
-                if (this.parent.currentView === 'Table') {
+                    break;
+                case (this.parent.element.id + 'pdf'):
+                    if (this.parent.currentView === 'Table') {
+                        exportArgs = {
+                            pdfExportProperties: { fileName: 'Export.pdf' },
+                            pdfDoc: undefined,
+                            isBlob: false,
+                            isMultipleExport: false
+                        };
+                        this.parent.trigger(beforeExport, exportArgs, (observedArgs) => {
+                            this.parent.pdfExport(observedArgs.pdfExportProperties, observedArgs.isMultipleExport, observedArgs.pdfDoc, observedArgs.isBlob);
+                        });
+                    }
+                    else {
+                        exportArgs = {
+                            width: undefined,
+                            height: undefined,
+                            orientation: PdfPageOrientation.Landscape,
+                            type: 'PDF',
+                            fileName: 'result',
+                        };
+                        this.parent.trigger(beforeExport, exportArgs, (observedArgs) => {
+                            this.parent.chartExport(observedArgs.type, observedArgs.fileName, observedArgs.orientation, observedArgs.width, observedArgs.height);
+                        });
+                    }
+                    break;
+                case (this.parent.element.id + 'excel'):
+                    exportArgs = {
+                        excelExportProperties: { fileName: 'Export.xlsx' },
+                        isBlob: undefined,
+                        isMultipleExport: undefined,
+                        workbook: undefined
+                    };
+                    this.parent.trigger(beforeExport, exportArgs, (observedArgs) => {
+                        this.parent.excelExport(observedArgs.excelExportProperties, observedArgs.isMultipleExport, observedArgs.workbook, observedArgs.isBlob);
+                    });
+                    break;
+                case (this.parent.element.id + 'csv'):
                     exportArgs = {
-                        pdfExportProperties: { fileName: 'Export.pdf' },
-                        pdfDoc: undefined,
+                        excelExportProperties: { fileName: 'Export.csv' },
                         isBlob: false,
-                        isMultipleExport: false
+                        isMultipleExport: false,
+                        workbook: undefined
                     };
                     this.parent.trigger(beforeExport, exportArgs, (observedArgs) => {
-                        this.parent.pdfExport(observedArgs.pdfExportProperties, observedArgs.isMultipleExport, observedArgs.pdfDoc, observedArgs.isBlob);
+                        this.parent.csvExport(observedArgs.excelExportProperties, observedArgs.isMultipleExport, observedArgs.workbook, observedArgs.isBlob);
                     });
-                }
-                else {
+                    break;
+                case (this.parent.element.id + 'png'):
                     exportArgs = {
+                        type: 'PNG',
                         width: undefined,
                         height: undefined,
+                        fileName: 'result',
                         orientation: PdfPageOrientation.Landscape,
-                        type: 'PDF',
+                    };
+                    this.parent.trigger(beforeExport, exportArgs, (observedArgs) => {
+                        this.parent.chartExport(observedArgs.type, observedArgs.fileName, observedArgs.orientation, observedArgs.width, observedArgs.height);
+                    });
+                    break;
+                case (this.parent.element.id + 'jpeg'):
+                    exportArgs = {
+                        type: 'JPEG',
                         fileName: 'result',
+                        orientation: PdfPageOrientation.Landscape,
+                        width: undefined,
+                        height: undefined,
                     };
                     this.parent.trigger(beforeExport, exportArgs, (observedArgs) => {
                         this.parent.chartExport(observedArgs.type, observedArgs.fileName, observedArgs.orientation, observedArgs.width, observedArgs.height);
                     });
-                }
-                break;
-            case (this.parent.element.id + 'excel'):
-                exportArgs = {
-                    excelExportProperties: { fileName: 'Export.xlsx' },
-                    isBlob: undefined,
-                    isMultipleExport: undefined,
-                    workbook: undefined
-                };
-                this.parent.trigger(beforeExport, exportArgs, (observedArgs) => {
-                    this.parent.excelExport(observedArgs.excelExportProperties, observedArgs.isMultipleExport, observedArgs.workbook, observedArgs.isBlob);
-                });
-                break;
-            case (this.parent.element.id + 'csv'):
-                exportArgs = {
-                    excelExportProperties: { fileName: 'Export.csv' },
-                    isBlob: false,
-                    isMultipleExport: false,
-                    workbook: undefined
-                };
-                this.parent.trigger(beforeExport, exportArgs, (observedArgs) => {
-                    this.parent.csvExport(observedArgs.excelExportProperties, observedArgs.isMultipleExport, observedArgs.workbook, observedArgs.isBlob);
-                });
-                break;
-            case (this.parent.element.id + 'png'):
-                exportArgs = {
-                    type: 'PNG',
-                    width: undefined,
-                    height: undefined,
-                    fileName: 'result',
-                    orientation: PdfPageOrientation.Landscape,
-                };
-                this.parent.trigger(beforeExport, exportArgs, (observedArgs) => {
-                    this.parent.chartExport(observedArgs.type, observedArgs.fileName, observedArgs.orientation, observedArgs.width, observedArgs.height);
-                });
-                break;
-            case (this.parent.element.id + 'jpeg'):
-                exportArgs = {
-                    type: 'JPEG',
-                    fileName: 'result',
-                    orientation: PdfPageOrientation.Landscape,
-                    width: undefined,
-                    height: undefined,
-                };
-                this.parent.trigger(beforeExport, exportArgs, (observedArgs) => {
-                    this.parent.chartExport(observedArgs.type, observedArgs.fileName, observedArgs.orientation, observedArgs.width, observedArgs.height);
-                });
-                break;
-            case (this.parent.element.id + 'svg'):
-                exportArgs = {
-                    width: undefined,
-                    height: undefined,
-                    type: 'SVG',
-                    fileName: 'result',
-                    orientation: PdfPageOrientation.Landscape,
-                };
-                this.parent.trigger(beforeExport, exportArgs, (observedArgs) => {
-                    this.parent.chartExport(observedArgs.type, observedArgs.fileName, observedArgs.orientation, observedArgs.width, observedArgs.height);
-                });
-                break;
-            case (this.parent.element.id + 'notsubtotal'):
-                this.parent.setProperties({ dataSourceSettings: { showSubTotals: false, showColumnSubTotals: false, showRowSubTotals: false } }, true);
-                this.parent.refreshData();
-                break;
-            case (this.parent.element.id + 'subtotalrow'):
-                this.parent.setProperties({ dataSourceSettings: { showSubTotals: true, showColumnSubTotals: false, showRowSubTotals: true } }, true);
-                this.parent.refreshData();
-                break;
-            case (this.parent.element.id + 'subtotalcolumn'):
-                this.parent.setProperties({ dataSourceSettings: { showSubTotals: true, showColumnSubTotals: true, showRowSubTotals: false } }, true);
-                this.parent.refreshData();
-                break;
-            case (this.parent.element.id + 'subtotal'):
-                this.parent.setProperties({ dataSourceSettings: { showSubTotals: true, showColumnSubTotals: true, showRowSubTotals: true } }, true);
-                this.parent.refreshData();
-                break;
-            case (this.parent.element.id + 'notgrandtotal'):
-                this.parent.setProperties({ dataSourceSettings: { showGrandTotals: false, showColumnGrandTotals: false, showRowGrandTotals: false } }, true);
-                this.parent.refreshData();
-                break;
-            case (this.parent.element.id + 'grandtotalrow'):
-                this.parent.setProperties({ dataSourceSettings: { showGrandTotals: true, showColumnGrandTotals: false, showRowGrandTotals: true } }, true);
-                this.parent.refreshData();
-                break;
-            case (this.parent.element.id + 'grandtotalcolumn'):
-                this.parent.setProperties({ dataSourceSettings: { showGrandTotals: true, showColumnGrandTotals: true, showRowGrandTotals: false } }, true);
-                this.parent.refreshData();
-                break;
-            case (this.parent.element.id + 'grandtotal'):
-                this.parent.setProperties({ dataSourceSettings: { showGrandTotals: true, showColumnGrandTotals: true, showRowGrandTotals: true } }, true);
-                this.parent.refreshData();
-                break;
-            case (this.parent.element.id + 'numberFormattingMenu'):
-                if (this.parent.numberFormattingModule) {
-                    this.parent.numberFormattingModule.showNumberFormattingDialog();
-                }
-                break;
-            case (this.parent.element.id + 'conditionalFormattingMenu'):
-                if (this.parent.conditionalFormattingModule) {
-                    this.parent.conditionalFormattingModule.showConditionalFormattingDialog();
-                }
-                break;
-            case (this.parent.element.id + '_' + type):
-                if (args.item && args.item.text) {
-                    if (type === 'ChartMoreOption') {
-                        this.createChartTypeDialog();
-                    }
-                    else if (type === 'multipleAxes') {
-                        if (this.parent.chartSettings.enableScrollOnMultiAxis) {
-                            this.isMultiAxisChange = true;
-                        }
-                        this.parent.chartSettings.enableMultipleAxis = !this.parent.chartSettings.enableMultipleAxis;
-                        this.updateChartType(this.parent.chartSettings.chartSeries.type, true);
+                    break;
+                case (this.parent.element.id + 'svg'):
+                    exportArgs = {
+                        width: undefined,
+                        height: undefined,
+                        type: 'SVG',
+                        fileName: 'result',
+                        orientation: PdfPageOrientation.Landscape,
+                    };
+                    this.parent.trigger(beforeExport, exportArgs, (observedArgs) => {
+                        this.parent.chartExport(observedArgs.type, observedArgs.fileName, observedArgs.orientation, observedArgs.width, observedArgs.height);
+                    });
+                    break;
+                case (this.parent.element.id + 'notsubtotal'):
+                    this.parent.setProperties({ dataSourceSettings: { showSubTotals: false, showColumnSubTotals: false, showRowSubTotals: false } }, true);
+                    this.parent.refreshData();
+                    break;
+                case (this.parent.element.id + 'subtotalrow'):
+                    this.parent.setProperties({ dataSourceSettings: { showSubTotals: true, showColumnSubTotals: false, showRowSubTotals: true } }, true);
+                    this.parent.refreshData();
+                    break;
+                case (this.parent.element.id + 'subtotalcolumn'):
+                    this.parent.setProperties({ dataSourceSettings: { showSubTotals: true, showColumnSubTotals: true, showRowSubTotals: false } }, true);
+                    this.parent.refreshData();
+                    break;
+                case (this.parent.element.id + 'subtotal'):
+                    this.parent.setProperties({ dataSourceSettings: { showSubTotals: true, showColumnSubTotals: true, showRowSubTotals: true } }, true);
+                    this.parent.refreshData();
+                    break;
+                case (this.parent.element.id + 'notgrandtotal'):
+                    this.parent.setProperties({ dataSourceSettings: { showGrandTotals: false, showColumnGrandTotals: false, showRowGrandTotals: false } }, true);
+                    this.parent.refreshData();
+                    break;
+                case (this.parent.element.id + 'grandtotalrow'):
+                    this.parent.setProperties({ dataSourceSettings: { showGrandTotals: true, showColumnGrandTotals: false, showRowGrandTotals: true } }, true);
+                    this.parent.refreshData();
+                    break;
+                case (this.parent.element.id + 'grandtotalcolumn'):
+                    this.parent.setProperties({ dataSourceSettings: { showGrandTotals: true, showColumnGrandTotals: true, showRowGrandTotals: false } }, true);
+                    this.parent.refreshData();
+                    break;
+                case (this.parent.element.id + 'grandtotal'):
+                    this.parent.setProperties({ dataSourceSettings: { showGrandTotals: true, showColumnGrandTotals: true, showRowGrandTotals: true } }, true);
+                    this.parent.refreshData();
+                    break;
+                case (this.parent.element.id + 'numberFormattingMenu'):
+                    if (this.parent.numberFormattingModule) {
+                        this.parent.numberFormattingModule.showNumberFormattingDialog();
                     }
-                    else if (this.getAllChartItems().indexOf(type) > -1) {
-                        this.updateChartType(type, false);
+                    break;
+                case (this.parent.element.id + 'conditionalFormattingMenu'):
+                    if (this.parent.conditionalFormattingModule) {
+                        this.parent.conditionalFormattingModule.showConditionalFormattingDialog();
                     }
-                    else if (type === 'showLegend') {
-                        this.parent.chart.legendSettings.visible = !this.showLableState;
-                        if (this.parent.chartSettings.legendSettings) {
-                            this.parent.chartSettings.legendSettings.visible = !this.showLableState;
+                    break;
+                case (this.parent.element.id + '_' + type):
+                    if (args.item && args.item.text) {
+                        if (type === 'ChartMoreOption') {
+                            this.createChartTypeDialog();
+                        }
+                        else if (type === 'multipleAxes') {
+                            if (this.parent.chartSettings.enableScrollOnMultiAxis) {
+                                this.isMultiAxisChange = true;
+                            }
+                            this.parent.chartSettings.enableMultipleAxis = !this.parent.chartSettings.enableMultipleAxis;
+                            this.updateChartType(this.parent.chartSettings.chartSeries.type, true);
                         }
-                        else {
-                            this.parent.setProperties({ chartSettings: { legendSettings: { visible: !this.showLableState } } }, true);
+                        else if (this.getAllChartItems().indexOf(type) > -1) {
+                            this.updateChartType(type, false);
+                        }
+                        else if (type === 'showLegend') {
+                            this.parent.chart.legendSettings.visible = !this.showLableState;
+                            if (this.parent.chartSettings.legendSettings) {
+                                this.parent.chartSettings.legendSettings.visible = !this.showLableState;
+                            }
+                            else {
+                                this.parent.setProperties({ chartSettings: { legendSettings: { visible: !this.showLableState } } }, true);
+                            }
+                            this.updateChartType(this.parent.chartSettings.chartSeries.type, true);
                         }
-                        this.updateChartType(this.parent.chartSettings.chartSeries.type, true);
                     }
-                }
-                break;
+                    break;
+            }
+        }
+        catch (execption) {
+            this.parent.actionFailureMethod(execption);
         }
         /* eslint-enable max-len */
     }
@@ -35460,14 +36384,20 @@ class Toolbar$2 {
             if (this.parent.chart) {
                 this.parent.currentView = 'Chart';
                 this.parent.setProperties({ displayOption: { primary: 'Chart' } }, true);
-                this.parent.chart.element.style.width = formatUnit(this.parent.grid ? this.parent.getGridWidthAsNumber() : this.parent.getWidthAsNumber()); /* eslint-disable-line */
+                if (this.parent.chartSettings.enableScrollOnMultiAxis && this.parent.chartSettings.enableMultipleAxis) {
+                    this.parent.element.querySelector('.' + PIVOTCHART).style.width = formatUnit(this.parent.grid ? this.parent.getGridWidthAsNumber() : this.parent.getWidthAsNumber()); /* eslint-disable-line */
+                }
                 this.parent.chart.setProperties({ width: formatUnit(this.parent.grid ? this.parent.getGridWidthAsNumber() : this.parent.getWidthAsNumber()) }, true); /* eslint-disable-line */
                 if (this.parent.chartSettings.chartSeries.type === type && !isMultiAxis) {
-                    this.parent.chartModule.updateView();
+                    this.parent.pivotChartModule.updateView();
                 }
                 else {
                     this.parent.chartSettings.chartSeries.type = type;
                 }
+                let actionInfo = {
+                    toolbarInfo: { displayOption: this.parent.displayOption, chartSettings: this.parent.chartSettings }
+                };
+                this.parent.actionObj.actionInfo = actionInfo;
             }
         }
     }
@@ -36027,6 +36957,10 @@ class NumberFormatting {
         this.parent.trigger(numberFormatting, eventArgs, (observedArgs) => {
             if (!observedArgs.cancel) {
                 this.parent.setProperties({ dataSourceSettings: { formatSettings: observedArgs.formatSettings } }, true);
+                let actionInfo = {
+                    numberFormattingInfo: this.parent.dataSourceSettings.formatSettings
+                };
+                this.parent.actionObj.actionInfo = actionInfo;
                 try {
                     this.parent.updateDataSource(false);
                     this.dialog.close();
@@ -36684,7 +37618,7 @@ class Grouping {
                     for (let j = 0, len = field.customGroups.length; j < len; j++) {
                         if (field.customGroups[j]) {
                             let group = field.customGroups[j];
-                            if (group.items && PivotUtil.isContainCommonElements(group.items, selectedOptions)) {
+                            if (group.items && PivotExportUtil.isContainCommonElements(group.items, selectedOptions)) {
                                 splicedItems = this.mergeArray(splicedItems, [group.groupName]);
                                 newItems = this.mergeArray(newItems, group.items);
                                 field.customGroups.splice(j, 1);
@@ -36934,5 +37868,5 @@ class Grouping {
  * Export PivotGrid components
  */
 
-export { GroupingBarSettings, CellEditSettings, ConditionalSettings, HyperlinkSettings, DisplayOption, PivotView, Render, ExcelExport$1 as ExcelExport, PDFExport, KeyboardInteraction, VirtualScroll$1 as VirtualScroll, DrillThrough, PivotChart, PivotFieldList, TreeViewRenderer, AxisFieldRenderer, AxisTableRenderer, DialogRenderer, EventBase, NodeStateModified, DataSourceUpdate, FieldList, CommonKeyboardInteraction, Common, GroupingBar, CalculatedField, ConditionalFormatting, PivotCommon, load, enginePopulating, enginePopulated, onFieldDropped, fieldDrop, beforePivotTableRender, afterPivotTableRender, beforeExport, excelHeaderQueryCellInfo, pdfHeaderQueryCellInfo, excelQueryCellInfo, pdfQueryCellInfo, onPdfCellRender, dataBound, queryCellInfo, headerCellInfo, hyperlinkCellClick, resizing, resizeStop, cellClick, drillThrough, beforeColumnsRender, selected, cellSelecting, drill, cellSelected, cellDeselected, rowSelected, rowDeselected, beginDrillThrough, editCompleted, multiLevelLabelClick, saveReport, fetchReport, loadReport, renameReport, removeReport, newReport, toolbarRender, toolbarClick, chartTooltipRender, chartLoaded, chartLoad, chartResized, chartAxisLabelRender, chartSeriesCreated, aggregateCellInfo, contextMenuClick, contextMenuOpen, fieldListRefreshed, conditionalFormatting, beforePdfExport, beforeExcelExport, memberFiltering, calculatedFieldCreate, memberEditorOpen, fieldRemove, numberFormatting, aggregateMenuOpen, fieldDragStart, chartPointClick, beforeServiceInvoke, initialLoad, uiUpdate, scroll, contentReady, dataReady, initSubComponent, treeViewUpdate, pivotButtonUpdate, initCalculatedField, click, initToolbar, initFormatting, initGrouping, Theme, ErrorDialog, FilterDialog, PivotContextMenu, AggregateMenu, Toolbar$2 as Toolbar, NumberFormatting, Grouping, PivotEngine, PivotUtil, OlapEngine, MDXQuery };
+export { GroupingBarSettings, CellEditSettings, ConditionalSettings, HyperlinkSettings, DisplayOption, PivotView, Render, ExcelExport$1 as ExcelExport, PDFExport, KeyboardInteraction, VirtualScroll$1 as VirtualScroll, DrillThrough, PivotChart, PivotFieldList, TreeViewRenderer, AxisFieldRenderer, AxisTableRenderer, DialogRenderer, EventBase, NodeStateModified, DataSourceUpdate, FieldList, CommonKeyboardInteraction, Common, GroupingBar, CalculatedField, ConditionalFormatting, PivotCommon, load, enginePopulating, enginePopulated, onFieldDropped, fieldDrop, beforePivotTableRender, afterPivotTableRender, beforeExport, excelHeaderQueryCellInfo, pdfHeaderQueryCellInfo, excelQueryCellInfo, pdfQueryCellInfo, onPdfCellRender, dataBound, queryCellInfo, headerCellInfo, hyperlinkCellClick, resizing, resizeStop, cellClick, drillThrough, beforeColumnsRender, selected, cellSelecting, drill, cellSelected, cellDeselected, rowSelected, rowDeselected, beginDrillThrough, editCompleted, multiLevelLabelClick, saveReport, fetchReport, loadReport, renameReport, removeReport, newReport, toolbarRender, toolbarClick, chartTooltipRender, chartLoaded, chartLoad, chartResized, chartAxisLabelRender, chartSeriesCreated, aggregateCellInfo, contextMenuClick, contextMenuOpen, fieldListRefreshed, conditionalFormatting, beforePdfExport, beforeExcelExport, memberFiltering, calculatedFieldCreate, memberEditorOpen, fieldRemove, numberFormatting, aggregateMenuOpen, fieldDragStart, chartPointClick, beforeServiceInvoke, actionBegin, actionComplete, actionFailure, initialLoad, uiUpdate, scroll, contentReady, dataReady, initSubComponent, treeViewUpdate, pivotButtonUpdate, initCalculatedField, click, initToolbar, initFormatting, initGrouping, sortValue, drillUp, drillDown, addNewReport, saveCurrentReport, saveAsCurrentReport, renameCurrentReport, removeCurrentReport, loadReports, openConditionalFormatting, openNumberFormatting, MdxQuery, showFieldList, tableView, chartView, multipleAxis, showLegend, pdfExport, pngExport, excelExport, csvExport, jpegExport, svgExport, hideSubTotals, subTotalsRow, subTotalsColumn, showSubTotals, hideGrandTotals, grandTotalsRow, grandTotalsColumn, showGrandTotals, numberFormattingMenu, conditionalFormattingMenu, reportChange, sortFieldTree, editCalculatedField, sortField, filterField, removeField, openCalculatedField, editRecord, saveEditedRecords, addNewRecord, removeRecord, aggregateField, contextMenuCalculatedField, windowResize, calculatedFieldApplied, editedRecordsSaved, newRecordAdded, recordRemoved, closeFieldlist, fieldTreeSorted, reportSaved, newReportAdded, reportReSaved, reportRenamed, reportRemoved, excelExported, csvExported, pdfExported, pngExported, jpegExported, svgExported, conditionallyFormatted, numberFormatted, tableViewed, chartViewed, subTotalsHidden, subTotalsRowShown, subTotalsColumnShown, subTotalsShown, grandTotalsHidden, grandTotalsRowShown, grandTotalsColumnShown, grandTotalsShown, valueSorted, calculatedFieldEdited, fieldSorted, fieldFiltered, fieldRemoved, fieldAggregated, recordEdited, reportChanged, windowResized, recordUpdated, drillThroughClosed, Theme, ErrorDialog, FilterDialog, PivotContextMenu, AggregateMenu, Toolbar$2 as Toolbar, NumberFormatting, Grouping, PivotEngine, PivotUtil, OlapEngine, MDXQuery };
 //# sourceMappingURL=ej2-pivotview.es2015.js.map