@syncfusion/ej2-pivotview 20.1.61 → 20.2.39

package/src/pivotchart/base/pivotchart.js

@@ -1134,14 +1134,14 @@ var PivotChart = /** @class */ (function () {
         var aggregateType = this.parent.dataType === 'olap' ? '' : this.parent.localeObj.getConstant(measureField.aggregateType);
         var measureAggregatedName = (this.parent.dataType === 'olap' ? '' : aggregateType + ' ' +
             this.parent.localeObj.getConstant('of') + ' ') + measureField.caption;
-        var formattedText = this.accumulationType.indexOf(this.parent.chartSettings.chartSeries.type) < 0 ?
-            args.text.split('<b>')[1].split('</b>')[0] : this.engineModule.pivotValues[rowIndex][colIndex].formattedText;
+        var formattedText = this.engineModule.pivotValues[rowIndex][colIndex].formattedText;
         var formatField = this.engineModule.formatFields[measureField.id];
-        var formattedValue = ((formatField && formatField.format && formatField.format.toLowerCase().match(/n|p|c/) !== null &&
+        var valueFormat = this.engineModule.getFormattedValue(args.point.y, measureField.id, formattedText);
+        var formattedValue = (formatField && formatField.format && formatField.format.toLowerCase().match(/n|p|c/) !== null &&
             this.chartSettings.useGroupingSeparator) ? this.parent.dataType === 'olap' ?
-            this.engineModule.getFormattedValue(args.point.y, measureField.id, formattedText) :
-            this.parent.engineModule.getFormattedValue(args.point.y, measureField.id).formattedText :
-            formattedText);
+            valueFormat.toString() :
+            valueFormat.formattedText :
+            formattedText;
         var columnText = (args.series.name ? args.series.name.split(' | ')[0] : args.data.seriesName.split(' | ')[0]);
         var rowText = args.point.x;
         if (this.parent.tooltipTemplate && this.parent.getTooltipTemplate() !== undefined || this.chartSettings.tooltip.template) {
@@ -1470,6 +1470,16 @@ var PivotChart = /** @class */ (function () {
                 args.text = '';
             }
         }
+        if (args.axis.name !== 'primaryXAxis') {
+            var formatField = this.engineModule.formatFields[args.axis.name];
+            var valueFormat = this.engineModule.getFormattedValue(args.value, args.axis.name, args.text);
+            var formattedValue = ((formatField && formatField.format && formatField.format.toLowerCase().match(/n|p|c/) !== null &&
+                this.chartSettings.useGroupingSeparator) ? this.parent.dataType === 'olap' ?
+                valueFormat.toString() :
+                valueFormat.formattedText :
+                args.value.toString());
+            args.text = formattedValue;
+        }
         this.parent.trigger(events.chartAxisLabelRender, args);
     };
     PivotChart.prototype.multiLevelLabelClick = function (args) {

package/src/pivotfieldlist/base/field-list-model.d.ts

@@ -86,6 +86,11 @@ export interface PivotFieldListModel extends ComponentModel{
      */
     allowCalculatedField?: boolean;
 
+    /**
+     * It enables the search option in the field list UI, which can be used to search specific fields at runtime.
+     */
+    enableFieldSearching?: boolean;
+
     /**
      * Allows you to create a pivot button with "Values" as a caption used to display in the field list UI. 
      * It helps you to plot the value fields to either column or row axis during runtime.

package/src/pivotfieldlist/base/field-list.d.ts

@@ -190,6 +190,10 @@ export declare class PivotFieldList extends Component<HTMLElement> implements IN
      * @default false
      */
     allowCalculatedField: boolean;
+    /**
+     * It enables the search option in the field list UI, which can be used to search specific fields at runtime.
+     */
+    enableFieldSearching: boolean;
     /**
      * Allows you to create a pivot button with "Values" as a caption used to display in the field list UI.
      * It helps you to plot the value fields to either column or row axis during runtime.

package/src/pivotfieldlist/base/field-list.js

@@ -635,6 +635,8 @@ var PivotFieldList = /** @class */ (function (_super) {
                     }
                     requireRefresh = true;
                     break;
+                case 'enableFieldSearching':
+                    this.refresh();
             }
             if (requireRefresh) {
                 this.fieldListRender();
@@ -678,7 +680,7 @@ var PivotFieldList = /** @class */ (function (_super) {
                 customProperties.enableValueSorting = _this.staticPivotGridModule ?
                     _this.staticPivotGridModule.enableValueSorting : _this.enableValueSorting;
                 if (_this.dataSourceSettings.mode !== 'Server') {
-                    _this.engineModule.renderEngine(_this.dataSourceSettings, customProperties, _this.getValueCellInfo.bind(_this), _this.getHeaderSortInfo.bind(_this));
+                    _this.engineModule.renderEngine(_this.dataSourceSettings, customProperties, _this.aggregateCellInfo ? _this.getValueCellInfo.bind(_this) : undefined, _this.onHeadersSort ? _this.getHeaderSortInfo.bind(_this) : undefined);
                 }
                 _this.pivotFieldList = _this.engineModule.fieldList;
                 var eventArgs = {
@@ -694,7 +696,7 @@ var PivotFieldList = /** @class */ (function (_super) {
                 });
             }
             else if (_this.dataType === 'olap') {
-                _this.olapEngineModule.renderEngine(_this.dataSourceSettings, _this.frameCustomProperties(_this.olapEngineModule.fieldListData, _this.olapEngineModule.fieldList), _this.getHeaderSortInfo.bind(_this));
+                _this.olapEngineModule.renderEngine(_this.dataSourceSettings, _this.frameCustomProperties(_this.olapEngineModule.fieldListData, _this.olapEngineModule.fieldList), _this.onHeadersSort ? _this.getHeaderSortInfo.bind(_this) : undefined);
                 _this.pivotFieldList = _this.olapEngineModule.fieldList;
                 var eventArgs = {
                     pivotFieldList: _this.pivotFieldList,
@@ -772,10 +774,10 @@ var PivotFieldList = /** @class */ (function (_super) {
             this.fieldListSpinnerElement = this.element.querySelector('.e-pivotfieldlist-container');
         }
         if (this.spinnerTemplate) {
-            createSpinner({ target: this.fieldListSpinnerElement, template: this.spinnerTemplate }, this.createElement);
+            createSpinner({ target: this.fieldListSpinnerElement, template: this.spinnerTemplate, cssClass: this.cssClass ? this.cssClass : undefined }, this.createElement);
         }
         else {
-            createSpinner({ target: this.fieldListSpinnerElement }, this.createElement);
+            createSpinner({ target: this.fieldListSpinnerElement, cssClass: this.cssClass ? this.cssClass : undefined }, this.createElement);
         }
         var args;
         args = {
@@ -935,7 +937,7 @@ var PivotFieldList = /** @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);
                         }
                     }
                 }
@@ -1033,7 +1035,7 @@ var PivotFieldList = /** @class */ (function (_super) {
             }
         }
         else {
-            pivot.olapEngineModule.renderEngine(pivot.dataSourceSettings, customProperties, pivot.getHeaderSortInfo.bind(pivot));
+            pivot.olapEngineModule.renderEngine(pivot.dataSourceSettings, customProperties, pivot.onHeadersSort ? pivot.getHeaderSortInfo.bind(pivot) : undefined);
         }
         pivot.lastSortInfo = {};
         pivot.lastAggregationInfo = {};
@@ -1282,6 +1284,9 @@ var PivotFieldList = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], PivotFieldList.prototype, "allowCalculatedField", void 0);
+    __decorate([
+        Property(false)
+    ], PivotFieldList.prototype, "enableFieldSearching", void 0);
     __decorate([
         Property(false)
     ], PivotFieldList.prototype, "showValuesButton", void 0);

package/src/pivotfieldlist/renderer/dialog-renderer.js

@@ -43,6 +43,12 @@ var DialogRenderer = /** @class */ (function () {
         if (this.parent.cssClass) {
             addClass([fieldListWrappper], this.parent.cssClass);
         }
+        if (this.parent.enableFieldSearching) {
+            addClass([fieldListWrappper], cls.FIELD_LIST_SEARCH_MODE_CLASS);
+        }
+        else {
+            removeClass([fieldListWrappper], cls.FIELD_LIST_SEARCH_MODE_CLASS);
+        }
         this.parentElement = createElement('div', { className: cls.CONTAINER_CLASS });
         this.parent.element.appendChild(fieldListWrappper);
         if (this.parent.isAdaptive) {
@@ -87,13 +93,14 @@ var DialogRenderer = /** @class */ (function () {
                 checked: true,
                 enableRtl: this.parent.enableRtl,
                 locale: this.parent.locale,
-                change: this.onCheckChange.bind(this)
+                change: this.onCheckChange.bind(this),
+                cssClass: this.parent.cssClass
             });
             this.deferUpdateCheckBox.isStringTemplate = true;
             this.deferUpdateCheckBox.appendTo('#' + this.parent.element.id + 'DeferUpdateCheckBox');
             this.deferUpdateApplyButton = new Button({
                 cssClass: cls.DEFER_APPLY_BUTTON + ' ' + cls.DEFER_UPDATE_BUTTON + (this.parent.renderMode === 'Popup' ?
-                    (' ' + cls.BUTTON_FLAT_CLASS) : ''),
+                    (' ' + cls.BUTTON_FLAT_CLASS) : '') + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                 content: this.parent.localeObj.getConstant('apply'),
                 enableRtl: this.parent.enableRtl,
                 locale: this.parent.locale,
@@ -106,7 +113,7 @@ var DialogRenderer = /** @class */ (function () {
         }
         this.deferUpdateCancelButton = new Button({
             cssClass: cls.DEFER_CANCEL_BUTTON + ' ' + cls.CANCEL_BUTTON_CLASS + (this.parent.renderMode === 'Popup' ?
-                (' ' + cls.BUTTON_FLAT_CLASS) : ''),
+                (' ' + cls.BUTTON_FLAT_CLASS) : '') + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
             content: this.parent.allowDeferLayoutUpdate ? this.parent.localeObj.getConstant('cancel') :
                 this.parent.localeObj.getConstant('close'),
             enableRtl: this.parent.enableRtl, isPrimary: !this.parent.allowDeferLayoutUpdate, locale: this.parent.locale
@@ -224,7 +231,7 @@ var DialogRenderer = /** @class */ (function () {
             var buttons = [{
                     click: this.showFieldListDialog.bind(this),
                     buttonModel: {
-                        cssClass: cls.ADAPTIVE_FIELD_LIST_BUTTON_CLASS + ' ' + cls.BUTTON_SMALL_CLASS + ' ' + cls.BUTTON_ROUND_CLASS,
+                        cssClass: cls.ADAPTIVE_FIELD_LIST_BUTTON_CLASS + ' ' + cls.BUTTON_SMALL_CLASS + ' ' + cls.BUTTON_ROUND_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                         iconCss: cls.ICON + ' ' + cls.ADD_ICON_CLASS,
                         isPrimary: true
                     }
@@ -232,7 +239,7 @@ var DialogRenderer = /** @class */ (function () {
                     click: this.showCalculatedField.bind(this),
                     buttonModel: {
                         cssClass: cls.ADAPTIVE_CALCULATED_FIELD_BUTTON_CLASS +
-                            ' ' + cls.BUTTON_SMALL_CLASS + ' ' + cls.BUTTON_ROUND_CLASS + ' ' + cls.ICON_DISABLE,
+                            ' ' + cls.BUTTON_SMALL_CLASS + ' ' + cls.BUTTON_ROUND_CLASS + ' ' + cls.ICON_DISABLE + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                         iconCss: cls.ICON + ' ' + cls.ADD_ICON_CLASS, enableRtl: this.parent.enableRtl,
                         isPrimary: true
                     }
@@ -370,7 +377,8 @@ var DialogRenderer = /** @class */ (function () {
             height: '100%',
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
-            selected: this.tabSelect.bind(this)
+            selected: this.tabSelect.bind(this),
+            cssClass: this.parent.cssClass
         });
         if (this.parent.renderMode === 'Fixed') {
             layoutFooter.appendChild(this.createAddButton());
@@ -416,7 +424,7 @@ var DialogRenderer = /** @class */ (function () {
             }
         });
         var calculateField = new Button({
-            cssClass: cls.CALCULATED_FIELD_CLASS + ' ' + cls.ICON_DISABLE,
+            cssClass: cls.CALCULATED_FIELD_CLASS + ' ' + cls.ICON_DISABLE + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
             content: this.parent.localeObj.getConstant('CalculatedField'),
             enableRtl: this.parent.enableRtl, locale: this.parent.locale
         });
@@ -436,12 +444,12 @@ var DialogRenderer = /** @class */ (function () {
         var calculatedButton = createElement('div', {});
         var calculateField = new Button({
             cssClass: cls.ADAPTIVE_CALCULATED_FIELD_BUTTON_CLASS +
-                ' ' + cls.BUTTON_SMALL_CLASS + ' ' + cls.BUTTON_ROUND_CLASS + ' ' + cls.ICON_DISABLE,
+                ' ' + cls.BUTTON_SMALL_CLASS + ' ' + cls.BUTTON_ROUND_CLASS + ' ' + cls.ICON_DISABLE + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
             iconCss: cls.ICON + ' ' + cls.ADD_ICON_CLASS,
             enableRtl: this.parent.enableRtl, locale: this.parent.locale
         });
         var fieldList = new Button({
-            cssClass: cls.ADAPTIVE_FIELD_LIST_BUTTON_CLASS + ' ' + cls.BUTTON_SMALL_CLASS + ' ' + cls.BUTTON_ROUND_CLASS,
+            cssClass: cls.ADAPTIVE_FIELD_LIST_BUTTON_CLASS + ' ' + cls.BUTTON_SMALL_CLASS + ' ' + cls.BUTTON_ROUND_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
             iconCss: cls.ICON + ' ' + cls.ADD_ICON_CLASS,
             enableRtl: this.parent.enableRtl, locale: this.parent.locale
         });

package/src/pivotfieldlist/renderer/tree-renderer.d.ts

@@ -15,6 +15,10 @@ export declare class TreeViewRenderer implements IAction {
     private editorSearch;
     private selectedNodes;
     private fieldListSort;
+    private fieldSearch;
+    private nonSearchList;
+    private isSearching;
+    private parentIDs;
     /** Constructor for render module
      * @param {PivotFieldList} parent - Instance of field list.
      */

package/src/pivotfieldlist/renderer/tree-renderer.js

@@ -4,7 +4,7 @@ import * as cls from '../../common/base/css-constant';
 import * as events from '../../common/base/constant';
 import { TreeView } from '@syncfusion/ej2-navigations';
 import { Dialog } from '@syncfusion/ej2-popups';
-import { MaskedTextBox } from '@syncfusion/ej2-inputs';
+import { MaskedTextBox, TextBox } from '@syncfusion/ej2-inputs';
 import { PivotUtil } from '../../base/util';
 /**
  * Module to render Field List
@@ -16,6 +16,8 @@ var TreeViewRenderer = /** @class */ (function () {
      */
     function TreeViewRenderer(parent) {
         this.selectedNodes = [];
+        this.isSearching = false;
+        this.parentIDs = [];
         this.parent = parent;
         this.addEventListener();
     }
@@ -36,15 +38,42 @@ var TreeViewRenderer = /** @class */ (function () {
                 className: cls.FIELD_HEADER_CLASS,
                 innerHTML: this.parent.localeObj.getConstant('allFields')
             });
-            var treeOuterDiv = createElement('div', { className: cls.FIELD_LIST_TREE_CLASS + '-outer-div' });
+            var searchWrapper = createElement('div', {
+                id: this.parent.element.id + '_SearchDiv', attrs: { 'tabindex': '-1' },
+                className: cls.FIELD_LIST_SEARCH_CLASS
+            });
+            var searchInput = createElement('input', { attrs: { 'type': 'text' } });
+            searchWrapper.appendChild(searchInput);
+            this.fieldSearch = new TextBox({
+                placeholder: this.parent.localeObj.getConstant('search'),
+                enableRtl: this.parent.enableRtl,
+                locale: this.parent.locale,
+                cssClass: cls.FIELD_LIST_SEARCH_INPUT_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
+                input: this.textChange.bind(this),
+                showClearButton: true
+            });
+            this.fieldSearch.isStringTemplate = true;
+            this.fieldSearch.appendTo(searchInput);
+            this.fieldSearch.addIcon('append', cls.FIELD_LIST_SEARCH_ICON_CLASS + ' ' + cls.ICON);
+            var promptDiv = createElement('div', {
+                className: cls.EMPTY_MEMBER_CLASS + ' ' + cls.ICON_DISABLE,
+                innerHTML: this.parent.localeObj.getConstant('noMatches')
+            });
+            var treeOuterDiv = createElement('div', {
+                className: cls.FIELD_LIST_TREE_OUTER_DIV_CLASS + ' ' + cls.TREE_CONTAINER
+            });
             this.treeViewElement = createElement('div', {
                 id: this.parent.element.id + '_TreeView',
                 className: cls.FIELD_LIST_CLASS + ' ' + (this.parent.dataType === 'olap' ? cls.OLAP_FIELD_LIST_CLASS : '')
             });
-            var fieldHeaderWrappper = createElement('div', { className: 'e-field-header-container' });
+            var fieldHeaderWrappper = createElement('div', { className: cls.FIELD_HEADER_CONTAINER_CLASS });
             fieldHeaderWrappper.appendChild(treeHeader);
             fieldTable.appendChild(fieldHeaderWrappper);
             this.updateSortElements(fieldHeaderWrappper);
+            if (this.parent.enableFieldSearching) {
+                fieldTable.appendChild(searchWrapper);
+                fieldTable.appendChild(promptDiv);
+            }
             treeOuterDiv.appendChild(this.treeViewElement);
             fieldTable.appendChild(treeOuterDiv);
             this.parentElement.appendChild(fieldTable);
@@ -168,6 +197,40 @@ var TreeViewRenderer = /** @class */ (function () {
         if (args.node.querySelector('.' + cls.NODE_CHECK_CLASS)) {
             addClass([args.node.querySelector('.' + cls.LIST_TEXT_CLASS)], cls.LIST_SELECT_CLASS);
         }
+        if (this.parent.enableFieldSearching && this.isSearching) {
+            var liElement = args.node;
+            if (this.parent.dataType === 'olap') {
+                var id = liElement.getAttribute('data-uid');
+                var searchItem = this.parent.pivotCommon.eventBase.searchListItem;
+                for (var i = 0; i < this.parentIDs.length; i++) {
+                    if (id === this.parentIDs[i]) {
+                        addClass([liElement], cls.ICON_DISABLE);
+                    }
+                    for (var _i = 0, searchItem_1 = searchItem; _i < searchItem_1.length; _i++) {
+                        var li2 = searchItem_1[_i];
+                        var parentID = this.parent.pivotCommon.eventBase.getParentIDs(this.fieldTable, li2.getAttribute('data-uid'), []);
+                        if (PivotUtil.inArray(id, parentID) > -1) {
+                            removeClass([liElement], cls.ICON_DISABLE);
+                            break;
+                        }
+                    }
+                }
+            }
+            else {
+                for (var i = 0; i < this.nonSearchList.length; i++) {
+                    if (liElement.textContent === this.nonSearchList[i].textContent) {
+                        addClass([liElement], cls.ICON_DISABLE);
+                        break;
+                    }
+                    else {
+                        if (liElement.innerText === this.nonSearchList[i].textContent) {
+                            addClass([liElement], cls.ICON_DISABLE);
+                            break;
+                        }
+                    }
+                }
+            }
+        }
     };
     TreeViewRenderer.prototype.updateOlapTreeNode = function (args) {
         var allowDrag = false;
@@ -223,12 +286,12 @@ var TreeViewRenderer = /** @class */ (function () {
             buttons: [{
                     click: this.closeTreeDialog.bind(this),
                     buttonModel: {
-                        cssClass: cls.CANCEL_BUTTON_CLASS, content: this.parent.localeObj.getConstant('cancel')
+                        cssClass: cls.CANCEL_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('cancel')
                     }
                 }, {
                     click: this.onFieldAdd.bind(this),
                     buttonModel: {
-                        cssClass: cls.OK_BUTTON_CLASS, content: this.parent.localeObj.getConstant('add'),
+                        cssClass: cls.OK_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('add'),
                         isPrimary: true
                     }
                 }],
@@ -257,7 +320,7 @@ var TreeViewRenderer = /** @class */ (function () {
         });
         var editorSearch = createElement('input', { attrs: { 'type': 'text' } });
         searchWrapper.appendChild(editorSearch);
-        var treeOuterDiv = createElement('div', { className: cls.EDITOR_TREE_CONTAINER_CLASS + '-outer-div' });
+        var treeOuterDiv = createElement('div', { className: cls.FIELD_LIST_TREE_OUTER_DIV_CLASS });
         var treeViewContainer = createElement('div', {
             className: cls.EDITOR_TREE_CONTAINER_CLASS + ' ' + (this.parent.dataType === 'olap' ? 'e-olap-field-list-tree' : '')
         });
@@ -267,7 +330,7 @@ var TreeViewRenderer = /** @class */ (function () {
             placeholder: this.parent.localeObj.getConstant('search'),
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
-            cssClass: cls.EDITOR_SEARCH_CLASS,
+            cssClass: cls.EDITOR_SEARCH_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
             change: this.textChange.bind(this)
         });
         this.editorSearch.isStringTemplate = true;
@@ -303,14 +366,41 @@ var TreeViewRenderer = /** @class */ (function () {
     };
     TreeViewRenderer.prototype.textChange = function (e) {
         this.parent.pivotCommon.eventBase.searchTreeNodes(e, this.fieldTable, true);
-        var promptDiv = this.fieldDialog.element.querySelector('.' + cls.EMPTY_MEMBER_CLASS);
+        var promptDiv;
+        var treeOuterDiv;
+        if (this.parent.isAdaptive) {
+            promptDiv = this.fieldDialog.element.querySelector('.' + cls.EMPTY_MEMBER_CLASS);
+        }
+        else {
+            promptDiv = this.parentElement.querySelector('.' + cls.EMPTY_MEMBER_CLASS);
+            treeOuterDiv = this.parentElement.querySelector('.' + cls.TREE_CONTAINER);
+        }
         var liList = [].slice.call(this.fieldTable.element.querySelectorAll('li'));
         var disabledList = [].slice.call(this.fieldTable.element.querySelectorAll('li.' + cls.ICON_DISABLE));
         if (liList.length === disabledList.length) {
             removeClass([promptDiv], cls.ICON_DISABLE);
+            if (!this.parent.isAdaptive) {
+                addClass([treeOuterDiv], cls.ICON_DISABLE);
+                removeClass([treeOuterDiv], cls.FIELD_LIST_TREE_OUTER_DIV_SEARCH_CLASS);
+            }
         }
         else {
             addClass([promptDiv], cls.ICON_DISABLE);
+            if (!this.parent.isAdaptive) {
+                removeClass([treeOuterDiv], cls.ICON_DISABLE);
+                addClass([treeOuterDiv], cls.FIELD_LIST_TREE_OUTER_DIV_SEARCH_CLASS);
+            }
+        }
+        this.isSearching = disabledList.length > 0 ? true : false;
+        this.nonSearchList = disabledList;
+        if (this.parent.dataType === 'olap') {
+            this.parentIDs = [];
+            for (var i = 0; i < liList.length; i++) {
+                if (liList[i].classList.contains("e-level-1")) {
+                    var id = liList[i].getAttribute('data-uid');
+                    this.parentIDs.push(id);
+                }
+            }
         }
     };
     TreeViewRenderer.prototype.dragStart = function (args) {
@@ -965,6 +1055,10 @@ var TreeViewRenderer = /** @class */ (function () {
             this.editorSearch.destroy();
             this.editorSearch = null;
         }
+        if (this.fieldSearch && !this.fieldSearch.isDestroyed) {
+            this.fieldSearch.destroy();
+            this.fieldSearch = null;
+        }
     };
     return TreeViewRenderer;
 }());

package/src/pivotview/actions/virtualscroll.d.ts

@@ -32,6 +32,7 @@ export declare class VirtualScroll {
     private onCustomScrollbarScroll;
     private onTouchScroll;
     private update;
+    private enginePopulatedEventMethod;
     private setPageXY;
     private common;
     private onHorizondalScroll;

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);
+                this.parent.pageSettings.rowCurrentPage = engine.pageSettings.rowCurrentPage = section > 1 ? section : 1;
+                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;
-                engine.pageSettings.columnCurrentPage = section > 1 ? section : 1;
-                var colStartPos = 0;
-                if (pivot.dataType === 'pivot') {
-                    if (this.parent.dataSourceSettings.mode === 'Server') {
-                        this.parent.getEngine('onScroll', null, null, null, null, null, null);
+                var pivot_1 = this.parent;
+                pivot_1.scrollPosObject.horizontal = section;
+                this.parent.pageSettings.columnCurrentPage = engine.pageSettings.columnCurrentPage = section > 1 ? section : 1;
+                var colStartPos_1 = 0;
+                this.parent.trigger(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.