@syncfusion/ej2-pivotview 20.2.36 → 20.2.43

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

@@ -1354,7 +1354,7 @@ var PivotEngine = /** @__PURE__ @class */ (function () {
                                             if (this_1.fields.indexOf(newFieldName) === -1) {
                                                 this_1.fields.push(newFieldName);
                                             }
-                                            item[this_1.fieldKeys[newFieldName]] = (isInRangeAvail ? undefined : new Date(newDate.setMonth(date.getMonth(), newDate.getDate())).toString());
+                                            item[this_1.fieldKeys[newFieldName]] = (isInRangeAvail ? undefined : new Date(newDate.setMonth(date.getMonth(), 1)).toString());
                                         }
                                         break;
                                     case 'Days':
@@ -2597,7 +2597,7 @@ var PivotEngine = /** @__PURE__ @class */ (function () {
                         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,
@@ -3522,7 +3522,7 @@ var PivotEngine = /** @__PURE__ @class */ (function () {
             PivotUtil.applyHeadersSort(sortMembersOrder, sortOrder, type);
             isHeaderSortByDefault = true;
         }
-        if (isHeaderSortByDefault) {
+        if (isHeaderSortByDefault && this.getHeaderSortInfo) {
             var copyOrder = [];
             for (var m = 0, n = 0; m < sortMembersOrder.length; m++) {
                 var member = sortMembersOrder[m];
@@ -3658,7 +3658,7 @@ var PivotEngine = /** @__PURE__ @class */ (function () {
                     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,
@@ -4885,8 +4885,9 @@ var PivotEngine = /** @__PURE__ @class */ (function () {
                             for (var _g = 0, indexCollection_2 = indexCollection; _g < indexCollection_2.length; _g++) {
                                 var index = indexCollection_2[_g];
                                 var currentSet = data[index[0]][index[1]];
+                                var actualValue = isNullOrUndefined(selectedRowValues[index[1]].actualValue) ? 0 : selectedRowValues[index[1]].actualValue;
                                 // let cVal: number = currentSet.value - (selectedRowValues[index[1]] as IAxisSet).value;
-                                var cVal = currentSet.actualValue - selectedRowValues[index[1]].actualValue;
+                                var 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]] = [];
@@ -4898,8 +4899,7 @@ var PivotEngine = /** @__PURE__ @class */ (function () {
                                 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;
                                 }
@@ -5138,7 +5138,9 @@ var PivotEngine = /** @__PURE__ @class */ (function () {
                                                 activeColumn[cln].valueSort[item.valueSort.levelName] &&
                                                 currentSet.axis === 'value' && currentSet.actualText === name_3) {
                                                 if (activeColumn[cln].type !== 'grand sum') {
-                                                    cVal += currentSet.value;
+                                                    if (!isNullOrUndefined(currentSet.value)) {
+                                                        cVal += currentSet.value;
+                                                    }
                                                     currentSet.formattedText = subTotal ? '' : this.getFormattedValue(cVal, name_3).formattedText;
                                                     if (!this.aggregatedValueMatrix[rln]) {
                                                         this.aggregatedValueMatrix[rln] = [];
@@ -5254,7 +5256,7 @@ var PivotEngine = /** @__PURE__ @class */ (function () {
             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,
@@ -5968,6 +5970,8 @@ var afterPivotTableRender = 'afterPivotTableRender';
 /** @hidden */
 var beforeExport = 'beforeExport';
 /** @hidden */
+var exportComplete = 'exportComplete';
+/** @hidden */
 var excelHeaderQueryCellInfo = 'excelHeaderQueryCellInfo';
 /** @hidden */
 var pdfHeaderQueryCellInfo = 'pdfHeaderQueryCellInfo';
@@ -6093,6 +6097,10 @@ var uiUpdate = 'ui-update';
 /** @hidden */
 var scroll = 'scroll';
 /** @hidden */
+var verticalScroll = 'vertical-scroll';
+/** @hidden */
+var horizontalScroll = 'horizontal-scroll';
+/** @hidden */
 var contentReady = 'content-ready';
 /** @hidden */
 var dataReady = 'data-ready';
@@ -6292,6 +6300,10 @@ var windowResized = 'Window resized';
 var recordUpdated = 'Records updated';
 /** @hidden */
 var drillThroughClosed = 'Drill-through closed';
+/** @hidden */
+var verticalScrolled = 'Vertically scrolled';
+/** @hidden */
+var horizontalScrolled = 'Horizontally scrolled';
 
 /**
  * CSS Constants
@@ -6636,13 +6648,11 @@ var CALC_FORMAT_INPUT = 'e-custom-format-input';
 /** @hidden */
 var CALCINPUTDIV = 'e-pivot-calc-input-div';
 /** @hidden */
-var CALC_CUSTOM_FORMAT_INPUTDIV = 'e-pivot-calc-custom-format-div';
-/** @hidden */
-var OLAP_CALC_CUSTOM_FORMAT_INPUTDIV = 'e-olap-calc-custom-format-div';
+var PIVOT_CALC_CUSTOM_FORMAT_INPUTDIV = 'e-pivot-calc-custom-format-div';
 /** @hidden */
 var CALC_HIERARCHY_LIST_DIV = 'e-olap-calc-hierarchy-list-div';
 /** @hidden */
-var CALC_FORMAT_TYPE_DIV = 'e-olap-calc-format-type-div';
+var CALC_FORMAT_TYPE_DIV = 'e-pivot-calc-format-type-div';
 /** @hidden */
 var CALC_MEMBER_TYPE_DIV = 'e-olap-calc-member-type-div';
 /** @hidden */
@@ -6712,7 +6722,7 @@ var PIVOT_FORMULA_TITLE_CLASS = 'e-pivot-formula-title';
 /** @hidden */
 var OLAP_HIERARCHY_TITLE_CLASS = 'e-olap-hierarchy-title';
 /** @hidden */
-var OLAP_FORMAT_TITLE_CLASS = 'e-olap-format-title';
+var PIVOT_FORMAT_TITLE_CLASS = 'e-pivot-format-title';
 /** @hidden */
 var OLAP_MEMBER_TITLE_CLASS = 'e-olap-member-title';
 /** @hidden */
@@ -7727,12 +7737,22 @@ var Render = /** @__PURE__ @class */ (function () {
             this.parent.lastColumn.width = 'auto';
             this.parent.lastColumn = undefined;
         }
+        var exportCompleteEventArgs = {
+            type: 'PDF',
+            promise: args.promise
+        };
+        this.parent.trigger(exportComplete, exportCompleteEventArgs);
     };
     Render.prototype.excelExportComplete = function (args) {
         if (this.parent.lastColumn !== undefined && this.parent.lastColumn.width !== 'auto') {
             this.parent.lastColumn.width = 'auto';
             this.parent.lastColumn = undefined;
         }
+        var exportCompleteEventArgs = {
+            type: 'Excel/CSV',
+            promise: args.promise
+        };
+        this.parent.trigger(exportComplete, exportCompleteEventArgs);
     };
     /* eslint-enable */
     Render.prototype.dataBound = function (args) {
@@ -7824,7 +7844,7 @@ var Render = /** @__PURE__ @class */ (function () {
                 isGroupElement = true;
             }
             var rowIndex = Number(elem.getAttribute('index'));
-            var colIndex = Number(elem.getAttribute('aria-colindex'));
+            var colIndex = Number(elem.getAttribute('data-colindex'));
             var pivotValue1 = this_1.parent.pivotValues[rowIndex][colIndex];
             var selectedID = item.id;
             switch (selectedID) {
@@ -7896,7 +7916,7 @@ var Render = /** @__PURE__ @class */ (function () {
                         if (groupField && groupField.type === 'Custom' || (this_1.parent.engineModule.fieldList[fieldName].isCustomField && fieldName.indexOf('_custom_group') > -1)) {
                             groupField = PivotUtil.getFieldByName(fieldName.replace('_custom_group', ''), this_1.parent.dataSourceSettings.groupSettings);
                             if (groupField) {
-                                var cell = this_1.parent.engineModule.pivotValues[Number(elem.getAttribute('index'))][Number(elem.getAttribute('aria-colindex'))];
+                                var cell = this_1.parent.engineModule.pivotValues[Number(elem.getAttribute('index'))][Number(elem.getAttribute('data-colindex'))];
                                 var selectedCellsInfo = this_1.parent.groupingModule.getSelectedCells(cell.axis, fieldName, cell.actualText.toString());
                                 selectedCellsInfo.push({ axis: cell.axis, fieldName: fieldName, name: cell.actualText.toString(), cellInfo: cell });
                                 var selectedOptions = this_1.parent.groupingModule.getSelectedOptions(selectedCellsInfo);
@@ -8105,7 +8125,7 @@ var Render = /** @__PURE__ @class */ (function () {
             ele = target.parentElement.parentElement;
         }
         var rowIndx = Number(ele.getAttribute('index'));
-        var colIndx = Number(ele.getAttribute('aria-colindex'));
+        var colIndx = Number(ele.getAttribute('data-colindex'));
         var pivotValue = this.parent.pivotValues[rowIndx][colIndx];
         var aggregateType;
         if (args.item.id.indexOf(this.parent.element.id + '_Agg') > -1) {
@@ -8249,7 +8269,7 @@ var Render = /** @__PURE__ @class */ (function () {
             var fieldName = target.getAttribute('fieldName');
             if (!fieldName || fieldName == '') {
                 var rowIndx = Number(target.getAttribute('index'));
-                var colIndx = Number(target.getAttribute('aria-colindex'));
+                var colIndx = Number(target.getAttribute('data-colindex'));
                 fieldName = this.engine.pivotValues[rowIndx][colIndx].actualText;
             }
             var valuefields = this.parent.dataSourceSettings.values;
@@ -8437,7 +8457,7 @@ var Render = /** @__PURE__ @class */ (function () {
         var selectedElements = this.parent.element.querySelectorAll('.' + CELL_SELECTED_BGCOLOR + ',.' + SELECTED_BGCOLOR);
         for (var _i = 0, selectedElements_1 = selectedElements; _i < selectedElements_1.length; _i++) {
             var element = selectedElements_1[_i];
-            var colIndex = Number(element.getAttribute('aria-colindex'));
+            var colIndex = Number(element.getAttribute('data-colindex'));
             var rowIndex = Number(element.getAttribute('index'));
             var cell = this.engine.pivotValues[rowIndex][colIndex];
             if (cell) {
@@ -8480,7 +8500,7 @@ var Render = /** @__PURE__ @class */ (function () {
             var 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') {
                     var isValueCell = cell.type && cell.type === 'value';
                     tCell.innerText = '';
@@ -8584,18 +8604,18 @@ var Render = /** @__PURE__ @class */ (function () {
                 var 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);
                 }
                 var 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) {
@@ -8608,12 +8628,12 @@ var Render = /** @__PURE__ @class */ (function () {
                         '<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) {
                 var index = tCell.getAttribute('index');
-                var colindex = tCell.getAttribute('aria-colindex');
+                var colindex = tCell.getAttribute('data-colindex');
                 var 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) {
@@ -8782,7 +8802,7 @@ var Render = /** @__PURE__ @class */ (function () {
                         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());
                 var fieldName = void 0;
                 if (this.parent.dataType === 'pivot') {
@@ -8873,7 +8893,7 @@ var Render = /** @__PURE__ @class */ (function () {
                 tCell = this.appendValueSortIcon(cell, tCell, cell.rowIndex, cell.colIndex);
                 if (this.parent.cellTemplate) {
                     var index = tCell.getAttribute('index');
-                    var colindex = tCell.getAttribute('aria-colindex');
+                    var colindex = tCell.getAttribute('data-colindex');
                     this.parent.gridHeaderCellInfo.push({ targetCell: tCell });
                 }
                 var len = this.parent.dataSourceSettings.values.length;
@@ -8956,7 +8976,7 @@ var Render = /** @__PURE__ @class */ (function () {
         cell = (cell.className.indexOf('e-headercelldiv') > -1 ? cell.parentElement : cell);
         var 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
         };
@@ -13377,7 +13397,7 @@ var KeyboardInteraction = /** @__PURE__ @class */ (function () {
         if (this.parent.grid && this.parent.gridSettings.allowSelection && this.parent.gridSettings.selectionSettings.mode !== 'Row' &&
             !target.classList.contains('e-numerictextbox')) {
             var control_1 = this.parent;
-            var colIndex_1 = Number(e.target.getAttribute('aria-colIndex'));
+            var colIndex_1 = Number(e.target.getAttribute('data-colindex'));
             var rowIndex_1 = Number(e.target.getAttribute('index'));
             var ele_1;
             /* eslint-disable */
@@ -13387,7 +13407,7 @@ var KeyboardInteraction = /** @__PURE__ @class */ (function () {
                         control_1.renderModule.rowStartPos !== rowIndex_1)) ? null : this.getParentElement(control_1, ele_1, colIndex_1, rowIndex_1 - 1);
                 }
                 else if (e.action === 'shiftDown' || e.action === 'downArrow') {
-                    ele_1 = control_1.element.querySelector('th[aria-colindex="' + colIndex_1 + '"][index="' + (rowIndex_1 + 1) + '"]');
+                    ele_1 = control_1.element.querySelector('th[data-colindex="' + colIndex_1 + '"][index="' + (rowIndex_1 + 1) + '"]');
                 }
                 else if (e.action === 'shiftLeft' || e.action === 'leftArrow') {
                     ele_1 = e.target.previousSibling;
@@ -13398,7 +13418,7 @@ var KeyboardInteraction = /** @__PURE__ @class */ (function () {
             }
             if (!isNullOrUndefined(ele_1)) {
                 if (control_1.gridSettings.selectionSettings.mode === 'Both' ? !ele_1.classList.contains(ROW_CELL_CLASS) : true) {
-                    colIndex_1 = Number(ele_1.getAttribute('aria-colindex'));
+                    colIndex_1 = Number(ele_1.getAttribute('data-colindex'));
                     rowIndex_1 = Number(ele_1.getAttribute('index'));
                     var colSpan_1 = Number(ele_1.getAttribute('aria-colspan'));
                     control_1.clearSelection(ele_1, e, colIndex_1, rowIndex_1);
@@ -13420,11 +13440,11 @@ var KeyboardInteraction = /** @__PURE__ @class */ (function () {
             }
             else {
                 if (e.action === 'upArrow') {
-                    ele_1 = control_1.element.querySelector('[aria-colindex="' + colIndex_1 + '"][index="' + (rowIndex_1 - 1) + '"]');
+                    ele_1 = control_1.element.querySelector('[data-colindex="' + colIndex_1 + '"][index="' + (rowIndex_1 - 1) + '"]');
                     rowIndex_1--;
                 }
                 else if (e.action === 'downArrow') {
-                    ele_1 = control_1.element.querySelector('[aria-colindex="' + colIndex_1 + '"][index="' + (rowIndex_1 + 1) + '"]');
+                    ele_1 = control_1.element.querySelector('[data-colindex="' + colIndex_1 + '"][index="' + (rowIndex_1 + 1) + '"]');
                     rowIndex_1++;
                 }
                 if (!isNullOrUndefined(ele_1)) {
@@ -13454,7 +13474,7 @@ var KeyboardInteraction = /** @__PURE__ @class */ (function () {
     };
     KeyboardInteraction.prototype.getParentElement = function (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;
@@ -13744,8 +13764,12 @@ var VirtualScroll$1 = /** @__PURE__ @class */ (function () {
         };
     };
     VirtualScroll$$1.prototype.update = function (mHdr, mCont, top, left, e) {
+        var _this = this;
         this.parent.isScrolling = true;
         var engine = this.parent.dataType === 'pivot' ? this.parent.engineModule : this.parent.olapEngineModule;
+        var args = {
+            dataSourceSettings: PivotUtil.getClonedDataSourceSettings(this.parent.dataSourceSettings)
+        };
         if (this.parent.pageSettings && engine.pageSettings) {
             if (this.direction === 'vertical') {
                 var rowValues = this.parent.dataType === 'pivot' ?
@@ -13757,25 +13781,29 @@ var VirtualScroll$1 = /** @__PURE__ @class */ (function () {
                     // 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;
-                var 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.pageSettings.rowCurrentPage = engine.pageSettings.rowCurrentPage = section > 1 ? section : 1;
+                var rowStartPos_1 = 0;
+                this.parent.trigger(enginePopulating, args, function (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_1 = _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_1 = _this.parent.olapEngineModule.pageRowStartPos;
                     }
-                }
-                else {
-                    this.parent.olapEngineModule.scrollPage('scroll');
-                    rowStartPos = this.parent.olapEngineModule.pageRowStartPos;
-                }
-                this.parent.pivotValues = engine.pivotValues;
-                var exactPage = Math.ceil(rowStartPos / (this.parent.pageSettings.rowSize * rowValues));
+                    _this.enginePopulatedEventMethod(engine);
+                });
+                var exactPage = Math.ceil(rowStartPos_1 / (this.parent.pageSettings.rowSize * rowValues));
                 var pos = exactSize * exactPage -
                     (engine.rowFirstLvl * rowValues * this.parent.gridSettings.rowHeight);
                 this.parent.scrollPosObject.verticalSection = pos;
@@ -13790,32 +13818,51 @@ var VirtualScroll$1 = /** @__PURE__ @class */ (function () {
                     // this.parent.hideWaitingPopup();
                     return;
                 }
+                this.parent.actionObj.actionName = horizontalScroll;
+                this.parent.actionBeginMethod();
                 this.parent.showWaitingPopup();
-                var pivot = this.parent;
-                pivot.scrollPosObject.horizontal = section;
-                engine.pageSettings.columnCurrentPage = section > 1 ? section : 1;
-                var colStartPos = 0;
-                if (pivot.dataType === 'pivot') {
-                    if (this.parent.dataSourceSettings.mode === 'Server') {
-                        this.parent.getEngine('onScroll', null, null, null, null, null, null);
+                var pivot_1 = this.parent;
+                pivot_1.scrollPosObject.horizontal = section;
+                this.parent.pageSettings.columnCurrentPage = engine.pageSettings.columnCurrentPage = section > 1 ? section : 1;
+                var colStartPos_1 = 0;
+                this.parent.trigger(enginePopulating, args, function (observedArgs) {
+                    if (pivot_1.dataType === 'pivot') {
+                        if (_this.parent.dataSourceSettings.mode === 'Server') {
+                            _this.parent.getEngine('onScroll', null, null, null, null, null, null);
+                        }
+                        else {
+                            pivot_1.engineModule.generateGridData(pivot_1.dataSourceSettings, true, pivot_1.engineModule.headerCollection);
+                            colStartPos_1 = pivot_1.engineModule.colStartPos;
+                        }
                     }
                     else {
-                        pivot.engineModule.generateGridData(pivot.dataSourceSettings, true, pivot.engineModule.headerCollection);
-                        colStartPos = pivot.engineModule.colStartPos;
+                        pivot_1.olapEngineModule.scrollPage('scroll');
+                        colStartPos_1 = pivot_1.olapEngineModule.pageColStartPos;
                     }
-                }
-                else {
-                    pivot.olapEngineModule.scrollPage('scroll');
-                    colStartPos = pivot.olapEngineModule.pageColStartPos;
-                }
-                pivot.pivotValues = engine.pivotValues;
-                var exactPage = Math.ceil(colStartPos / (pivot.pageSettings.columnSize * colValues));
+                    _this.enginePopulatedEventMethod(engine);
+                });
+                var exactPage = Math.ceil(colStartPos_1 / (pivot_1.pageSettings.columnSize * colValues));
                 var pos = exactSize * exactPage - (engine.colFirstLvl *
-                    colValues * pivot.gridSettings.columnWidth);
-                pivot.scrollPosObject.horizontalSection = pos;
+                    colValues * pivot_1.gridSettings.columnWidth);
+                pivot_1.scrollPosObject.horizontalSection = pos;
+            }
+            this.parent.actionObj.actionName = this.parent.getActionCompleteName();
+            if (this.parent.actionObj.actionName) {
+                this.parent.actionCompleteMethod();
             }
         }
     };
+    VirtualScroll$$1.prototype.enginePopulatedEventMethod = function (engine, control) {
+        var _this = this;
+        var pivot = control ? control : this.parent;
+        var eventArgs = {
+            dataSourceSettings: pivot.dataSourceSettings,
+            pivotValues: pivot.pivotValues
+        };
+        pivot.trigger(enginePopulated, eventArgs, function (observedArgs) {
+            _this.parent.pivotValues = engine.pivotValues;
+        });
+    };
     VirtualScroll$$1.prototype.setPageXY = function () {
         var _this = this;
         return function (e) {
@@ -14665,7 +14712,7 @@ var DrillThrough = /** @__PURE__ @class */ (function () {
         }
         if (ele) {
             if (this.parent.allowDrillThrough && ele.classList.contains('e-valuescontent') || this.parent.editSettings.allowEditing) {
-                var colIndex = Number(ele.getAttribute('aria-colindex'));
+                var colIndex = Number(ele.getAttribute('data-colindex'));
                 var rowIndex = Number(ele.getAttribute('index'));
                 this.executeDrillThrough(this.parent.pivotValues[rowIndex][colIndex], rowIndex, colIndex, ele);
             }
@@ -14860,7 +14907,7 @@ var PivotChart = /** @__PURE__ @class */ (function () {
             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(function (item) { return item.name; });
             }
             else {
@@ -14940,7 +14987,7 @@ var PivotChart = /** @__PURE__ @class */ (function () {
         this.columnGroupObject = {};
         this.accEmptyPoint = false;
         var 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(function (item) {
                 return item.name === chartSettings.value;
             }).length === 0) && this.dataSourceSettings.values.length > 0) ? this.dataSourceSettings.values[0].name : chartSettings.value);
@@ -14984,7 +15031,7 @@ var PivotChart = /** @__PURE__ @class */ (function () {
                     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;
                     }
@@ -15110,7 +15157,7 @@ var PivotChart = /** @__PURE__ @class */ (function () {
                         var 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 = [];
                             }
@@ -15310,7 +15357,7 @@ var PivotChart = /** @__PURE__ @class */ (function () {
                 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',
@@ -15331,7 +15378,7 @@ var PivotChart = /** @__PURE__ @class */ (function () {
         }
         var 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';
@@ -15342,7 +15389,7 @@ var PivotChart = /** @__PURE__ @class */ (function () {
         }
         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 = '';
@@ -15421,7 +15468,7 @@ var PivotChart = /** @__PURE__ @class */ (function () {
                     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' &&
@@ -15431,7 +15478,7 @@ var PivotChart = /** @__PURE__ @class */ (function () {
                     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) ?
@@ -15532,6 +15579,10 @@ var PivotChart = /** @__PURE__ @class */ (function () {
                     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%' }];
@@ -15935,7 +15986,7 @@ var PivotChart = /** @__PURE__ @class */ (function () {
     };
     PivotChart.prototype.tooltipRender = function (args) {
         var 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);
@@ -15947,14 +15998,14 @@ var PivotChart = /** @__PURE__ @class */ (function () {
         var aggregateType = this.parent.dataType === 'olap' ? '' : this.parent.localeObj.getConstant(measureField.aggregateType);
         var measureAggregatedName = (this.parent.dataType === 'olap' ? '' : aggregateType + ' ' +
             this.parent.localeObj.getConstant('of') + ' ') + measureField.caption;
-        var formattedText = this.accumulationType.indexOf(this.parent.chartSettings.chartSeries.type) < 0 ?
-            args.text.split('<b>')[1].split('</b>')[0] : this.engineModule.pivotValues[rowIndex][colIndex].formattedText;
+        var formattedText = this.engineModule.pivotValues[rowIndex][colIndex].formattedText;
         var formatField = this.engineModule.formatFields[measureField.id];
-        var formattedValue = ((formatField && formatField.format && formatField.format.toLowerCase().match(/n|p|c/) !== null &&
+        var valueFormat = this.engineModule.getFormattedValue(args.point.y, measureField.id, formattedText);
+        var 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;
         var columnText = (args.series.name ? args.series.name.split(' | ')[0] : args.data.seriesName.split(' | ')[0]);
         var rowText = args.point.x;
         if (this.parent.tooltipTemplate && this.parent.getTooltipTemplate() !== undefined || this.chartSettings.tooltip.template) {
@@ -16007,7 +16058,7 @@ var PivotChart = /** @__PURE__ @class */ (function () {
             }
         }
         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 {
@@ -16283,6 +16334,16 @@ var PivotChart = /** @__PURE__ @class */ (function () {
                 args.text = '';
             }
         }
+        if (args.axis.name !== 'primaryXAxis') {
+            var formatField = this.engineModule.formatFields[args.axis.name];
+            var valueFormat = this.engineModule.getFormattedValue(args.value, args.axis.name, args.text);
+            var 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);
     };
     PivotChart.prototype.multiLevelLabelClick = function (args) {
@@ -16429,7 +16490,7 @@ var PivotChart = /** @__PURE__ @class */ (function () {
     /* eslint-disable */
     /** @hidden */
     PivotChart.prototype.getResizedChartHeight = function () {
-        var height = ['Pie', 'Funnel', 'Pyramid', 'Doughnut', 'Radar', 'Polar'].indexOf(this.parent.chartSettings.chartSeries.type) < 0 &&
+        var 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() :
@@ -20934,7 +20995,7 @@ var OlapEngine = /** @__PURE__ @class */ (function () {
                 }
                 isHeaderSortByDefault = true;
             }
-            if (isHeaderSortByDefault) {
+            if (isHeaderSortByDefault && this.getHeaderSortInfo) {
                 var copyOrder = [];
                 for (var m = 0, n = 0; m < headers.length; m++) {
                     if (headers[m].actualText !== 'Grand Total') {
@@ -20975,7 +21036,7 @@ var OlapEngine = /** @__PURE__ @class */ (function () {
             }
             isHeaderSortByDefault = true;
         }
-        if (isHeaderSortByDefault) {
+        if (isHeaderSortByDefault && this.getHeaderSortInfo) {
             var copyOrder = [];
             for (var m = 0, n = 0; m < keys.length; m++) {
                 if (keys[m] !== 'Grand Total') {
@@ -24071,10 +24132,10 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
             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);
             }
             var loadArgs = {
                 dataSourceSettings: this.dataSourceSettings,
@@ -24743,7 +24804,7 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
                         }
                     }
                     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);
@@ -24784,7 +24845,7 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
                         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 */
@@ -24807,7 +24868,7 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
      */
     PivotView.prototype.excelExport = function (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';
@@ -24832,7 +24893,7 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
      */
     PivotView.prototype.csvExport = function (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';
@@ -24857,7 +24918,7 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
      */
     PivotView.prototype.pdfExport = function (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);
@@ -24923,7 +24984,7 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
         }
         if (this.dataType === 'pivot') {
             var clonedDrillMembers_1 = PivotUtil.cloneDrillMemberSettings(this.dataSourceSettings.drilledMembers);
-            var colIndex = axis === 'row' ? Number(closest(target, 'td').getAttribute('aria-colindex')) : Number(closest(target, 'th').getAttribute('aria-colindex'));
+            var colIndex = axis === 'row' ? Number(closest(target, 'td').getAttribute('data-colindex')) : Number(closest(target, 'th').getAttribute('data-colindex'));
             var rowIndex = axis === 'row' ? Number(closest(target, 'td').getAttribute('index')) : Number(closest(target, 'th').getAttribute('index'));
             var currentCell = chartDrillInfo ? chartDrillInfo.cell :
                 this.engineModule.pivotValues[rowIndex][colIndex];
@@ -25031,7 +25092,7 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
             currentCell = chartDrillInfo.cell;
         }
         else {
-            var colIndex = axis === 'row' ? Number(closest(target, 'td').getAttribute('aria-colindex')) : Number(closest(target, 'th').getAttribute('aria-colindex'));
+            var colIndex = axis === 'row' ? Number(closest(target, 'td').getAttribute('data-colindex')) : Number(closest(target, 'th').getAttribute('data-colindex'));
             var rowIndex = axis === 'row' ? Number(closest(target, 'td').getAttribute('index')) : Number(closest(target, 'th').getAttribute('index'));
             currentCell = this.olapEngineModule.pivotValues[rowIndex][colIndex];
         }
@@ -25334,6 +25395,10 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
                         (mCntVScrollPos === mCntScrollPos ? (mCntScrollPos - hScrollPos) :
                             (mCntScrollPos < mCntVScrollPos && (hScrollPos === mCntVScrollPos || hScrollPos > mCntScrollPos) ?
                                 -(mCntVScrollPos - mCntScrollPos) : 0)));
+                    if (this.actionObj.actionName === 'Sort value' || this.actionObj.actionName === 'Sort field') {
+                        var 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) -
@@ -25376,7 +25441,7 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
         }
     };
     PivotView.prototype.setToolTip = function (args) {
-        var colIndex = Number(args.target.getAttribute('aria-colindex'));
+        var colIndex = Number(args.target.getAttribute('data-colindex'));
         var rowIndex = Number(args.target.getAttribute('index'));
         var cell = (this.dataSourceSettings.values.length > 0 && this.pivotValues &&
             this.pivotValues[rowIndex] && this.pivotValues[rowIndex][colIndex]) ?
@@ -25573,7 +25638,7 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
                 var ele_1 = e.target;
                 var axis = (ele_1.parentElement.classList.contains(ROWSHEADER) || ele_1.classList.contains(ROWSHEADER)) ? 'row' : 'column';
                 ele_1 = axis === 'column' ? closest(ele_1, 'th') : closest(ele_1, 'td');
-                var colIndex = Number(ele_1.getAttribute('aria-colindex'));
+                var colIndex = Number(ele_1.getAttribute('data-colindex'));
                 var rowIndex = Number(ele_1.getAttribute('index'));
                 var selectArgs = {
                     cancel: false,
@@ -25627,6 +25692,9 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
             this.lastCellClicked = e.target;
         }
         var target = e.target;
+        if (closest(target, '.' + PIVOT_BUTTON_CLASS)) {
+            return;
+        }
         var ele = null;
         var axis = (target.parentElement.classList.contains(ROWSHEADER) || target.classList.contains(ROWSHEADER)) ? 'row' : 'column';
         ele = axis === 'column' ? closest(target, 'th') : closest(target, 'td');
@@ -25647,7 +25715,7 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
                     if (this.actionBeginMethod()) {
                         return;
                     }
-                    var colIndex = Number(ele.getAttribute('aria-colindex'));
+                    var colIndex = Number(ele.getAttribute('data-colindex'));
                     var rowIndex = Number(ele.getAttribute('index'));
                     if (this.dataSourceSettings.valueAxis === 'row' && (this.dataSourceSettings.values.length > 1 || this.dataSourceSettings.alwaysShowValueHeader)) {
                         var header = this.pivotValues[rowIndex][colIndex];
@@ -25661,13 +25729,13 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
                         }
                     }
                     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,
@@ -26016,7 +26084,7 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
         }
         /* eslint-disable */
         if (ele && !isNullOrUndefined(this.pivotValues) && this.pivotValues.length > 0) {
-            var colIndex_1 = Number(ele.getAttribute('aria-colindex'));
+            var colIndex_1 = Number(ele.getAttribute('data-colindex'));
             var rowIndex_1 = Number(ele.getAttribute('index'));
             var colSpan_1 = Number(ele.getAttribute('aria-colspan'));
             var selectArgs = {
@@ -26060,6 +26128,9 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
                 _this_1.getSelectedCellsPos();
             });
         }
+        else {
+            this.clearSelection(null, e, null, null);
+        }
     };
     PivotView.prototype.rowDeselect = function (ele, e, rowIndex, mode, observedArgs) {
         if (!e.shiftKey && !e.ctrlKey && this.gridSettings.selectionSettings.mode !== 'Both' || this.gridSettings.selectionSettings.type === 'Single') {
@@ -26105,7 +26176,7 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
     PivotView.prototype.clearSelection = function (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 {
@@ -26113,7 +26184,7 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             else if (this.gridSettings.selectionSettings.mode === 'Both') {
-                if (ele.classList.contains(ROW_CELL_CLASS)) {
+                if (ele && ele.classList.contains(ROW_CELL_CLASS)) {
                     for (var _i = 0, _a = [].slice.call(this.element.querySelectorAll('.' + SELECTED_BGCOLOR + ', .' + CELL_SELECTED_BGCOLOR)); _i < _a.length; _i++) {
                         var ele_2 = _a[_i];
                         // if (Number((ele as HTMLElement).getAttribute('index')) !== rowIndex) {
@@ -26183,10 +26254,10 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
                 for (var _i = 0, _a = [].slice.call(this.element.querySelectorAll('.' + CELL_ACTIVE_BGCOLOR)); _i < _a.length; _i++) {
                     var ele = _a[_i];
                     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;
                     }
-                    var colIndex = Number(ele.getAttribute('aria-colindex'));
+                    var colIndex = Number(ele.getAttribute('data-colindex'));
                     actColPos[colIndex] = colIndex;
                 }
                 activeColumns = Object.keys(actColPos).length > 0 ? Object.keys(actColPos).sort(function (a, b) {
@@ -26218,7 +26289,7 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
             }
             var 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++;
             }
@@ -26246,23 +26317,23 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
         control.cellSelectionPos = [];
         for (var _i = 0, _a = [].slice.call(this.element.querySelectorAll('.' + SELECTED_BGCOLOR)); _i < _a.length; _i++) {
             var ele = _a[_i];
-            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 (var _b = 0, _c = [].slice.call(this.element.querySelectorAll('.' + CELL_SELECTED_BGCOLOR)); _b < _c.length; _b++) {
             var ele = _c[_b];
-            control.cellSelectionPos.push({ rowIndex: ele.getAttribute('index'), colIndex: ele.getAttribute('aria-colindex') });
+            control.cellSelectionPos.push({ rowIndex: ele.getAttribute('index'), colIndex: ele.getAttribute('data-colindex') });
         }
     };
     PivotView.prototype.setSavedSelectedCells = function () {
         var control = this;
         for (var _i = 0, _a = [].slice.call(this.savedSelectedCellsPos); _i < _a.length; _i++) {
             var item = _a[_i];
-            var query = '[aria-colindex="' + item.colIndex + '"][index="' + item.rowIndex + '"]';
+            var query = '[data-colindex="' + item.colIndex + '"][index="' + item.rowIndex + '"]';
             addClass([control.element.querySelector(query)], [CELL_ACTIVE_BGCOLOR, SELECTED_BGCOLOR]);
         }
         for (var _b = 0, _c = [].slice.call(this.cellSelectionPos); _b < _c.length; _b++) {
             var item = _c[_b];
-            var query = '[aria-colindex="' + item.colIndex + '"][index="' + item.rowIndex + '"]';
+            var query = '[data-colindex="' + item.colIndex + '"][index="' + item.rowIndex + '"]';
             addClass([control.element.querySelector(query)], [CELL_SELECTED_BGCOLOR]);
         }
     };
@@ -26351,7 +26422,7 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
                     _this_1.clonedReport = _this_1.clonedReport ? _this_1.clonedReport : dataSourceSettings;
                 }
                 if (_this_1.dataSourceSettings.mode !== 'Server') {
-                    _this_1.engineModule.renderEngine(_this_1.dataSourceSettings, customProperties, _this_1.getValueCellInfo.bind(_this_1), _this_1.getHeaderSortInfo.bind(_this_1));
+                    _this_1.engineModule.renderEngine(_this_1.dataSourceSettings, customProperties, _this_1.aggregateCellInfo ? _this_1.getValueCellInfo.bind(_this_1) : undefined, _this_1.onHeadersSort ? _this_1.getHeaderSortInfo.bind(_this_1) : undefined);
                 }
                 _this_1.allowServerDataBinding = false;
                 _this_1.setProperties({ pivotValues: _this_1.engineModule.pivotValues }, true);
@@ -26362,7 +26433,7 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
             else if (_this_1.dataSourceSettings.providerType === 'SSAS' && _this_1.dataType === 'olap') {
                 customProperties.savedFieldList = _this_1.olapEngineModule.fieldList;
                 customProperties.savedFieldListData = _this_1.olapEngineModule.fieldListData;
-                _this_1.olapEngineModule.renderEngine(_this_1.dataSourceSettings, customProperties, _this_1.getHeaderSortInfo.bind(_this_1));
+                _this_1.olapEngineModule.renderEngine(_this_1.dataSourceSettings, customProperties, _this_1.onHeadersSort ? _this_1.getHeaderSortInfo.bind(_this_1) : undefined);
                 _this_1.allowServerDataBinding = false;
                 _this_1.setProperties({ pivotValues: _this_1.olapEngineModule.pivotValues }, true);
                 delete _this_1.bulkChanges.pivotValues;
@@ -26843,7 +26914,8 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
                                     : 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 */
@@ -27295,6 +27367,9 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
     __decorate([
         Event()
     ], PivotView.prototype, "beforeExport", void 0);
+    __decorate([
+        Event()
+    ], PivotView.prototype, "exportComplete", void 0);
     __decorate([
         Event()
     ], PivotView.prototype, "conditionalFormatting", void 0);
@@ -27680,7 +27755,7 @@ var ExcelExport$1 = /** @__PURE__ @class */ (function () {
      * Method to perform excel export.
      * @hidden
      */
-    ExcelExport$$1.prototype.exportToExcel = function (type, exportProperties) {
+    ExcelExport$$1.prototype.exportToExcel = function (type, exportProperties, isBlob) {
         this.rows = [];
         this.actualrCnt = 0;
         var isHeaderSet = !isNullOrUndefined(exportProperties) && !isNullOrUndefined(exportProperties.header);
@@ -27867,12 +27942,21 @@ var ExcelExport$1 = /** @__PURE__ @class */ (function () {
             workSheets.push({ columns: columns, rows: this.rows });
         }
         var 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);
+        var fileExtension = fileName.split(".").pop();
+        var 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');
         }
+        var exportCompleteEventArgs = {
+            type: type,
+            promise: isBlob ? blobData : null
+        };
+        this.parent.trigger(exportComplete, exportCompleteEventArgs);
     };
     /**
      * To destroy the excel export module
@@ -28052,7 +28136,7 @@ var PDFExport = /** @__PURE__ @class */ (function () {
      * @hidden
      */
     /* eslint-disable  */
-    PDFExport.prototype.exportToPDF = function (pdfExportProperties) {
+    PDFExport.prototype.exportToPDF = function (pdfExportProperties, isBlob) {
         this.engine = this.parent.dataType === 'olap' ? this.parent.olapEngineModule : this.parent.engineModule;
         var eventParams = this.applyEvent();
         var headerStyle = this.getStyle();
@@ -28243,7 +28327,18 @@ var PDFExport = /** @__PURE__ @class */ (function () {
                 integratedCnt = 0;
             }
         } while (integratedCnt < colLength);
-        eventParams.document.save(eventParams.args.fileName + '.pdf');
+        var blobData;
+        if (!isBlob) {
+            eventParams.document.save(eventParams.args.fileName + '.pdf');
+        }
+        else {
+            blobData = eventParams.document.save();
+        }
+        var exportCompleteEventArgs = {
+            type: 'PDF',
+            promise: isBlob ? blobData : null
+        };
+        this.parent.trigger(exportComplete, exportCompleteEventArgs);
         eventParams.document.destroy();
     };
     PDFExport.prototype.applyStyle = function (pdfGridRow, pivotCell, localCnt) {
@@ -32489,7 +32584,7 @@ var PivotFieldList = /** @__PURE__ @class */ (function (_super) {
                 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;
                 var eventArgs = {
@@ -32505,7 +32600,7 @@ var PivotFieldList = /** @__PURE__ @class */ (function (_super) {
                 });
             }
             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;
                 var eventArgs = {
                     pivotFieldList: _this.pivotFieldList,
@@ -32583,10 +32678,10 @@ var PivotFieldList = /** @__PURE__ @class */ (function (_super) {
             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);
         }
         var args;
         args = {
@@ -32745,7 +32840,7 @@ var PivotFieldList = /** @__PURE__ @class */ (function (_super) {
                             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);
                         }
                     }
                 }
@@ -32843,7 +32938,7 @@ var PivotFieldList = /** @__PURE__ @class */ (function (_super) {
             }
         }
         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 = {};
@@ -33225,6 +33320,7 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
         this.isFormula = false;
         /** @hidden */
         this.isRequireUpdate = false;
+        this.formatTypes = ['Standard', 'Currency', 'Percent', 'Custom', 'None'];
         this.parent = parent;
         this.existingReport = null;
         this.parent.calculatedFieldModule = this;
@@ -33330,7 +33426,7 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
                     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);
@@ -33360,11 +33456,19 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
             closest(e.originalEvent.target, '.e-acrdn-header-icon')) {
             var node = closest(e.originalEvent.target, '.e-acrdn-header').querySelector('.' + CALCCHECK);
             var fieldName = node.getAttribute('data-field');
+            var captionName = node.getAttribute('data-caption');
             var formatObj = PivotUtil.getFieldByName(fieldName, this.parent.dataSourceSettings.formatSettings);
             var optionElement = closest(e.originalEvent.target, '.e-acrdn-header-icon');
+            if (formatObj) {
+                var pivotFormat = this.getFormat(formatObj.format);
+                var 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);
@@ -33433,16 +33537,16 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
                 this.inputObj.dataBind();
                 var formatString = node.getAttribute('data-formatString');
                 var dialogElement = this.dialog.element;
+                var ddlFormatTypes = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
                 var customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);
+                var customFormatString = node.getAttribute('data-customformatstring');
                 if (this.parent.dataType === 'olap') {
                     var memberType = node.getAttribute('data-membertype');
                     var parentHierarchy = node.getAttribute('data-hierarchy');
                     var expression = node.getAttribute('data-formula');
-                    var customString = node.getAttribute('data-customString');
                     var fieldTitle = select('#' + this.parentID + '_' + 'FieldNameTitle', dialogElement);
                     var memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement), DropDownList);
                     var hierarchyDrop = getInstance(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement), DropDownList);
-                    var 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;
@@ -33452,14 +33556,8 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
                     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);
@@ -33467,6 +33565,11 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
                     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) &&
@@ -33481,15 +33584,15 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
                 customFormat.dataBind();
                 if (this.parent.dataType === 'olap') {
                     var hierarchyDrop = getInstance(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement), DropDownList);
-                    var formatDrop = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
+                    var ddlFormatTypes = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
                     var memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement), DropDownList);
                     var 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();
@@ -33882,18 +33985,15 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
             caption: this.inputObj.value,
             formula: dropField.value
         };
+        var 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') {
-            var formatDrop = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
             var memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement), DropDownList);
             var 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 */
@@ -33974,21 +34074,21 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
             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') {
-                var customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);
-                var formatDrop = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
                 var memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement), DropDownList);
                 var 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();
             }
+            var customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);
+            var 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 */
         }
     };
@@ -34281,7 +34381,7 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
             className: (this.parent.dataType === 'olap' ? OLAP_CALCOUTERDIV + ' ' : '') + CALCOUTERDIV
         });
         var olapFieldTreeDiv = createElement('div', { id: this.parentID + 'Olap_Tree_Div', className: 'e-olap-field-tree-div' });
-        var olapCalcDiv = createElement('div', { id: this.parentID + 'Olap_Calc_Div', className: 'e-olap-calculated-div' });
+        var 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) {
             var accordDiv = createElement('div', { id: this.parentID + 'accordDiv', className: CALCACCORD });
@@ -34305,7 +34405,7 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
                     className: PIVOT_FIELD_TITLE_CLASS, id: this.parentID + '_' + 'FieldNameTitle',
                     innerHTML: this.parent.localeObj.getConstant('fieldTitle')
                 });
-                olapCalcDiv.appendChild(formulaTitle);
+                pivotCalcDiv.appendChild(formulaTitle);
             }
             var inputDiv = createElement('div', { id: this.parentID + 'outerDiv', className: CALCINPUTDIV });
             var inputObj = createElement('input', {
@@ -34314,7 +34414,7 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
                 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));
             var wrapDiv = createElement('div', { id: this.parentID + 'control_container', className: TREEVIEWOUTER });
             if (!this.parent.isAdaptive) {
                 var fieldTitle = createElement('div', {
@@ -34361,7 +34461,7 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
                     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));
             }
             var dropDiv = createElement('textarea', {
                 id: this.parentID + 'droppable',
@@ -34372,7 +34472,7 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
                             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) {
                 var buttonDiv = createElement('div', { id: this.parentID + 'buttonDiv', className: CALCBUTTONDIV });
                 var okBtn = createElement('button', {
@@ -34388,63 +34488,51 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
                         className: OLAP_MEMBER_TITLE_CLASS,
                         innerHTML: this.parent.localeObj.getConstant('memberType')
                     });
-                    olapCalcDiv.appendChild(memberTypeTitle);
+                    pivotCalcDiv.appendChild(memberTypeTitle);
                 }
                 var 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) {
                     var hierarchyTitle = createElement('div', {
                         className: OLAP_HIERARCHY_TITLE_CLASS,
                         innerHTML: this.parent.localeObj.getConstant('selectedHierarchy')
                     });
-                    olapCalcDiv.appendChild(hierarchyTitle);
+                    pivotCalcDiv.appendChild(hierarchyTitle);
                 }
                 var 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) {
-                    var formatTitle = createElement('div', {
-                        className: OLAP_FORMAT_TITLE_CLASS,
-                        innerHTML: this.parent.localeObj.getConstant('formatString')
-                    });
-                    olapCalcDiv.appendChild(formatTitle);
-                }
-                var formatDrop = createElement('div', { id: this.parentID + 'Format_Div', className: CALC_FORMAT_TYPE_DIV });
-                (this.parent.isAdaptive ? outerDiv.appendChild(formatDrop) : olapCalcDiv.appendChild(formatDrop));
-                var customFormatDiv = createElement('div', { id: this.parentID + 'custom_Format_Div', className: OLAP_CALC_CUSTOM_FORMAT_INPUTDIV });
-                var 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) {
+                var 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) {
-                    var okBtn = outerDiv.querySelector('.' + CALCOKBTN);
-                    outerDiv.appendChild(okBtn);
-                }
-                else {
-                    outerDiv.appendChild(olapFieldTreeDiv);
-                    outerDiv.appendChild(olapCalcDiv);
-                }
+                pivotCalcDiv.appendChild(formatTitle);
+            }
+            var ddlFormatTypes = createElement('div', { id: this.parentID + 'Format_Div', className: CALC_FORMAT_TYPE_DIV });
+            (this.parent.isAdaptive ? outerDiv.appendChild(ddlFormatTypes) : pivotCalcDiv.appendChild(ddlFormatTypes));
+            var customFormatDiv = createElement('div', {
+                id: this.parentID + 'custom_Format_Div',
+                className: PIVOT_CALC_CUSTOM_FORMAT_INPUTDIV
+            });
+            var 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) {
+                var okBtn = outerDiv.querySelector('.' + CALCOKBTN);
+                outerDiv.appendChild(okBtn);
             }
             else {
-                var customFormatDiv = createElement('div', { id: this.parentID + 'custom_Format_Div', className: CALC_CUSTOM_FORMAT_INPUTDIV });
-                if (!this.parent.isAdaptive) {
-                    var 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);
                 }
-                var 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;
@@ -34469,12 +34557,12 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
                 this.parentHierarchy = this.fieldType === 'Dimension' ? hierarchyDrop.value : null;
             }
             if (dialogElement.element.querySelector('.' + CALC_FORMAT_TYPE_DIV)) {
-                var formatDrop = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement.element), DropDownList);
-                this.formatType = formatDrop.value;
+                var ddlFormatTypes = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement.element), DropDownList);
+                this.formatType = ddlFormatTypes.value;
             }
             if (dialogElement.element.querySelector('.' + CALC_FORMAT_INPUT)) {
                 var 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 {
@@ -34520,9 +34608,8 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
             hierarchyDrop.dataBind();
         }
         if (dialogElement.querySelector('.' + CALC_FORMAT_TYPE_DIV)) {
-            var formatStringData = ['Standard', 'Currency', 'Percent', 'None'];
-            var formatDrop = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
-            this.formatType = formatDrop.value = (formatStringData.indexOf(calcInfo.formatString) > -1 ? calcInfo.formatString : 'Custom');
+            var 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)) {
             var customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);
@@ -34541,67 +34628,69 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
      * To create treeview.
      * @returns {void}
      */
-    CalculatedField.prototype.createOlapDropElements = function () {
+    CalculatedField.prototype.createDropElements = function () {
         var _this = this;
         var dialogElement = (this.parent.isAdaptive ?
             this.parent.dialogRenderer.parentElement : this.dialog.element);
-        var mData = [];
         var fData = [];
         var fieldData = [];
-        var memberTypeData = ['Measure', 'Dimension'];
-        var formatStringData = ['Standard', 'Currency', 'Percent', 'Custom', 'None'];
-        for (var _i = 0, memberTypeData_1 = memberTypeData; _i < memberTypeData_1.length; _i++) {
-            var type = memberTypeData_1[_i];
-            mData.push({ value: type, text: this.parent.localeObj.getConstant(type) });
-        }
-        for (var _a = 0, formatStringData_1 = formatStringData; _a < formatStringData_1.length; _a++) {
-            var format = formatStringData_1[_a];
-            fData.push({ value: format, text: this.parent.localeObj.getConstant(format) });
-        }
-        var fields = PivotUtil.getClonedData(this.parent.olapEngineModule.fieldListData);
-        for (var _b = 0, _c = fields; _b < _c.length; _b++) {
-            var item = _c[_b];
-            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 });
-            }
+        for (var _i = 0, _a = this.formatTypes; _i < _a.length; _i++) {
+            var format = _a[_i];
+            fData.push({ value: (this.parent.dataType === 'pivot' ? this.getFormat(format) : format), text: this.parent.localeObj.getConstant(format) });
         }
-        var 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: function (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));
-        var 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: function (args) {
-                _this.parentHierarchy = args.value;
-                _this.formulaText = select('#' + _this.parentID + 'droppable', document).value;
+        if (this.parent.dataType === 'olap') {
+            var mData = [];
+            var memberTypeData = ['Measure', 'Dimension'];
+            for (var _b = 0, memberTypeData_1 = memberTypeData; _b < memberTypeData_1.length; _b++) {
+                var type = memberTypeData_1[_b];
+                mData.push({ value: type, text: this.parent.localeObj.getConstant(type) });
+            }
+            var fields = PivotUtil.getClonedData(this.parent.olapEngineModule.fieldListData);
+            for (var _c = 0, _d = fields; _c < _d.length; _c++) {
+                var item = _d[_c];
+                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));
+            var 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: function (args) {
+                    hierarchyListObj_1.enabled = args.value === 'Dimension' ? true : false;
+                    _this.fieldType = args.value;
+                    _this.formulaText = select('#' + _this.parentID + 'droppable', document).value;
+                    hierarchyListObj_1.dataBind();
+                }
+            });
+            memberTypeObj.isStringTemplate = true;
+            memberTypeObj.appendTo(select('#' + this.parentID + 'Member_Type_Div', dialogElement));
+            var hierarchyListObj_1 = 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: function (args) {
+                    _this.parentHierarchy = args.value;
+                    _this.formulaText = select('#' + _this.parentID + 'droppable', document).value;
+                }
+            });
+            hierarchyListObj_1.isStringTemplate = true;
+            hierarchyListObj_1.appendTo(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement));
+        }
         var 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: function (args) {
                 customerFormatObj.enabled = args.value === 'Custom' ? true : false;
@@ -34626,6 +34715,30 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
         customerFormatObj.isStringTemplate = true;
         customerFormatObj.appendTo('#' + this.parentID + 'Custom_Format_Element');
     };
+    CalculatedField.prototype.getFormat = function (pivotFormat) {
+        var 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}
@@ -34781,12 +34894,11 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
                 args.node.setAttribute('data-membertype', field.fieldType);
                 args.node.setAttribute('data-hierarchy', field.parentHierarchy ? field.parentHierarchy : '');
                 args.node.setAttribute('data-formula', field.formula);
-                var formatStringData = ['Standard', 'Currency', 'Percent', 'None'];
                 var formatString = void 0;
-                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 : ''));
                 var removeElement = createElement('span', {
                     className: GRID_REMOVE + ' e-icons e-list-icon'
                 });
@@ -34826,6 +34938,13 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
             args.node.setAttribute('data-type', args.nodeData.type);
             var formatObj = PivotUtil.getFieldByName(field, this.parent.dataSourceSettings.formatSettings);
             args.node.setAttribute('data-formatString', formatObj ? formatObj.format : '');
+            if (formatObj) {
+                var pivotFormat = this.getFormat(formatObj.format);
+                var 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 : '');
+            }
             var dragElement = createElement('span', {
                 attrs: { 'tabindex': '-1', 'aria-disabled': 'false', 'title': this.parent.localeObj.getConstant('dragField') },
                 className: ICON + ' e-drag'
@@ -34904,7 +35023,7 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
             var 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)) ? '' :
@@ -34924,9 +35043,9 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
         var _this = this;
         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();
         }
         var cancelBtn = new Button({ cssClass: FLAT + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), isPrimary: true, locale: this.parent.locale, enableRtl: this.parent.enableRtl });
         cancelBtn.isStringTemplate = true;
@@ -34950,25 +35069,6 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
             });
             this.inputObj.isStringTemplate = true;
             this.inputObj.appendTo('#' + this.parentID + 'ddlelement');
-            if (this.parent.dataType === 'pivot') {
-                var formatInputObj = new MaskedTextBox({
-                    locale: this.parent.locale, enableRtl: this.parent.enableRtl,
-                    placeholder: this.parent.localeObj.getConstant('numberFormatString'),
-                    change: function (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) {
                 var drop = select('#' + this.parentID + 'droppable', this.parent.dialogRenderer.parentElement);
                 drop.value = this.formulaText;
@@ -35181,18 +35281,7 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
         });
         this.inputObj.isStringTemplate = true;
         this.inputObj.appendTo('#' + this.parentID + 'ddlelement');
-        if (this.parent.dataType === 'pivot') {
-            var 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, {
@@ -35317,6 +35406,7 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
      */
     CalculatedField.prototype.destroy = function () {
         this.removeEventListener();
+        this.formatTypes = null;
     };
     return CalculatedField;
 }());
@@ -36151,7 +36241,8 @@ var ConditionalFormatting = /** @__PURE__ @class */ (function () {
             remove(select('#' + this.parentID + 'conditionalformatting', document));
         }
         this.parent.element.appendChild(createElement('div', {
-            id: this.parentID + 'conditionalformatting'
+            id: this.parentID + 'conditionalformatting',
+            className: FORMAT_DIALOG
         }));
         var buttonModel = [
             {
@@ -36186,14 +36277,14 @@ var ConditionalFormatting = /** @__PURE__ @class */ (function () {
                 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
             });
         }
@@ -37797,12 +37888,12 @@ var Toolbar$2 = /** @__PURE__ @class */ (function () {
             });
             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;
@@ -37838,7 +37929,7 @@ var Toolbar$2 = /** @__PURE__ @class */ (function () {
             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;
@@ -38321,11 +38412,11 @@ var Toolbar$2 = /** @__PURE__ @class */ (function () {
     Toolbar$$1.prototype.changeDropDown = function (args) {
         var chartSettings = JSON.parse(this.parent.getPersistData()).chartSettings;
         if (!(chartSettings && chartSettings.legendSettings && chartSettings.legendSettings.visible !== undefined)) {
-            var checked = ['Pie', 'Funnel', 'Pyramid', 'Doughnut'].indexOf(args.value.toString()) > -1 ?
+            var 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;
         }
@@ -38357,7 +38448,7 @@ var Toolbar$2 = /** @__PURE__ @class */ (function () {
         });
         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;
         }
@@ -38927,7 +39018,7 @@ var Grouping = /** @__PURE__ @class */ (function () {
         this.parentElement = parentElement;
         this.selectedCellsInfo = [];
         this.isUpdate = false;
-        var colIndex = Number(target.getAttribute('aria-colindex'));
+        var colIndex = Number(target.getAttribute('data-colindex'));
         var rowIndex = Number(target.getAttribute('index'));
         var cell = this.parent.engineModule.pivotValues[rowIndex][colIndex];
         var fieldName = cell.valueSort.axis.toString();
@@ -39123,7 +39214,7 @@ var Grouping = /** @__PURE__ @class */ (function () {
         /* eslint-enable */
         for (var _i = 0, selectedElements_1 = selectedElements; _i < selectedElements_1.length; _i++) {
             var element = selectedElements_1[_i];
-            var colIndex = Number(element.getAttribute('aria-colindex'));
+            var colIndex = Number(element.getAttribute('data-colindex'));
             var rowIndex = Number(element.getAttribute('index'));
             var cell = this.parent.engineModule.pivotValues[rowIndex][colIndex];
             if (cell && (cell.axis === axis) && !(cell.type === 'grand sum' || cell.type === 'sum') &&
@@ -39757,5 +39848,5 @@ var Grouping = /** @__PURE__ @class */ (function () {
  * 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.es5.js.map