@syncfusion/ej2-pivotview 20.1.57 → 20.2.36

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();
@@ -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/excel-export.js

@@ -129,7 +129,8 @@ var ExcelExport = /** @class */ (function () {
                             var styles = (pivotCell.axis == 'row') ? { hAlign: 'Left', bold: true, wrapText: true } : { numberFormat: formatList[field], bold: false, wrapText: true };
                             var headerStyle = { bold: true, vAlign: 'Center', wrapText: true, indent: cCnt === 0 ? pivotCell.level * 10 : 0 };
                             if (!(pivotCell.level === -1 && !pivotCell.rowSpan)) {
-                                var cellValue = pivotCell.axis === 'value' ? pivotCell.value : pivotCell.formattedText;
+                                var aggMatrix = this.parent.engineModule.aggregatedValueMatrix;
+                                var cellValue = pivotCell.axis === 'value' ? ((aggMatrix[rCnt] && aggMatrix[rCnt][cCnt]) ? aggMatrix[rCnt][cCnt] : (pivotCell.formattedText === '#DIV/0!' ? pivotCell.formattedText : pivotCell.value)) : pivotCell.formattedText;
                                 var isgetValuesHeader = ((this.parent.dataSourceSettings.rows.length === 0 && this.parent.dataSourceSettings.valueAxis === 'row')
                                     || (this.parent.dataSourceSettings.columns.length === 0 && this.parent.dataSourceSettings.valueAxis === 'column'));
                                 if (pivotCell.type === 'grand sum' && !(this.parent.dataSourceSettings.values.length === 1 && this.parent.dataSourceSettings.valueAxis === 'row' && pivotCell.axis === 'column')) {

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,
@@ -1629,6 +1630,8 @@ var PivotView = /** @class */ (function (_super) {
                         this.pivotFieldListModule.axisFieldModule.render();
                     }
                     break;
+                case 'enableFieldSearching':
+                    this.pivotFieldListModule.enableFieldSearching = this.enableFieldSearching;
             }
         }
     };
@@ -4226,6 +4229,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;
 }