@syncfusion/ej2-pivotview 20.1.58 → 20.2.38

package/src/common/popups/toolbar.js

@@ -54,6 +54,7 @@ var Toolbar = /** @class */ (function () {
             locale: this.parent.locale,
             items: this.getItems(),
             allowKeyboard: false,
+            cssClass: this.parent.cssClass,
             width: !this.parent.gridSettings.allowAutoResizing ? (this.parent.grid ? (this.parent.getGridWidthAsNumber() - 2) : (this.parent.getWidthAsNumber() - 2)) : 'auto'
         });
         this.toolbar.isStringTemplate = true;
@@ -146,7 +147,7 @@ var Toolbar = /** @class */ (function () {
                     var toDisable = this.parent.displayOption.view === 'Chart';
                     items.push({
                         prefixIcon: cls.TOOLBAR_GRID + ' ' + cls.ICON, tooltipText: this.parent.localeObj.getConstant('grid'),
-                        id: this.parent.element.id + 'grid', cssClass: toDisable ? cls.MENU_DISABLE : '',
+                        id: this.parent.element.id + 'grid', cssClass: (toDisable ? cls.MENU_DISABLE : '') + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                         click: this.menuItemClick.bind(this)
                     });
                     break;
@@ -154,7 +155,7 @@ var Toolbar = /** @class */ (function () {
                     var validTypes = (this.parent.displayOption.view === 'Table');
                     items.push({
                         template: '<ul id="' + this.parent.element.id + 'chart_menu"></ul>',
-                        id: this.parent.element.id + 'chartmenu', cssClass: validTypes ? cls.MENU_DISABLE : ''
+                        id: this.parent.element.id + 'chartmenu', cssClass: (validTypes ? cls.MENU_DISABLE : '') + (this.parent.cssClass ? (' ' + this.parent.cssClass) : '')
                     });
                     break;
                 case 'MDX':
@@ -263,7 +264,7 @@ var Toolbar = /** @class */ (function () {
     Toolbar.prototype.saveReport = function (args) {
         if (this.currentReport && this.currentReport !== '' && args.item.id === (this.parent.element.id + 'save')) {
             var saveArgs = {
-                report: this.parent.getPersistData(),
+                report: this.getCurrentReport(),
                 reportName: this.currentReport
             };
             this.parent.actionObj.actionName = this.parent.getActionCompleteName();
@@ -521,7 +522,7 @@ var Toolbar = /** @class */ (function () {
                     return;
                 }
                 var saveArgs = {
-                    report: _this_2.parent.getPersistData(),
+                    report: _this_2.getCurrentReport(),
                     reportName: reportInput.value
                 };
                 var actionInfo = {
@@ -557,7 +558,7 @@ var Toolbar = /** @class */ (function () {
                 }
                 _this_3.parent.trigger(events.newReport);
                 var saveArgs = {
-                    report: _this_3.parent.getPersistData(),
+                    report: _this_3.getCurrentReport(),
                     reportName: reportInput.value
                 };
                 var actionInfo = {
@@ -648,14 +649,14 @@ var Toolbar = /** @class */ (function () {
                 {
                     buttonModel: {
                         content: this.parent.localeObj.getConstant('yes'), isPrimary: true,
-                        cssClass: cls.OK_BUTTON_CLASS
+                        cssClass: cls.OK_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : '')
                     },
                     click: this.okButtonClick.bind(this)
                 },
                 {
                     buttonModel: {
                         content: this.parent.localeObj.getConstant('no'),
-                        cssClass: cls.CANCEL_BUTTON_CLASS
+                        cssClass: cls.CANCEL_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : '')
                     },
                     click: this.cancelButtonClick.bind(this)
                 }
@@ -701,7 +702,7 @@ var Toolbar = /** @class */ (function () {
         else if (this.action === 'New' || (this.action !== 'Save' && this.action !== 'Rename' && this.action !== 'New')) {
             if (this.currentReport && this.currentReport !== '' && this.parent.isModified) {
                 var saveArgs = {
-                    report: this.parent.getPersistData(),
+                    report: this.getCurrentReport(),
                     reportName: this.currentReport
                 };
                 var actionInfo = {
@@ -726,7 +727,7 @@ var Toolbar = /** @class */ (function () {
             else if (this.action === 'New') {
                 this.parent.trigger(events.newReport);
                 var saveArgs = {
-                    report: this.parent.getPersistData(),
+                    report: this.getCurrentReport(),
                     reportName: this.currentReport
                 };
                 this.parent.trigger(events.saveReport, saveArgs);
@@ -737,7 +738,7 @@ var Toolbar = /** @class */ (function () {
         }
         else if (this.action === 'Save') {
             var saveArgs = {
-                report: this.parent.getPersistData(),
+                report: this.getCurrentReport(),
                 reportName: this.currentReport
             };
             this.parent.trigger(events.saveReport, saveArgs);
@@ -1036,6 +1037,15 @@ var Toolbar = /** @class */ (function () {
         }
         this.updateItemElements();
     };
+    Toolbar.prototype.getCurrentReport = function () {
+        var reportStr = this.parent.getPersistData();
+        if (this.parent.dataSourceSettings.type === 'CSV') {
+            var reportSettings = JSON.parse(reportStr);
+            reportSettings.dataSourceSettings.dataSource.splice(0, 0, this.parent.engineModule.fields);
+            reportStr = JSON.stringify(reportSettings);
+        }
+        return reportStr;
+    };
     Toolbar.prototype.updateItemElements = function () {
         var itemElements = [].slice.call(this.toolbar.element.querySelectorAll('.e-toolbar-item'));
         for (var _i = 0, itemElements_1 = itemElements; _i < itemElements_1.length; _i++) {
@@ -1068,7 +1078,7 @@ var Toolbar = /** @class */ (function () {
             this.parent.element.appendChild(inputCheckbox);
             var checkbox = new CheckBox({
                 label: this.parent.localeObj.getConstant('multipleAxes'),
-                cssClass: 'e-multipleAxes',
+                cssClass: 'e-multipleAxes' + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                 checked: this.parent.chartSettings.enableMultipleAxis,
                 change: function (args) {
                     document.getElementById(_this_1.parent.element.id + '_' + 'multipleAxes').click();
@@ -1100,7 +1110,7 @@ var Toolbar = /** @class */ (function () {
             var checkbox = new CheckBox({
                 label: this.parent.localeObj.getConstant('showLegend'),
                 checked: this.getLableState(this.parent.chartSettings.chartSeries.type),
-                cssClass: 'e-showLegend',
+                cssClass: 'e-showLegend' + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                 change: function (args) {
                     document.getElementById(_this_1.parent.element.id + '_' + 'showLegend').click();
                 },
@@ -1474,11 +1484,11 @@ var Toolbar = /** @class */ (function () {
             buttons: [
                 {
                     click: function () { _this_1.chartTypeDialogUpdate(); },
-                    buttonModel: { cssClass: cls.OK_BUTTON_CLASS, content: this.parent.localeObj.getConstant('ok'), isPrimary: true },
+                    buttonModel: { cssClass: cls.OK_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('ok'), isPrimary: true },
                 },
                 {
                     click: function () { _this_1.removeDialog(); },
-                    buttonModel: { cssClass: cls.CANCEL_BUTTON_CLASS, content: this.parent.localeObj.getConstant('cancel') }
+                    buttonModel: { cssClass: cls.CANCEL_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('cancel') }
                 }
             ],
             closeOnEscape: true,
@@ -1620,7 +1630,7 @@ var Toolbar = /** @class */ (function () {
         var _this_1 = this;
         var checkbox = new CheckBox({
             label: this.parent.localeObj.getConstant('multipleAxes'),
-            cssClass: 'e-dialog-multiple-axis',
+            cssClass: 'e-dialog-multiple-axis' + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
             checked: this.parent.chartSettings.enableMultipleAxis ? this.parent.chartSettings.enableMultipleAxis : false,
             change: function (args) {
                 getInstance(select('#' + _this_1.parent.element.id + '_AxisModeOption'), DropDownList).enabled = args.checked;
@@ -1632,7 +1642,7 @@ var Toolbar = /** @class */ (function () {
             label: this.parent.localeObj.getConstant('showLegend'),
             checked: this.getLableState(this.parent.chartSettings.chartSeries.type),
             change: function () { _this_1.chartLableState = true; },
-            cssClass: 'e-dialog-show-legend',
+            cssClass: 'e-dialog-show-legend' + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale
         });

package/src/pivotchart/base/pivotchart.js

@@ -424,6 +424,9 @@ var PivotChart = /** @class */ (function () {
                 if (this.persistSettings.chartSeries && this.persistSettings.chartSeries.emptyPointSettings) {
                     currentSeries.emptyPointSettings = this.persistSettings.chartSeries.emptyPointSettings;
                 }
+                if (!currentSeries.emptyPointSettings) {
+                    currentSeries.emptyPointSettings = { mode: 'Zero' };
+                }
                 this.chartSeries = this.chartSeries.concat(currentSeries);
             }
         }

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/drill-through.js

@@ -67,7 +67,7 @@ var DrillThrough = /** @class */ (function () {
         var valueCaption = '';
         var aggType = '';
         var rawData = [];
-        if (pivotValue.rowHeaders !== undefined && pivotValue.columnHeaders !== undefined && !isNullOrUndefined(pivotValue.value)) {
+        if (pivotValue.rowHeaders !== undefined && pivotValue.columnHeaders !== undefined) {
             if (this.parent.dataType === 'olap') {
                 var tupleInfo = void 0;
                 if (this.parent.dataSourceSettings.valueAxis === 'row') {
@@ -141,7 +141,7 @@ var DrillThrough = /** @class */ (function () {
                     }
                 }
                 if (!isNullOrUndefined(rawData[k])) {
-                    var calculatedFeildValue = this.parent.engineModule.getAggregateValue([Number(indexArray[k])], colIndex, indexValue, 'calculatedfield');
+                    var calculatedFeildValue = this.parent.engineModule.getAggregateValue([Number(indexArray[k])], colIndex, indexValue, 'calculatedfield', false);
                     rawData[k][this.parent.dataSourceSettings.calculatedFieldSettings[i].name] = (isNaN(calculatedFeildValue) && isNullOrUndefined(calculatedFeildValue)) ? '#DIV/0!' : calculatedFeildValue;
                 }
             }

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;