@syncfusion/ej2-pivotview 20.1.57 → 20.2.36

package/dist/es6/ej2-pivotview.es5.js

@@ -3,7 +3,7 @@ import { DataManager, Deferred, Query } from '@syncfusion/ej2-data';
 import { Dialog, Tooltip, createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 import { ColumnChooser, CommandColumn, ContextMenu, Edit, ExcelExport, Freeze, Grid, Page, PdfExport, Reorder, Resize, Selection, Toolbar, VirtualScroll, getObject, headerRefreshed, setStyleAndAttributes } from '@syncfusion/ej2-grids';
 import { Accordion, ContextMenu as ContextMenu$1, Menu, Tab, Toolbar as Toolbar$1, TreeView } from '@syncfusion/ej2-navigations';
-import { ColorPicker, MaskedTextBox, NumericTextBox } from '@syncfusion/ej2-inputs';
+import { ColorPicker, MaskedTextBox, NumericTextBox, TextBox } from '@syncfusion/ej2-inputs';
 import { CheckBoxSelection, DropDownList, MultiSelect } from '@syncfusion/ej2-dropdowns';
 import { DateTimePicker } from '@syncfusion/ej2-calendars';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
@@ -876,9 +876,9 @@ var PivotUtil = /** @__PURE__ @class */ (function () {
         }
         else if (type === true) {
             sortOrder === 'Ascending' ?
-                (sortMembersOrder.sort(function (a, b) { return (a.actualText === 'Grand Total' || b.actualText === 'Grand Total') ? 0 : (Number(a.actualText.toString().match(/\d+/)[0]) > Number(b.actualText.toString().match(/\d+/)[0])) ? 1 : ((Number(b.actualText.toString().match(/\d+/)[0]) > Number(a.actualText.toString().match(/\d+/)[0])) ? -1 : 0); })) :
+                (sortMembersOrder.sort(function (a, b) { return (a.actualText === 'Grand Total' || b.actualText === 'Grand Total') ? 0 : (a.actualText === 'Out of Range') ? 1 : (b.actualText === 'Out of Range') ? -1 : (Number(a.actualText.toString().match(/\d+/)) > Number(b.actualText.toString().match(/\d+/))) ? 1 : ((Number(b.actualText.toString().match(/\d+/)) > Number(a.actualText.toString().match(/\d+/))) ? -1 : 0); })) :
                 sortOrder === 'Descending' ?
-                    (sortMembersOrder.sort(function (a, b) { return (a.actualText === 'Grand Total' || b.actualText === 'Grand Total') ? 0 : (Number(a.actualText.toString().match(/\d+/)[0]) < Number(b.actualText.toString().match(/\d+/)[0])) ? 1 : ((Number(b.actualText.toString().match(/\d+/)[0]) < Number(a.actualText.toString().match(/\d+/)[0])) ? -1 : 0); })) :
+                    (sortMembersOrder.sort(function (a, b) { return (a.actualText === 'Grand Total' || b.actualText === 'Grand Total') ? 0 : (a.actualText === 'Out of Range') ? -1 : (b.actualText === 'Out of Range') ? 1 : (Number(a.actualText.toString().match(/\d+/)) < Number(b.actualText.toString().match(/\d+/))) ? 1 : ((Number(b.actualText.toString().match(/\d+/)) < Number(a.actualText.toString().match(/\d+/))) ? -1 : 0); })) :
                     sortMembersOrder;
         }
         else {
@@ -2590,8 +2590,8 @@ var PivotEngine = /** @__PURE__ @class */ (function () {
                     var mPos = this.fieldList[measure].index;
                     var aggregate = this.fieldList[measure].aggregateType;
                     this.rawIndexObject = {};
-                    value = (type === 'row' ? this.getAggregateValue(rows[i].index, columns.indexObject, mPos, aggregate) :
-                        this.getAggregateValue(columns.index, rows[i].indexObject, mPos, aggregate));
+                    value = (type === 'row' ? this.getAggregateValue(rows[i].index, columns.indexObject, mPos, aggregate, false) :
+                        this.getAggregateValue(columns.index, rows[i].indexObject, mPos, aggregate, false));
                     var cellDetails = {
                         fieldName: measure,
                         row: rows[i],
@@ -3278,70 +3278,94 @@ var PivotEngine = /** @__PURE__ @class */ (function () {
         return headers;
     };
     PivotEngine.prototype.performFilterCommonUpdate = function (filterItem, headersInfo, addPos) {
-        var rawHeaders = headersInfo.axis === 'row' ? this.rMembers : this.cMembers;
-        var filterObjects = {};
-        for (var _i = 0, _a = this.filterMembers; _i < _a.length; _i++) {
-            var item = _a[_i];
-            filterObjects[item] = item;
-        }
-        if (this.fieldFilterMem[filterItem.name]) {
-            rawHeaders = this.performFilterDeletion(headersInfo.headers, filterItem, headersInfo, filterObjects, 0);
-        }
-        if (addPos.length > 0 && headersInfo.fields.length > 0) {
-            this.frameHeaderObjectsCollection = true;
-            if (headersInfo.fields.filter(function (item) { return item.showNoDataItems; }).length > 0) {
-                for (var i = 0; i < this.data.length; i++) {
-                    addPos.push(i);
+        if (headersInfo.axis === 'row' || headersInfo.axis === 'column') {
+            var rawHeaders = headersInfo.axis === 'row' ? this.rMembers : this.cMembers;
+            var filterObjects = {};
+            for (var _i = 0, _a = this.filterMembers; _i < _a.length; _i++) {
+                var item = _a[_i];
+                filterObjects[item] = item;
+            }
+            if (this.fieldFilterMem[filterItem.name]) {
+                rawHeaders = this.performFilterDeletion(headersInfo.headers, filterItem, headersInfo, filterObjects, 0);
+            }
+            if (addPos.length > 0 && headersInfo.fields.length > 0) {
+                this.frameHeaderObjectsCollection = true;
+                if (headersInfo.fields.filter(function (item) { return item.showNoDataItems; }).length > 0) {
+                    for (var i = 0; i < this.data.length; i++) {
+                        addPos.push(i);
+                    }
+                    //addPos = (this.data as any).map((item, pos) => { return pos; });
+                }
+                /* eslint-disable */
+                this.headerObjectsCollection['parent'] = this.getIndexedHeaders(headersInfo.fields, this.data, 0, addPos, headersInfo.axis, '');
+                rawHeaders = this.performFilterAddition(rawHeaders, headersInfo.fields, headersInfo);
+                var headerNames_1 = {};
+                for (var _b = 0, rawHeaders_1 = rawHeaders; _b < rawHeaders_1.length; _b++) {
+                    var header = rawHeaders_1[_b];
+                    headerNames_1[header.valueSort.levelName.toString()] = header.valueSort.levelName.toString();
+                }
+                var excessHeaders = this.headerObjectsCollection['parent'].filter(function (header) {
+                    return !headerNames_1[header.valueSort.levelName.toString()];
+                });
+                var grandHeader = rawHeaders.filter(function (item) { return item.type === 'grand sum'; });
+                if (grandHeader.length > 0) {
+                    rawHeaders.pop();
+                }
+                /* eslint-enable */
+                rawHeaders = this.getSortedHeaders(rawHeaders.concat(excessHeaders), this.fieldList[headersInfo.fields[0].name].sort).concat(grandHeader);
+                if (headersInfo.axis === 'row') {
+                    this.cMembers = this.getIndexedHeaders(this.columns, this.data, 0, this.filterMembers, 'column', '');
+                    this.insertAllMember(this.cMembers, this.filterMembers, '', 'column');
+                }
+                else {
+                    this.rMembers = this.getIndexedHeaders(this.rows, this.data, 0, this.filterMembers, 'row', '');
+                    this.insertAllMember(this.rMembers, this.filterMembers, '', 'row');
                 }
-                //addPos = (this.data as any).map((item, pos) => { return pos; });
             }
-            /* eslint-disable */
-            this.headerObjectsCollection['parent'] = this.getIndexedHeaders(headersInfo.fields, this.data, 0, addPos, headersInfo.axis, '');
-            rawHeaders = this.performFilterAddition(rawHeaders, headersInfo.fields, headersInfo);
-            var headerNames_1 = {};
-            for (var _b = 0, rawHeaders_1 = rawHeaders; _b < rawHeaders_1.length; _b++) {
-                var header = rawHeaders_1[_b];
-                headerNames_1[header.valueSort.levelName.toString()] = header.valueSort.levelName.toString();
-            }
-            var excessHeaders = this.headerObjectsCollection['parent'].filter(function (header) {
-                return !headerNames_1[header.valueSort.levelName.toString()];
-            });
-            var grandHeader = rawHeaders.filter(function (item) { return item.type === 'grand sum'; });
-            if (grandHeader.length > 0) {
-                rawHeaders.pop();
+            if (headersInfo.axis === 'row') {
+                this.rowCount = 0;
             }
-            /* eslint-enable */
-            rawHeaders = this.getSortedHeaders(rawHeaders.concat(excessHeaders), this.fieldList[headersInfo.fields[0].name].sort).concat(grandHeader);
+            else {
+                this.columnCount = 0;
+            }
+            this.updateHeadersCount(rawHeaders, headersInfo.axis, 0, headersInfo.fields, 'plus', false);
             if (headersInfo.axis === 'row') {
-                this.cMembers = this.getIndexedHeaders(this.columns, this.data, 0, this.filterMembers, 'column', '');
-                this.insertAllMember(this.cMembers, this.filterMembers, '', 'column');
+                if (headersInfo.position > 0) {
+                    this.insertPosition(this.rows, this.data, 0, this.filterMembers, 'row', '', rawHeaders);
+                }
+                this.insertTotalPosition(rawHeaders);
+                this.rMembers = this.headerCollection.rowHeaders = rawHeaders;
+                this.headerCollection.rowHeadersCount = this.rowCount;
             }
             else {
-                this.rMembers = this.getIndexedHeaders(this.rows, this.data, 0, this.filterMembers, 'row', '');
-                this.insertAllMember(this.rMembers, this.filterMembers, '', 'row');
+                if (headersInfo.position > 0) {
+                    this.insertPosition(this.columns, this.data, 0, this.filterMembers, 'column', '', rawHeaders);
+                }
+                this.insertTotalPosition(rawHeaders);
+                this.cMembers = this.headerCollection.columnHeaders = rawHeaders;
+                this.headerCollection.columnHeadersCount = this.columnCount;
             }
         }
-        if (headersInfo.axis === 'row') {
-            this.rowCount = 0;
-        }
         else {
+            var showNoDataItems = (this.rows[0] && this.rows[0].showNoDataItems) || (this.columns[0] && this.columns[0].showNoDataItems);
+            if (this.rows.length > 0) {
+                this.rMembers = this.getIndexedHeaders(this.rows, this.data, 0, showNoDataItems ? addPos : this.filterMembers, 'row', '');
+            }
+            if (this.columns.length > 0) {
+                this.cMembers = this.getIndexedHeaders(this.columns, this.data, 0, showNoDataItems ? addPos : this.filterMembers, 'column', '');
+            }
+            this.insertAllMembersCommon();
+            this.rowCount = 0;
             this.columnCount = 0;
-        }
-        this.updateHeadersCount(rawHeaders, headersInfo.axis, 0, headersInfo.fields, 'plus', false);
-        if (headersInfo.axis === 'row') {
-            if (headersInfo.position > 0) {
-                this.insertPosition(this.rows, this.data, 0, this.filterMembers, 'row', '', rawHeaders);
+            this.updateHeadersCount(this.cMembers, 'column', 0, this.columns, 'plus', false);
+            this.updateHeadersCount(this.rMembers, 'row', 0, this.rows, 'plus', false);
+            if (showNoDataItems) {
+                this.insertPosition(this.rows, this.data, 0, this.filterMembers, 'row', '', this.rMembers);
+                this.insertPosition(this.columns, this.data, 0, this.filterMembers, 'column', '', this.cMembers);
             }
-            this.insertTotalPosition(rawHeaders);
-            this.rMembers = this.headerCollection.rowHeaders = rawHeaders;
+            this.headerCollection.rowHeaders = this.rMembers;
             this.headerCollection.rowHeadersCount = this.rowCount;
-        }
-        else {
-            if (headersInfo.position > 0) {
-                this.insertPosition(this.columns, this.data, 0, this.filterMembers, 'column', '', rawHeaders);
-            }
-            this.insertTotalPosition(rawHeaders);
-            this.cMembers = this.headerCollection.columnHeaders = rawHeaders;
+            this.headerCollection.columnHeaders = this.cMembers;
             this.headerCollection.columnHeadersCount = this.columnCount;
         }
         this.applyValueSorting();
@@ -3463,15 +3487,13 @@ var PivotEngine = /** @__PURE__ @class */ (function () {
                     }
                     else {
                         alphaNumbervalue.push(headers[i]);
+                        break;
                     }
                 }
-                if (stringValue.length > 1) {
-                    stringValue = this.sortHeaders(fieldName, childrens, headers, childrens.sort, childrens.type);
-                }
                 if (alphaNumbervalue.length > 0) {
                     alphaNumbervalue = this.sortHeaders(fieldName, childrens, headers, childrens.sort, childrens.isAlphanumeric);
                 }
-                return headers = nullValue.concat(alphaNumbervalue, stringValue);
+                return headers;
             }
             else {
                 return this.sortHeaders(fieldName, childrens, headers, sortOrder, childrens.type);
@@ -3630,7 +3652,7 @@ var PivotEngine = /** @__PURE__ @class */ (function () {
             }
             else {
                 this.rawIndexObject = {};
-                var value = this.getAggregateValue(header.index, member.indexObject, mIndex, mType);
+                var value = this.getAggregateValue(header.index, member.indexObject, mIndex, mType, false);
                 var cellDetails = {
                     fieldName: this.fields[mIndex],
                     row: header,
@@ -4030,7 +4052,7 @@ var PivotEngine = /** @__PURE__ @class */ (function () {
                     this.columnCount -= (!(this.showSubTotals && this.showColumnSubTotals && field.showSubTotals) && axis === 'column') ?
                         this.colValuesLength : 0;
                     var filterPosition = hierarchy[iln].index;
-                    hierarchy[iln].members = this.getIndexedHeaders(keys, data, keyInd + 1, (filterPosition === undefined ? [] : filterPosition), axis, parentMember);
+                    hierarchy[iln].members = this.getIndexedHeaders(keys, data, keyInd + 1, (filterPosition === undefined ? [] : filterPosition), axis, parentMember, valueFil);
                     if (this.frameHeaderObjectsCollection) {
                         this.headerObjectsCollection[parentMember] = hierarchy[iln].members;
                     }
@@ -4040,32 +4062,55 @@ var PivotEngine = /** @__PURE__ @class */ (function () {
             if (this.enableSort) {
                 // return new DataManager(hierarchy as JSON[]).executeLocal(new Query().sortBy('actualText', childrens.sort.toLowerCase()));
                 if (isDateType) {
-                    return this.sortHeaders(fieldName, childrens, hierarchy, childrens.sort, childrens.type);
+                    return this.sortHeaders(fieldName, childrens, hierarchy, childrens.sort, 'date');
                 }
                 else {
                     if (childrens.type === 'number' && hierarchy.length > 0 && (typeof (hierarchy[0].actualText) === 'string')) {
                         var stringValue = [];
+                        var outOfRange = void 0;
                         var alphaNumbervalue = [];
                         var nullValue = [];
                         for (var i = 0; i < hierarchy.length; i++) {
                             if (isNaN(hierarchy[i].actualText.toString().charAt(0))) {
                                 stringValue.push(hierarchy[i]);
+                                if (!outOfRange && childrens.sort !== 'None') {
+                                    if (hierarchy[i].actualText === 'Out of Range') {
+                                        outOfRange = hierarchy[i];
+                                        hierarchy.splice(i, 1);
+                                    }
+                                }
                             }
                             else if (hierarchy[i].actualText === "") {
                                 nullValue.push(hierarchy[i]);
                             }
                             else {
+                                this.fieldList[fieldName].isAlphanumeric = true;
                                 alphaNumbervalue.push(hierarchy[i]);
+                                break;
                             }
                         }
-                        if (stringValue.length > 0) {
-                            stringValue = this.sortHeaders(fieldName, childrens, hierarchy, childrens.sort, childrens.type);
+                        if (outOfRange) {
+                            if (childrens.sort === 'Ascending') {
+                                if (hierarchy[0].actualText === 'Grand Total') {
+                                    hierarchy.splice(1, 0, outOfRange);
+                                }
+                                else {
+                                    hierarchy.splice(0, 0, outOfRange);
+                                }
+                            }
+                            else {
+                                if (hierarchy[hierarchy.length - 1].actualText === 'Grand Total') {
+                                    hierarchy.splice(hierarchy.length - 1, 0, outOfRange);
+                                }
+                                else {
+                                    hierarchy.splice(hierarchy.length, 0, outOfRange);
+                                }
+                            }
                         }
                         if (alphaNumbervalue.length > 0) {
-                            this.fieldList[fieldName].isAlphanumeric = true;
-                            alphaNumbervalue = this.sortHeaders(fieldName, childrens, hierarchy, childrens.sort, childrens.isAlphanumeric);
+                            this.sortHeaders(fieldName, childrens, hierarchy, childrens.sort, childrens.isAlphanumeric);
                         }
-                        return hierarchy = nullValue.concat(alphaNumbervalue, stringValue);
+                        return hierarchy;
                     }
                     else {
                         return this.sortHeaders(fieldName, childrens, hierarchy, childrens.sort, childrens.type);
@@ -4923,7 +4968,7 @@ var PivotEngine = /** @__PURE__ @class */ (function () {
                                 var selectedColumnValue = 0;
                                 if (selectedColumnValues.length === 0) {
                                     var selectedRow = this.getSelectedRow(currentSet.rowHeaders, rowheads);
-                                    selectedColumnValue = this.getAggregateValue(selectedRow.index, selectedColumn.indexObject, this.fieldList[name_3].index, headers.type);
+                                    selectedColumnValue = this.getAggregateValue(selectedRow.index, selectedColumn.indexObject, this.fieldList[name_3].index, headers.type, false);
                                 }
                                 else {
                                     selectedColumnValue = selectedColumnValues[index[0]].value;
@@ -4982,7 +5027,7 @@ var PivotEngine = /** @__PURE__ @class */ (function () {
                                 // let cVal: number = currentSet.value / (selectedRowValues[i[1]] as IAxisSet).value;
                                 var selectedRowValue = 0;
                                 if (selectedRowValues.length === 0 && activeValues) {
-                                    selectedRowValue = this.getAggregateValue(activeValues.index, colheads[i[1] - 1].indexObject, this.fieldList[name_3].index, headers.type);
+                                    selectedRowValue = this.getAggregateValue(activeValues.index, colheads[i[1] - 1].indexObject, this.fieldList[name_3].index, headers.type, false);
                                 }
                                 else {
                                     selectedRowValue = selectedRowValues[i[1]] ? selectedRowValues[i[1]].actualValue : 0;
@@ -5029,7 +5074,7 @@ var PivotEngine = /** @__PURE__ @class */ (function () {
                                 var selectedColValue = 0;
                                 if (selectedColumnValues.length === 0) {
                                     var selectedRow = this.getSelectedRow(currentSet.rowHeaders, rowheads);
-                                    selectedColValue = this.getAggregateValue(selectedRow.index, selectedCol.indexObject, this.fieldList[name_3].index, headers.type);
+                                    selectedColValue = this.getAggregateValue(selectedRow.index, selectedCol.indexObject, this.fieldList[name_3].index, headers.type, false);
                                 }
                                 else {
                                     selectedColValue = selectedColumnValues[i[0]].value;
@@ -5061,7 +5106,7 @@ var PivotEngine = /** @__PURE__ @class */ (function () {
                                                 rowheads[rlen].level === item.level && currentSet.axis === 'value' &&
                                                 currentSet.actualText === name_3) {
                                                 if (rowheads[rlen].type !== 'grand sum') {
-                                                    cVal += (!currentSet.showSubTotals && !(!isNullOrUndefined(currentSet.actualValue) && isNaN(currentSet.actualValue))) ? currentSet.actualValue : currentSet.value;
+                                                    cVal += (!currentSet.showSubTotals && !(!isNullOrUndefined(currentSet.actualValue) && isNaN(currentSet.actualValue))) ? currentSet.actualValue : (!isNullOrUndefined(currentSet.value) && !isNaN(currentSet.value)) ? currentSet.value : null;
                                                     currentSet.formattedText = currentSet.showSubTotals ? (cVal === 0 && (currentSet.actualValue && currentSet.actualValue !== 0) ? '' : this.getFormattedValue(cVal, name_3).formattedText) : currentSet.formattedText;
                                                     if (!this.aggregatedValueMatrix[rlen]) {
                                                         this.aggregatedValueMatrix[rlen] = [];
@@ -5166,7 +5211,7 @@ var PivotEngine = /** @__PURE__ @class */ (function () {
                     var i = 0;
                     for (var _i = 0, gTotalIndex_1 = gTotalIndex; _i < gTotalIndex_1.length; _i++) {
                         var rIndex = gTotalIndex_1[_i];
-                        totalValues[valueContent[i]] = this.getAggregateValue((rIndex[0]).index, (rIndex[1]).indexObject, mPos, aggregate);
+                        totalValues[valueContent[i]] = this.getAggregateValue((rIndex[0]).index, (rIndex[1]).indexObject, mPos, aggregate, i === 0 ? false : true);
                         i++;
                     }
                     var val_1 = ((totalValues.cVal) * (totalValues.gTotalVal)) / ((totalValues.rTotalVal) * (totalValues.cTotalVal));
@@ -5187,7 +5232,7 @@ var PivotEngine = /** @__PURE__ @class */ (function () {
                     var i = 0;
                     for (var _a = 0, gTotalIndex_2 = gTotalIndex; _a < gTotalIndex_2.length; _a++) {
                         var rIndex = gTotalIndex_2[_a];
-                        totalValues[valueContent[i]] = this.getAggregateValue((rIndex[0]).index, (rIndex[1]).indexObject, mPos, aggregate);
+                        totalValues[valueContent[i]] = this.getAggregateValue((rIndex[0]).index, (rIndex[1]).indexObject, mPos, aggregate, i === 0 ? false : true);
                         i++;
                     }
                     var val_2 = ((totalValues.cVal) / (totalValues.gTotalVal));
@@ -5198,7 +5243,7 @@ var PivotEngine = /** @__PURE__ @class */ (function () {
                 }
                 break;
             default:
-                var val = this.getAggregateValue(rows[rln].index, columns[cln].indexObject, mPos, aggregate);
+                var val = this.getAggregateValue(rows[rln].index, columns[cln].indexObject, mPos, aggregate, false);
                 value = (rows[rln].members.length > 0 && rows[rln].hasChild && rows[rln].isDrilled && ((!isNullOrUndefined(rows[rln].showSubTotals) && !rows[rln].showSubTotals) ||
                     !this.showSubTotals || !this.showRowSubTotals)) ? undefined : val;
                 actualValue = val;
@@ -5236,6 +5281,7 @@ var PivotEngine = /** @__PURE__ @class */ (function () {
             isNaN(value) && !isNullOrUndefined(value) &&
             (['PopulationStDev', 'SampleStDev', 'PopulationVar', 'SampleVar']).indexOf(aggregate) !== -1) {
             formattedText = '#DIV/0!';
+            value = 0;
         }
         //dln = data[tnum].length;
         formattedText = (cellDetails.skipFormatting ? isNullOrUndefined(value) ?
@@ -5548,7 +5594,7 @@ var PivotEngine = /** @__PURE__ @class */ (function () {
         }
     };
     /* eslint-disable */
-    PivotEngine.prototype.getAggregateValue = function (rowIndex, columnIndex, value, type) {
+    PivotEngine.prototype.getAggregateValue = function (rowIndex, columnIndex, value, type, isGrandTotal) {
         //rowIndex = rowIndex.sort();
         //columnIndex = columnIndex.sort();
         var rlt = rowIndex.length;
@@ -5727,7 +5773,7 @@ var PivotEngine = /** @__PURE__ @class */ (function () {
                         var value_1 = aggregateField[aggregatedValue.formula];
                         if (value_1 === undefined) {
                             var type_1 = aggregatedValue.type;
-                            value_1 = this.getAggregateValue(rowIndex, columnIndex, aggregatedValue.index, type_1);
+                            value_1 = this.getAggregateValue(rowIndex, columnIndex, aggregatedValue.index, type_1, false);
                             aggregateField[aggregatedValue.formula] = value_1;
                         }
                         actualFormula = (actualFormula).replace(aggregatedValue.formula, String(value_1));
@@ -5741,7 +5787,9 @@ var PivotEngine = /** @__PURE__ @class */ (function () {
                 while (rowIndex[ri] !== undefined) {
                     if (columnIndex[rowIndex[ri]] !== undefined) {
                         isValueExist = true;
-                        this.rawIndexObject[rowIndex[ri]] = rowIndex[ri];
+                        if (!isGrandTotal) {
+                            this.rawIndexObject[rowIndex[ri]] = rowIndex[ri];
+                        }
                         //let cIndx: number = isLeastLevel ? columnIndex.splice(columnIndex.indexOf(rowIndex[ri]), 1)[0] : rowIndex[ri];
                         var currentVal = this.valueMatrix[rowIndex[ri]][value];
                         if (isNullOrUndefined(cellValue) && isNullOrUndefined(currentVal)) {
@@ -6290,12 +6338,26 @@ var OLAP_FIELD_LIST_CLASS = 'e-olap-field-list-tree';
 /** @hidden */
 var FIELD_LIST_TREE_CLASS = 'e-field-list-tree';
 /** @hidden */
+var FIELD_LIST_TREE_OUTER_DIV_CLASS = 'e-field-list-tree-outer-div';
+/** @hidden */
+var FIELD_LIST_TREE_OUTER_DIV_SEARCH_CLASS = 'e-field-list-tree-outer-div-searchMode';
+/** @hidden */
+var FIELD_LIST_SEARCH_MODE_CLASS = 'e-search-mode';
+/** @hidden */
 var FIELD_HEADER_CLASS = 'e-field-header';
 /** @hidden */
+var FIELD_HEADER_CONTAINER_CLASS = 'e-field-header-container';
+/** @hidden */
 var FIELD_LIST_TITLE_CLASS = 'e-field-list-title';
 /** @hidden */
 var FIELD_LIST_TITLE_CONTENT_CLASS = 'e-title-content';
 /** @hidden */
+var FIELD_LIST_SEARCH_CLASS = 'e-field-list-search';
+/** @hidden */
+var FIELD_LIST_SEARCH_INPUT_CLASS = 'e-field-list-search-input';
+/** @hidden */
+var FIELD_LIST_SEARCH_ICON_CLASS = 'e-field-list-search-icon';
+/** @hidden */
 var FIELD_LIST_FOOTER_CLASS = 'e-field-list-footer';
 /** @hidden */
 var CALCULATED_FIELD_CLASS = 'e-calculated-field';
@@ -6606,6 +6668,8 @@ var TREEVIEW = 'e-pivot-treeview';
 /** @hidden */
 var TREEVIEWOUTER = 'e-pivot-treeview-outer';
 /** @hidden */
+var TREE_CONTAINER = 'e-treeContainer';
+/** @hidden */
 var CALCCANCELBTN = 'e-pivot-cancel-button';
 /** @hidden */
 var CALCADDBTN = 'e-pivot-add-button';
@@ -7086,13 +7150,13 @@ var AggregateMenu = /** @__PURE__ @class */ (function () {
             buttons: [
                 {
                     click: this.updateValueSettings.bind(this),
-                    buttonModel: { cssClass: OK_BUTTON_CLASS, content: this.parent.localeObj.getConstant('ok'), isPrimary: true }
+                    buttonModel: { cssClass: OK_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('ok'), isPrimary: true }
                 },
                 {
                     click: function () {
                         _this.valueDialog.hide();
                     },
-                    buttonModel: { cssClass: CANCEL_BUTTON_CLASS, content: this.parent.localeObj.getConstant('cancel') }
+                    buttonModel: { cssClass: CANCEL_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('cancel') }
                 }
             ],
             closeOnEscape: (this.parent.getModuleName() === 'pivotfieldlist' && this.parent.renderMode === 'Popup') ? false : true,
@@ -7250,7 +7314,8 @@ var AggregateMenu = /** @__PURE__ @class */ (function () {
             // floatLabelType: 'Auto',
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
-            value: fieldCaption, width: '100%'
+            value: fieldCaption, width: '100%',
+            cssClass: this.parent.cssClass
         });
         inputObj1.isStringTemplate = true;
         inputObj1.appendTo(inputField1);
@@ -7729,6 +7794,9 @@ var Render = /** @__PURE__ @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;
@@ -9196,6 +9264,12 @@ var Render = /** @__PURE__ @class */ (function () {
                 }
             }
             else {
+                if ((['PercentageOfDifferenceFrom', 'PercentageOfRowTotal', 'PercentageOfColumnTotal', 'PercentageOfGrandTotal', 'PercentageOfParentRowTotal', 'PercentageOfParentColumnTotal', 'PercentageOfParentTotal']).indexOf(field.type) > -1) {
+                    format = 'P2';
+                }
+                else if (['PopulationStDev', 'SampleStDev', 'PopulationVar', 'SampleVar', 'Index'].indexOf(field.type) > -1) {
+                    format = undefined;
+                }
                 if (this.parent.dataSourceSettings.formatSettings.length > 0) {
                     for (var fCnt = 0; fCnt < this.parent.dataSourceSettings.formatSettings.length; fCnt++) {
                         var formatSettings = this.parent.dataSourceSettings.formatSettings[fCnt];
@@ -9290,12 +9364,18 @@ var Render = /** @__PURE__ @class */ (function () {
         else {
             this.colPos++;
             /* eslint-disable-next-line */
-            if (isNullOrUndefined(args.data[this.colPos].value) || isNullOrUndefined(args.data[this.colPos].formattedText) || args.data[this.colPos].formattedText === "") {
+            var pivotValue = args.data[this.colPos];
+            if (isNullOrUndefined(pivotValue.value) || isNullOrUndefined(pivotValue.formattedText) || pivotValue.formattedText === "") {
                 args.value = this.parent.exportType === 'Excel' ? null : '';
             }
             else {
-                /* eslint-disable-next-line */
-                args.value = !isNullOrUndefined(args.data[this.colPos].value) ? args.data[this.colPos].value : args.data[this.colPos].formattedText;
+                var aggMatrix = this.parent.dataType === 'pivot' && this.parent.engineModule ? this.parent.engineModule.aggregatedValueMatrix : undefined;
+                if (aggMatrix && aggMatrix[pivotValue.rowIndex] && aggMatrix[pivotValue.rowIndex][pivotValue.colIndex]) {
+                    args.value = aggMatrix[pivotValue.rowIndex][pivotValue.colIndex];
+                }
+                else {
+                    args.value = !isNullOrUndefined(pivotValue.value) ? (pivotValue.formattedText === '#DIV/0!' ? pivotValue.formattedText : pivotValue.value) : pivotValue.formattedText;
+                }
             }
         }
         args = this.exportContentEvent(args);
@@ -9641,6 +9721,8 @@ var EventBase = /** @__PURE__ @class */ (function () {
      * @hidden
      */
     function EventBase(parent) {
+        /** @hidden */
+        this.searchListItem = [];
         this.parent = parent;
     }
     /**
@@ -9737,6 +9819,15 @@ var EventBase = /** @__PURE__ @class */ (function () {
                 /* eslint-disable  */
                 var membersInfo = fieldInfo && fieldInfo.membersOrder ?
                     fieldInfo.membersOrder.slice() : [];
+                var outOfRange = void 0;
+                if (members[0].actualText === 'Out of Range') {
+                    outOfRange = members[0];
+                    members.splice(0, 1);
+                }
+                else if (members[members.length - 1].actualText === 'Out of Range') {
+                    outOfRange = members[members.length - 1];
+                    members.splice(members.length - 1, 1);
+                }
                 var sortDetails = {
                     fieldName: fieldName,
                     sortOrder: fieldInfo.sort,
@@ -9758,6 +9849,24 @@ var EventBase = /** @__PURE__ @class */ (function () {
                     isInclude = this.isValidFilterItemsAvail(fieldName, filterObj) && filterObj.type === 'Include' ? true : false;
                     filterItems = filterObj.items ? filterObj.items : [];
                 }
+                if (outOfRange) {
+                    if (sortDetails.sortOrder === 'Ascending') {
+                        if (members[members.length - 1].actualText === 'Grand Total') {
+                            members.splice(members.length - 1, 0, outOfRange);
+                        }
+                        else {
+                            members.splice(members.length, 0, outOfRange);
+                        }
+                    }
+                    else {
+                        if (members[0].actualText === 'Grand Total') {
+                            members.splice(1, 0, outOfRange);
+                        }
+                        else {
+                            members.splice(0, 0, outOfRange);
+                        }
+                    }
+                }
                 if (isHeaderSortByDefault) {
                     var copyOrder = [];
                     for (var m = 0, n = 0; m < members.length; m++) {
@@ -9797,16 +9906,21 @@ var EventBase = /** @__PURE__ @class */ (function () {
         var isItemAvail = false;
         var filterTypes = ['Include', 'Exclude'];
         if (filterObj && filterTypes.indexOf(filterObj.type) >= 0) {
-            var engineModule = this.parent.engineModule;
-            var field = engineModule.fieldList[fieldName];
-            var members = (engineModule.formatFields[fieldName] &&
-                (['date', 'dateTime', 'time'].indexOf(engineModule.formatFields[fieldName].type) > -1)) ?
-                field.formattedMembers : field.members;
-            for (var _i = 0, _a = filterObj.items; _i < _a.length; _i++) {
-                var item = _a[_i];
-                if (members[item]) {
-                    isItemAvail = true;
-                    break;
+            if (filterObj.type === 'Include' && filterObj.items.length === 0) {
+                isItemAvail = true;
+            }
+            else {
+                var engineModule = this.parent.engineModule;
+                var field = engineModule.fieldList[fieldName];
+                var members = (engineModule.formatFields[fieldName] &&
+                    (['date', 'dateTime', 'time'].indexOf(engineModule.formatFields[fieldName].type) > -1)) ?
+                    field.formattedMembers : field.members;
+                for (var _i = 0, _a = filterObj.items; _i < _a.length; _i++) {
+                    var item = _a[_i];
+                    if (members[item]) {
+                        isItemAvail = true;
+                        break;
+                    }
                 }
             }
         }
@@ -10053,6 +10167,7 @@ var EventBase = /** @__PURE__ @class */ (function () {
             else {
                 treeObj.expandAll(undefined, undefined, true);
             }
+            this.searchListItem = searchList;
         }
         else {
             this.parent.searchTreeItems = [];
@@ -10739,7 +10854,7 @@ var ErrorDialog = /** @__PURE__ @class */ (function () {
             buttons: [
                 {
                     click: this.closeErrorDialog.bind(this),
-                    buttonModel: { cssClass: OK_BUTTON_CLASS, content: this.parent.localeObj.getConstant('ok'), isPrimary: true }
+                    buttonModel: { cssClass: OK_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('ok'), isPrimary: true }
                 }
             ],
             cssClass: this.parent.cssClass,
@@ -10815,19 +10930,19 @@ var FilterDialog = /** @__PURE__ @class */ (function () {
             buttons: [
                 {
                     buttonModel: {
-                        cssClass: 'e-clear-filter-button' + (this.allowExcelLikeFilter ? '' : ' ' + ICON_DISABLE),
+                        cssClass: 'e-clear-filter-button' + (this.allowExcelLikeFilter ? '' : ' ' + ICON_DISABLE) + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                         iconCss: 'e-icons e-clear-filter-icon', enableRtl: this.parent.enableRtl,
                         content: this.parent.localeObj.getConstant('clearFilter'), disabled: (this.filterObject ? false : true)
                     }
                 },
                 {
                     buttonModel: {
-                        cssClass: OK_BUTTON_CLASS, content: this.parent.localeObj.getConstant('ok'), isPrimary: true
+                        cssClass: OK_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('ok'), isPrimary: true
                     }
                 },
                 {
                     click: this.closeFilterDialog.bind(this),
-                    buttonModel: { cssClass: CANCEL_BUTTON_CLASS, content: this.parent.localeObj.getConstant('cancel') }
+                    buttonModel: { cssClass: CANCEL_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('cancel') }
                 }
             ],
             closeOnEscape: this.parent.renderMode === 'Popup' ? false : true,
@@ -10929,7 +11044,7 @@ var FilterDialog = /** @__PURE__ @class */ (function () {
         this.editorSearch = new MaskedTextBox({
             placeholder: this.parent.localeObj.getConstant('search') + ' ' + '&#8220' + filterCaption + '&#8220',
             enableRtl: this.parent.enableRtl,
-            cssClass: EDITOR_SEARCH_CLASS,
+            cssClass: EDITOR_SEARCH_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
             showClearButton: true,
             change: function (e) {
                 if (_this.parent.dataType === 'olap') {
@@ -10967,7 +11082,8 @@ var FilterDialog = /** @__PURE__ @class */ (function () {
             nodeSelected: function (args) {
                 removeClass([args.node], 'e-active');
                 args.cancel = true;
-            }
+            },
+            cssClass: this.parent.cssClass
         });
         this.allMemberSelect.isStringTemplate = true;
         if (!isNullOrUndefined(this.parent.currentTreeItems)) {
@@ -10992,7 +11108,8 @@ var FilterDialog = /** @__PURE__ @class */ (function () {
                 removeClass([args.node], 'e-active');
                 args.cancel = true;
             },
-            expandOn: 'None'
+            expandOn: 'None',
+            cssClass: this.parent.cssClass
         });
         this.memberTreeView.isStringTemplate = true;
         this.memberTreeView.appendTo(treeViewContainer);
@@ -11003,7 +11120,7 @@ var FilterDialog = /** @__PURE__ @class */ (function () {
         if (this.parent.dataType === 'pivot' && treeData && treeData.length > 0) {
             var sortOrder = this.parent.engineModule.fieldList[fieldName].sort;
             var sortWrapper = createElement('div', {
-                className: FILTER_SORT_CLASS + ' e-btn-group' + (this.parent.enableRtl ? ' ' + RTL : ''),
+                className: FILTER_SORT_CLASS + ' e-btn-group' + (this.parent.enableRtl ? ' ' + RTL : '') + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                 id: this.parent.element.id + '_Member_Sort'
             });
             this.parent.element.appendChild(sortWrapper);
@@ -11016,11 +11133,11 @@ var FilterDialog = /** @__PURE__ @class */ (function () {
                 id: this.parent.element.id + '_Sort_Descend', attrs: { 'type': 'button' }
             });
             var sortBtnElement = new Button({
-                iconCss: ICON + ' ' + SORT_ASCEND_ICON_CLASS, enableRtl: this.parent.enableRtl
+                iconCss: ICON + ' ' + SORT_ASCEND_ICON_CLASS, enableRtl: this.parent.enableRtl, cssClass: this.parent.cssClass
             });
             sortBtnElement.appendTo(sortAscendElement);
             sortBtnElement = new Button({
-                iconCss: ICON + ' ' + SORT_DESCEND_ICON_CLASS, enableRtl: this.parent.enableRtl
+                iconCss: ICON + ' ' + SORT_DESCEND_ICON_CLASS, enableRtl: this.parent.enableRtl, cssClass: this.parent.cssClass
             });
             sortBtnElement.appendTo(sortDescendElement);
             sortWrapper.appendChild(sortAscendElement);
@@ -11367,7 +11484,8 @@ var FilterDialog = /** @__PURE__ @class */ (function () {
             items: items,
             height: '100%',
             selectedItem: selectedIndex,
-            enableRtl: this.parent.enableRtl
+            enableRtl: this.parent.enableRtl,
+            cssClass: this.parent.cssClass
         });
         this.tabObj.isStringTemplate = true;
         this.tabObj.appendTo(wrapper);
@@ -11689,7 +11807,9 @@ var FilterDialog = /** @__PURE__ @class */ (function () {
                     else {
                         return;
                     }
-                }, width: '100%'
+                },
+                width: '100%',
+                cssClass: this.parent.cssClass
             });
             var inputObj2_2 = new NumericTextBox({
                 placeholder: this.parent.localeObj.getConstant('enterValue'),
@@ -11708,7 +11828,9 @@ var FilterDialog = /** @__PURE__ @class */ (function () {
                     else {
                         return;
                     }
-                }, width: '100%'
+                },
+                width: '100%',
+                cssClass: this.parent.cssClass
             });
             inputObj1_2.isStringTemplate = true;
             inputObj1_2.appendTo(inputDiv1);
@@ -11729,7 +11851,9 @@ var FilterDialog = /** @__PURE__ @class */ (function () {
                     else {
                         return;
                     }
-                }, width: '100%'
+                },
+                width: '100%',
+                cssClass: this.parent.cssClass
             });
             var inputObj2_3 = new MaskedTextBox({
                 placeholder: this.parent.localeObj.getConstant('enterValue'),
@@ -11744,7 +11868,9 @@ var FilterDialog = /** @__PURE__ @class */ (function () {
                     else {
                         return;
                     }
-                }, width: '100%'
+                },
+                width: '100%',
+                cssClass: this.parent.cssClass
             });
             inputObj1_3.isStringTemplate = true;
             inputObj1_3.appendTo(inputDiv1);
@@ -13938,9 +14064,8 @@ var DrillThroughDialog = /** @__PURE__ @class */ (function () {
         }
         var actualText = eventArgs.currentCell.actualText.toString();
         try {
-            if (this.parent.currentView === 'Table' && this.engine.fieldList[actualText].aggregateType !== 'Count' && this.parent.editSettings.allowInlineEditing &&
-                this.parent.editSettings.allowEditing && eventArgs.rawData.length === 1 &&
-                this.engine.fieldList[actualText].aggregateType !== 'DistinctCount' && typeof (eventArgs.rawData[0][actualText]) !== 'string') {
+            if (this.parent.currentView === 'Table' && this.parent.editSettings.allowInlineEditing &&
+                this.parent.editSettings.allowEditing && eventArgs.rawData.length === 1) {
                 this.parent.actionObj.actionName = editRecord;
                 if (this.parent.actionBeginMethod()) {
                     return;
@@ -14103,9 +14228,9 @@ var DrillThroughDialog = /** @__PURE__ @class */ (function () {
         var previousData = this.frameHeaderWithKeys(eventArgs.rawData[eventArgs.rawData.length - 1]);
         var currentData = eventArgs.rawData[eventArgs.rawData.length - 1];
         /* eslint-enable */
-        if (eventArgs.currentCell.actualText in previousData) {
-            currentData[eventArgs.currentCell.actualText] = eventArgs.currentCell.actualValue;
-        }
+        // if (eventArgs.currentCell.actualText in previousData) {
+        //     currentData[eventArgs.currentCell.actualText] = eventArgs.currentCell.actualValue;
+        // }
         var actionInfo = {
             editInfo: { type: 'Inline editing', action: 'update', data: this.gridData }
         };
@@ -14116,6 +14241,7 @@ var DrillThroughDialog = /** @__PURE__ @class */ (function () {
             enabled: true,
             format: '####.##',
             locale: this.parent.locale,
+            cssClass: this.parent.cssClass,
             change: function () {
                 var textBoxValue = _this.numericTextBox.value;
                 var indexValue = eventArgs.currentCell.indexObject[indexObject];
@@ -14287,10 +14413,10 @@ var DrillThroughDialog = /** @__PURE__ @class */ (function () {
                     this.drillThroughGrid.columns.push({
                         headerText: this.parent.localeObj.getConstant('manageRecords'), width: 160, showInColumnChooser: false,
                         commands: [
-                            { type: 'Edit', buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat' } },
-                            { type: 'Delete', buttonOption: { iconCss: 'e-icons e-delete', cssClass: 'e-flat' } },
-                            { type: 'Save', buttonOption: { iconCss: 'e-icons e-update', cssClass: 'e-flat' } },
-                            { type: 'Cancel', buttonOption: { iconCss: 'e-icons e-cancel-icon', cssClass: 'e-flat' } }
+                            { type: 'Edit', buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat' + (this.parent.cssClass ? (' ' + this.parent.cssClass) : '') } },
+                            { type: 'Delete', buttonOption: { iconCss: 'e-icons e-delete', cssClass: 'e-flat' + (this.parent.cssClass ? (' ' + this.parent.cssClass) : '') } },
+                            { type: 'Save', buttonOption: { iconCss: 'e-icons e-update', cssClass: 'e-flat' + (this.parent.cssClass ? (' ' + this.parent.cssClass) : '') } },
+                            { type: 'Cancel', buttonOption: { iconCss: 'e-icons e-cancel-icon', cssClass: 'e-flat' + (this.parent.cssClass ? (' ' + this.parent.cssClass) : '') } }
                         ]
                     });
                 }
@@ -14554,7 +14680,7 @@ var DrillThrough = /** @__PURE__ @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') {
@@ -14627,7 +14753,7 @@ var DrillThrough = /** @__PURE__ @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;
                 }
             }
@@ -15111,6 +15237,9 @@ var PivotChart = /** @__PURE__ @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);
             }
         }
@@ -16946,7 +17075,7 @@ var EmptyPointSettings = /** @__PURE__ @class */ (function (_super) {
         Complex({ color: 'transparent', width: 0 }, Border)
     ], EmptyPointSettings.prototype, "border", void 0);
     __decorate$3([
-        Property('Gap')
+        Property('Zero')
     ], EmptyPointSettings.prototype, "mode", void 0);
     return EmptyPointSettings;
 }(ChildProperty));
@@ -17391,7 +17520,7 @@ var PivotChartSeriesEmptyPointSettings = /** @__PURE__ @class */ (function () {
         Complex({ color: 'transparent', width: 0 }, Border)
     ], PivotChartSeriesEmptyPointSettings.prototype, "border", void 0);
     __decorate$3([
-        Property('Gap')
+        Property('Zero')
     ], PivotChartSeriesEmptyPointSettings.prototype, "mode", void 0);
     return PivotChartSeriesEmptyPointSettings;
 }());
@@ -18863,7 +18992,7 @@ var MDXQuery = /** @__PURE__ @class */ (function () {
             query = '((' + name + ').levels(0).AllMembers)';
         }
         else {
-            query = (dimension.isNamedSet ? '{' + name + '}' : this.isPaging ? name + '.CHILDREN' :
+            query = (dimension.isNamedSet || dimension.isCalculatedField ? '{' + name + '}' : this.isPaging ? name + '.CHILDREN' :
                 'DrilldownLevel({' + name + '}' + ((axis === 'rows' || axis === 'columns') ? ',,,INCLUDE_CALC_MEMBERS' : '') + ')');
         }
         return query;
@@ -23414,8 +23543,8 @@ var PivotView = /** @__PURE__ @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,
@@ -23427,7 +23556,8 @@ var PivotView = /** @__PURE__ @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,
@@ -24354,6 +24484,8 @@ var PivotView = /** @__PURE__ @class */ (function (_super) {
                         this.pivotFieldListModule.axisFieldModule.render();
                     }
                     break;
+                case 'enableFieldSearching':
+                    this.pivotFieldListModule.enableFieldSearching = this.enableFieldSearching;
             }
         }
     };
@@ -26950,6 +27082,9 @@ var PivotView = /** @__PURE__ @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);
@@ -27614,7 +27749,8 @@ var ExcelExport$1 = /** @__PURE__ @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')) {
@@ -28280,6 +28416,12 @@ var DialogRenderer = /** @__PURE__ @class */ (function () {
         if (this.parent.cssClass) {
             addClass([fieldListWrappper], this.parent.cssClass);
         }
+        if (this.parent.enableFieldSearching) {
+            addClass([fieldListWrappper], FIELD_LIST_SEARCH_MODE_CLASS);
+        }
+        else {
+            removeClass([fieldListWrappper], FIELD_LIST_SEARCH_MODE_CLASS);
+        }
         this.parentElement = createElement('div', { className: CONTAINER_CLASS });
         this.parent.element.appendChild(fieldListWrappper);
         if (this.parent.isAdaptive) {
@@ -28324,13 +28466,14 @@ var DialogRenderer = /** @__PURE__ @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: DEFER_APPLY_BUTTON + ' ' + DEFER_UPDATE_BUTTON + (this.parent.renderMode === 'Popup' ?
-                    (' ' + BUTTON_FLAT_CLASS) : ''),
+                    (' ' + BUTTON_FLAT_CLASS) : '') + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                 content: this.parent.localeObj.getConstant('apply'),
                 enableRtl: this.parent.enableRtl,
                 locale: this.parent.locale,
@@ -28343,7 +28486,7 @@ var DialogRenderer = /** @__PURE__ @class */ (function () {
         }
         this.deferUpdateCancelButton = new Button({
             cssClass: DEFER_CANCEL_BUTTON + ' ' + CANCEL_BUTTON_CLASS + (this.parent.renderMode === 'Popup' ?
-                (' ' + BUTTON_FLAT_CLASS) : ''),
+                (' ' + 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
@@ -28461,7 +28604,7 @@ var DialogRenderer = /** @__PURE__ @class */ (function () {
             var buttons = [{
                     click: this.showFieldListDialog.bind(this),
                     buttonModel: {
-                        cssClass: ADAPTIVE_FIELD_LIST_BUTTON_CLASS + ' ' + BUTTON_SMALL_CLASS + ' ' + BUTTON_ROUND_CLASS,
+                        cssClass: ADAPTIVE_FIELD_LIST_BUTTON_CLASS + ' ' + BUTTON_SMALL_CLASS + ' ' + BUTTON_ROUND_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                         iconCss: ICON + ' ' + ADD_ICON_CLASS,
                         isPrimary: true
                     }
@@ -28469,7 +28612,7 @@ var DialogRenderer = /** @__PURE__ @class */ (function () {
                     click: this.showCalculatedField.bind(this),
                     buttonModel: {
                         cssClass: ADAPTIVE_CALCULATED_FIELD_BUTTON_CLASS +
-                            ' ' + BUTTON_SMALL_CLASS + ' ' + BUTTON_ROUND_CLASS + ' ' + ICON_DISABLE,
+                            ' ' + BUTTON_SMALL_CLASS + ' ' + BUTTON_ROUND_CLASS + ' ' + ICON_DISABLE + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                         iconCss: ICON + ' ' + ADD_ICON_CLASS, enableRtl: this.parent.enableRtl,
                         isPrimary: true
                     }
@@ -28607,7 +28750,8 @@ var DialogRenderer = /** @__PURE__ @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());
@@ -28653,7 +28797,7 @@ var DialogRenderer = /** @__PURE__ @class */ (function () {
             }
         });
         var calculateField = new Button({
-            cssClass: CALCULATED_FIELD_CLASS + ' ' + ICON_DISABLE,
+            cssClass: CALCULATED_FIELD_CLASS + ' ' + ICON_DISABLE + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
             content: this.parent.localeObj.getConstant('CalculatedField'),
             enableRtl: this.parent.enableRtl, locale: this.parent.locale
         });
@@ -28673,12 +28817,12 @@ var DialogRenderer = /** @__PURE__ @class */ (function () {
         var calculatedButton = createElement('div', {});
         var calculateField = new Button({
             cssClass: ADAPTIVE_CALCULATED_FIELD_BUTTON_CLASS +
-                ' ' + BUTTON_SMALL_CLASS + ' ' + BUTTON_ROUND_CLASS + ' ' + ICON_DISABLE,
+                ' ' + BUTTON_SMALL_CLASS + ' ' + BUTTON_ROUND_CLASS + ' ' + ICON_DISABLE + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
             iconCss: ICON + ' ' + ADD_ICON_CLASS,
             enableRtl: this.parent.enableRtl, locale: this.parent.locale
         });
         var fieldList = new Button({
-            cssClass: ADAPTIVE_FIELD_LIST_BUTTON_CLASS + ' ' + BUTTON_SMALL_CLASS + ' ' + BUTTON_ROUND_CLASS,
+            cssClass: ADAPTIVE_FIELD_LIST_BUTTON_CLASS + ' ' + BUTTON_SMALL_CLASS + ' ' + BUTTON_ROUND_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
             iconCss: ICON + ' ' + ADD_ICON_CLASS,
             enableRtl: this.parent.enableRtl, locale: this.parent.locale
         });
@@ -28869,6 +29013,8 @@ var TreeViewRenderer = /** @__PURE__ @class */ (function () {
      */
     function TreeViewRenderer(parent) {
         this.selectedNodes = [];
+        this.isSearching = false;
+        this.parentIDs = [];
         this.parent = parent;
         this.addEventListener();
     }
@@ -28889,15 +29035,42 @@ var TreeViewRenderer = /** @__PURE__ @class */ (function () {
                 className: FIELD_HEADER_CLASS,
                 innerHTML: this.parent.localeObj.getConstant('allFields')
             });
-            var treeOuterDiv = createElement('div', { className: FIELD_LIST_TREE_CLASS + '-outer-div' });
+            var searchWrapper = createElement('div', {
+                id: this.parent.element.id + '_SearchDiv', attrs: { 'tabindex': '-1' },
+                className: 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: 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', FIELD_LIST_SEARCH_ICON_CLASS + ' ' + ICON);
+            var promptDiv = createElement('div', {
+                className: EMPTY_MEMBER_CLASS + ' ' + ICON_DISABLE,
+                innerHTML: this.parent.localeObj.getConstant('noMatches')
+            });
+            var treeOuterDiv = createElement('div', {
+                className: FIELD_LIST_TREE_OUTER_DIV_CLASS + ' ' + TREE_CONTAINER
+            });
             this.treeViewElement = createElement('div', {
                 id: this.parent.element.id + '_TreeView',
                 className: FIELD_LIST_CLASS + ' ' + (this.parent.dataType === 'olap' ? OLAP_FIELD_LIST_CLASS : '')
             });
-            var fieldHeaderWrappper = createElement('div', { className: 'e-field-header-container' });
+            var fieldHeaderWrappper = createElement('div', { className: 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);
@@ -29021,6 +29194,40 @@ var TreeViewRenderer = /** @__PURE__ @class */ (function () {
         if (args.node.querySelector('.' + NODE_CHECK_CLASS)) {
             addClass([args.node.querySelector('.' + LIST_TEXT_CLASS)], 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], 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], ICON_DISABLE);
+                            break;
+                        }
+                    }
+                }
+            }
+            else {
+                for (var i = 0; i < this.nonSearchList.length; i++) {
+                    if (liElement.textContent === this.nonSearchList[i].textContent) {
+                        addClass([liElement], ICON_DISABLE);
+                        break;
+                    }
+                    else {
+                        if (liElement.innerText === this.nonSearchList[i].textContent) {
+                            addClass([liElement], ICON_DISABLE);
+                            break;
+                        }
+                    }
+                }
+            }
+        }
     };
     TreeViewRenderer.prototype.updateOlapTreeNode = function (args) {
         var allowDrag = false;
@@ -29076,12 +29283,12 @@ var TreeViewRenderer = /** @__PURE__ @class */ (function () {
             buttons: [{
                     click: this.closeTreeDialog.bind(this),
                     buttonModel: {
-                        cssClass: CANCEL_BUTTON_CLASS, content: this.parent.localeObj.getConstant('cancel')
+                        cssClass: CANCEL_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('cancel')
                     }
                 }, {
                     click: this.onFieldAdd.bind(this),
                     buttonModel: {
-                        cssClass: OK_BUTTON_CLASS, content: this.parent.localeObj.getConstant('add'),
+                        cssClass: OK_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('add'),
                         isPrimary: true
                     }
                 }],
@@ -29110,7 +29317,7 @@ var TreeViewRenderer = /** @__PURE__ @class */ (function () {
         });
         var editorSearch = createElement('input', { attrs: { 'type': 'text' } });
         searchWrapper.appendChild(editorSearch);
-        var treeOuterDiv = createElement('div', { className: EDITOR_TREE_CONTAINER_CLASS + '-outer-div' });
+        var treeOuterDiv = createElement('div', { className: FIELD_LIST_TREE_OUTER_DIV_CLASS });
         var treeViewContainer = createElement('div', {
             className: EDITOR_TREE_CONTAINER_CLASS + ' ' + (this.parent.dataType === 'olap' ? 'e-olap-field-list-tree' : '')
         });
@@ -29120,7 +29327,7 @@ var TreeViewRenderer = /** @__PURE__ @class */ (function () {
             placeholder: this.parent.localeObj.getConstant('search'),
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
-            cssClass: EDITOR_SEARCH_CLASS,
+            cssClass: EDITOR_SEARCH_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
             change: this.textChange.bind(this)
         });
         this.editorSearch.isStringTemplate = true;
@@ -29156,14 +29363,41 @@ var TreeViewRenderer = /** @__PURE__ @class */ (function () {
     };
     TreeViewRenderer.prototype.textChange = function (e) {
         this.parent.pivotCommon.eventBase.searchTreeNodes(e, this.fieldTable, true);
-        var promptDiv = this.fieldDialog.element.querySelector('.' + EMPTY_MEMBER_CLASS);
+        var promptDiv;
+        var treeOuterDiv;
+        if (this.parent.isAdaptive) {
+            promptDiv = this.fieldDialog.element.querySelector('.' + EMPTY_MEMBER_CLASS);
+        }
+        else {
+            promptDiv = this.parentElement.querySelector('.' + EMPTY_MEMBER_CLASS);
+            treeOuterDiv = this.parentElement.querySelector('.' + TREE_CONTAINER);
+        }
         var liList = [].slice.call(this.fieldTable.element.querySelectorAll('li'));
         var disabledList = [].slice.call(this.fieldTable.element.querySelectorAll('li.' + ICON_DISABLE));
         if (liList.length === disabledList.length) {
             removeClass([promptDiv], ICON_DISABLE);
+            if (!this.parent.isAdaptive) {
+                addClass([treeOuterDiv], ICON_DISABLE);
+                removeClass([treeOuterDiv], FIELD_LIST_TREE_OUTER_DIV_SEARCH_CLASS);
+            }
         }
         else {
             addClass([promptDiv], ICON_DISABLE);
+            if (!this.parent.isAdaptive) {
+                removeClass([treeOuterDiv], ICON_DISABLE);
+                addClass([treeOuterDiv], 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) {
@@ -29818,6 +30052,10 @@ var TreeViewRenderer = /** @__PURE__ @class */ (function () {
             this.editorSearch.destroy();
             this.editorSearch = null;
         }
+        if (this.fieldSearch && !this.fieldSearch.isDestroyed) {
+            this.fieldSearch.destroy();
+            this.fieldSearch = null;
+        }
     };
     return TreeViewRenderer;
 }());
@@ -30127,7 +30365,7 @@ var PivotButton = /** @__PURE__ @class */ (function () {
                                 buttonWrapper.appendChild(buttonElement);
                             }
                             element.appendChild(buttonWrapper);
-                            var pivotButton = new Button({ enableRtl: this.parent.enableRtl, locale: this.parent.locale });
+                            var pivotButton = new Button({ enableRtl: this.parent.enableRtl, locale: this.parent.locale, cssClass: this.parent.cssClass });
                             pivotButton.isStringTemplate = true;
                             pivotButton.appendTo(buttonElement);
                             this.unWireEvent(buttonWrapper, i === valuePos && axis !== 'all-fields' ? 'values' : axis, isMeasureAvail);
@@ -30951,7 +31189,7 @@ var PivotButton = /** @__PURE__ @class */ (function () {
         return [
             {
                 buttonModel: {
-                    cssClass: 'e-clear-filter-button' + (this.parent.pivotCommon.filterDialog.allowExcelLikeFilter ? '' : ' ' + ICON_DISABLE),
+                    cssClass: 'e-clear-filter-button' + (this.parent.pivotCommon.filterDialog.allowExcelLikeFilter ? '' : ' ' + ICON_DISABLE) + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                     iconCss: 'e-icons e-clear-filter-icon', enableRtl: this.parent.enableRtl,
                     content: this.parent.localeObj.getConstant('clearFilter'), disabled: (this.parent.pivotCommon.filterDialog.filterObject ? false : true)
                 },
@@ -30959,13 +31197,13 @@ var PivotButton = /** @__PURE__ @class */ (function () {
             },
             {
                 buttonModel: {
-                    cssClass: OK_BUTTON_CLASS, content: this.parent.localeObj.getConstant('ok'), isPrimary: true
+                    cssClass: OK_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('ok'), isPrimary: true
                 },
                 click: (this.index === 0 ? this.updateFilterState.bind(this, this.fieldName) : this.updateCustomFilter.bind(this))
             },
             {
                 click: this.parent.pivotCommon.filterDialog.closeFilterDialog.bind(this.parent.pivotCommon.filterDialog),
-                buttonModel: { cssClass: CANCEL_BUTTON_CLASS, content: this.parent.localeObj.getConstant('cancel') }
+                buttonModel: { cssClass: CANCEL_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('cancel') }
             }
         ];
     };
@@ -32206,6 +32444,8 @@ var PivotFieldList = /** @__PURE__ @class */ (function (_super) {
                     }
                     requireRefresh = true;
                     break;
+                case 'enableFieldSearching':
+                    this.refresh();
             }
             if (requireRefresh) {
                 this.fieldListRender();
@@ -32852,6 +33092,9 @@ var PivotFieldList = /** @__PURE__ @class */ (function (_super) {
     __decorate$4([
         Property(false)
     ], PivotFieldList.prototype, "allowCalculatedField", void 0);
+    __decorate$4([
+        Property(false)
+    ], PivotFieldList.prototype, "enableFieldSearching", void 0);
     __decorate$4([
         Property(false)
     ], PivotFieldList.prototype, "showValuesButton", void 0);
@@ -33927,13 +34170,15 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
                 click: this.applyFormula.bind(this),
                 buttonModel: {
                     content: this.parent.localeObj.getConstant('ok'),
-                    isPrimary: true
+                    isPrimary: true,
+                    cssClass: this.parent.cssClass
                 }
             },
             {
                 click: this.cancelClick.bind(this),
                 buttonModel: {
-                    content: this.parent.localeObj.getConstant('cancel')
+                    content: this.parent.localeObj.getConstant('cancel'),
+                    cssClass: this.parent.cssClass
                 }
             }
         ];
@@ -33941,7 +34186,7 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
             var clearButton = {
                 click: this.clearFormula.bind(this),
                 buttonModel: {
-                    cssClass: 'e-calc-clear-btn',
+                    cssClass: 'e-calc-clear-btn' + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                     content: this.parent.localeObj.getConstant('clear'),
                 }
             };
@@ -34375,7 +34620,8 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
             change: function (args) {
                 _this.formatText = args.value;
                 _this.formulaText = select('#' + _this.parentID + 'droppable', document).value;
-            }
+            },
+            cssClass: this.parent.cssClass
         });
         customerFormatObj.isStringTemplate = true;
         customerFormatObj.appendTo('#' + this.parentID + 'Custom_Format_Element');
@@ -34682,7 +34928,7 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
             dialogRenderer.parentElement.querySelector('.' + FORMULA) !== null) {
             this.createOlapDropElements();
         }
-        var cancelBtn = new Button({ cssClass: FLAT, isPrimary: true, locale: this.parent.locale, enableRtl: this.parent.enableRtl });
+        var cancelBtn = new Button({ cssClass: FLAT + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), isPrimary: true, locale: this.parent.locale, enableRtl: this.parent.enableRtl });
         cancelBtn.isStringTemplate = true;
         cancelBtn.appendTo('#' + this.parentID + 'cancelBtn');
         if (cancelBtn.element) {
@@ -34690,7 +34936,7 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
         }
         if (this.parent.
             dialogRenderer.parentElement.querySelector('.' + FORMULA) !== null && this.parent.isAdaptive) {
-            var okBtn = new Button({ cssClass: FLAT + ' ' + OUTLINE_CLASS, isPrimary: true, locale: this.parent.locale, enableRtl: this.parent.enableRtl });
+            var okBtn = new Button({ cssClass: FLAT + ' ' + OUTLINE_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), isPrimary: true, locale: this.parent.locale, enableRtl: this.parent.enableRtl });
             okBtn.isStringTemplate = true;
             okBtn.appendTo('#' + this.parentID + 'okBtn');
             this.inputObj = new MaskedTextBox({
@@ -34699,7 +34945,8 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
                 change: function (args) {
                     _this.fieldText = args.value;
                     _this.formulaText = select('#' + _this.parentID + 'droppable', document).value;
-                }
+                },
+                cssClass: this.parent.cssClass
             });
             this.inputObj.isStringTemplate = true;
             this.inputObj.appendTo('#' + this.parentID + 'ddlelement');
@@ -34710,7 +34957,8 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
                     change: function (args) {
                         _this.formatText = args.value;
                         _this.formulaText = select('#' + _this.parentID + 'droppable', document).value;
-                    }
+                    },
+                    cssClass: this.parent.cssClass
                 });
                 formatInputObj.isStringTemplate = true;
                 formatInputObj.appendTo('#' + this.parentID + 'Custom_Format_Element');
@@ -34736,7 +34984,7 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
             }
         }
         else if (this.parent.isAdaptive) {
-            var addBtn = new Button({ cssClass: FLAT, isPrimary: true, locale: this.parent.locale, enableRtl: this.parent.enableRtl });
+            var addBtn = new Button({ cssClass: FLAT + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), isPrimary: true, locale: this.parent.locale, enableRtl: this.parent.enableRtl });
             addBtn.isStringTemplate = true;
             addBtn.appendTo('#' + this.parentID + 'addBtn');
             if (this.parent.dataType === 'olap') {
@@ -34793,7 +35041,8 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
                             name: AGRTYPE + key,
                             checked: args.element.querySelector('[data-type').getAttribute('data-type') === type[i_1],
                             change: this.onChange.bind(this),
-                            locale: this.parent.locale, enableRtl: this.parent.enableRtl
+                            locale: this.parent.locale, enableRtl: this.parent.enableRtl,
+                            cssClass: this.parent.cssClass
                         });
                         radiobutton.isStringTemplate = true;
                         radiobutton.appendTo('#' + this.parentID + 'radio' + key + type[i_1]);
@@ -34830,7 +35079,8 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
             }
             var checkbox = new CheckBox({
                 label: this.parent.engineModule.fieldList[key].caption + ' (' + this.parent.localeObj.getConstant(type) + ')',
-                locale: this.parent.locale, enableRtl: this.parent.enableRtl
+                locale: this.parent.locale, enableRtl: this.parent.enableRtl,
+                cssClass: this.parent.cssClass
             });
             checkbox.isStringTemplate = true;
             checkbox.appendTo('#' + this.parentID + '_' + index);
@@ -34926,14 +35176,16 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
         this.dialog.refresh();
         this.inputObj = new MaskedTextBox({
             placeholder: this.parent.localeObj.getConstant('fieldName'),
-            locale: this.parent.locale, enableRtl: this.parent.enableRtl
+            locale: this.parent.locale, enableRtl: this.parent.enableRtl,
+            cssClass: this.parent.cssClass
         });
         this.inputObj.isStringTemplate = true;
         this.inputObj.appendTo('#' + this.parentID + 'ddlelement');
         if (this.parent.dataType === 'pivot') {
             var customerFormatObj = new MaskedTextBox({
                 placeholder: this.parent.localeObj.getConstant('numberFormatString'),
-                locale: this.parent.locale, enableRtl: this.parent.enableRtl
+                locale: this.parent.locale, enableRtl: this.parent.enableRtl,
+                cssClass: this.parent.cssClass
             });
             customerFormatObj.isStringTemplate = true;
             customerFormatObj.appendTo('#' + this.parentID + 'Custom_Format_Element');
@@ -34974,14 +35226,14 @@ var CalculatedField = /** @__PURE__ @class */ (function () {
                 {
                     click: isRemove ? this.removeCalcField.bind(this, node) : this.replaceFormula.bind(this, calcInfo),
                     buttonModel: {
-                        cssClass: OK_BUTTON_CLASS + ' ' + FLAT_CLASS,
+                        cssClass: OK_BUTTON_CLASS + ' ' + FLAT_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                         content: isRemove ? this.parent.localeObj.getConstant('yes') : this.parent.localeObj.getConstant('ok'), isPrimary: true
                     }
                 },
                 {
                     click: this.removeErrorDialog.bind(this),
                     buttonModel: {
-                        cssClass: CANCEL_BUTTON_CLASS,
+                        cssClass: CANCEL_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                         content: isRemove ? this.parent.localeObj.getConstant('no') : this.parent.localeObj.getConstant('cancel'), isPrimary: true
                     }
                 }
@@ -35126,7 +35378,8 @@ var FieldList = /** @__PURE__ @class */ (function () {
             maxNodeLimitInMemberEditor: this.parent.maxNodeLimitInMemberEditor,
             aggregateCellInfo: this.parent.bindTriggerEvents.bind(this.parent),
             onHeadersSort: this.parent.bindTriggerEvents.bind(this.parent),
-            cssClass: this.parent.cssClass
+            cssClass: this.parent.cssClass,
+            enableFieldSearching: this.parent.enableFieldSearching
         });
         this.parent.pivotFieldListModule.isPopupView = true;
         this.parent.pivotFieldListModule.pivotGridModule = this.parent;
@@ -35804,7 +36057,7 @@ var GroupingBar = /** @__PURE__ @class */ (function () {
         }
         element.prepend(createElement('div', { id: this.parent.element.id + '_AllFields' }));
         var toolbarObj = new Toolbar$1({
-            cssClass: ALL_FIELDS_PANEL_CLASS,
+            cssClass: ALL_FIELDS_PANEL_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
             enableRtl: this.parent.enableRtl,
             items: [{ template: '<div class=' + GROUP_ALL_FIELDS_CLASS + '></div>' }],
             allowKeyboard: false,
@@ -35904,8 +36157,8 @@ var ConditionalFormatting = /** @__PURE__ @class */ (function () {
             {
                 click: this.addButtonClick.bind(this),
                 buttonModel: {
-                    cssClass: this.parent.isAdaptive ? (FORMAT_ROUND_BUTTON + ' ' + FORMAT_CONDITION_BUTTON) :
-                        FORMAT_CONDITION_BUTTON,
+                    cssClass: (this.parent.isAdaptive ? (FORMAT_ROUND_BUTTON + ' ' + FORMAT_CONDITION_BUTTON) :
+                        FORMAT_CONDITION_BUTTON) + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                     iconCss: ICON + ' ' + ADD_ICON_CLASS,
                     content: this.parent.isAdaptive ? '' : this.parent.localeObj.getConstant('condition')
                 }
@@ -35914,7 +36167,7 @@ var ConditionalFormatting = /** @__PURE__ @class */ (function () {
                 click: this.applyButtonClick.bind(this),
                 isFlat: true,
                 buttonModel: {
-                    isPrimary: true, cssClass: FORMAT_APPLY_BUTTON,
+                    isPrimary: true, cssClass: FORMAT_APPLY_BUTTON + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                     content: this.parent.localeObj.getConstant('apply')
                 }
             },
@@ -35922,7 +36175,7 @@ var ConditionalFormatting = /** @__PURE__ @class */ (function () {
                 click: this.cancelButtonClick.bind(this),
                 isFlat: true,
                 buttonModel: {
-                    cssClass: FORMAT_CANCEL_BUTTON,
+                    cssClass: FORMAT_CANCEL_BUTTON + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                     content: this.parent.localeObj.getConstant('cancel')
                 }
             }
@@ -36290,7 +36543,7 @@ var ConditionalFormatting = /** @__PURE__ @class */ (function () {
         addClass([this.backgroundColor[i].element.nextElementSibling.querySelector('.e-selected-color')], ICON);
         var toggleBtn = new Button({
             iconCss: ICON + ' ' + FORMAT_DELETE_ICON,
-            cssClass: FLAT, locale: this.parent.locale, enableRtl: this.parent.enableRtl
+            cssClass: FLAT + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), locale: this.parent.locale, enableRtl: this.parent.enableRtl
         });
         toggleBtn.isStringTemplate = true;
         toggleBtn.appendTo('#' + this.parentID + 'removeButton' + i);
@@ -36512,6 +36765,7 @@ var Toolbar$2 = /** @__PURE__ @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;
@@ -36602,7 +36856,7 @@ var Toolbar$2 = /** @__PURE__ @class */ (function () {
                     var toDisable = this.parent.displayOption.view === 'Chart';
                     items.push({
                         prefixIcon: TOOLBAR_GRID + ' ' + ICON, tooltipText: this.parent.localeObj.getConstant('grid'),
-                        id: this.parent.element.id + 'grid', cssClass: toDisable ? MENU_DISABLE : '',
+                        id: this.parent.element.id + 'grid', cssClass: (toDisable ? MENU_DISABLE : '') + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                         click: this.menuItemClick.bind(this)
                     });
                     break;
@@ -36610,7 +36864,7 @@ var Toolbar$2 = /** @__PURE__ @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 ? MENU_DISABLE : ''
+                        id: this.parent.element.id + 'chartmenu', cssClass: (validTypes ? MENU_DISABLE : '') + (this.parent.cssClass ? (' ' + this.parent.cssClass) : '')
                     });
                     break;
                 case 'MDX':
@@ -36719,7 +36973,7 @@ var Toolbar$2 = /** @__PURE__ @class */ (function () {
     Toolbar$$1.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();
@@ -36977,7 +37231,7 @@ var Toolbar$2 = /** @__PURE__ @class */ (function () {
                     return;
                 }
                 var saveArgs = {
-                    report: _this_2.parent.getPersistData(),
+                    report: _this_2.getCurrentReport(),
                     reportName: reportInput.value
                 };
                 var actionInfo = {
@@ -37013,7 +37267,7 @@ var Toolbar$2 = /** @__PURE__ @class */ (function () {
                 }
                 _this_3.parent.trigger(newReport);
                 var saveArgs = {
-                    report: _this_3.parent.getPersistData(),
+                    report: _this_3.getCurrentReport(),
                     reportName: reportInput.value
                 };
                 var actionInfo = {
@@ -37104,14 +37358,14 @@ var Toolbar$2 = /** @__PURE__ @class */ (function () {
                 {
                     buttonModel: {
                         content: this.parent.localeObj.getConstant('yes'), isPrimary: true,
-                        cssClass: OK_BUTTON_CLASS
+                        cssClass: OK_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : '')
                     },
                     click: this.okButtonClick.bind(this)
                 },
                 {
                     buttonModel: {
                         content: this.parent.localeObj.getConstant('no'),
-                        cssClass: CANCEL_BUTTON_CLASS
+                        cssClass: CANCEL_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : '')
                     },
                     click: this.cancelButtonClick.bind(this)
                 }
@@ -37157,7 +37411,7 @@ var Toolbar$2 = /** @__PURE__ @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 = {
@@ -37182,7 +37436,7 @@ var Toolbar$2 = /** @__PURE__ @class */ (function () {
             else if (this.action === 'New') {
                 this.parent.trigger(newReport);
                 var saveArgs = {
-                    report: this.parent.getPersistData(),
+                    report: this.getCurrentReport(),
                     reportName: this.currentReport
                 };
                 this.parent.trigger(saveReport, saveArgs);
@@ -37193,7 +37447,7 @@ var Toolbar$2 = /** @__PURE__ @class */ (function () {
         }
         else if (this.action === 'Save') {
             var saveArgs = {
-                report: this.parent.getPersistData(),
+                report: this.getCurrentReport(),
                 reportName: this.currentReport
             };
             this.parent.trigger(saveReport, saveArgs);
@@ -37492,6 +37746,15 @@ var Toolbar$2 = /** @__PURE__ @class */ (function () {
         }
         this.updateItemElements();
     };
+    Toolbar$$1.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$$1.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++) {
@@ -37524,7 +37787,7 @@ var Toolbar$2 = /** @__PURE__ @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();
@@ -37556,7 +37819,7 @@ var Toolbar$2 = /** @__PURE__ @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();
                 },
@@ -37930,11 +38193,11 @@ var Toolbar$2 = /** @__PURE__ @class */ (function () {
             buttons: [
                 {
                     click: function () { _this_1.chartTypeDialogUpdate(); },
-                    buttonModel: { cssClass: OK_BUTTON_CLASS, content: this.parent.localeObj.getConstant('ok'), isPrimary: true },
+                    buttonModel: { cssClass: OK_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('ok'), isPrimary: true },
                 },
                 {
                     click: function () { _this_1.removeDialog(); },
-                    buttonModel: { cssClass: CANCEL_BUTTON_CLASS, content: this.parent.localeObj.getConstant('cancel') }
+                    buttonModel: { cssClass: CANCEL_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('cancel') }
                 }
             ],
             closeOnEscape: true,
@@ -38076,7 +38339,7 @@ var Toolbar$2 = /** @__PURE__ @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;
@@ -38088,7 +38351,7 @@ var Toolbar$2 = /** @__PURE__ @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
         });
@@ -38223,13 +38486,13 @@ var NumberFormatting = /** @__PURE__ @class */ (function () {
             buttons: [
                 {
                     click: this.updateFormatting.bind(this),
-                    buttonModel: { cssClass: OK_BUTTON_CLASS, content: this.parent.localeObj.getConstant('apply'), isPrimary: true }
+                    buttonModel: { cssClass: OK_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('apply'), isPrimary: true }
                 },
                 {
                     click: function () {
                         _this.dialog.hide();
                     },
-                    buttonModel: { cssClass: CANCEL_BUTTON_CLASS, content: this.parent.localeObj.getConstant('cancel') }
+                    buttonModel: { cssClass: CANCEL_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('cancel') }
                 }
             ],
             closeOnEscape: true,
@@ -38899,13 +39162,13 @@ var Grouping = /** @__PURE__ @class */ (function () {
             buttons: [
                 {
                     click: this.updateGroupSettings.bind(this),
-                    buttonModel: { cssClass: OK_BUTTON_CLASS, content: this.parent.localeObj.getConstant('ok'), isPrimary: true }
+                    buttonModel: { cssClass: OK_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('ok'), isPrimary: true }
                 },
                 {
                     click: function () {
                         _this.groupDialog.hide();
                     },
-                    buttonModel: { cssClass: CANCEL_BUTTON_CLASS, content: this.parent.localeObj.getConstant('cancel') }
+                    buttonModel: { cssClass: CANCEL_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('cancel') }
                 }
             ],
             overlayClick: function () {
@@ -38974,7 +39237,8 @@ var Grouping = /** @__PURE__ @class */ (function () {
                         placeholder: this.parent.localeObj.getConstant('captionName'),
                         enableRtl: this.parent.enableRtl,
                         locale: this.parent.locale,
-                        value: caption, width: '100%'
+                        value: caption, width: '100%',
+                        cssClass: this.parent.cssClass
                     });
                     captionInputObj1.isStringTemplate = true;
                     captionInputObj1.appendTo(captionInputField1);
@@ -38982,7 +39246,8 @@ var Grouping = /** @__PURE__ @class */ (function () {
                         placeholder: this.parent.localeObj.getConstant('groupName'),
                         enableRtl: this.parent.enableRtl,
                         locale: this.parent.locale,
-                        width: '100%'
+                        width: '100%',
+                        cssClass: this.parent.cssClass
                     });
                     inputObj1.isStringTemplate = true;
                     inputObj1.appendTo(inputField1);
@@ -39130,7 +39395,8 @@ var Grouping = /** @__PURE__ @class */ (function () {
                             format: '###',
                             value: startAt === undefined ? undefined : parseInt(startAt, 10),
                             enabled: !(startAt === undefined),
-                            width: '100%'
+                            width: '100%',
+                            cssClass: this.parent.cssClass
                         });
                         startAtInputObj.isStringTemplate = true;
                         startAtInputObj.appendTo(startAtInputField1);
@@ -39142,7 +39408,8 @@ var Grouping = /** @__PURE__ @class */ (function () {
                             format: '###',
                             value: endAt === undefined ? undefined : parseInt(endAt, 10),
                             enabled: !(endAt === undefined),
-                            width: '100%'
+                            width: '100%',
+                            cssClass: this.parent.cssClass
                         });
                         endAtInputObj.isStringTemplate = true;
                         endAtInputObj.appendTo(endAtInputField1);
@@ -39154,7 +39421,8 @@ var Grouping = /** @__PURE__ @class */ (function () {
                             format: '###',
                             min: 1,
                             value: selectedInterval,
-                            width: '100%'
+                            width: '100%',
+                            cssClass: this.parent.cssClass
                         });
                         intervalObj.isStringTemplate = true;
                         intervalObj.appendTo(intervalInputField1);
@@ -39164,6 +39432,7 @@ var Grouping = /** @__PURE__ @class */ (function () {
                         checked: !(startAt === undefined),
                         enableRtl: this.parent.enableRtl,
                         locale: this.parent.locale,
+                        cssClass: this.parent.cssClass,
                         change: function (args) {
                             var startAtObj = (type === 'date' ?
                                 getInstance(select('#' + _this.parentElement.id + 'group_start_input'), DateTimePicker) :
@@ -39179,6 +39448,7 @@ var Grouping = /** @__PURE__ @class */ (function () {
                         checked: !(endAt === undefined),
                         enableRtl: this.parent.enableRtl,
                         locale: this.parent.locale,
+                        cssClass: this.parent.cssClass,
                         change: function (args) {
                             var endAtObj = (type === 'date' ?
                                 getInstance(select('#' + _this.parentElement.id + 'group_end_input'), DateTimePicker) :