@syncfusion/ej2-pivotview 20.1.61 → 20.2.36

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/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/renderer/render.js

@@ -350,6 +350,9 @@ var Render = /** @class */ (function () {
     /* eslint-disable */
     Render.prototype.contextMenuOpen = function (args) {
         var _this = this;
+        if (args.element && this.parent.cssClass) {
+            addClass([args.element.parentElement], this.parent.cssClass);
+        }
         var _loop_1 = function (item) {
             var cellTarget = this_1.parent.lastCellClicked;
             var elem = null;