@syncfusion/ej2-pivotview 20.2.36 → 20.2.43

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

@@ -1326,7 +1326,7 @@ class PivotEngine {
                                             if (this.fields.indexOf(newFieldName) === -1) {
                                                 this.fields.push(newFieldName);
                                             }
-                                            item[this.fieldKeys[newFieldName]] = (isInRangeAvail ? undefined : new Date(newDate.setMonth(date.getMonth(), newDate.getDate())).toString());
+                                            item[this.fieldKeys[newFieldName]] = (isInRangeAvail ? undefined : new Date(newDate.setMonth(date.getMonth(), 1)).toString());
                                         }
                                         break;
                                     case 'Days':
@@ -2543,7 +2543,7 @@ class PivotEngine {
                         row: rows[i],
                         column: columns,
                         value: value,
-                        cellSets: this.getCellSet(this.rawIndexObject),
+                        cellSets: this.getValueCellInfo ? this.getCellSet(this.rawIndexObject) : [],
                         rowCellType: (rows[i].hasChild && rows[i].isDrilled ? 'subTotal' : rows[i].type === 'grand sum' ? 'grandTotal' : 'value'),
                         columnCellType: (columns.hasChild && columns.isDrilled ? 'subTotal' : columns.type === 'grand sum' ? 'grandTotal' : 'value'),
                         aggregateType: aggregate,
@@ -3443,7 +3443,7 @@ class PivotEngine {
             PivotUtil.applyHeadersSort(sortMembersOrder, sortOrder, type);
             isHeaderSortByDefault = true;
         }
-        if (isHeaderSortByDefault) {
+        if (isHeaderSortByDefault && this.getHeaderSortInfo) {
             let copyOrder = [];
             for (let m = 0, n = 0; m < sortMembersOrder.length; m++) {
                 let member = sortMembersOrder[m];
@@ -3577,7 +3577,7 @@ class PivotEngine {
                     row: header,
                     column: member,
                     value: value,
-                    cellSets: this.getCellSet(this.rawIndexObject),
+                    cellSets: this.getValueCellInfo ? this.getCellSet(this.rawIndexObject) : [],
                     rowCellType: (header.hasChild && header.isDrilled ? 'subTotal' : header.type === 'grand sum' ? 'grandTotal' : 'value'),
                     columnCellType: (member.hasChild && member.isDrilled ? 'subTotal' : member.type === 'grand sum' ? 'grandTotal' : 'value'),
                     aggregateType: mType,
@@ -4784,8 +4784,9 @@ class PivotEngine {
                             }
                             for (let index of indexCollection) {
                                 let currentSet = data[index[0]][index[1]];
+                                let actualValue = isNullOrUndefined(selectedRowValues[index[1]].actualValue) ? 0 : selectedRowValues[index[1]].actualValue;
                                 // let cVal: number = currentSet.value - (selectedRowValues[index[1]] as IAxisSet).value;
-                                let cVal = currentSet.actualValue - selectedRowValues[index[1]].actualValue;
+                                let cVal = (isNullOrUndefined(currentSet.actualValue) ? 0 : currentSet.actualValue) - actualValue;
                                 cVal = isNaN(cVal) ? 0 : (currentSet.value === 0 && selectedRowValues[index[1]].value === 0) ? 0 : cVal;
                                 if (!this.aggregatedValueMatrix[index[0]]) {
                                     this.aggregatedValueMatrix[index[0]] = [];
@@ -4797,8 +4798,7 @@ class PivotEngine {
                                 else {
                                     // cVal = ((selectedRowValues[index[1]] as IAxisSet).value === 0 ?
                                     // 0 : (cVal / (selectedRowValues[index[1]] as IAxisSet).value));
-                                    cVal = (selectedRowValues[index[1]].actualValue === 0 ?
-                                        0 : (cVal / selectedRowValues[index[1]].actualValue));
+                                    cVal = (actualValue === 0 ? 0 : (cVal / actualValue));
                                     this.aggregatedValueMatrix[index[0]][index[1]] = cVal;
                                     currentSet.formattedText = currentSet.showSubTotals ? (cVal !== 0 ? this.globalize.formatNumber(cVal, { format: 'P', maximumFractionDigits: this.getPercentFormat(this.formatFields, currentSet.actualText) }) : this.emptyCellTextContent) : currentSet.formattedText;
                                 }
@@ -5021,7 +5021,9 @@ class PivotEngine {
                                                 activeColumn[cln].valueSort[item.valueSort.levelName] &&
                                                 currentSet.axis === 'value' && currentSet.actualText === name) {
                                                 if (activeColumn[cln].type !== 'grand sum') {
-                                                    cVal += currentSet.value;
+                                                    if (!isNullOrUndefined(currentSet.value)) {
+                                                        cVal += currentSet.value;
+                                                    }
                                                     currentSet.formattedText = subTotal ? '' : this.getFormattedValue(cVal, name).formattedText;
                                                     if (!this.aggregatedValueMatrix[rln]) {
                                                         this.aggregatedValueMatrix[rln] = [];
@@ -5133,7 +5135,7 @@ class PivotEngine {
             row: rows[rln],
             column: columns[cln],
             value: value,
-            cellSets: this.getCellSet(this.rawIndexObject),
+            cellSets: this.getValueCellInfo ? this.getCellSet(this.rawIndexObject) : [],
             rowCellType: (rows[rln].hasChild && rows[rln].isDrilled ? 'subTotal' : rows[rln].type === 'grand sum' ? 'grandTotal' : 'value'),
             columnCellType: (columns[cln].hasChild && columns[cln].isDrilled ? 'subTotal' : columns[cln].type === 'grand sum' ? 'grandTotal' : 'value'),
             aggregateType: aggregate,
@@ -5843,6 +5845,8 @@ const afterPivotTableRender = 'afterPivotTableRender';
 /** @hidden */
 const beforeExport = 'beforeExport';
 /** @hidden */
+const exportComplete = 'exportComplete';
+/** @hidden */
 const excelHeaderQueryCellInfo = 'excelHeaderQueryCellInfo';
 /** @hidden */
 const pdfHeaderQueryCellInfo = 'pdfHeaderQueryCellInfo';
@@ -5968,6 +5972,10 @@ const uiUpdate = 'ui-update';
 /** @hidden */
 const scroll = 'scroll';
 /** @hidden */
+const verticalScroll = 'vertical-scroll';
+/** @hidden */
+const horizontalScroll = 'horizontal-scroll';
+/** @hidden */
 const contentReady = 'content-ready';
 /** @hidden */
 const dataReady = 'data-ready';
@@ -6167,6 +6175,10 @@ const windowResized = 'Window resized';
 const recordUpdated = 'Records updated';
 /** @hidden */
 const drillThroughClosed = 'Drill-through closed';
+/** @hidden */
+const verticalScrolled = 'Vertically scrolled';
+/** @hidden */
+const horizontalScrolled = 'Horizontally scrolled';
 
 /**
  * CSS Constants
@@ -6511,13 +6523,11 @@ const CALC_FORMAT_INPUT = 'e-custom-format-input';
 /** @hidden */
 const CALCINPUTDIV = 'e-pivot-calc-input-div';
 /** @hidden */
-const CALC_CUSTOM_FORMAT_INPUTDIV = 'e-pivot-calc-custom-format-div';
-/** @hidden */
-const OLAP_CALC_CUSTOM_FORMAT_INPUTDIV = 'e-olap-calc-custom-format-div';
+const PIVOT_CALC_CUSTOM_FORMAT_INPUTDIV = 'e-pivot-calc-custom-format-div';
 /** @hidden */
 const CALC_HIERARCHY_LIST_DIV = 'e-olap-calc-hierarchy-list-div';
 /** @hidden */
-const CALC_FORMAT_TYPE_DIV = 'e-olap-calc-format-type-div';
+const CALC_FORMAT_TYPE_DIV = 'e-pivot-calc-format-type-div';
 /** @hidden */
 const CALC_MEMBER_TYPE_DIV = 'e-olap-calc-member-type-div';
 /** @hidden */
@@ -6587,7 +6597,7 @@ const PIVOT_FORMULA_TITLE_CLASS = 'e-pivot-formula-title';
 /** @hidden */
 const OLAP_HIERARCHY_TITLE_CLASS = 'e-olap-hierarchy-title';
 /** @hidden */
-const OLAP_FORMAT_TITLE_CLASS = 'e-olap-format-title';
+const PIVOT_FORMAT_TITLE_CLASS = 'e-pivot-format-title';
 /** @hidden */
 const OLAP_MEMBER_TITLE_CLASS = 'e-olap-member-title';
 /** @hidden */
@@ -7597,12 +7607,22 @@ class Render {
             this.parent.lastColumn.width = 'auto';
             this.parent.lastColumn = undefined;
         }
+        let exportCompleteEventArgs = {
+            type: 'PDF',
+            promise: args.promise
+        };
+        this.parent.trigger(exportComplete, exportCompleteEventArgs);
     }
     excelExportComplete(args) {
         if (this.parent.lastColumn !== undefined && this.parent.lastColumn.width !== 'auto') {
             this.parent.lastColumn.width = 'auto';
             this.parent.lastColumn = undefined;
         }
+        let exportCompleteEventArgs = {
+            type: 'Excel/CSV',
+            promise: args.promise
+        };
+        this.parent.trigger(exportComplete, exportCompleteEventArgs);
     }
     /* eslint-enable */
     dataBound(args) {
@@ -7692,7 +7712,7 @@ class Render {
                 isGroupElement = true;
             }
             let rowIndex = Number(elem.getAttribute('index'));
-            let colIndex = Number(elem.getAttribute('aria-colindex'));
+            let colIndex = Number(elem.getAttribute('data-colindex'));
             let pivotValue1 = this.parent.pivotValues[rowIndex][colIndex];
             let selectedID = item.id;
             switch (selectedID) {
@@ -7764,7 +7784,7 @@ class Render {
                         if (groupField && groupField.type === 'Custom' || (this.parent.engineModule.fieldList[fieldName].isCustomField && fieldName.indexOf('_custom_group') > -1)) {
                             groupField = PivotUtil.getFieldByName(fieldName.replace('_custom_group', ''), this.parent.dataSourceSettings.groupSettings);
                             if (groupField) {
-                                let cell = this.parent.engineModule.pivotValues[Number(elem.getAttribute('index'))][Number(elem.getAttribute('aria-colindex'))];
+                                let cell = this.parent.engineModule.pivotValues[Number(elem.getAttribute('index'))][Number(elem.getAttribute('data-colindex'))];
                                 let selectedCellsInfo = this.parent.groupingModule.getSelectedCells(cell.axis, fieldName, cell.actualText.toString());
                                 selectedCellsInfo.push({ axis: cell.axis, fieldName: fieldName, name: cell.actualText.toString(), cellInfo: cell });
                                 let selectedOptions = this.parent.groupingModule.getSelectedOptions(selectedCellsInfo);
@@ -7964,7 +7984,7 @@ class Render {
             ele = target.parentElement.parentElement;
         }
         let rowIndx = Number(ele.getAttribute('index'));
-        let colIndx = Number(ele.getAttribute('aria-colindex'));
+        let colIndx = Number(ele.getAttribute('data-colindex'));
         let pivotValue = this.parent.pivotValues[rowIndx][colIndx];
         let aggregateType;
         if (args.item.id.indexOf(this.parent.element.id + '_Agg') > -1) {
@@ -8108,7 +8128,7 @@ class Render {
             let fieldName = target.getAttribute('fieldName');
             if (!fieldName || fieldName == '') {
                 let rowIndx = Number(target.getAttribute('index'));
-                let colIndx = Number(target.getAttribute('aria-colindex'));
+                let colIndx = Number(target.getAttribute('data-colindex'));
                 fieldName = this.engine.pivotValues[rowIndx][colIndx].actualText;
             }
             let valuefields = this.parent.dataSourceSettings.values;
@@ -8295,7 +8315,7 @@ class Render {
         /* eslint-disable-next-line */
         let selectedElements = this.parent.element.querySelectorAll('.' + CELL_SELECTED_BGCOLOR + ',.' + SELECTED_BGCOLOR);
         for (let element of selectedElements) {
-            let colIndex = Number(element.getAttribute('aria-colindex'));
+            let colIndex = Number(element.getAttribute('data-colindex'));
             let rowIndex = Number(element.getAttribute('index'));
             let cell = this.engine.pivotValues[rowIndex][colIndex];
             if (cell) {
@@ -8338,7 +8358,7 @@ class Render {
             let isRowFieldsAvail = cell.valueSort && cell.valueSort.levelName === (this.parent.dataSourceSettings.rows.length === 0 && this.parent.dataSourceSettings.valueAxis === 'row' &&
                 this.parent.localeObj.getConstant('grandTotal') + (this.parent.dataSourceSettings.valueSortSettings.headerDelimiter) + (cell.formattedText));
             tCell.setAttribute('index', cell.rowIndex ? cell.rowIndex.toString() : '0');
-            if (tCell.getAttribute('aria-colindex') === '0') {
+            if (tCell.getAttribute('data-colindex') === '0') {
                 if (this.parent.dataType === 'pivot') {
                     let isValueCell = cell.type && cell.type === 'value';
                     tCell.innerText = '';
@@ -8441,18 +8461,18 @@ class Render {
                 let innerText = tCell.innerText;
                 tCell.innerText = '';
                 tCell.classList.add(VALUESCONTENT);
-                cell = args.data[Number(tCell.getAttribute('aria-colindex'))];
+                cell = args.data[Number(tCell.getAttribute('data-colindex'))];
                 cell = isNullOrUndefined(cell) ? args.column.customAttributes.cell : cell;
                 cell.isGrandSum = isRowFieldsAvail ? true : cell.isGrandSum;
                 if (cell.isSum) {
                     tCell.classList.add(SUMMARY);
                 }
                 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'))) {
+                    ((this.colGrandPos - this.parent.dataSourceSettings.values.length) < Number(tCell.getAttribute('data-colindex'))));
+                if (cell.isGrandSum || (isGrandSum || this.colGrandPos === Number(tCell.getAttribute('data-colindex'))) || this.rowGrandPos === Number(tCell.getAttribute('index'))) {
                     tCell.classList.add('e-gtot');
                 }
-                else if (this.parent.dataType === 'olap' ? cell.isSum : this.validateColumnTotalcell(!isNullOrUndefined(cell.value) ? cell.colIndex : cell.colIndex - 1)) {
+                else if (this.parent.dataType === 'olap' ? cell.isSum : this.validateColumnTotalcell(cell.colIndex)) {
                     tCell.classList.add('e-colstot');
                 }
                 if (cell.cssClass) {
@@ -8465,12 +8485,12 @@ class Render {
                         '<a data-url="' + innerText + '" class="e-hyperlinkcell ' + customClass + '">' + innerText + '</a>' : innerText)
                 }));
                 if (this.parent.gridSettings.allowReordering && !this.parent.showGroupingBar) {
-                    tCell.setAttribute('aria-colindex', args.column.customAttributes.cell.colIndex.toString());
+                    tCell.setAttribute('data-colindex', args.column.customAttributes.cell.colIndex.toString());
                 }
             }
             if (this.parent.cellTemplate) {
                 let index = tCell.getAttribute('index');
-                let colindex = tCell.getAttribute('aria-colindex');
+                let colindex = tCell.getAttribute('data-colindex');
                 let element = this.parent.getCellTemplate()({ targetCell: tCell, cellInfo: cell }, this.parent, 'cellTemplate', this.parent.element.id + '_cellTemplate', null, null, tCell);
                 if (element && element !== '' && element.length > 0) {
                     if (this.parent.enableHtmlSanitizer) {
@@ -8638,7 +8658,7 @@ class Render {
                         args.node.style.borderBottomWidth = '0px';
                     }
                 }
-                args.node.setAttribute('aria-colindex', cell.colIndex.toString());
+                args.node.setAttribute('data-colindex', cell.colIndex.toString());
                 args.node.setAttribute('index', cell.rowIndex.toString());
                 let fieldName;
                 if (this.parent.dataType === 'pivot') {
@@ -8729,7 +8749,7 @@ class Render {
                 tCell = this.appendValueSortIcon(cell, tCell, cell.rowIndex, cell.colIndex);
                 if (this.parent.cellTemplate) {
                     let index = tCell.getAttribute('index');
-                    let colindex = tCell.getAttribute('aria-colindex');
+                    let colindex = tCell.getAttribute('data-colindex');
                     this.parent.gridHeaderCellInfo.push({ targetCell: tCell });
                 }
                 let len = this.parent.dataSourceSettings.values.length;
@@ -8812,7 +8832,7 @@ class Render {
         cell = (cell.className.indexOf('e-headercelldiv') > -1 ? cell.parentElement : cell);
         let args = {
             currentCell: cell,
-            data: this.engine.pivotValues[Number(cell.getAttribute('index'))][Number(cell.getAttribute('aria-colindex'))],
+            data: this.engine.pivotValues[Number(cell.getAttribute('index'))][Number(cell.getAttribute('data-colindex'))],
             cancel: true,
             nativeEvent: e
         };
@@ -13082,7 +13102,7 @@ class KeyboardInteraction {
         if (this.parent.grid && this.parent.gridSettings.allowSelection && this.parent.gridSettings.selectionSettings.mode !== 'Row' &&
             !target.classList.contains('e-numerictextbox')) {
             let control = this.parent;
-            let colIndex = Number(e.target.getAttribute('aria-colIndex'));
+            let colIndex = Number(e.target.getAttribute('data-colindex'));
             let rowIndex = Number(e.target.getAttribute('index'));
             let ele;
             /* eslint-disable */
@@ -13092,7 +13112,7 @@ class KeyboardInteraction {
                         control.renderModule.rowStartPos !== rowIndex)) ? null : this.getParentElement(control, ele, colIndex, rowIndex - 1);
                 }
                 else if (e.action === 'shiftDown' || e.action === 'downArrow') {
-                    ele = control.element.querySelector('th[aria-colindex="' + colIndex + '"][index="' + (rowIndex + 1) + '"]');
+                    ele = control.element.querySelector('th[data-colindex="' + colIndex + '"][index="' + (rowIndex + 1) + '"]');
                 }
                 else if (e.action === 'shiftLeft' || e.action === 'leftArrow') {
                     ele = e.target.previousSibling;
@@ -13103,7 +13123,7 @@ class KeyboardInteraction {
             }
             if (!isNullOrUndefined(ele)) {
                 if (control.gridSettings.selectionSettings.mode === 'Both' ? !ele.classList.contains(ROW_CELL_CLASS) : true) {
-                    colIndex = Number(ele.getAttribute('aria-colindex'));
+                    colIndex = Number(ele.getAttribute('data-colindex'));
                     rowIndex = Number(ele.getAttribute('index'));
                     let colSpan = Number(ele.getAttribute('aria-colspan'));
                     control.clearSelection(ele, e, colIndex, rowIndex);
@@ -13125,11 +13145,11 @@ class KeyboardInteraction {
             }
             else {
                 if (e.action === 'upArrow') {
-                    ele = control.element.querySelector('[aria-colindex="' + colIndex + '"][index="' + (rowIndex - 1) + '"]');
+                    ele = control.element.querySelector('[data-colindex="' + colIndex + '"][index="' + (rowIndex - 1) + '"]');
                     rowIndex--;
                 }
                 else if (e.action === 'downArrow') {
-                    ele = control.element.querySelector('[aria-colindex="' + colIndex + '"][index="' + (rowIndex + 1) + '"]');
+                    ele = control.element.querySelector('[data-colindex="' + colIndex + '"][index="' + (rowIndex + 1) + '"]');
                     rowIndex++;
                 }
                 if (!isNullOrUndefined(ele)) {
@@ -13159,7 +13179,7 @@ class KeyboardInteraction {
     }
     getParentElement(control, ele, colIndex, rowIndex) {
         while (!ele) {
-            ele = control.element.querySelector('[aria-colindex="' + colIndex + '"][index="' + rowIndex + '"]');
+            ele = control.element.querySelector('[data-colindex="' + colIndex + '"][index="' + rowIndex + '"]');
             colIndex--;
         }
         return ele;
@@ -13443,6 +13463,9 @@ class VirtualScroll$1 {
     update(mHdr, mCont, top, left, e) {
         this.parent.isScrolling = true;
         let engine = this.parent.dataType === 'pivot' ? this.parent.engineModule : this.parent.olapEngineModule;
+        let args = {
+            dataSourceSettings: PivotUtil.getClonedDataSourceSettings(this.parent.dataSourceSettings)
+        };
         if (this.parent.pageSettings && engine.pageSettings) {
             if (this.direction === 'vertical') {
                 let rowValues = this.parent.dataType === 'pivot' ?
@@ -13454,24 +13477,28 @@ class VirtualScroll$1 {
                     // this.parent.hideWaitingPopup();
                     return;
                 }
+                this.parent.actionObj.actionName = verticalScroll;
+                this.parent.actionBeginMethod();
                 this.parent.showWaitingPopup();
                 this.parent.scrollPosObject.vertical = section;
-                engine.pageSettings.rowCurrentPage = section > 1 ? section : 1;
+                this.parent.pageSettings.rowCurrentPage = engine.pageSettings.rowCurrentPage = section > 1 ? section : 1;
                 let rowStartPos = 0;
-                if (this.parent.dataType === 'pivot') {
-                    if (this.parent.dataSourceSettings.mode === 'Server') {
-                        this.parent.getEngine('onScroll', null, null, null, null, null, null);
+                this.parent.trigger(enginePopulating, args, (observedArgs) => {
+                    if (this.parent.dataType === 'pivot') {
+                        if (this.parent.dataSourceSettings.mode === 'Server') {
+                            this.parent.getEngine('onScroll', null, null, null, null, null, null);
+                        }
+                        else {
+                            this.parent.engineModule.generateGridData(this.parent.dataSourceSettings, true, this.parent.engineModule.headerCollection);
+                            rowStartPos = this.parent.engineModule.rowStartPos;
+                        }
                     }
                     else {
-                        this.parent.engineModule.generateGridData(this.parent.dataSourceSettings, true, this.parent.engineModule.headerCollection);
-                        rowStartPos = this.parent.engineModule.rowStartPos;
+                        this.parent.olapEngineModule.scrollPage('scroll');
+                        rowStartPos = this.parent.olapEngineModule.pageRowStartPos;
                     }
-                }
-                else {
-                    this.parent.olapEngineModule.scrollPage('scroll');
-                    rowStartPos = this.parent.olapEngineModule.pageRowStartPos;
-                }
-                this.parent.pivotValues = engine.pivotValues;
+                    this.enginePopulatedEventMethod(engine);
+                });
                 let exactPage = Math.ceil(rowStartPos / (this.parent.pageSettings.rowSize * rowValues));
                 let pos = exactSize * exactPage -
                     (engine.rowFirstLvl * rowValues * this.parent.gridSettings.rowHeight);
@@ -13487,32 +13514,50 @@ class VirtualScroll$1 {
                     // this.parent.hideWaitingPopup();
                     return;
                 }
+                this.parent.actionObj.actionName = horizontalScroll;
+                this.parent.actionBeginMethod();
                 this.parent.showWaitingPopup();
                 let pivot = this.parent;
                 pivot.scrollPosObject.horizontal = section;
-                engine.pageSettings.columnCurrentPage = section > 1 ? section : 1;
+                this.parent.pageSettings.columnCurrentPage = engine.pageSettings.columnCurrentPage = section > 1 ? section : 1;
                 let colStartPos = 0;
-                if (pivot.dataType === 'pivot') {
-                    if (this.parent.dataSourceSettings.mode === 'Server') {
-                        this.parent.getEngine('onScroll', null, null, null, null, null, null);
+                this.parent.trigger(enginePopulating, args, (observedArgs) => {
+                    if (pivot.dataType === 'pivot') {
+                        if (this.parent.dataSourceSettings.mode === 'Server') {
+                            this.parent.getEngine('onScroll', null, null, null, null, null, null);
+                        }
+                        else {
+                            pivot.engineModule.generateGridData(pivot.dataSourceSettings, true, pivot.engineModule.headerCollection);
+                            colStartPos = pivot.engineModule.colStartPos;
+                        }
                     }
                     else {
-                        pivot.engineModule.generateGridData(pivot.dataSourceSettings, true, pivot.engineModule.headerCollection);
-                        colStartPos = pivot.engineModule.colStartPos;
+                        pivot.olapEngineModule.scrollPage('scroll');
+                        colStartPos = pivot.olapEngineModule.pageColStartPos;
                     }
-                }
-                else {
-                    pivot.olapEngineModule.scrollPage('scroll');
-                    colStartPos = pivot.olapEngineModule.pageColStartPos;
-                }
-                pivot.pivotValues = engine.pivotValues;
+                    this.enginePopulatedEventMethod(engine);
+                });
                 let exactPage = Math.ceil(colStartPos / (pivot.pageSettings.columnSize * colValues));
                 let pos = exactSize * exactPage - (engine.colFirstLvl *
                     colValues * pivot.gridSettings.columnWidth);
                 pivot.scrollPosObject.horizontalSection = pos;
             }
+            this.parent.actionObj.actionName = this.parent.getActionCompleteName();
+            if (this.parent.actionObj.actionName) {
+                this.parent.actionCompleteMethod();
+            }
         }
     }
+    enginePopulatedEventMethod(engine, control) {
+        let pivot = control ? control : this.parent;
+        let eventArgs = {
+            dataSourceSettings: pivot.dataSourceSettings,
+            pivotValues: pivot.pivotValues
+        };
+        pivot.trigger(enginePopulated, eventArgs, (observedArgs) => {
+            this.parent.pivotValues = engine.pivotValues;
+        });
+    }
     setPageXY() {
         return (e) => {
             if (e.pointerType === 'mouse') {
@@ -14345,7 +14390,7 @@ class DrillThrough {
         }
         if (ele) {
             if (this.parent.allowDrillThrough && ele.classList.contains('e-valuescontent') || this.parent.editSettings.allowEditing) {
-                let colIndex = Number(ele.getAttribute('aria-colindex'));
+                let colIndex = Number(ele.getAttribute('data-colindex'));
                 let rowIndex = Number(ele.getAttribute('index'));
                 this.executeDrillThrough(this.parent.pivotValues[rowIndex][colIndex], rowIndex, colIndex, ele);
             }
@@ -14536,7 +14581,7 @@ class PivotChart {
             if (!this.parent.chart && (this.parent.element.querySelector('.e-chart') || this.parent.element.querySelector('.e-accumulationchart'))) {
                 remove(select('#' + this.parent.element.id + '_chart', this.parent.element));
             }
-            if (this.chartSettings.enableMultipleAxis && this.accumulationType.indexOf(chartSettings.chartSeries.type) < 0) {
+            if (this.chartSettings.enableMultipleAxis && this.accumulationType.indexOf(chartSettings.chartSeries.type) < 0 && this.chartSettings.chartSeries.type !== 'Pareto') {
                 this.measureList = this.dataSourceSettings.values.map((item) => { return item.name; });
             }
             else {
@@ -14615,7 +14660,7 @@ class PivotChart {
         this.columnGroupObject = {};
         this.accEmptyPoint = false;
         let pivotValues = this.engineModule.pivotValues;
-        this.currentMeasure = (chartSettings.enableMultipleAxis && this.accumulationType.indexOf(chartSettings.chartSeries.type) < 0) ? this.measureList[0] :
+        this.currentMeasure = (chartSettings.enableMultipleAxis && this.accumulationType.indexOf(chartSettings.chartSeries.type) < 0 && this.chartSettings.chartSeries.type !== 'Pareto') ? this.measureList[0] :
             (((chartSettings.value === '' || this.dataSourceSettings.values.filter((item) => {
                 return item.name === chartSettings.value;
             }).length === 0) && this.dataSourceSettings.values.length > 0) ? this.dataSourceSettings.values[0].name : chartSettings.value);
@@ -14657,7 +14702,7 @@ class PivotChart {
                     header.valueSort.levelName.toString().split(this.parent.dataSourceSettings.valueSortSettings.headerDelimiter) : undefined;
                 isValidHeader = false;
                 if (valueSort && valueSort[0] !== 'Grand Total') {
-                    if ((chartSettings.enableMultipleAxis && this.accumulationType.indexOf(chartSettings.chartSeries.type) < 0) ||
+                    if ((chartSettings.enableMultipleAxis && this.accumulationType.indexOf(chartSettings.chartSeries.type) < 0 && this.chartSettings.chartSeries.type !== 'Pareto') ||
                         valueSort.indexOf(measureNames[this.currentMeasure]) > -1) {
                         isValidHeader = true;
                     }
@@ -14781,7 +14826,7 @@ class PivotChart {
                         let actualText = (this.parent.dataType === 'olap' && tupInfo && tupInfo.measureName) ?
                             tupInfo.measureName : cell.actualText;
                         if (!(this.parent.dataType === 'olap' && cell.isGrandSum) && !totColIndex[cell.colIndex] && cell.axis === 'value' && firstRowCell.type !== 'header' &&
-                            actualText !== '' && ((chartSettings.enableMultipleAxis && this.accumulationType.indexOf(chartSettings.chartSeries.type) < 0) ? true : actualText === this.currentMeasure)) {
+                            actualText !== '' && ((chartSettings.enableMultipleAxis && this.accumulationType.indexOf(chartSettings.chartSeries.type) < 0 && this.chartSettings.chartSeries.type !== 'Pareto') ? true : actualText === this.currentMeasure)) {
                             if (isNullOrUndefined(firstRowCell.members)) {
                                 firstRowCell.members = [];
                             }
@@ -14980,7 +15025,7 @@ class PivotChart {
                 className: PIVOTCHART, id: this.parent.element.id + '_chart'
             }));
         }
-        if (!this.chartElement && this.parent.chartSettings.enableScrollOnMultiAxis && this.parent.chartSettings.enableMultipleAxis) {
+        if (!this.chartElement && this.parent.chartSettings.enableScrollOnMultiAxis && this.parent.chartSettings.enableMultipleAxis && this.chartSettings.chartSeries.type !== 'Pareto') {
             this.parent.element.querySelector('.' + PIVOTCHART).innerHTML = '';
             this.chartElement = this.parent.element.querySelector('.' + PIVOTCHART).appendChild(createElement('div', {
                 className: PIVOTCHART_INNER, id: this.parent.element.id + '_chartInner',
@@ -15001,7 +15046,7 @@ class PivotChart {
         }
         let height = this.getChartHeight();
         if (this.parent.chartSettings.enableScrollOnMultiAxis && this.parent.chartSettings.enableMultipleAxis &&
-            this.accumulationType.indexOf(type) < 0) {
+            this.accumulationType.indexOf(type) < 0 && this.chartSettings.chartSeries.type !== 'Pareto') {
             this.parent.element.querySelector('.' + PIVOTCHART).style.height =
                 (height === 'auto' ? this.getChartAutoHeight() : height) + 'px';
             this.parent.element.querySelector('.' + PIVOTCHART).style.width = width + 'px';
@@ -15012,7 +15057,7 @@ class PivotChart {
         }
         if (this.parent.chart && ((this.parent.chart.getModuleName() === 'accumulationchart' &&
             this.accumulationType.indexOf(type) < 0) || (this.parent.chart.getModuleName() === 'chart' &&
-            this.accumulationType.indexOf(type) > -1))) {
+            this.accumulationType.indexOf(type) > -1 && this.chartSettings.chartSeries.type !== 'Pareto'))) {
             this.parent.chart.destroy();
             if (select('#' + this.parent.element.id + '_chart', this.parent.element)) {
                 select('#' + this.parent.element.id + '_chart', this.parent.element).innerHTML = '';
@@ -15091,7 +15136,7 @@ class PivotChart {
                     zoomSettings: currentZoomSettings,
                     axes: (type === 'Polar' || type === 'Radar') ? [] : axesWithRows.axes,
                     rows: (type === 'Polar' || type === 'Radar') ? [{}] :
-                        (type === 'Bar' || type === 'StackingBar' || type === 'StackingBar100' &&
+                        (type === 'Bar' || type === 'StackingBar' || type === 'StackingBar100' || type === 'Pareto' &&
                             this.chartSettings.enableMultipleAxis) ? [{ height: '100%' }] : axesWithRows.rows,
                     columns: (type === 'Polar' || type === 'Radar') ? [{}] :
                         (type === 'Bar' || type === 'StackingBar' || type === 'StackingBar100' &&
@@ -15101,7 +15146,7 @@ class PivotChart {
                     width: width,
                     height: (this.parent.chartSettings.chartSeries.type !== 'Polar' &&
                         this.parent.chartSettings.chartSeries.type !== 'Radar' && this.parent.chartSettings.enableScrollOnMultiAxis &&
-                        this.parent.chartSettings.enableMultipleAxis && this.parent.dataSourceSettings.values.length > 0) ?
+                        this.parent.chartSettings.enableMultipleAxis && this.parent.chartSettings.chartSeries.type !== 'Pareto' && this.parent.dataSourceSettings.values.length > 0) ?
                         Number(height) > (this.parent.dataSourceSettings.values.length * 235) + 100 ? isNaN(Number(height)) ?
                             height.toString() : (Number(height) - 5).toString() :
                             (!isNaN(Number(height)) || this.parent.dataSourceSettings.values.length > 1) ?
@@ -15202,6 +15247,10 @@ class PivotChart {
                     this.parent.chart.rows = [{ height: '100%' }];
                     this.parent.chart.columns = axesWithRows.columns;
                 }
+                else if (type === 'Pareto' && this.chartSettings.enableMultipleAxis) {
+                    this.parent.chart.rows = [{ height: '100%' }];
+                    this.parent.chart.columns = [{ width: '100%' }];
+                }
                 else {
                     this.parent.chart.rows = axesWithRows.rows;
                     this.parent.chart.columns = [{ width: '100%' }];
@@ -15596,7 +15645,7 @@ class PivotChart {
     }
     tooltipRender(args) {
         let measure = args.series.yAxisName ? (args.series.yAxisName.split('_CumulativeAxis')[0]) :
-            ((this.chartSettings.enableMultipleAxis && this.accumulationType.indexOf(this.chartSettings.chartSeries.type) < 0) ?
+            ((this.chartSettings.enableMultipleAxis && this.accumulationType.indexOf(this.chartSettings.chartSeries.type) < 0 && this.chartSettings.chartSeries.type !== 'Pareto') ?
                 args.series.name ? args.series.name.split(' | ')[1] : args.data.seriesName ?
                     args.data.seriesName.split(' | ')[1] : this.currentMeasure : this.measuresNames[this.currentMeasure] ?
                 this.measuresNames[this.currentMeasure] : this.currentMeasure);
@@ -15608,14 +15657,14 @@ class PivotChart {
         let aggregateType = this.parent.dataType === 'olap' ? '' : this.parent.localeObj.getConstant(measureField.aggregateType);
         let measureAggregatedName = (this.parent.dataType === 'olap' ? '' : aggregateType + ' ' +
             this.parent.localeObj.getConstant('of') + ' ') + measureField.caption;
-        let formattedText = this.accumulationType.indexOf(this.parent.chartSettings.chartSeries.type) < 0 ?
-            args.text.split('<b>')[1].split('</b>')[0] : this.engineModule.pivotValues[rowIndex][colIndex].formattedText;
+        let formattedText = this.engineModule.pivotValues[rowIndex][colIndex].formattedText;
         let formatField = this.engineModule.formatFields[measureField.id];
-        let formattedValue = ((formatField && formatField.format && formatField.format.toLowerCase().match(/n|p|c/) !== null &&
+        let valueFormat = this.engineModule.getFormattedValue(args.point.y, measureField.id, formattedText);
+        let formattedValue = (formatField && formatField.format && formatField.format.toLowerCase().match(/n|p|c/) !== null &&
             this.chartSettings.useGroupingSeparator) ? this.parent.dataType === 'olap' ?
-            this.engineModule.getFormattedValue(args.point.y, measureField.id, formattedText) :
-            this.parent.engineModule.getFormattedValue(args.point.y, measureField.id).formattedText :
-            formattedText);
+            valueFormat.toString() :
+            valueFormat.formattedText :
+            formattedText;
         let columnText = (args.series.name ? args.series.name.split(' | ')[0] : args.data.seriesName.split(' | ')[0]);
         let rowText = args.point.x;
         if (this.parent.tooltipTemplate && this.parent.getTooltipTemplate() !== undefined || this.chartSettings.tooltip.template) {
@@ -15668,7 +15717,7 @@ class PivotChart {
             }
         }
         if (this.parent.chartSettings.enableScrollOnMultiAxis && this.parent.chartSettings.enableMultipleAxis) {
-            if (['Pie', 'Funnel', 'Pyramid', 'Doughnut', 'Radar', 'Polar'].indexOf(this.parent.chartSettings.chartSeries.type) >= 0) {
+            if (['Pie', 'Funnel', 'Pyramid', 'Doughnut', 'Radar', 'Polar', 'Pareto'].indexOf(this.parent.chartSettings.chartSeries.type) >= 0) {
                 this.parent.element.querySelector('.' + PIVOTCHART).style.overflow = 'visible';
             }
             else {
@@ -15944,6 +15993,16 @@ class PivotChart {
                 args.text = '';
             }
         }
+        if (args.axis.name !== 'primaryXAxis') {
+            let formatField = this.engineModule.formatFields[args.axis.name];
+            let valueFormat = this.engineModule.getFormattedValue(args.value, args.axis.name, args.text);
+            let formattedValue = ((formatField && formatField.format && formatField.format.toLowerCase().match(/n|p|c/) !== null &&
+                this.chartSettings.useGroupingSeparator) ? this.parent.dataType === 'olap' ?
+                valueFormat.toString() :
+                valueFormat.formattedText :
+                args.value.toString());
+            args.text = formattedValue;
+        }
         this.parent.trigger(chartAxisLabelRender, args);
     }
     multiLevelLabelClick(args) {
@@ -16090,7 +16149,7 @@ class PivotChart {
     /* eslint-disable */
     /** @hidden */
     getResizedChartHeight() {
-        let height = ['Pie', 'Funnel', 'Pyramid', 'Doughnut', 'Radar', 'Polar'].indexOf(this.parent.chartSettings.chartSeries.type) < 0 &&
+        let height = ['Pie', 'Funnel', 'Pyramid', 'Doughnut', 'Radar', 'Polar', 'Pareto'].indexOf(this.parent.chartSettings.chartSeries.type) < 0 &&
             this.parent.chartSettings.enableScrollOnMultiAxis && this.parent.chartSettings.enableMultipleAxis &&
             this.parent.dataSourceSettings.values.length > 0 ? Number(this.parent.chart.height) > (this.parent.dataSourceSettings.values.length * 235) + 100 ? /* eslint-disable-line */
             isNaN(Number(this.getChartHeight())) ? this.getChartHeight().toString() : (Number(this.getChartHeight()) - 5).toString() :
@@ -20319,7 +20378,7 @@ class OlapEngine {
                 }
                 isHeaderSortByDefault = true;
             }
-            if (isHeaderSortByDefault) {
+            if (isHeaderSortByDefault && this.getHeaderSortInfo) {
                 let copyOrder = [];
                 for (let m = 0, n = 0; m < headers.length; m++) {
                     if (headers[m].actualText !== 'Grand Total') {
@@ -20360,7 +20419,7 @@ class OlapEngine {
             }
             isHeaderSortByDefault = true;
         }
-        if (isHeaderSortByDefault) {
+        if (isHeaderSortByDefault && this.getHeaderSortInfo) {
             let copyOrder = [];
             for (let m = 0, n = 0; m < keys.length; m++) {
                 if (keys[m] !== 'Grand Total') {
@@ -23376,10 +23435,10 @@ let PivotView = class PivotView extends Component {
             this.cellTemplateFn = this.templateParser(this.cellTemplate);
             this.tooltipTemplateFn = this.templateParser(this.tooltipTemplate);
             if (this.spinnerTemplate) {
-                createSpinner({ target: this.element, template: this.spinnerTemplate }, this.createElement);
+                createSpinner({ target: this.element, template: this.spinnerTemplate, cssClass: this.cssClass ? this.cssClass : undefined }, this.createElement);
             }
             else {
-                createSpinner({ target: this.element }, this.createElement);
+                createSpinner({ target: this.element, cssClass: this.cssClass ? this.cssClass : undefined }, this.createElement);
             }
             let loadArgs = {
                 dataSourceSettings: this.dataSourceSettings,
@@ -24046,7 +24105,7 @@ let PivotView = class PivotView extends Component {
                         }
                     }
                     else {
-                        pivot.olapEngineModule.renderEngine(pivot.dataSourceSettings, customProperties, pivot.getHeaderSortInfo.bind(pivot));
+                        pivot.olapEngineModule.renderEngine(pivot.dataSourceSettings, customProperties, pivot.onHeadersSort ? pivot.getHeaderSortInfo.bind(pivot) : undefined);
                     }
                     pivot.allowServerDataBinding = false;
                     pivot.setProperties({ pivotValues: pivot.olapEngineModule.pivotValues }, true);
@@ -24087,7 +24146,7 @@ let PivotView = class PivotView extends Component {
                         pivot.lastFilterInfo = {};
                     }
                     else {
-                        pivot.engineModule.renderEngine(pivot.dataSourceSettings, customProperties, pivot.getValueCellInfo.bind(pivot), pivot.getHeaderSortInfo.bind(pivot));
+                        pivot.engineModule.renderEngine(pivot.dataSourceSettings, customProperties, pivot.aggregateCellInfo ? pivot.getValueCellInfo.bind(pivot) : undefined, pivot.onHeadersSort ? pivot.getHeaderSortInfo.bind(pivot) : undefined);
                         pivot.allowServerDataBinding = false;
                         pivot.setProperties({ pivotValues: pivot.engineModule.pivotValues }, true);
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -24110,7 +24169,7 @@ let PivotView = class PivotView extends Component {
      */
     excelExport(excelExportProperties, isMultipleExport, workbook, isBlob) {
         if (this.enableVirtualization && this.dataSourceSettings.mode !== 'Server') {
-            this.excelExportModule.exportToExcel('Excel', excelExportProperties);
+            this.excelExportModule.exportToExcel('Excel', excelExportProperties, isBlob);
         }
         else {
             this.exportType = 'Excel';
@@ -24135,7 +24194,7 @@ let PivotView = class PivotView extends Component {
      */
     csvExport(excelExportProperties, isMultipleExport, workbook, isBlob) {
         if (this.enableVirtualization && this.dataSourceSettings.mode !== 'Server') {
-            this.excelExportModule.exportToExcel('CSV', excelExportProperties);
+            this.excelExportModule.exportToExcel('CSV', excelExportProperties, isBlob);
         }
         else {
             this.exportType = 'CSV';
@@ -24160,7 +24219,7 @@ let PivotView = class PivotView extends Component {
      */
     pdfExport(pdfExportProperties, isMultipleExport, pdfDoc, isBlob) {
         if (this.enableVirtualization && this.dataSourceSettings.mode !== 'Server') {
-            this.pdfExportModule.exportToPDF(pdfExportProperties);
+            this.pdfExportModule.exportToPDF(pdfExportProperties, isBlob);
         }
         else {
             this.grid.pdfExport(pdfExportProperties, isMultipleExport, pdfDoc, isBlob);
@@ -24225,7 +24284,7 @@ let PivotView = class PivotView extends Component {
         }
         if (this.dataType === 'pivot') {
             let clonedDrillMembers = PivotUtil.cloneDrillMemberSettings(this.dataSourceSettings.drilledMembers);
-            let colIndex = axis === 'row' ? Number(closest(target, 'td').getAttribute('aria-colindex')) : Number(closest(target, 'th').getAttribute('aria-colindex'));
+            let colIndex = axis === 'row' ? Number(closest(target, 'td').getAttribute('data-colindex')) : Number(closest(target, 'th').getAttribute('data-colindex'));
             let rowIndex = axis === 'row' ? Number(closest(target, 'td').getAttribute('index')) : Number(closest(target, 'th').getAttribute('index'));
             let currentCell = chartDrillInfo ? chartDrillInfo.cell :
                 this.engineModule.pivotValues[rowIndex][colIndex];
@@ -24332,7 +24391,7 @@ let PivotView = class PivotView extends Component {
             currentCell = chartDrillInfo.cell;
         }
         else {
-            let colIndex = axis === 'row' ? Number(closest(target, 'td').getAttribute('aria-colindex')) : Number(closest(target, 'th').getAttribute('aria-colindex'));
+            let colIndex = axis === 'row' ? Number(closest(target, 'td').getAttribute('data-colindex')) : Number(closest(target, 'th').getAttribute('data-colindex'));
             let rowIndex = axis === 'row' ? Number(closest(target, 'td').getAttribute('index')) : Number(closest(target, 'th').getAttribute('index'));
             currentCell = this.olapEngineModule.pivotValues[rowIndex][colIndex];
         }
@@ -24631,6 +24690,10 @@ let PivotView = class PivotView extends Component {
                         (mCntVScrollPos === mCntScrollPos ? (mCntScrollPos - hScrollPos) :
                             (mCntScrollPos < mCntVScrollPos && (hScrollPos === mCntVScrollPos || hScrollPos > mCntScrollPos) ?
                                 -(mCntVScrollPos - mCntScrollPos) : 0)));
+                    if (this.actionObj.actionName === 'Sort value' || this.actionObj.actionName === 'Sort field') {
+                        let excessMove = -this.scrollPosObject.horizontalSection;
+                        this.scrollPosObject.horizontalSection = this.scrollPosObject.horizontalSection + excessMove;
+                    }
                     horiOffset = (ele.scrollLeft > this.scrollerBrowserLimit) ?
                         (mCnt.querySelector('.' + TABLE).style.transform.split(',')[0].trim() + ',') :
                         'translate(' + -(((ele.scrollLeft * this.horizontalScrollScale) -
@@ -24673,7 +24736,7 @@ let PivotView = class PivotView extends Component {
         }
     }
     setToolTip(args) {
-        let colIndex = Number(args.target.getAttribute('aria-colindex'));
+        let colIndex = Number(args.target.getAttribute('data-colindex'));
         let rowIndex = Number(args.target.getAttribute('index'));
         let cell = (this.dataSourceSettings.values.length > 0 && this.pivotValues &&
             this.pivotValues[rowIndex] && this.pivotValues[rowIndex][colIndex]) ?
@@ -24869,7 +24932,7 @@ let PivotView = class PivotView extends Component {
                 let ele = e.target;
                 let axis = (ele.parentElement.classList.contains(ROWSHEADER) || ele.classList.contains(ROWSHEADER)) ? 'row' : 'column';
                 ele = axis === 'column' ? closest(ele, 'th') : closest(ele, 'td');
-                let colIndex = Number(ele.getAttribute('aria-colindex'));
+                let colIndex = Number(ele.getAttribute('data-colindex'));
                 let rowIndex = Number(ele.getAttribute('index'));
                 let selectArgs = {
                     cancel: false,
@@ -24923,6 +24986,9 @@ let PivotView = class PivotView extends Component {
             this.lastCellClicked = e.target;
         }
         let target = e.target;
+        if (closest(target, '.' + PIVOT_BUTTON_CLASS)) {
+            return;
+        }
         let ele = null;
         let axis = (target.parentElement.classList.contains(ROWSHEADER) || target.classList.contains(ROWSHEADER)) ? 'row' : 'column';
         ele = axis === 'column' ? closest(target, 'th') : closest(target, 'td');
@@ -24943,7 +25009,7 @@ let PivotView = class PivotView extends Component {
                     if (this.actionBeginMethod()) {
                         return;
                     }
-                    let colIndex = Number(ele.getAttribute('aria-colindex'));
+                    let colIndex = Number(ele.getAttribute('data-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];
@@ -24957,13 +25023,13 @@ let PivotView = class PivotView extends Component {
                         }
                     }
                     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);
+                        colIndex = (Number(ele.getAttribute('data-colindex')) + Number(ele.getAttribute('aria-colspan')) - 1);
                         rowIndex = this.engineModule.headerContent.length - 1;
                     }
                     this.setProperties({
                         dataSourceSettings: {
                             valueSortSettings: {
-                                columnIndex: (Number(ele.getAttribute('aria-colindex')) +
+                                columnIndex: (Number(ele.getAttribute('data-colindex')) +
                                     Number(ele.getAttribute('aria-colspan')) - 1),
                                 sortOrder: this.dataSourceSettings.valueSortSettings.sortOrder === 'Descending' ? 'Ascending' : 'Descending',
                                 headerText: this.pivotValues[rowIndex][colIndex].valueSort.levelName,
@@ -25305,7 +25371,7 @@ let PivotView = class PivotView extends Component {
         }
         /* eslint-disable */
         if (ele && !isNullOrUndefined(this.pivotValues) && this.pivotValues.length > 0) {
-            let colIndex = Number(ele.getAttribute('aria-colindex'));
+            let colIndex = Number(ele.getAttribute('data-colindex'));
             let rowIndex = Number(ele.getAttribute('index'));
             let colSpan = Number(ele.getAttribute('aria-colspan'));
             let selectArgs = {
@@ -25349,6 +25415,9 @@ let PivotView = class PivotView extends Component {
                 this.getSelectedCellsPos();
             });
         }
+        else {
+            this.clearSelection(null, e, null, null);
+        }
     }
     rowDeselect(ele, e, rowIndex, mode, observedArgs) {
         if (!e.shiftKey && !e.ctrlKey && this.gridSettings.selectionSettings.mode !== 'Both' || this.gridSettings.selectionSettings.type === 'Single') {
@@ -25394,7 +25463,7 @@ let PivotView = class PivotView extends Component {
     clearSelection(ele, e, colIndex, rowIndex) {
         if ((!e.shiftKey && !e.ctrlKey) || this.gridSettings.selectionSettings.type === 'Single') {
             if (this.gridSettings.selectionSettings.mode === 'Cell') {
-                if (ele.classList.contains(COLUMNSHEADER)) {
+                if (ele && ele.classList.contains(COLUMNSHEADER)) {
                     removeClass(this.element.querySelectorAll(('.' + ROW_CELL_CLASS + '.') + CELL_SELECTED_BGCOLOR), CELL_SELECTED_BGCOLOR);
                 }
                 else {
@@ -25402,7 +25471,7 @@ let PivotView = class PivotView extends Component {
                 }
             }
             else if (this.gridSettings.selectionSettings.mode === 'Both') {
-                if (ele.classList.contains(ROW_CELL_CLASS)) {
+                if (ele && ele.classList.contains(ROW_CELL_CLASS)) {
                     for (let ele of [].slice.call(this.element.querySelectorAll('.' + SELECTED_BGCOLOR + ', .' + CELL_SELECTED_BGCOLOR))) {
                         // if (Number((ele as HTMLElement).getAttribute('index')) !== rowIndex) {
                         removeClass([ele], [CELL_ACTIVE_BGCOLOR, SELECTED_BGCOLOR, CELL_SELECTED_BGCOLOR]);
@@ -25470,10 +25539,10 @@ let PivotView = class PivotView extends Component {
             if (!isCtrl || type === 'Single') {
                 for (let ele of [].slice.call(this.element.querySelectorAll('.' + CELL_ACTIVE_BGCOLOR))) {
                     removeClass([ele], [CELL_ACTIVE_BGCOLOR, SELECTED_BGCOLOR]);
-                    if (activeColumns.indexOf(ele.getAttribute('aria-colindex')) === -1) {
+                    if (activeColumns.indexOf(ele.getAttribute('data-colindex')) === -1) {
                         isToggle = false;
                     }
-                    let colIndex = Number(ele.getAttribute('aria-colindex'));
+                    let colIndex = Number(ele.getAttribute('data-colindex'));
                     actColPos[colIndex] = colIndex;
                 }
                 activeColumns = Object.keys(actColPos).length > 0 ? Object.keys(actColPos).sort(function (a, b) {
@@ -25504,7 +25573,7 @@ let PivotView = class PivotView extends Component {
             }
             let count = colStart;
             while (count <= colEnd) {
-                queryStringArray.push('[aria-colindex="' + count + '"]' + (this.gridSettings.selectionSettings.mode === 'Cell' ?
+                queryStringArray.push('[data-colindex="' + count + '"]' + (this.gridSettings.selectionSettings.mode === 'Cell' ?
                     '[index="' + rowStart + '"]' : "") + '');
                 count++;
             }
@@ -25530,20 +25599,20 @@ let PivotView = class PivotView extends Component {
         control.savedSelectedCellsPos = [];
         control.cellSelectionPos = [];
         for (let ele of [].slice.call(this.element.querySelectorAll('.' + SELECTED_BGCOLOR))) {
-            control.savedSelectedCellsPos.push({ rowIndex: ele.getAttribute('index'), colIndex: ele.getAttribute('aria-colindex') });
+            control.savedSelectedCellsPos.push({ rowIndex: ele.getAttribute('index'), colIndex: ele.getAttribute('data-colindex') });
         }
         for (let ele of [].slice.call(this.element.querySelectorAll('.' + CELL_SELECTED_BGCOLOR))) {
-            control.cellSelectionPos.push({ rowIndex: ele.getAttribute('index'), colIndex: ele.getAttribute('aria-colindex') });
+            control.cellSelectionPos.push({ rowIndex: ele.getAttribute('index'), colIndex: ele.getAttribute('data-colindex') });
         }
     }
     setSavedSelectedCells() {
         let control = this;
         for (let item of [].slice.call(this.savedSelectedCellsPos)) {
-            let query = '[aria-colindex="' + item.colIndex + '"][index="' + item.rowIndex + '"]';
+            let query = '[data-colindex="' + item.colIndex + '"][index="' + item.rowIndex + '"]';
             addClass([control.element.querySelector(query)], [CELL_ACTIVE_BGCOLOR, SELECTED_BGCOLOR]);
         }
         for (let item of [].slice.call(this.cellSelectionPos)) {
-            let query = '[aria-colindex="' + item.colIndex + '"][index="' + item.rowIndex + '"]';
+            let query = '[data-colindex="' + item.colIndex + '"][index="' + item.rowIndex + '"]';
             addClass([control.element.querySelector(query)], [CELL_SELECTED_BGCOLOR]);
         }
     }
@@ -25630,7 +25699,7 @@ let PivotView = class PivotView extends Component {
                     this.clonedReport = this.clonedReport ? this.clonedReport : dataSourceSettings;
                 }
                 if (this.dataSourceSettings.mode !== 'Server') {
-                    this.engineModule.renderEngine(this.dataSourceSettings, customProperties, this.getValueCellInfo.bind(this), this.getHeaderSortInfo.bind(this));
+                    this.engineModule.renderEngine(this.dataSourceSettings, customProperties, this.aggregateCellInfo ? this.getValueCellInfo.bind(this) : undefined, this.onHeadersSort ? this.getHeaderSortInfo.bind(this) : undefined);
                 }
                 this.allowServerDataBinding = false;
                 this.setProperties({ pivotValues: this.engineModule.pivotValues }, true);
@@ -25641,7 +25710,7 @@ let PivotView = class PivotView extends Component {
             else if (this.dataSourceSettings.providerType === 'SSAS' && this.dataType === 'olap') {
                 customProperties.savedFieldList = this.olapEngineModule.fieldList;
                 customProperties.savedFieldListData = this.olapEngineModule.fieldListData;
-                this.olapEngineModule.renderEngine(this.dataSourceSettings, customProperties, this.getHeaderSortInfo.bind(this));
+                this.olapEngineModule.renderEngine(this.dataSourceSettings, customProperties, this.onHeadersSort ? this.getHeaderSortInfo.bind(this) : undefined);
                 this.allowServerDataBinding = false;
                 this.setProperties({ pivotValues: this.olapEngineModule.pivotValues }, true);
                 delete this.bulkChanges.pivotValues;
@@ -26121,7 +26190,8 @@ let PivotView = class PivotView extends Component {
                                     : 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;
+                                                : (this.actionObj.actionName == renameCurrentReport) ? reportRenamed : (this.actionObj.actionName == renameCurrentReport) ? reportRenamed : (this.actionObj.actionName == horizontalScroll) ? horizontalScrolled
+                                                    : (this.actionObj.actionName == verticalScroll) ? verticalScrolled : this.actionObj.actionName;
         return actionName;
     }
     /* eslint-disable-next-line */
@@ -26573,6 +26643,9 @@ __decorate([
 __decorate([
     Event()
 ], PivotView.prototype, "beforeExport", void 0);
+__decorate([
+    Event()
+], PivotView.prototype, "exportComplete", void 0);
 __decorate([
     Event()
 ], PivotView.prototype, "conditionalFormatting", void 0);
@@ -26953,7 +27026,7 @@ class ExcelExport$1 {
      * Method to perform excel export.
      * @hidden
      */
-    exportToExcel(type, exportProperties) {
+    exportToExcel(type, exportProperties, isBlob) {
         this.rows = [];
         this.actualrCnt = 0;
         let isHeaderSet = !isNullOrUndefined(exportProperties) && !isNullOrUndefined(exportProperties.header);
@@ -27140,12 +27213,21 @@ class ExcelExport$1 {
             workSheets.push({ columns: columns, rows: this.rows });
         }
         let book = new Workbook({ worksheets: workSheets }, type === 'Excel' ? 'xlsx' : 'csv', undefined, this.parent.currencyCode);
-        if ('.xlsx' === fileName.substring(fileName.length - 5, fileName.length) || '.csv' === fileName.substring(fileName.length - 4, fileName.length)) {
-            book.save(fileName);
+        let fileExtension = fileName.split(".").pop();
+        let blobData;
+        if (!isBlob) {
+            book.save(fileExtension === "xlsx" || fileExtension === "csv" ?
+                fileName : (fileName + (type === 'Excel' ? '.xlsx' : '.csv')));
         }
         else {
-            book.save(fileName + (type === 'Excel' ? '.xlsx' : '.csv'));
+            blobData = book.saveAsBlob(fileExtension === "xlsx" || type === 'Excel' ?
+                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' : 'text/csv');
         }
+        let exportCompleteEventArgs = {
+            type: type,
+            promise: isBlob ? blobData : null
+        };
+        this.parent.trigger(exportComplete, exportCompleteEventArgs);
     }
     /**
      * To destroy the excel export module
@@ -27324,7 +27406,7 @@ class PDFExport {
      * @hidden
      */
     /* eslint-disable  */
-    exportToPDF(pdfExportProperties) {
+    exportToPDF(pdfExportProperties, isBlob) {
         this.engine = this.parent.dataType === 'olap' ? this.parent.olapEngineModule : this.parent.engineModule;
         let eventParams = this.applyEvent();
         let headerStyle = this.getStyle();
@@ -27515,7 +27597,18 @@ class PDFExport {
                 integratedCnt = 0;
             }
         } while (integratedCnt < colLength);
-        eventParams.document.save(eventParams.args.fileName + '.pdf');
+        let blobData;
+        if (!isBlob) {
+            eventParams.document.save(eventParams.args.fileName + '.pdf');
+        }
+        else {
+            blobData = eventParams.document.save();
+        }
+        let exportCompleteEventArgs = {
+            type: 'PDF',
+            promise: isBlob ? blobData : null
+        };
+        this.parent.trigger(exportComplete, exportCompleteEventArgs);
         eventParams.document.destroy();
     }
     applyStyle(pdfGridRow, pivotCell, localCnt) {
@@ -31687,7 +31780,7 @@ let PivotFieldList = class PivotFieldList extends Component {
                 customProperties.enableValueSorting = this.staticPivotGridModule ?
                     this.staticPivotGridModule.enableValueSorting : this.enableValueSorting;
                 if (this.dataSourceSettings.mode !== 'Server') {
-                    this.engineModule.renderEngine(this.dataSourceSettings, customProperties, this.getValueCellInfo.bind(this), this.getHeaderSortInfo.bind(this));
+                    this.engineModule.renderEngine(this.dataSourceSettings, customProperties, this.aggregateCellInfo ? this.getValueCellInfo.bind(this) : undefined, this.onHeadersSort ? this.getHeaderSortInfo.bind(this) : undefined);
                 }
                 this.pivotFieldList = this.engineModule.fieldList;
                 let eventArgs = {
@@ -31703,7 +31796,7 @@ let PivotFieldList = class PivotFieldList extends Component {
                 });
             }
             else if (this.dataType === 'olap') {
-                this.olapEngineModule.renderEngine(this.dataSourceSettings, this.frameCustomProperties(this.olapEngineModule.fieldListData, this.olapEngineModule.fieldList), this.getHeaderSortInfo.bind(this));
+                this.olapEngineModule.renderEngine(this.dataSourceSettings, this.frameCustomProperties(this.olapEngineModule.fieldListData, this.olapEngineModule.fieldList), this.onHeadersSort ? this.getHeaderSortInfo.bind(this) : undefined);
                 this.pivotFieldList = this.olapEngineModule.fieldList;
                 let eventArgs = {
                     pivotFieldList: this.pivotFieldList,
@@ -31781,10 +31874,10 @@ let PivotFieldList = class PivotFieldList extends Component {
             this.fieldListSpinnerElement = this.element.querySelector('.e-pivotfieldlist-container');
         }
         if (this.spinnerTemplate) {
-            createSpinner({ target: this.fieldListSpinnerElement, template: this.spinnerTemplate }, this.createElement);
+            createSpinner({ target: this.fieldListSpinnerElement, template: this.spinnerTemplate, cssClass: this.cssClass ? this.cssClass : undefined }, this.createElement);
         }
         else {
-            createSpinner({ target: this.fieldListSpinnerElement }, this.createElement);
+            createSpinner({ target: this.fieldListSpinnerElement, cssClass: this.cssClass ? this.cssClass : undefined }, this.createElement);
         }
         let args;
         args = {
@@ -31942,7 +32035,7 @@ let PivotFieldList = class PivotFieldList extends Component {
                             pivot.lastFilterInfo = {};
                         }
                         else {
-                            pivot.engineModule.renderEngine(pivot.dataSourceSettings, customProperties, pivot.getValueCellInfo.bind(pivot), pivot.getHeaderSortInfo.bind(pivot));
+                            pivot.engineModule.renderEngine(pivot.dataSourceSettings, customProperties, pivot.aggregateCellInfo ? pivot.getValueCellInfo.bind(pivot) : undefined, pivot.onHeadersSort ? pivot.getHeaderSortInfo.bind(pivot) : undefined);
                         }
                     }
                 }
@@ -32039,7 +32132,7 @@ let PivotFieldList = class PivotFieldList extends Component {
             }
         }
         else {
-            pivot.olapEngineModule.renderEngine(pivot.dataSourceSettings, customProperties, pivot.getHeaderSortInfo.bind(pivot));
+            pivot.olapEngineModule.renderEngine(pivot.dataSourceSettings, customProperties, pivot.onHeadersSort ? pivot.getHeaderSortInfo.bind(pivot) : undefined);
         }
         pivot.lastSortInfo = {};
         pivot.lastAggregationInfo = {};
@@ -32419,6 +32512,7 @@ class CalculatedField {
         this.isFormula = false;
         /** @hidden */
         this.isRequireUpdate = false;
+        this.formatTypes = ['Standard', 'Currency', 'Percent', 'Custom', 'None'];
         this.parent = parent;
         this.existingReport = null;
         this.parent.calculatedFieldModule = this;
@@ -32524,7 +32618,7 @@ class CalculatedField {
                     this.fieldText = node.getAttribute('data-caption');
                     this.formulaText = node.getAttribute('data-formula');
                     this.formatType = node.getAttribute('data-formatString');
-                    this.formatText = this.formatType === 'Custom' ? node.getAttribute('data-customString') : null;
+                    this.formatText = this.formatType === 'Custom' ? node.getAttribute('data-customformatstring') : null;
                     this.fieldType = node.getAttribute('data-membertype');
                     this.parentHierarchy = this.fieldType === 'Dimension' ? node.getAttribute('data-hierarchy') : null;
                     addClass([node.querySelector('.e-list-edit-icon')], CALC_EDITED);
@@ -32554,11 +32648,19 @@ class CalculatedField {
             closest(e.originalEvent.target, '.e-acrdn-header-icon')) {
             let node = closest(e.originalEvent.target, '.e-acrdn-header').querySelector('.' + CALCCHECK);
             let fieldName = node.getAttribute('data-field');
+            let captionName = node.getAttribute('data-caption');
             let formatObj = PivotUtil.getFieldByName(fieldName, this.parent.dataSourceSettings.formatSettings);
             let optionElement = closest(e.originalEvent.target, '.e-acrdn-header-icon');
+            if (formatObj) {
+                let pivotFormat = this.getFormat(formatObj.format);
+                let formatString = (pivotFormat ? this.formatTypes.indexOf(pivotFormat) > -1 ?
+                    formatObj.format : 'Custom' : 'None');
+                this.formatType = formatString;
+            }
             if (optionElement.querySelector('.' + CALC_EDIT) && e.originalEvent.target.classList.contains(CALC_EDIT)) {
                 this.isEdit = true;
-                this.currentFieldName = this.fieldText = fieldName;
+                this.currentFieldName = fieldName;
+                this.fieldText = captionName ? captionName : fieldName;
                 this.formulaText = this.parent.engineModule.fieldList[fieldName].formula;
                 this.formatText = formatObj ? formatObj.format : '';
                 addClass([optionElement.querySelector('.e-list-icon')], CALC_EDITED);
@@ -32627,16 +32729,16 @@ class CalculatedField {
                 this.inputObj.dataBind();
                 let formatString = node.getAttribute('data-formatString');
                 let dialogElement = this.dialog.element;
+                let ddlFormatTypes = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
                 let customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);
+                let customFormatString = node.getAttribute('data-customformatstring');
                 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;
@@ -32646,14 +32748,8 @@ class CalculatedField {
                     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);
@@ -32661,6 +32757,11 @@ class CalculatedField {
                     node.querySelector('.' + CALC_EDITED).setAttribute('title', this.parent.localeObj.getConstant('clearCalculatedField'));
                     select('#' + this.parentID + 'droppable', document).value = node.getAttribute('data-uid');
                 }
+                if (formatString !== '') {
+                    ddlFormatTypes.value = formatString;
+                    ddlFormatTypes.dataBind();
+                }
+                customFormat.value = customFormatString;
                 customFormat.dataBind();
             }
             else if (node.tagName === 'LI' && (node.querySelector('.' + CALC_EDITED) &&
@@ -32675,15 +32776,15 @@ class CalculatedField {
                 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 ddlFormatTypes = 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();
+                    ddlFormatTypes.index = 0;
+                    ddlFormatTypes.dataBind();
                     memberTypeDrop.index = 0;
                     memberTypeDrop.readonly = false;
                     memberTypeDrop.dataBind();
@@ -33068,18 +33169,15 @@ class CalculatedField {
             caption: this.inputObj.value,
             formula: dropField.value
         };
+        let ddlFormatTypes = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
+        field.formatString = (ddlFormatTypes.value === 'Custom' ? customFormat.value : (ddlFormatTypes.value === 'None' ? null : ddlFormatTypes.value));
         if (this.parent.dataType === 'olap') {
-            let formatDrop = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
             let memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement), DropDownList);
             let hierarchyDrop = getInstance(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement), DropDownList);
-            field.formatString = (formatDrop.value === 'Custom' ? customFormat.value : (formatDrop.value === 'None' ? null : formatDrop.value));
             if (memberTypeDrop.value === 'Dimension') {
                 field.hierarchyUniqueName = hierarchyDrop.value;
             }
         }
-        else {
-            field.formatString = customFormat.value;
-        }
         return field;
     }
     /* eslint-enable max-len */
@@ -33160,21 +33258,21 @@ class CalculatedField {
             select('#' + this.parentID + 'droppable', this.parent.dialogRenderer.parentElement).value = '';
             select('#' + this.parentID + 'Custom_Format_Element', this.parent.dialogRenderer.parentElement).value = '';
             if (this.parent.dataType === 'olap') {
-                let customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);
-                let formatDrop = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
                 let memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement), DropDownList);
                 let hierarchyDrop = getInstance(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement), DropDownList);
-                formatDrop.index = 0;
-                formatDrop.dataBind();
                 memberTypeDrop.index = 0;
                 memberTypeDrop.readonly = false;
                 memberTypeDrop.dataBind();
                 hierarchyDrop.index = 0;
                 hierarchyDrop.enabled = false;
                 hierarchyDrop.dataBind();
-                customFormat.enabled = false;
-                customFormat.dataBind();
             }
+            let customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);
+            let ddlFormatTypes = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
+            ddlFormatTypes.index = this.parent.dataType === 'olap' ? 0 : 4;
+            ddlFormatTypes.dataBind();
+            customFormat.enabled = false;
+            customFormat.dataBind();
             /* eslint-enable max-len */
         }
     }
@@ -33463,7 +33561,7 @@ class CalculatedField {
             className: (this.parent.dataType === 'olap' ? OLAP_CALCOUTERDIV + ' ' : '') + CALCOUTERDIV
         });
         let olapFieldTreeDiv = createElement('div', { id: this.parentID + 'Olap_Tree_Div', className: 'e-olap-field-tree-div' });
-        let olapCalcDiv = createElement('div', { id: this.parentID + 'Olap_Calc_Div', className: 'e-olap-calculated-div' });
+        let pivotCalcDiv = createElement('div', { id: this.parentID + 'Pivot_Calc_Div', className: 'e-pivot-calculated-div' });
         if (this.parent.getModuleName() === 'pivotfieldlist' && this.parent.
             dialogRenderer.parentElement.querySelector('.' + FORMULA) !== null && this.parent.isAdaptive) {
             let accordDiv = createElement('div', { id: this.parentID + 'accordDiv', className: CALCACCORD });
@@ -33487,7 +33585,7 @@ class CalculatedField {
                     className: PIVOT_FIELD_TITLE_CLASS, id: this.parentID + '_' + 'FieldNameTitle',
                     innerHTML: this.parent.localeObj.getConstant('fieldTitle')
                 });
-                olapCalcDiv.appendChild(formulaTitle);
+                pivotCalcDiv.appendChild(formulaTitle);
             }
             let inputDiv = createElement('div', { id: this.parentID + 'outerDiv', className: CALCINPUTDIV });
             let inputObj = createElement('input', {
@@ -33496,7 +33594,7 @@ class CalculatedField {
                 className: CALCINPUT
             });
             inputDiv.appendChild(inputObj);
-            (this.parent.dataType === 'olap' && !this.parent.isAdaptive ? olapCalcDiv.appendChild(inputDiv) : outerDiv.appendChild(inputDiv));
+            (this.parent.dataType === 'olap' && !this.parent.isAdaptive ? pivotCalcDiv.appendChild(inputDiv) : outerDiv.appendChild(inputDiv));
             let wrapDiv = createElement('div', { id: this.parentID + 'control_container', className: TREEVIEWOUTER });
             if (!this.parent.isAdaptive) {
                 let fieldTitle = createElement('div', {
@@ -33543,7 +33641,7 @@ class CalculatedField {
                     innerHTML: (this.parent.dataType === 'olap' ? this.parent.localeObj.getConstant('expressionField') :
                         this.parent.localeObj.getConstant('formula'))
                 });
-                (this.parent.dataType === 'olap' ? olapCalcDiv.appendChild(formulaTitle) : outerDiv.appendChild(formulaTitle));
+                (this.parent.dataType === 'olap' ? pivotCalcDiv.appendChild(formulaTitle) : outerDiv.appendChild(formulaTitle));
             }
             let dropDiv = createElement('textarea', {
                 id: this.parentID + 'droppable',
@@ -33554,7 +33652,7 @@ class CalculatedField {
                             this.parent.localeObj.getConstant('dropText'))
                 }
             });
-            (this.parent.dataType === 'olap' && !this.parent.isAdaptive ? olapCalcDiv.appendChild(dropDiv) : outerDiv.appendChild(dropDiv));
+            (this.parent.dataType === 'olap' && !this.parent.isAdaptive ? pivotCalcDiv.appendChild(dropDiv) : outerDiv.appendChild(dropDiv));
             if (this.parent.isAdaptive) {
                 let buttonDiv = createElement('div', { id: this.parentID + 'buttonDiv', className: CALCBUTTONDIV });
                 let okBtn = createElement('button', {
@@ -33570,63 +33668,51 @@ class CalculatedField {
                         className: OLAP_MEMBER_TITLE_CLASS,
                         innerHTML: this.parent.localeObj.getConstant('memberType')
                     });
-                    olapCalcDiv.appendChild(memberTypeTitle);
+                    pivotCalcDiv.appendChild(memberTypeTitle);
                 }
                 let memberTypeDrop = createElement('div', { id: this.parentID + 'Member_Type_Div', className: CALC_MEMBER_TYPE_DIV });
-                (this.parent.isAdaptive ? outerDiv.appendChild(memberTypeDrop) : olapCalcDiv.appendChild(memberTypeDrop));
+                (this.parent.isAdaptive ? outerDiv.appendChild(memberTypeDrop) : pivotCalcDiv.appendChild(memberTypeDrop));
                 if (!this.parent.isAdaptive) {
                     let hierarchyTitle = createElement('div', {
                         className: OLAP_HIERARCHY_TITLE_CLASS,
                         innerHTML: this.parent.localeObj.getConstant('selectedHierarchy')
                     });
-                    olapCalcDiv.appendChild(hierarchyTitle);
+                    pivotCalcDiv.appendChild(hierarchyTitle);
                 }
                 let hierarchyDrop = createElement('div', { id: this.parentID + 'Hierarchy_List_Div', className: CALC_HIERARCHY_LIST_DIV });
-                (this.parent.isAdaptive ? outerDiv.appendChild(hierarchyDrop) : olapCalcDiv.appendChild(hierarchyDrop));
-                if (!this.parent.isAdaptive) {
-                    let formatTitle = createElement('div', {
-                        className: OLAP_FORMAT_TITLE_CLASS,
-                        innerHTML: this.parent.localeObj.getConstant('formatString')
-                    });
-                    olapCalcDiv.appendChild(formatTitle);
-                }
-                let formatDrop = createElement('div', { id: this.parentID + 'Format_Div', className: CALC_FORMAT_TYPE_DIV });
-                (this.parent.isAdaptive ? outerDiv.appendChild(formatDrop) : olapCalcDiv.appendChild(formatDrop));
-                let customFormatDiv = createElement('div', { id: this.parentID + 'custom_Format_Div', className: OLAP_CALC_CUSTOM_FORMAT_INPUTDIV });
-                let customFormatObj = createElement('input', {
-                    id: this.parentID + 'Custom_Format_Element',
-                    attrs: { 'type': 'text' },
-                    className: CALC_FORMAT_INPUT
+                (this.parent.isAdaptive ? outerDiv.appendChild(hierarchyDrop) : pivotCalcDiv.appendChild(hierarchyDrop));
+            }
+            if (!this.parent.isAdaptive) {
+                let formatTitle = createElement('div', {
+                    className: PIVOT_FORMAT_TITLE_CLASS,
+                    innerHTML: this.parent.localeObj.getConstant('formatString')
                 });
-                customFormatDiv.appendChild(customFormatObj);
-                olapCalcDiv.appendChild(customFormatDiv);
-                (this.parent.isAdaptive ? outerDiv.appendChild(customFormatDiv) : olapCalcDiv.appendChild(customFormatDiv));
-                if (this.parent.getModuleName() === 'pivotfieldlist' && this.parent.
-                    dialogRenderer.parentElement.querySelector('.' + FORMULA) === null && this.parent.isAdaptive) {
-                    let okBtn = outerDiv.querySelector('.' + CALCOKBTN);
-                    outerDiv.appendChild(okBtn);
-                }
-                else {
-                    outerDiv.appendChild(olapFieldTreeDiv);
-                    outerDiv.appendChild(olapCalcDiv);
-                }
+                pivotCalcDiv.appendChild(formatTitle);
+            }
+            let ddlFormatTypes = createElement('div', { id: this.parentID + 'Format_Div', className: CALC_FORMAT_TYPE_DIV });
+            (this.parent.isAdaptive ? outerDiv.appendChild(ddlFormatTypes) : pivotCalcDiv.appendChild(ddlFormatTypes));
+            let customFormatDiv = createElement('div', {
+                id: this.parentID + 'custom_Format_Div',
+                className: PIVOT_CALC_CUSTOM_FORMAT_INPUTDIV
+            });
+            let customFormatObj = createElement('input', {
+                id: this.parentID + 'Custom_Format_Element',
+                attrs: { 'type': 'text' },
+                className: CALC_FORMAT_INPUT
+            });
+            customFormatDiv.appendChild(customFormatObj);
+            pivotCalcDiv.appendChild(customFormatDiv);
+            (this.parent.isAdaptive ? outerDiv.appendChild(customFormatDiv) : pivotCalcDiv.appendChild(customFormatDiv));
+            if (this.parent.getModuleName() === 'pivotfieldlist' && this.parent.
+                dialogRenderer.parentElement.querySelector('.' + FORMULA) === null && this.parent.isAdaptive) {
+                let okBtn = outerDiv.querySelector('.' + CALCOKBTN);
+                outerDiv.appendChild(okBtn);
             }
             else {
-                let customFormatDiv = createElement('div', { id: this.parentID + 'custom_Format_Div', className: CALC_CUSTOM_FORMAT_INPUTDIV });
-                if (!this.parent.isAdaptive) {
-                    let formatTitle = createElement('div', {
-                        className: OLAP_FORMAT_TITLE_CLASS,
-                        innerHTML: this.parent.localeObj.getConstant('formatString')
-                    });
-                    customFormatDiv.appendChild(formatTitle);
+                if (this.parent.dataType === 'olap') {
+                    outerDiv.appendChild(olapFieldTreeDiv);
                 }
-                let customFormatObj = createElement('input', {
-                    id: this.parentID + 'Custom_Format_Element',
-                    attrs: { 'type': 'text' },
-                    className: CALC_FORMAT_INPUT
-                });
-                customFormatDiv.appendChild(customFormatObj);
-                (this.parent.isAdaptive ? outerDiv.insertBefore(customFormatDiv, select('#' + this.parentID + 'buttonDiv', outerDiv)) : outerDiv.appendChild(customFormatDiv));
+                outerDiv.appendChild(pivotCalcDiv);
             }
         }
         return outerDiv;
@@ -33651,12 +33737,12 @@ class CalculatedField {
                 this.parentHierarchy = this.fieldType === 'Dimension' ? hierarchyDrop.value : null;
             }
             if (dialogElement.element.querySelector('.' + CALC_FORMAT_TYPE_DIV)) {
-                let formatDrop = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement.element), DropDownList);
-                this.formatType = formatDrop.value;
+                let ddlFormatTypes = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement.element), DropDownList);
+                this.formatType = ddlFormatTypes.value;
             }
             if (dialogElement.element.querySelector('.' + CALC_FORMAT_INPUT)) {
                 let customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement.element), MaskedTextBox);
-                this.formatText = this.parent.dataType === 'olap' ? this.formatType === 'Custom' ? customFormat.value : null : customFormat.value;
+                this.formatText = (this.parent.dataType === 'olap' ? this.formatType : this.getFormat(this.formatType)) === 'Custom' ? customFormat.value : null;
             }
         }
         else {
@@ -33702,9 +33788,8 @@ class CalculatedField {
             hierarchyDrop.dataBind();
         }
         if (dialogElement.querySelector('.' + CALC_FORMAT_TYPE_DIV)) {
-            let formatStringData = ['Standard', 'Currency', 'Percent', 'None'];
-            let formatDrop = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
-            this.formatType = formatDrop.value = (formatStringData.indexOf(calcInfo.formatString) > -1 ? calcInfo.formatString : 'Custom');
+            let ddlFormatTypes = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
+            this.formatType = ddlFormatTypes.value = (this.formatTypes.indexOf(calcInfo.formatString) > -1 ? calcInfo.formatString : 'Custom');
         }
         if (dialogElement.querySelector('.' + CALC_FORMAT_INPUT)) {
             let customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);
@@ -33723,63 +33808,65 @@ class CalculatedField {
      * To create treeview.
      * @returns {void}
      */
-    createOlapDropElements() {
+    createDropElements() {
         let dialogElement = (this.parent.isAdaptive ?
             this.parent.dialogRenderer.parentElement : this.dialog.element);
-        let mData = [];
         let fData = [];
         let fieldData = [];
-        let memberTypeData = ['Measure', 'Dimension'];
-        let formatStringData = ['Standard', 'Currency', 'Percent', 'Custom', 'None'];
-        for (let type of memberTypeData) {
-            mData.push({ value: type, text: this.parent.localeObj.getConstant(type) });
-        }
-        for (let format of formatStringData) {
-            fData.push({ value: format, text: this.parent.localeObj.getConstant(format) });
+        for (let format of this.formatTypes) {
+            fData.push({ value: (this.parent.dataType === 'pivot' ? this.getFormat(format) : format), text: this.parent.localeObj.getConstant(format) });
         }
-        let fields = PivotUtil.getClonedData(this.parent.olapEngineModule.fieldListData);
-        for (let item of fields) {
-            if (item.spriteCssClass &&
-                (item.spriteCssClass.indexOf('e-attributeCDB-icon') > -1 ||
-                    item.spriteCssClass.indexOf('e-hierarchyCDB-icon') > -1)) {
-                fieldData.push({ value: item.id, text: item.caption });
-            }
-        }
-        let memberTypeObj = new DropDownList({
-            dataSource: mData, enableRtl: this.parent.enableRtl, locale: this.parent.locale,
-            fields: { value: 'value', text: 'text' },
-            value: this.fieldType !== null ? this.fieldType : mData[0].value,
-            readonly: this.isEdit,
-            cssClass: MEMBER_OPTIONS_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), width: '100%',
-            change: (args) => {
-                hierarchyListObj.enabled = args.value === 'Dimension' ? true : false;
-                this.fieldType = args.value;
-                this.formulaText = select('#' + this.parentID + 'droppable', document).value;
-                hierarchyListObj.dataBind();
+        if (this.parent.dataType === 'olap') {
+            let mData = [];
+            let memberTypeData = ['Measure', 'Dimension'];
+            for (let type of memberTypeData) {
+                mData.push({ value: type, text: this.parent.localeObj.getConstant(type) });
             }
-        });
-        memberTypeObj.isStringTemplate = true;
-        memberTypeObj.appendTo(select('#' + this.parentID + 'Member_Type_Div', dialogElement));
-        let hierarchyListObj = new DropDownList({
-            dataSource: fieldData, enableRtl: this.parent.enableRtl, locale: this.parent.locale,
-            allowFiltering: true,
-            enabled: memberTypeObj.value === 'Dimension' ? true : false,
-            filterBarPlaceholder: this.parent.localeObj.getConstant('example') + ' ' + fieldData[0].text.toString(),
-            fields: { value: 'value', text: 'text' },
-            value: this.parentHierarchy !== null && memberTypeObj.value === 'Dimension' ?
-                this.parentHierarchy : fieldData[0].value,
-            cssClass: MEMBER_OPTIONS_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), width: '100%',
-            change: (args) => {
-                this.parentHierarchy = args.value;
-                this.formulaText = select('#' + this.parentID + 'droppable', document).value;
+            let fields = PivotUtil.getClonedData(this.parent.olapEngineModule.fieldListData);
+            for (let item of fields) {
+                if (item.spriteCssClass &&
+                    (item.spriteCssClass.indexOf('e-attributeCDB-icon') > -1 ||
+                        item.spriteCssClass.indexOf('e-hierarchyCDB-icon') > -1)) {
+                    fieldData.push({ value: item.id, text: item.caption });
+                }
             }
-        });
-        hierarchyListObj.isStringTemplate = true;
-        hierarchyListObj.appendTo(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement));
+            let memberTypeObj = new DropDownList({
+                dataSource: mData, enableRtl: this.parent.enableRtl, locale: this.parent.locale,
+                fields: { value: 'value', text: 'text' },
+                value: this.fieldType !== null ? this.fieldType : mData[0].value,
+                readonly: this.isEdit,
+                cssClass: MEMBER_OPTIONS_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), width: '100%',
+                change: (args) => {
+                    hierarchyListObj.enabled = args.value === 'Dimension' ? true : false;
+                    this.fieldType = args.value;
+                    this.formulaText = select('#' + this.parentID + 'droppable', document).value;
+                    hierarchyListObj.dataBind();
+                }
+            });
+            memberTypeObj.isStringTemplate = true;
+            memberTypeObj.appendTo(select('#' + this.parentID + 'Member_Type_Div', dialogElement));
+            let hierarchyListObj = new DropDownList({
+                dataSource: fieldData, enableRtl: this.parent.enableRtl, locale: this.parent.locale,
+                allowFiltering: true,
+                enabled: memberTypeObj.value === 'Dimension' ? true : false,
+                filterBarPlaceholder: this.parent.localeObj.getConstant('example') + ' ' + fieldData[0].text.toString(),
+                fields: { value: 'value', text: 'text' },
+                value: this.parentHierarchy !== null && memberTypeObj.value === 'Dimension' ?
+                    this.parentHierarchy : fieldData[0].value,
+                cssClass: MEMBER_OPTIONS_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), width: '100%',
+                change: (args) => {
+                    this.parentHierarchy = args.value;
+                    this.formulaText = select('#' + this.parentID + 'droppable', document).value;
+                }
+            });
+            hierarchyListObj.isStringTemplate = true;
+            hierarchyListObj.appendTo(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement));
+        }
         let formatStringObj = new DropDownList({
             dataSource: fData, enableRtl: this.parent.enableRtl, locale: this.parent.locale,
             fields: { value: 'value', text: 'text' },
-            value: this.formatType !== null ? this.formatType : fData[0].value,
+            value: this.parent.isAdaptive && this.formatType !== null ? this.formatType
+                : this.parent.dataType === 'olap' ? fData[0].value : fData[4].value,
             cssClass: MEMBER_OPTIONS_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), width: '100%',
             change: (args) => {
                 customerFormatObj.enabled = args.value === 'Custom' ? true : false;
@@ -33804,6 +33891,30 @@ class CalculatedField {
         customerFormatObj.isStringTemplate = true;
         customerFormatObj.appendTo('#' + this.parentID + 'Custom_Format_Element');
     }
+    getFormat(pivotFormat) {
+        let format = pivotFormat;
+        switch (format) {
+            case 'Standard':
+                format = 'N';
+                break;
+            case 'Currency':
+                format = 'C';
+                break;
+            case 'Percent':
+                format = 'P';
+                break;
+            case 'N':
+                format = 'Standard';
+                break;
+            case 'C':
+                format = 'Currency';
+                break;
+            case 'P':
+                format = 'Percent';
+                break;
+        }
+        return format;
+    }
     /**
      * To create treeview.
      * @returns {void}
@@ -33956,12 +34067,11 @@ class CalculatedField {
                 args.node.setAttribute('data-membertype', field.fieldType);
                 args.node.setAttribute('data-hierarchy', field.parentHierarchy ? field.parentHierarchy : '');
                 args.node.setAttribute('data-formula', field.formula);
-                let formatStringData = ['Standard', 'Currency', 'Percent', 'None'];
                 let formatString;
-                formatString = (field.formatString ? formatStringData.indexOf(field.formatString) > -1 ?
+                formatString = (field.formatString ? this.formatTypes.indexOf(field.formatString) > -1 ?
                     field.formatString : 'Custom' : 'None');
                 args.node.setAttribute('data-formatString', formatString);
-                args.node.setAttribute('data-customString', (formatString === 'Custom' ? field.formatString : ''));
+                args.node.setAttribute('data-customformatstring', (formatString === 'Custom' ? field.formatString : ''));
                 let removeElement = createElement('span', {
                     className: GRID_REMOVE + ' e-icons e-list-icon'
                 });
@@ -34001,6 +34111,13 @@ class CalculatedField {
             args.node.setAttribute('data-type', args.nodeData.type);
             let formatObj = PivotUtil.getFieldByName(field, this.parent.dataSourceSettings.formatSettings);
             args.node.setAttribute('data-formatString', formatObj ? formatObj.format : '');
+            if (formatObj) {
+                let pivotFormat = this.getFormat(formatObj.format);
+                let formatString = (pivotFormat ? this.formatTypes.indexOf(pivotFormat) > -1 ?
+                    formatObj.format : 'Custom' : 'None');
+                args.node.setAttribute('data-customformatstring', (formatString === 'Custom' ? pivotFormat : ''));
+                args.node.setAttribute('data-formatString', formatObj ? formatString : '');
+            }
             let dragElement = createElement('span', {
                 attrs: { 'tabindex': '-1', 'aria-disabled': 'false', 'title': this.parent.localeObj.getConstant('dragField') },
                 className: ICON + ' e-drag'
@@ -34079,7 +34196,7 @@ class CalculatedField {
             let key = keys[index];
             data.push({
                 header: '<input id=' + this.parentID + '_' + index + ' class=' + CALCCHECK + ' type="checkbox" data-field=' +
-                    key + ' data-caption=' + this.parent.engineModule.fieldList[key].caption + ' data-type=' +
+                    key + ' data-caption="' + this.parent.engineModule.fieldList[key].caption + '" data-type=' +
                     this.parent.engineModule.fieldList[key].type + '/>',
                 content: (this.parent.engineModule.fieldList[key].aggregateType === CALC ||
                     (this.getMenuItems(this.parent.engineModule.fieldList[key].type).length < 1)) ? '' :
@@ -34098,9 +34215,9 @@ class CalculatedField {
     renderMobileLayout(tabObj) {
         tabObj.items[4].content = this.renderDialogElements().outerHTML;
         tabObj.dataBind();
-        if (this.parent.dataType === 'olap' && this.parent.isAdaptive && this.parent.
+        if (this.parent.isAdaptive && this.parent.
             dialogRenderer.parentElement.querySelector('.' + FORMULA) !== null) {
-            this.createOlapDropElements();
+            this.createDropElements();
         }
         let cancelBtn = new Button({ cssClass: FLAT + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), isPrimary: true, locale: this.parent.locale, enableRtl: this.parent.enableRtl });
         cancelBtn.isStringTemplate = true;
@@ -34124,25 +34241,6 @@ class CalculatedField {
             });
             this.inputObj.isStringTemplate = true;
             this.inputObj.appendTo('#' + this.parentID + 'ddlelement');
-            if (this.parent.dataType === 'pivot') {
-                let formatInputObj = new MaskedTextBox({
-                    locale: this.parent.locale, enableRtl: this.parent.enableRtl,
-                    placeholder: this.parent.localeObj.getConstant('numberFormatString'),
-                    change: (args) => {
-                        this.formatText = args.value;
-                        this.formulaText = select('#' + this.parentID + 'droppable', document).value;
-                    },
-                    cssClass: this.parent.cssClass
-                });
-                formatInputObj.isStringTemplate = true;
-                formatInputObj.appendTo('#' + this.parentID + 'Custom_Format_Element');
-                if (this.formatText !== null && this.parent.
-                    dialogRenderer.parentElement.querySelector('.' + CALC_FORMAT_INPUT) !== null) {
-                    this.parent.
-                        dialogRenderer.parentElement.querySelector('.' + CALC_FORMAT_INPUT).value = this.formatText;
-                    formatInputObj.value = this.formatText;
-                }
-            }
             if (this.formulaText !== null && select('#' + this.parentID + 'droppable', this.parent.dialogRenderer.parentElement) !== null) {
                 let drop = select('#' + this.parentID + 'droppable', this.parent.dialogRenderer.parentElement);
                 drop.value = this.formulaText;
@@ -34354,18 +34452,7 @@ class CalculatedField {
         });
         this.inputObj.isStringTemplate = true;
         this.inputObj.appendTo('#' + this.parentID + 'ddlelement');
-        if (this.parent.dataType === 'pivot') {
-            let customerFormatObj = new MaskedTextBox({
-                placeholder: this.parent.localeObj.getConstant('numberFormatString'),
-                locale: this.parent.locale, enableRtl: this.parent.enableRtl,
-                cssClass: this.parent.cssClass
-            });
-            customerFormatObj.isStringTemplate = true;
-            customerFormatObj.appendTo('#' + this.parentID + 'Custom_Format_Element');
-        }
-        if (this.parent.dataType === 'olap' && !this.parent.isAdaptive) {
-            this.createOlapDropElements();
-        }
+        this.createDropElements();
         this.createTreeView();
         this.droppable = new Droppable(select('#' + this.parentID + 'droppable'));
         this.keyboardEvents = new KeyboardEvents(this.parent.calculatedFieldModule.dialog.element, {
@@ -34490,6 +34577,7 @@ class CalculatedField {
      */
     destroy() {
         this.removeEventListener();
+        this.formatTypes = null;
     }
 }
 
@@ -35310,7 +35398,8 @@ class ConditionalFormatting {
             remove(select('#' + this.parentID + 'conditionalformatting', document));
         }
         this.parent.element.appendChild(createElement('div', {
-            id: this.parentID + 'conditionalformatting'
+            id: this.parentID + 'conditionalformatting',
+            className: FORMAT_DIALOG
         }));
         let buttonModel = [
             {
@@ -35345,14 +35434,14 @@ class ConditionalFormatting {
                 showCloseIcon: false, closeOnEscape: false, enableRtl: this.parent.enableRtl, locale: this.parent.locale,
                 position: { X: 'center', Y: 'center' }, allowDragging: true, buttons: buttonModel,
                 beforeOpen: this.beforeOpen.bind(this), close: this.removeDialog.bind(this),
-                cssClass: FORMAT_DIALOG + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), header: this.parent.localeObj.getConstant('conditionalFormating'), target: document.body
+                cssClass: this.parent.cssClass, header: this.parent.localeObj.getConstant('conditionalFormating'), target: document.body
             });
         }
         else {
             this.dialog = new Dialog({
                 allowDragging: true, position: { X: 'center', Y: this.parent.element.offsetTop }, buttons: buttonModel,
                 beforeOpen: this.beforeOpen.bind(this), close: this.removeDialog.bind(this),
-                cssClass: FORMAT_DIALOG + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), isModal: false, closeOnEscape: true, enableRtl: this.parent.enableRtl, locale: this.parent.locale,
+                cssClass: this.parent.cssClass, isModal: false, closeOnEscape: true, enableRtl: this.parent.enableRtl, locale: this.parent.locale,
                 showCloseIcon: true, header: this.parent.localeObj.getConstant('conditionalFormating'), target: this.parent.element
             });
         }
@@ -36946,12 +37035,12 @@ class Toolbar$2 {
             });
             args.element.innerText = '';
             checkbox.appendTo('#' + this.parent.element.id + '_' + 'checkBox');
-            if ((['Pie', 'Funnel', 'Pyramid', 'Doughnut'].indexOf(this.parent.chartSettings.chartSeries.type) > -1) &&
+            if ((['Pie', 'Funnel', 'Pyramid', 'Doughnut', 'Pareto'].indexOf(this.parent.chartSettings.chartSeries.type) > -1) &&
                 !args.element.classList.contains(MENU_DISABLE)) {
                 args.element.classList.add(MENU_DISABLE);
                 checkbox.disabled = true;
             }
-            else if ((['Pie', 'Funnel', 'Pyramid', 'Doughnut'].indexOf(this.parent.chartSettings.chartSeries.type) < 0) &&
+            else if ((['Pie', 'Funnel', 'Pyramid', 'Doughnut', 'Pareto'].indexOf(this.parent.chartSettings.chartSeries.type) < 0) &&
                 args.element.classList.contains(MENU_DISABLE)) {
                 args.element.classList.remove(MENU_DISABLE);
                 checkbox.disabled = false;
@@ -36987,7 +37076,7 @@ class Toolbar$2 {
             this.showLableState = chartSettings.legendSettings.visible;
         }
         else {
-            this.showLableState = ['Pie', 'Funnel', 'Pyramid', 'Doughnut'].indexOf(this.parent.chartSettings.chartSeries.type) > -1 ?
+            this.showLableState = ['Pie', 'Funnel', 'Pyramid', 'Doughnut', 'Pareto'].indexOf(this.parent.chartSettings.chartSeries.type) > -1 ?
                 false : true;
         }
         return this.showLableState;
@@ -37468,11 +37557,11 @@ class Toolbar$2 {
     changeDropDown(args) {
         let chartSettings = JSON.parse(this.parent.getPersistData()).chartSettings;
         if (!(chartSettings && chartSettings.legendSettings && chartSettings.legendSettings.visible !== undefined)) {
-            let checked = ['Pie', 'Funnel', 'Pyramid', 'Doughnut'].indexOf(args.value.toString()) > -1 ?
+            let checked = ['Pie', 'Funnel', 'Pyramid', 'Doughnut', 'Pareto'].indexOf(args.value.toString()) > -1 ?
                 false : true;
             getInstance(select('#' + this.parent.element.id + '_DialogShowLabel'), CheckBox).checked = checked;
         }
-        if (['Pie', 'Funnel', 'Pyramid', 'Doughnut'].indexOf(args.value.toString()) > -1) {
+        if (['Pie', 'Funnel', 'Pyramid', 'Doughnut', 'Pareto'].indexOf(args.value.toString()) > -1) {
             getInstance(select('#' + this.parent.element.id + '_DialogMultipleAxis'), CheckBox).disabled = true;
             getInstance(select('#' + this.parent.element.id + '_AxisModeOption'), DropDownList).enabled = false;
         }
@@ -37503,7 +37592,7 @@ class Toolbar$2 {
         });
         checkbox1.appendTo(select('#' + this.parent.element.id + '_DialogShowLabel', this.chartTypesDialog.element));
         checkbox.appendTo(select('#' + this.parent.element.id + '_DialogMultipleAxis', this.chartTypesDialog.element));
-        if (['Pie', 'Funnel', 'Pyramid', 'Doughnut'].indexOf(this.parent.chartSettings.chartSeries.type) > -1) {
+        if (['Pie', 'Funnel', 'Pyramid', 'Doughnut', 'Pareto'].indexOf(this.parent.chartSettings.chartSeries.type) > -1) {
             checkbox.disabled = true;
             getInstance(select('#' + this.parent.element.id + '_AxisModeOption'), DropDownList).enabled = false;
         }
@@ -38069,7 +38158,7 @@ class Grouping {
         this.parentElement = parentElement;
         this.selectedCellsInfo = [];
         this.isUpdate = false;
-        let colIndex = Number(target.getAttribute('aria-colindex'));
+        let colIndex = Number(target.getAttribute('data-colindex'));
         let rowIndex = Number(target.getAttribute('index'));
         let cell = this.parent.engineModule.pivotValues[rowIndex][colIndex];
         let fieldName = cell.valueSort.axis.toString();
@@ -38261,7 +38350,7 @@ class Grouping {
         let selectedElements = this.parent.element.querySelectorAll('.' + CELL_SELECTED_BGCOLOR + ',.' + SELECTED_BGCOLOR);
         /* eslint-enable */
         for (let element of selectedElements) {
-            let colIndex = Number(element.getAttribute('aria-colindex'));
+            let colIndex = Number(element.getAttribute('data-colindex'));
             let rowIndex = Number(element.getAttribute('index'));
             let cell = this.parent.engineModule.pivotValues[rowIndex][colIndex];
             if (cell && (cell.axis === axis) && !(cell.type === 'grand sum' || cell.type === 'sum') &&
@@ -38885,5 +38974,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, onHeadersSort, 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 };
+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, exportComplete, 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, onHeadersSort, contextMenuClick, contextMenuOpen, fieldListRefreshed, conditionalFormatting, beforePdfExport, beforeExcelExport, memberFiltering, calculatedFieldCreate, memberEditorOpen, fieldRemove, numberFormatting, aggregateMenuOpen, fieldDragStart, chartPointClick, beforeServiceInvoke, actionBegin, actionComplete, actionFailure, initialLoad, uiUpdate, scroll, verticalScroll, horizontalScroll, 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, verticalScrolled, horizontalScrolled, Theme, ErrorDialog, FilterDialog, PivotContextMenu, AggregateMenu, Toolbar$2 as Toolbar, NumberFormatting, Grouping, PivotEngine, PivotUtil, OlapEngine, MDXQuery };
 //# sourceMappingURL=ej2-pivotview.es2015.js.map