@syncfusion/ej2-pivotview 20.2.39 → 20.2.43

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

@@ -5970,6 +5970,8 @@ var afterPivotTableRender = 'afterPivotTableRender';
 /** @hidden */
 var beforeExport = 'beforeExport';
 /** @hidden */
+var exportComplete = 'exportComplete';
+/** @hidden */
 var excelHeaderQueryCellInfo = 'excelHeaderQueryCellInfo';
 /** @hidden */
 var pdfHeaderQueryCellInfo = 'pdfHeaderQueryCellInfo';
@@ -6646,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 */
@@ -6722,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 */
@@ -7737,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) {
@@ -7834,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) {
@@ -7906,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);
@@ -8115,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) {
@@ -8259,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;
@@ -8447,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) {
@@ -8490,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 = '';
@@ -8594,15 +8604,15 @@ 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(cell.colIndex)) {
@@ -8618,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) {
@@ -8792,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') {
@@ -8883,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;
@@ -8966,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
         };
@@ -13387,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 */
@@ -13397,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;
@@ -13408,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);
@@ -13430,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)) {
@@ -13464,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;
@@ -14702,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);
             }
@@ -14897,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 {
@@ -14977,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);
@@ -15021,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;
                     }
@@ -15147,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 = [];
                             }
@@ -15347,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',
@@ -15368,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';
@@ -15379,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 = '';
@@ -15458,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' &&
@@ -15468,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) ?
@@ -15569,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%' }];
@@ -15972,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);
@@ -16044,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 {
@@ -16476,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() :
@@ -24854,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';
@@ -24879,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';
@@ -24904,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);
@@ -24970,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];
@@ -25078,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];
         }
@@ -25381,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) -
@@ -25423,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]) ?
@@ -25620,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,
@@ -25697,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];
@@ -25711,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,
@@ -26066,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 = {
@@ -26236,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) {
@@ -26271,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++;
             }
@@ -26299,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]);
         }
     };
@@ -27349,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);
@@ -27734,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);
@@ -27921,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
@@ -28106,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();
@@ -28297,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) {
@@ -33279,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;
@@ -33384,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);
@@ -33414,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);
@@ -33487,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;
@@ -33506,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);
@@ -33521,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) &&
@@ -33535,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();
@@ -33936,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 */
@@ -34028,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 */
         }
     };
@@ -34335,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 });
@@ -34359,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', {
@@ -34368,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', {
@@ -34415,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',
@@ -34426,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', {
@@ -34442,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;
@@ -34523,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 {
@@ -34574,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);
@@ -34595,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;
@@ -34680,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}
@@ -34835,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'
                 });
@@ -34880,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'
@@ -34958,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)) ? '' :
@@ -34978,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;
@@ -35004,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;
@@ -35235,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, {
@@ -35371,6 +35406,7 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
      */
     CalculatedField.prototype.destroy = function () {
         this.removeEventListener();
+        this.formatTypes = null;
     };
     return CalculatedField;
 }());
@@ -36205,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 = [
             {
@@ -36240,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
             });
         }
@@ -37851,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;
@@ -37892,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;
@@ -38375,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;
         }
@@ -38411,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;
         }
@@ -38981,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();
@@ -39177,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') &&
@@ -39811,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, 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 };
+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