@syncfusion/ej2-pivotview 20.1.58 → 20.2.38

package/src/pivotview/actions/virtualscroll.js

@@ -1,6 +1,8 @@
 import { EventHandler, setStyleAttribute, Browser } from '@syncfusion/ej2-base';
 import { contentReady } from '../../common/base/constant';
 import * as cls from '../../common/base/css-constant';
+import { PivotUtil } from '../../base/util';
+import * as events from '../../common/base/constant';
 /**
  * `VirtualScroll` module is used to handle scrolling behavior.
  */
@@ -145,8 +147,12 @@ var VirtualScroll = /** @class */ (function () {
         };
     };
     VirtualScroll.prototype.update = function (mHdr, mCont, top, left, e) {
+        var _this = this;
         this.parent.isScrolling = true;
         var engine = this.parent.dataType === 'pivot' ? this.parent.engineModule : this.parent.olapEngineModule;
+        var args = {
+            dataSourceSettings: PivotUtil.getClonedDataSourceSettings(this.parent.dataSourceSettings)
+        };
         if (this.parent.pageSettings && engine.pageSettings) {
             if (this.direction === 'vertical') {
                 var rowValues = this.parent.dataType === 'pivot' ?
@@ -158,25 +164,29 @@ var VirtualScroll = /** @class */ (function () {
                     // this.parent.hideWaitingPopup();
                     return;
                 }
+                this.parent.actionObj.actionName = events.verticalScroll;
+                this.parent.actionBeginMethod();
                 this.parent.showWaitingPopup();
                 this.parent.scrollPosObject.vertical = section;
                 engine.pageSettings.rowCurrentPage = section > 1 ? section : 1;
-                var rowStartPos = 0;
-                if (this.parent.dataType === 'pivot') {
-                    if (this.parent.dataSourceSettings.mode === 'Server') {
-                        this.parent.getEngine('onScroll', null, null, null, null, null, null);
+                var rowStartPos_1 = 0;
+                this.parent.trigger(events.enginePopulating, args, function (observedArgs) {
+                    if (_this.parent.dataType === 'pivot') {
+                        if (_this.parent.dataSourceSettings.mode === 'Server') {
+                            _this.parent.getEngine('onScroll', null, null, null, null, null, null);
+                        }
+                        else {
+                            _this.parent.engineModule.generateGridData(_this.parent.dataSourceSettings, true, _this.parent.engineModule.headerCollection);
+                            rowStartPos_1 = _this.parent.engineModule.rowStartPos;
+                        }
                     }
                     else {
-                        this.parent.engineModule.generateGridData(this.parent.dataSourceSettings, true, this.parent.engineModule.headerCollection);
-                        rowStartPos = this.parent.engineModule.rowStartPos;
+                        _this.parent.olapEngineModule.scrollPage('scroll');
+                        rowStartPos_1 = _this.parent.olapEngineModule.pageRowStartPos;
                     }
-                }
-                else {
-                    this.parent.olapEngineModule.scrollPage('scroll');
-                    rowStartPos = this.parent.olapEngineModule.pageRowStartPos;
-                }
-                this.parent.pivotValues = engine.pivotValues;
-                var exactPage = Math.ceil(rowStartPos / (this.parent.pageSettings.rowSize * rowValues));
+                    _this.enginePopulatedEventMethod(engine);
+                });
+                var exactPage = Math.ceil(rowStartPos_1 / (this.parent.pageSettings.rowSize * rowValues));
                 var pos = exactSize * exactPage -
                     (engine.rowFirstLvl * rowValues * this.parent.gridSettings.rowHeight);
                 this.parent.scrollPosObject.verticalSection = pos;
@@ -191,32 +201,51 @@ var VirtualScroll = /** @class */ (function () {
                     // this.parent.hideWaitingPopup();
                     return;
                 }
+                this.parent.actionObj.actionName = events.horizontalScroll;
+                this.parent.actionBeginMethod();
                 this.parent.showWaitingPopup();
-                var pivot = this.parent;
-                pivot.scrollPosObject.horizontal = section;
+                var pivot_1 = this.parent;
+                pivot_1.scrollPosObject.horizontal = section;
                 engine.pageSettings.columnCurrentPage = section > 1 ? section : 1;
-                var colStartPos = 0;
-                if (pivot.dataType === 'pivot') {
-                    if (this.parent.dataSourceSettings.mode === 'Server') {
-                        this.parent.getEngine('onScroll', null, null, null, null, null, null);
+                var colStartPos_1 = 0;
+                this.parent.trigger(events.enginePopulating, args, function (observedArgs) {
+                    if (pivot_1.dataType === 'pivot') {
+                        if (_this.parent.dataSourceSettings.mode === 'Server') {
+                            _this.parent.getEngine('onScroll', null, null, null, null, null, null);
+                        }
+                        else {
+                            pivot_1.engineModule.generateGridData(pivot_1.dataSourceSettings, true, pivot_1.engineModule.headerCollection);
+                            colStartPos_1 = pivot_1.engineModule.colStartPos;
+                        }
                     }
                     else {
-                        pivot.engineModule.generateGridData(pivot.dataSourceSettings, true, pivot.engineModule.headerCollection);
-                        colStartPos = pivot.engineModule.colStartPos;
+                        pivot_1.olapEngineModule.scrollPage('scroll');
+                        colStartPos_1 = pivot_1.olapEngineModule.pageColStartPos;
                     }
-                }
-                else {
-                    pivot.olapEngineModule.scrollPage('scroll');
-                    colStartPos = pivot.olapEngineModule.pageColStartPos;
-                }
-                pivot.pivotValues = engine.pivotValues;
-                var exactPage = Math.ceil(colStartPos / (pivot.pageSettings.columnSize * colValues));
+                    _this.enginePopulatedEventMethod(engine);
+                });
+                var exactPage = Math.ceil(colStartPos_1 / (pivot_1.pageSettings.columnSize * colValues));
                 var pos = exactSize * exactPage - (engine.colFirstLvl *
-                    colValues * pivot.gridSettings.columnWidth);
-                pivot.scrollPosObject.horizontalSection = pos;
+                    colValues * pivot_1.gridSettings.columnWidth);
+                pivot_1.scrollPosObject.horizontalSection = pos;
+            }
+            this.parent.actionObj.actionName = this.parent.getActionCompleteName();
+            if (this.parent.actionObj.actionName) {
+                this.parent.actionCompleteMethod();
             }
         }
     };
+    VirtualScroll.prototype.enginePopulatedEventMethod = function (engine, control) {
+        var _this = this;
+        var pivot = control ? control : this.parent;
+        var eventArgs = {
+            dataSourceSettings: pivot.dataSourceSettings,
+            pivotValues: pivot.pivotValues
+        };
+        pivot.trigger(events.enginePopulated, eventArgs, function (observedArgs) {
+            _this.parent.pivotValues = engine.pivotValues;
+        });
+    };
     VirtualScroll.prototype.setPageXY = function () {
         var _this = this;
         return function (e) {

package/src/pivotview/base/pivotview-model.d.ts

@@ -565,6 +565,13 @@ export interface PivotViewModel extends ComponentModel{
      */
     allowCalculatedField?: boolean;
 
+    /**
+     * It enables the search option in the field list UI, which can be used to search specific fields at runtime.
+     * > This option is only available when the pivot table's built-in popup field list is enabled using the `showFieldList` property.
+     * @default false
+     */
+    enableFieldSearching?: boolean;
+
     /**
      * Allows you to sort individual value field and its aggregated values either in row or column axis to ascending or descending order. 
      * You can sort the values by clicking directly on the value field header positioned either in row or column axis of the pivot table.

package/src/pivotview/base/pivotview.d.ts

@@ -799,6 +799,12 @@ export declare class PivotView extends Component<HTMLElement> implements INotify
      * @default false
      */
     allowCalculatedField: boolean;
+    /**
+     * It enables the search option in the field list UI, which can be used to search specific fields at runtime.
+     * > This option is only available when the pivot table's built-in popup field list is enabled using the `showFieldList` property.
+     * @default false
+     */
+    enableFieldSearching: boolean;
     /**
      * Allows you to sort individual value field and its aggregated values either in row or column axis to ascending or descending order.
      * You can sort the values by clicking directly on the value field header positioned either in row or column axis of the pivot table.

package/src/pivotview/base/pivotview.js

@@ -689,8 +689,8 @@ var PivotView = /** @class */ (function (_super) {
         if (this.showTooltip) {
             if (this.tooltipTemplate) {
                 this.tooltip = new Tooltip({
-                    target: 'td.e-valuescontent' + (this.cssClass ? (' ' + this.cssClass) : ''),
-                    cssClass: 'e-pivottooltiptemplate',
+                    target: 'td.e-valuescontent',
+                    cssClass: 'e-pivottooltiptemplate' + (this.cssClass ? (' ' + this.cssClass) : ''),
                     showTipPointer: false,
                     position: 'BottomRight',
                     mouseTrail: true,
@@ -702,7 +702,8 @@ var PivotView = /** @class */ (function (_super) {
             }
             else {
                 this.tooltip = new Tooltip({
-                    target: 'td.e-valuescontent' + (this.cssClass ? (' ' + this.cssClass) : ''),
+                    target: 'td.e-valuescontent',
+                    cssClass: this.cssClass,
                     showTipPointer: false,
                     position: 'BottomRight',
                     mouseTrail: true,
@@ -1216,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,
@@ -1629,6 +1630,8 @@ var PivotView = /** @class */ (function (_super) {
                         this.pivotFieldListModule.axisFieldModule.render();
                     }
                     break;
+                case 'enableFieldSearching':
+                    this.pivotFieldListModule.enableFieldSearching = this.enableFieldSearching;
             }
         }
     };
@@ -1887,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);
@@ -1928,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 */
@@ -2771,6 +2774,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');
@@ -3204,6 +3210,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') {
@@ -3249,7 +3258,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 {
@@ -3257,7 +3266,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) {
@@ -3495,7 +3504,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);
@@ -3506,7 +3515,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;
@@ -3987,7 +3996,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 */
@@ -4226,6 +4236,9 @@ var PivotView = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], PivotView.prototype, "allowCalculatedField", void 0);
+    __decorate([
+        Property(false)
+    ], PivotView.prototype, "enableFieldSearching", void 0);
     __decorate([
         Property(false)
     ], PivotView.prototype, "enableValueSorting", void 0);

package/src/pivotview/model/chartsettings-model.d.ts

@@ -786,7 +786,7 @@ export interface EmptyPointSettingsModel {
 
     /**
      * Allows you To customize the mode of empty points.
-     * @default Gap
+     * @default Zero
      */
     mode?: EmptyPointMode | AccEmptyPointMode;
 
@@ -1522,7 +1522,7 @@ export interface PivotChartSeriesEmptyPointSettingsModel {
 
     /**
      * To customize the mode of empty points.
-     * @default Gap
+     * @default Zero
      */
     mode?: EmptyPointMode | AccEmptyPointMode;
 

package/src/pivotview/model/chartsettings.d.ts

@@ -684,7 +684,7 @@ export declare class EmptyPointSettings extends ChildProperty<EmptyPointSettings
     border: PivotChartBorderModel;
     /**
      * Allows you To customize the mode of empty points.
-     * @default Gap
+     * @default Zero
      */
     mode: EmptyPointMode | AccEmptyPointMode;
 }
@@ -1295,7 +1295,7 @@ export declare class PivotChartSeriesEmptyPointSettings {
     border: PivotChartBorderModel;
     /**
      * To customize the mode of empty points.
-     * @default Gap
+     * @default Zero
      */
     mode: EmptyPointMode | AccEmptyPointMode;
 }

package/src/pivotview/model/chartsettings.js

@@ -529,7 +529,7 @@ var EmptyPointSettings = /** @class */ (function (_super) {
         Complex({ color: 'transparent', width: 0 }, Border)
     ], EmptyPointSettings.prototype, "border", void 0);
     __decorate([
-        Property('Gap')
+        Property('Zero')
     ], EmptyPointSettings.prototype, "mode", void 0);
     return EmptyPointSettings;
 }(ChildProperty));
@@ -991,7 +991,7 @@ var PivotChartSeriesEmptyPointSettings = /** @class */ (function () {
         Complex({ color: 'transparent', width: 0 }, Border)
     ], PivotChartSeriesEmptyPointSettings.prototype, "border", void 0);
     __decorate([
-        Property('Gap')
+        Property('Zero')
     ], PivotChartSeriesEmptyPointSettings.prototype, "mode", void 0);
     return PivotChartSeriesEmptyPointSettings;
 }());

package/src/pivotview/renderer/render.js

@@ -350,6 +350,9 @@ var Render = /** @class */ (function () {
     /* eslint-disable */
     Render.prototype.contextMenuOpen = function (args) {
         var _this = this;
+        if (args.element && this.parent.cssClass) {
+            addClass([args.element.parentElement], this.parent.cssClass);
+        }
         var _loop_1 = function (item) {
             var cellTarget = this_1.parent.lastCellClicked;
             var elem = null;
@@ -1925,8 +1928,8 @@ var Render = /** @class */ (function () {
                 args.value = this.parent.exportType === 'Excel' ? null : '';
             }
             else {
-                var aggMatrix = this.parent.engineModule.aggregatedValueMatrix;
-                if (aggMatrix[pivotValue.rowIndex] && aggMatrix[pivotValue.rowIndex][pivotValue.colIndex]) {
+                var aggMatrix = this.parent.dataType === 'pivot' && this.parent.engineModule ? this.parent.engineModule.aggregatedValueMatrix : undefined;
+                if (aggMatrix && aggMatrix[pivotValue.rowIndex] && aggMatrix[pivotValue.rowIndex][pivotValue.colIndex]) {
                     args.value = aggMatrix[pivotValue.rowIndex][pivotValue.colIndex];
                 }
                 else {