@syncfusion/ej2-pivotview 20.2.36 → 20.2.43

package/src/pivotview/base/pivotview.js

@@ -1217,10 +1217,10 @@ var PivotView = /** @class */ (function (_super) {
             this.cellTemplateFn = this.templateParser(this.cellTemplate);
             this.tooltipTemplateFn = this.templateParser(this.tooltipTemplate);
             if (this.spinnerTemplate) {
-                createSpinner({ target: this.element, template: this.spinnerTemplate }, this.createElement);
+                createSpinner({ target: this.element, template: this.spinnerTemplate, cssClass: this.cssClass ? this.cssClass : undefined }, this.createElement);
             }
             else {
-                createSpinner({ target: this.element }, this.createElement);
+                createSpinner({ target: this.element, cssClass: this.cssClass ? this.cssClass : undefined }, this.createElement);
             }
             var loadArgs = {
                 dataSourceSettings: this.dataSourceSettings,
@@ -1890,7 +1890,7 @@ var PivotView = /** @class */ (function (_super) {
                         }
                     }
                     else {
-                        pivot.olapEngineModule.renderEngine(pivot.dataSourceSettings, customProperties, pivot.getHeaderSortInfo.bind(pivot));
+                        pivot.olapEngineModule.renderEngine(pivot.dataSourceSettings, customProperties, pivot.onHeadersSort ? pivot.getHeaderSortInfo.bind(pivot) : undefined);
                     }
                     pivot.allowServerDataBinding = false;
                     pivot.setProperties({ pivotValues: pivot.olapEngineModule.pivotValues }, true);
@@ -1931,7 +1931,7 @@ var PivotView = /** @class */ (function (_super) {
                         pivot.lastFilterInfo = {};
                     }
                     else {
-                        pivot.engineModule.renderEngine(pivot.dataSourceSettings, customProperties, pivot.getValueCellInfo.bind(pivot), pivot.getHeaderSortInfo.bind(pivot));
+                        pivot.engineModule.renderEngine(pivot.dataSourceSettings, customProperties, pivot.aggregateCellInfo ? pivot.getValueCellInfo.bind(pivot) : undefined, pivot.onHeadersSort ? pivot.getHeaderSortInfo.bind(pivot) : undefined);
                         pivot.allowServerDataBinding = false;
                         pivot.setProperties({ pivotValues: pivot.engineModule.pivotValues }, true);
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -1954,7 +1954,7 @@ var PivotView = /** @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';
@@ -1979,7 +1979,7 @@ var PivotView = /** @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';
@@ -2004,7 +2004,7 @@ var PivotView = /** @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);
@@ -2070,7 +2070,7 @@ var PivotView = /** @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];
@@ -2178,7 +2178,7 @@ var PivotView = /** @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];
         }
@@ -2481,6 +2481,10 @@ var PivotView = /** @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('.' + cls.TABLE).style.transform.split(',')[0].trim() + ',') :
                         'translate(' + -(((ele.scrollLeft * this.horizontalScrollScale) -
@@ -2523,7 +2527,7 @@ var PivotView = /** @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]) ?
@@ -2720,7 +2724,7 @@ var PivotView = /** @class */ (function (_super) {
                 var ele_1 = e.target;
                 var axis = (ele_1.parentElement.classList.contains(cls.ROWSHEADER) || ele_1.classList.contains(cls.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,
@@ -2774,6 +2778,9 @@ var PivotView = /** @class */ (function (_super) {
             this.lastCellClicked = e.target;
         }
         var target = e.target;
+        if (closest(target, '.' + cls.PIVOT_BUTTON_CLASS)) {
+            return;
+        }
         var ele = null;
         var axis = (target.parentElement.classList.contains(cls.ROWSHEADER) || target.classList.contains(cls.ROWSHEADER)) ? 'row' : 'column';
         ele = axis === 'column' ? closest(target, 'th') : closest(target, 'td');
@@ -2794,7 +2801,7 @@ var PivotView = /** @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];
@@ -2808,13 +2815,13 @@ var PivotView = /** @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,
@@ -3163,7 +3170,7 @@ var PivotView = /** @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 = {
@@ -3207,6 +3214,9 @@ var PivotView = /** @class */ (function (_super) {
                 _this_1.getSelectedCellsPos();
             });
         }
+        else {
+            this.clearSelection(null, e, null, null);
+        }
     };
     PivotView.prototype.rowDeselect = function (ele, e, rowIndex, mode, observedArgs) {
         if (!e.shiftKey && !e.ctrlKey && this.gridSettings.selectionSettings.mode !== 'Both' || this.gridSettings.selectionSettings.type === 'Single') {
@@ -3252,7 +3262,7 @@ var PivotView = /** @class */ (function (_super) {
     PivotView.prototype.clearSelection = function (ele, e, colIndex, rowIndex) {
         if ((!e.shiftKey && !e.ctrlKey) || this.gridSettings.selectionSettings.type === 'Single') {
             if (this.gridSettings.selectionSettings.mode === 'Cell') {
-                if (ele.classList.contains(cls.COLUMNSHEADER)) {
+                if (ele && ele.classList.contains(cls.COLUMNSHEADER)) {
                     removeClass(this.element.querySelectorAll(('.' + cls.ROW_CELL_CLASS + '.') + cls.CELL_SELECTED_BGCOLOR), cls.CELL_SELECTED_BGCOLOR);
                 }
                 else {
@@ -3260,7 +3270,7 @@ var PivotView = /** @class */ (function (_super) {
                 }
             }
             else if (this.gridSettings.selectionSettings.mode === 'Both') {
-                if (ele.classList.contains(cls.ROW_CELL_CLASS)) {
+                if (ele && ele.classList.contains(cls.ROW_CELL_CLASS)) {
                     for (var _i = 0, _a = [].slice.call(this.element.querySelectorAll('.' + cls.SELECTED_BGCOLOR + ', .' + cls.CELL_SELECTED_BGCOLOR)); _i < _a.length; _i++) {
                         var ele_2 = _a[_i];
                         // if (Number((ele as HTMLElement).getAttribute('index')) !== rowIndex) {
@@ -3330,10 +3340,10 @@ var PivotView = /** @class */ (function (_super) {
                 for (var _i = 0, _a = [].slice.call(this.element.querySelectorAll('.' + cls.CELL_ACTIVE_BGCOLOR)); _i < _a.length; _i++) {
                     var ele = _a[_i];
                     removeClass([ele], [cls.CELL_ACTIVE_BGCOLOR, cls.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) {
@@ -3365,7 +3375,7 @@ var PivotView = /** @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++;
             }
@@ -3393,23 +3403,23 @@ var PivotView = /** @class */ (function (_super) {
         control.cellSelectionPos = [];
         for (var _i = 0, _a = [].slice.call(this.element.querySelectorAll('.' + cls.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('.' + cls.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)], [cls.CELL_ACTIVE_BGCOLOR, cls.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)], [cls.CELL_SELECTED_BGCOLOR]);
         }
     };
@@ -3498,7 +3508,7 @@ var PivotView = /** @class */ (function (_super) {
                     _this_1.clonedReport = _this_1.clonedReport ? _this_1.clonedReport : dataSourceSettings;
                 }
                 if (_this_1.dataSourceSettings.mode !== 'Server') {
-                    _this_1.engineModule.renderEngine(_this_1.dataSourceSettings, customProperties, _this_1.getValueCellInfo.bind(_this_1), _this_1.getHeaderSortInfo.bind(_this_1));
+                    _this_1.engineModule.renderEngine(_this_1.dataSourceSettings, customProperties, _this_1.aggregateCellInfo ? _this_1.getValueCellInfo.bind(_this_1) : undefined, _this_1.onHeadersSort ? _this_1.getHeaderSortInfo.bind(_this_1) : undefined);
                 }
                 _this_1.allowServerDataBinding = false;
                 _this_1.setProperties({ pivotValues: _this_1.engineModule.pivotValues }, true);
@@ -3509,7 +3519,7 @@ var PivotView = /** @class */ (function (_super) {
             else if (_this_1.dataSourceSettings.providerType === 'SSAS' && _this_1.dataType === 'olap') {
                 customProperties.savedFieldList = _this_1.olapEngineModule.fieldList;
                 customProperties.savedFieldListData = _this_1.olapEngineModule.fieldListData;
-                _this_1.olapEngineModule.renderEngine(_this_1.dataSourceSettings, customProperties, _this_1.getHeaderSortInfo.bind(_this_1));
+                _this_1.olapEngineModule.renderEngine(_this_1.dataSourceSettings, customProperties, _this_1.onHeadersSort ? _this_1.getHeaderSortInfo.bind(_this_1) : undefined);
                 _this_1.allowServerDataBinding = false;
                 _this_1.setProperties({ pivotValues: _this_1.olapEngineModule.pivotValues }, true);
                 delete _this_1.bulkChanges.pivotValues;
@@ -3990,7 +4000,8 @@ var PivotView = /** @class */ (function (_super) {
                                     : this.actionObj.actionName == events.removeRecord ? events.recordRemoved : (this.actionObj.actionName == events.pngExport) ? events.pngExported : (this.actionObj.actionName == events.jpegExport) ? events.jpegExported
                                         : (this.actionObj.actionName == events.svgExport) ? events.svgExported : (this.actionObj.actionName == events.pdfExport) ? events.pdfExported : (this.actionObj.actionName == events.csvExport) ? events.csvExported : (this.actionObj.actionName == events.excelExport) ? events.excelExported : this.actionObj.actionName == events.windowResize ? events.windowResized
                                             : this.actionObj.actionName == events.saveCurrentReport ? events.reportSaved : (this.actionObj.actionName == events.addNewReport) ? events.newReportAdded : (this.actionObj.actionName == events.saveAsCurrentReport) ? events.reportReSaved
-                                                : (this.actionObj.actionName == events.renameCurrentReport) ? events.reportRenamed : this.actionObj.actionName;
+                                                : (this.actionObj.actionName == events.renameCurrentReport) ? events.reportRenamed : (this.actionObj.actionName == events.renameCurrentReport) ? events.reportRenamed : (this.actionObj.actionName == events.horizontalScroll) ? events.horizontalScrolled
+                                                    : (this.actionObj.actionName == events.verticalScroll) ? events.verticalScrolled : this.actionObj.actionName;
         return actionName;
     };
     /* eslint-disable-next-line */
@@ -4442,6 +4453,9 @@ var PivotView = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], PivotView.prototype, "beforeExport", void 0);
+    __decorate([
+        Event()
+    ], PivotView.prototype, "exportComplete", void 0);
     __decorate([
         Event()
     ], PivotView.prototype, "conditionalFormatting", void 0);

package/src/pivotview/renderer/render.js

@@ -283,12 +283,22 @@ var Render = /** @class */ (function () {
             this.parent.lastColumn.width = 'auto';
             this.parent.lastColumn = undefined;
         }
+        var exportCompleteEventArgs = {
+            type: 'PDF',
+            promise: args.promise
+        };
+        this.parent.trigger(events.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(events.exportComplete, exportCompleteEventArgs);
     };
     /* eslint-enable */
     Render.prototype.dataBound = function (args) {
@@ -380,7 +390,7 @@ var Render = /** @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) {
@@ -452,7 +462,7 @@ var Render = /** @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);
@@ -661,7 +671,7 @@ var Render = /** @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) {
@@ -805,7 +815,7 @@ var Render = /** @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;
@@ -993,7 +1003,7 @@ var Render = /** @class */ (function () {
         var selectedElements = this.parent.element.querySelectorAll('.' + cls.CELL_SELECTED_BGCOLOR + ',.' + cls.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) {
@@ -1036,7 +1046,7 @@ var Render = /** @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 = '';
@@ -1140,18 +1150,18 @@ var Render = /** @class */ (function () {
                 var innerText = tCell.innerText;
                 tCell.innerText = '';
                 tCell.classList.add(cls.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(cls.SUMMARY);
                 }
                 var isGrandSum = (isNullOrUndefined(cell.isGrandSum) && (!isNullOrUndefined(this.parent.olapEngineModule) && this.parent.olapEngineModule.olapValueAxis === 'column') && this.parent.dataType === 'olap' &&
-                    ((this.colGrandPos - this.parent.dataSourceSettings.values.length) < Number(tCell.getAttribute('aria-colindex'))));
-                if (cell.isGrandSum || (isGrandSum || this.colGrandPos === Number(tCell.getAttribute('aria-colindex'))) || this.rowGrandPos === Number(tCell.getAttribute('index'))) {
+                    ((this.colGrandPos - this.parent.dataSourceSettings.values.length) < Number(tCell.getAttribute('data-colindex'))));
+                if (cell.isGrandSum || (isGrandSum || this.colGrandPos === Number(tCell.getAttribute('data-colindex'))) || this.rowGrandPos === Number(tCell.getAttribute('index'))) {
                     tCell.classList.add('e-gtot');
                 }
-                else if (this.parent.dataType === 'olap' ? cell.isSum : this.validateColumnTotalcell(!isNullOrUndefined(cell.value) ? cell.colIndex : cell.colIndex - 1)) {
+                else if (this.parent.dataType === 'olap' ? cell.isSum : this.validateColumnTotalcell(cell.colIndex)) {
                     tCell.classList.add('e-colstot');
                 }
                 if (cell.cssClass) {
@@ -1164,12 +1174,12 @@ var Render = /** @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 templateID = index + '_' + colindex;
                 /* eslint-disable-next-line */
                 var element = this.parent.getCellTemplate()({ targetCell: tCell, cellInfo: cell }, this.parent, 'cellTemplate', this.parent.element.id + '_cellTemplate', null, null, tCell);
@@ -1340,7 +1350,7 @@ var Render = /** @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') {
@@ -1431,7 +1441,7 @@ var Render = /** @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');
                     var templateID = index + '_' + colindex;
                     this.parent.gridHeaderCellInfo.push({ targetCell: tCell });
                 }
@@ -1515,7 +1525,7 @@ var Render = /** @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
         };

package/styles/bootstrap-dark.css

@@ -2513,7 +2513,7 @@
 }
 
 .e-pivot-calc-dialog-div {
-  max-height: 550px !important;
+  max-height: 600px !important;
   min-width: 290px;
 }
 .e-pivot-calc-dialog-div .e-dlg-header-content,
@@ -2523,11 +2523,14 @@
 .e-pivot-calc-dialog-div .e-dlg-content {
   padding-bottom: 15px;
 }
+.e-pivot-calc-dialog-div .e-dlg-content .e-pivot-calc-custom-format-div {
+  margin-top: 15px;
+}
 .e-pivot-calc-dialog-div .e-pivot-all-field-title,
 .e-pivot-calc-dialog-div .e-pivot-field-name-title,
 .e-pivot-calc-dialog-div .e-pivot-formula-title,
 .e-pivot-calc-dialog-div .e-olap-hierarchy-title,
-.e-pivot-calc-dialog-div .e-olap-format-title,
+.e-pivot-calc-dialog-div .e-pivot-format-title,
 .e-pivot-calc-dialog-div .e-olap-member-title {
   color: #f0f0f0;
   font-size: 13px;
@@ -2717,7 +2720,7 @@
   display: inline-block;
   height: 437px;
   overflow: auto;
-  width: 310px;
+  width: 100% !important;
 }
 .e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-field-tree-div .e-pivot-treeview-outer .e-treeview {
   display: inline-table;
@@ -2805,26 +2808,26 @@
 .e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-field-tree-div .e-pivot-treeview-outer .e-pivot-all-field-title-container .e-info:hover {
   color: #0070f0;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div {
   -ms-flex: auto;
       flex: auto;
   margin-left: 18px;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-pivot-formula {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-formula {
   height: 100px;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-olap-calc-custom-format-div {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-calc-custom-format-div {
   margin-top: 15px;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-pivot-formula-title,
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-pivot-field-name-title,
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-olap-hierarchy-title,
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-olap-format-title,
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-olap-member-title {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-formula-title,
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-field-name-title,
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-olap-hierarchy-title,
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-format-title,
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-olap-member-title {
   padding-left: 0;
   padding-right: 0;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div .e-pivot-field-name-title {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div .e-pivot-field-name-title {
   margin-top: 0;
   padding-top: 0;
 }
@@ -2835,7 +2838,7 @@
   float: left;
   margin: 0;
 }
-.e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-olap-calculated-div {
+.e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-pivot-calculated-div {
   margin-left: 0;
   margin-right: 18px;
 }
@@ -2852,13 +2855,13 @@
 .e-bigger.e-pivot-calc-dialog-div .e-pivot-field-name-title,
 .e-bigger.e-pivot-calc-dialog-div .e-pivot-formula-title,
 .e-bigger.e-pivot-calc-dialog-div .e-olap-hierarchy-title,
-.e-bigger.e-pivot-calc-dialog-div .e-olap-format-title,
+.e-bigger.e-pivot-calc-dialog-div .e-pivot-format-title,
 .e-bigger.e-pivot-calc-dialog-div .e-olap-member-title,
 .e-bigger .e-pivot-calc-dialog-div .e-pivot-all-field-title,
 .e-bigger .e-pivot-calc-dialog-div .e-pivot-field-name-title,
 .e-bigger .e-pivot-calc-dialog-div .e-pivot-formula-title,
 .e-bigger .e-pivot-calc-dialog-div .e-olap-hierarchy-title,
-.e-bigger .e-pivot-calc-dialog-div .e-olap-format-title,
+.e-bigger .e-pivot-calc-dialog-div .e-pivot-format-title,
 .e-bigger .e-pivot-calc-dialog-div .e-olap-member-title {
   font-size: 14px;
   padding: 6px 0;
@@ -2912,12 +2915,12 @@
 .e-bigger .e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-field-tree-div .e-pivot-treeview-outer .e-treeview ul .e-list-icon {
   font-size: 16px;
 }
-.e-bigger.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div,
-.e-bigger .e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-olap-calculated-div {
+.e-bigger.e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div,
+.e-bigger .e-pivot-calc-dialog-div.e-olap-calc-dialog-div .e-pivot-calc-outer-div .e-pivot-calculated-div {
   margin-left: 24px;
 }
-.e-bigger.e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-olap-calculated-div,
-.e-bigger .e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-olap-calculated-div {
+.e-bigger.e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-pivot-calculated-div,
+.e-bigger .e-pivot-calc-dialog-div.e-olap-calc-dialog-div.e-rtl .e-pivot-calc-outer-div .e-pivot-calculated-div {
   margin-left: 0;
   margin-right: 24px;
 }
@@ -4797,8 +4800,7 @@
 }
 .e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-pivot-calc-input-div,
 .e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-member-options,
-.e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-pivot-calc-custom-format-div,
-.e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-olap-calc-custom-format-div {
+.e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-pivot-calc-custom-format-div {
   margin-left: 20px;
   margin-right: 20px;
   margin-top: 20px;