@syncfusion/ej2-pivotview 20.2.39 → 20.2.43

package/src/common/calculatedfield/calculated-field.js

@@ -38,6 +38,7 @@ var CalculatedField = /** @class */ (function () {
         this.isFormula = false;
         /** @hidden */
         this.isRequireUpdate = false;
+        this.formatTypes = ['Standard', 'Currency', 'Percent', 'Custom', 'None'];
         this.parent = parent;
         this.existingReport = null;
         this.parent.calculatedFieldModule = this;
@@ -143,7 +144,7 @@ var CalculatedField = /** @class */ (function () {
                     this.fieldText = node.getAttribute('data-caption');
                     this.formulaText = node.getAttribute('data-formula');
                     this.formatType = node.getAttribute('data-formatString');
-                    this.formatText = this.formatType === 'Custom' ? node.getAttribute('data-customString') : null;
+                    this.formatText = this.formatType === 'Custom' ? node.getAttribute('data-customformatstring') : null;
                     this.fieldType = node.getAttribute('data-membertype');
                     this.parentHierarchy = this.fieldType === 'Dimension' ? node.getAttribute('data-hierarchy') : null;
                     addClass([node.querySelector('.e-list-edit-icon')], cls.CALC_EDITED);
@@ -173,11 +174,19 @@ var CalculatedField = /** @class */ (function () {
             closest(e.originalEvent.target, '.e-acrdn-header-icon')) {
             var node = closest(e.originalEvent.target, '.e-acrdn-header').querySelector('.' + cls.CALCCHECK);
             var fieldName = node.getAttribute('data-field');
+            var captionName = node.getAttribute('data-caption');
             var formatObj = PivotUtil.getFieldByName(fieldName, this.parent.dataSourceSettings.formatSettings);
             var optionElement = closest(e.originalEvent.target, '.e-acrdn-header-icon');
+            if (formatObj) {
+                var pivotFormat = this.getFormat(formatObj.format);
+                var formatString = (pivotFormat ? this.formatTypes.indexOf(pivotFormat) > -1 ?
+                    formatObj.format : 'Custom' : 'None');
+                this.formatType = formatString;
+            }
             if (optionElement.querySelector('.' + cls.CALC_EDIT) && e.originalEvent.target.classList.contains(cls.CALC_EDIT)) {
                 this.isEdit = true;
-                this.currentFieldName = this.fieldText = fieldName;
+                this.currentFieldName = fieldName;
+                this.fieldText = captionName ? captionName : fieldName;
                 this.formulaText = this.parent.engineModule.fieldList[fieldName].formula;
                 this.formatText = formatObj ? formatObj.format : '';
                 addClass([optionElement.querySelector('.e-list-icon')], cls.CALC_EDITED);
@@ -246,16 +255,16 @@ var CalculatedField = /** @class */ (function () {
                 this.inputObj.dataBind();
                 var formatString = node.getAttribute('data-formatString');
                 var dialogElement = this.dialog.element;
+                var ddlFormatTypes = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
                 var customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);
+                var customFormatString = node.getAttribute('data-customformatstring');
                 if (this.parent.dataType === 'olap') {
                     var memberType = node.getAttribute('data-membertype');
                     var parentHierarchy = node.getAttribute('data-hierarchy');
                     var expression = node.getAttribute('data-formula');
-                    var customString = node.getAttribute('data-customString');
                     var fieldTitle = select('#' + this.parentID + '_' + 'FieldNameTitle', dialogElement);
                     var memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement), DropDownList);
                     var hierarchyDrop = getInstance(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement), DropDownList);
-                    var formatDrop = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
                     /* eslint-enable max-len */
                     fieldTitle.innerHTML = this.parent.localeObj.getConstant('caption');
                     select('#' + this.parentID + 'droppable', document).value = expression;
@@ -265,14 +274,8 @@ var CalculatedField = /** @class */ (function () {
                     if (memberType === 'Dimension') {
                         hierarchyDrop.value = parentHierarchy;
                     }
-                    if (formatString !== '') {
-                        formatDrop.value = formatString;
-                        formatDrop.dataBind();
-                    }
-                    customFormat.value = customString;
                 }
                 else {
-                    customFormat.value = formatString;
                     addClass(this.treeObj.element.querySelectorAll('.' + cls.CALC_EDITED), cls.CALC_EDIT);
                     removeClass(this.treeObj.element.querySelectorAll('.' + cls.CALC_EDITED), cls.CALC_EDITED);
                     addClass([node.querySelector('.e-list-icon')], cls.CALC_EDITED);
@@ -280,6 +283,11 @@ var CalculatedField = /** @class */ (function () {
                     node.querySelector('.' + cls.CALC_EDITED).setAttribute('title', this.parent.localeObj.getConstant('clearCalculatedField'));
                     select('#' + this.parentID + 'droppable', document).value = node.getAttribute('data-uid');
                 }
+                if (formatString !== '') {
+                    ddlFormatTypes.value = formatString;
+                    ddlFormatTypes.dataBind();
+                }
+                customFormat.value = customFormatString;
                 customFormat.dataBind();
             }
             else if (node.tagName === 'LI' && (node.querySelector('.' + cls.CALC_EDITED) &&
@@ -294,15 +302,15 @@ var CalculatedField = /** @class */ (function () {
                 customFormat.dataBind();
                 if (this.parent.dataType === 'olap') {
                     var hierarchyDrop = getInstance(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement), DropDownList);
-                    var formatDrop = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
+                    var ddlFormatTypes = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
                     var memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement), DropDownList);
                     var fieldTitle = select('#' + this.parentID + '_' + 'FieldNameTitle', dialogElement);
                     /* eslint-enable max-len */
                     fieldTitle.innerHTML = this.parent.localeObj.getConstant('fieldTitle');
                     hierarchyDrop.index = 0;
                     hierarchyDrop.dataBind();
-                    formatDrop.index = 0;
-                    formatDrop.dataBind();
+                    ddlFormatTypes.index = 0;
+                    ddlFormatTypes.dataBind();
                     memberTypeDrop.index = 0;
                     memberTypeDrop.readonly = false;
                     memberTypeDrop.dataBind();
@@ -695,18 +703,15 @@ var CalculatedField = /** @class */ (function () {
             caption: this.inputObj.value,
             formula: dropField.value
         };
+        var ddlFormatTypes = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
+        field.formatString = (ddlFormatTypes.value === 'Custom' ? customFormat.value : (ddlFormatTypes.value === 'None' ? null : ddlFormatTypes.value));
         if (this.parent.dataType === 'olap') {
-            var formatDrop = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
             var memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement), DropDownList);
             var hierarchyDrop = getInstance(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement), DropDownList);
-            field.formatString = (formatDrop.value === 'Custom' ? customFormat.value : (formatDrop.value === 'None' ? null : formatDrop.value));
             if (memberTypeDrop.value === 'Dimension') {
                 field.hierarchyUniqueName = hierarchyDrop.value;
             }
         }
-        else {
-            field.formatString = customFormat.value;
-        }
         return field;
     };
     /* eslint-enable max-len */
@@ -787,21 +792,21 @@ var CalculatedField = /** @class */ (function () {
             select('#' + this.parentID + 'droppable', this.parent.dialogRenderer.parentElement).value = '';
             select('#' + this.parentID + 'Custom_Format_Element', this.parent.dialogRenderer.parentElement).value = '';
             if (this.parent.dataType === 'olap') {
-                var customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);
-                var formatDrop = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
                 var memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement), DropDownList);
                 var hierarchyDrop = getInstance(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement), DropDownList);
-                formatDrop.index = 0;
-                formatDrop.dataBind();
                 memberTypeDrop.index = 0;
                 memberTypeDrop.readonly = false;
                 memberTypeDrop.dataBind();
                 hierarchyDrop.index = 0;
                 hierarchyDrop.enabled = false;
                 hierarchyDrop.dataBind();
-                customFormat.enabled = false;
-                customFormat.dataBind();
             }
+            var customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);
+            var ddlFormatTypes = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
+            ddlFormatTypes.index = this.parent.dataType === 'olap' ? 0 : 4;
+            ddlFormatTypes.dataBind();
+            customFormat.enabled = false;
+            customFormat.dataBind();
             /* eslint-enable max-len */
         }
     };
@@ -1094,7 +1099,7 @@ var CalculatedField = /** @class */ (function () {
             className: (this.parent.dataType === 'olap' ? cls.OLAP_CALCOUTERDIV + ' ' : '') + cls.CALCOUTERDIV
         });
         var olapFieldTreeDiv = createElement('div', { id: this.parentID + 'Olap_Tree_Div', className: 'e-olap-field-tree-div' });
-        var olapCalcDiv = createElement('div', { id: this.parentID + 'Olap_Calc_Div', className: 'e-olap-calculated-div' });
+        var pivotCalcDiv = createElement('div', { id: this.parentID + 'Pivot_Calc_Div', className: 'e-pivot-calculated-div' });
         if (this.parent.getModuleName() === 'pivotfieldlist' && this.parent.
             dialogRenderer.parentElement.querySelector('.' + cls.FORMULA) !== null && this.parent.isAdaptive) {
             var accordDiv = createElement('div', { id: this.parentID + 'accordDiv', className: cls.CALCACCORD });
@@ -1118,7 +1123,7 @@ var CalculatedField = /** @class */ (function () {
                     className: cls.PIVOT_FIELD_TITLE_CLASS, id: this.parentID + '_' + 'FieldNameTitle',
                     innerHTML: this.parent.localeObj.getConstant('fieldTitle')
                 });
-                olapCalcDiv.appendChild(formulaTitle);
+                pivotCalcDiv.appendChild(formulaTitle);
             }
             var inputDiv = createElement('div', { id: this.parentID + 'outerDiv', className: cls.CALCINPUTDIV });
             var inputObj = createElement('input', {
@@ -1127,7 +1132,7 @@ var CalculatedField = /** @class */ (function () {
                 className: cls.CALCINPUT
             });
             inputDiv.appendChild(inputObj);
-            (this.parent.dataType === 'olap' && !this.parent.isAdaptive ? olapCalcDiv.appendChild(inputDiv) : outerDiv.appendChild(inputDiv));
+            (this.parent.dataType === 'olap' && !this.parent.isAdaptive ? pivotCalcDiv.appendChild(inputDiv) : outerDiv.appendChild(inputDiv));
             var wrapDiv = createElement('div', { id: this.parentID + 'control_container', className: cls.TREEVIEWOUTER });
             if (!this.parent.isAdaptive) {
                 var fieldTitle = createElement('div', {
@@ -1174,7 +1179,7 @@ var CalculatedField = /** @class */ (function () {
                     innerHTML: (this.parent.dataType === 'olap' ? this.parent.localeObj.getConstant('expressionField') :
                         this.parent.localeObj.getConstant('formula'))
                 });
-                (this.parent.dataType === 'olap' ? olapCalcDiv.appendChild(formulaTitle) : outerDiv.appendChild(formulaTitle));
+                (this.parent.dataType === 'olap' ? pivotCalcDiv.appendChild(formulaTitle) : outerDiv.appendChild(formulaTitle));
             }
             var dropDiv = createElement('textarea', {
                 id: this.parentID + 'droppable',
@@ -1185,7 +1190,7 @@ var CalculatedField = /** @class */ (function () {
                             this.parent.localeObj.getConstant('dropText'))
                 }
             });
-            (this.parent.dataType === 'olap' && !this.parent.isAdaptive ? olapCalcDiv.appendChild(dropDiv) : outerDiv.appendChild(dropDiv));
+            (this.parent.dataType === 'olap' && !this.parent.isAdaptive ? pivotCalcDiv.appendChild(dropDiv) : outerDiv.appendChild(dropDiv));
             if (this.parent.isAdaptive) {
                 var buttonDiv = createElement('div', { id: this.parentID + 'buttonDiv', className: cls.CALCBUTTONDIV });
                 var okBtn = createElement('button', {
@@ -1201,63 +1206,51 @@ var CalculatedField = /** @class */ (function () {
                         className: cls.OLAP_MEMBER_TITLE_CLASS,
                         innerHTML: this.parent.localeObj.getConstant('memberType')
                     });
-                    olapCalcDiv.appendChild(memberTypeTitle);
+                    pivotCalcDiv.appendChild(memberTypeTitle);
                 }
                 var memberTypeDrop = createElement('div', { id: this.parentID + 'Member_Type_Div', className: cls.CALC_MEMBER_TYPE_DIV });
-                (this.parent.isAdaptive ? outerDiv.appendChild(memberTypeDrop) : olapCalcDiv.appendChild(memberTypeDrop));
+                (this.parent.isAdaptive ? outerDiv.appendChild(memberTypeDrop) : pivotCalcDiv.appendChild(memberTypeDrop));
                 if (!this.parent.isAdaptive) {
                     var hierarchyTitle = createElement('div', {
                         className: cls.OLAP_HIERARCHY_TITLE_CLASS,
                         innerHTML: this.parent.localeObj.getConstant('selectedHierarchy')
                     });
-                    olapCalcDiv.appendChild(hierarchyTitle);
+                    pivotCalcDiv.appendChild(hierarchyTitle);
                 }
                 var hierarchyDrop = createElement('div', { id: this.parentID + 'Hierarchy_List_Div', className: cls.CALC_HIERARCHY_LIST_DIV });
-                (this.parent.isAdaptive ? outerDiv.appendChild(hierarchyDrop) : olapCalcDiv.appendChild(hierarchyDrop));
-                if (!this.parent.isAdaptive) {
-                    var formatTitle = createElement('div', {
-                        className: cls.OLAP_FORMAT_TITLE_CLASS,
-                        innerHTML: this.parent.localeObj.getConstant('formatString')
-                    });
-                    olapCalcDiv.appendChild(formatTitle);
-                }
-                var formatDrop = createElement('div', { id: this.parentID + 'Format_Div', className: cls.CALC_FORMAT_TYPE_DIV });
-                (this.parent.isAdaptive ? outerDiv.appendChild(formatDrop) : olapCalcDiv.appendChild(formatDrop));
-                var customFormatDiv = createElement('div', { id: this.parentID + 'custom_Format_Div', className: cls.OLAP_CALC_CUSTOM_FORMAT_INPUTDIV });
-                var customFormatObj = createElement('input', {
-                    id: this.parentID + 'Custom_Format_Element',
-                    attrs: { 'type': 'text' },
-                    className: cls.CALC_FORMAT_INPUT
+                (this.parent.isAdaptive ? outerDiv.appendChild(hierarchyDrop) : pivotCalcDiv.appendChild(hierarchyDrop));
+            }
+            if (!this.parent.isAdaptive) {
+                var formatTitle = createElement('div', {
+                    className: cls.PIVOT_FORMAT_TITLE_CLASS,
+                    innerHTML: this.parent.localeObj.getConstant('formatString')
                 });
-                customFormatDiv.appendChild(customFormatObj);
-                olapCalcDiv.appendChild(customFormatDiv);
-                (this.parent.isAdaptive ? outerDiv.appendChild(customFormatDiv) : olapCalcDiv.appendChild(customFormatDiv));
-                if (this.parent.getModuleName() === 'pivotfieldlist' && this.parent.
-                    dialogRenderer.parentElement.querySelector('.' + cls.FORMULA) === null && this.parent.isAdaptive) {
-                    var okBtn = outerDiv.querySelector('.' + cls.CALCOKBTN);
-                    outerDiv.appendChild(okBtn);
-                }
-                else {
-                    outerDiv.appendChild(olapFieldTreeDiv);
-                    outerDiv.appendChild(olapCalcDiv);
-                }
+                pivotCalcDiv.appendChild(formatTitle);
+            }
+            var ddlFormatTypes = createElement('div', { id: this.parentID + 'Format_Div', className: cls.CALC_FORMAT_TYPE_DIV });
+            (this.parent.isAdaptive ? outerDiv.appendChild(ddlFormatTypes) : pivotCalcDiv.appendChild(ddlFormatTypes));
+            var customFormatDiv = createElement('div', {
+                id: this.parentID + 'custom_Format_Div',
+                className: cls.PIVOT_CALC_CUSTOM_FORMAT_INPUTDIV
+            });
+            var customFormatObj = createElement('input', {
+                id: this.parentID + 'Custom_Format_Element',
+                attrs: { 'type': 'text' },
+                className: cls.CALC_FORMAT_INPUT
+            });
+            customFormatDiv.appendChild(customFormatObj);
+            pivotCalcDiv.appendChild(customFormatDiv);
+            (this.parent.isAdaptive ? outerDiv.appendChild(customFormatDiv) : pivotCalcDiv.appendChild(customFormatDiv));
+            if (this.parent.getModuleName() === 'pivotfieldlist' && this.parent.
+                dialogRenderer.parentElement.querySelector('.' + cls.FORMULA) === null && this.parent.isAdaptive) {
+                var okBtn = outerDiv.querySelector('.' + cls.CALCOKBTN);
+                outerDiv.appendChild(okBtn);
             }
             else {
-                var customFormatDiv = createElement('div', { id: this.parentID + 'custom_Format_Div', className: cls.CALC_CUSTOM_FORMAT_INPUTDIV });
-                if (!this.parent.isAdaptive) {
-                    var formatTitle = createElement('div', {
-                        className: cls.OLAP_FORMAT_TITLE_CLASS,
-                        innerHTML: this.parent.localeObj.getConstant('formatString')
-                    });
-                    customFormatDiv.appendChild(formatTitle);
+                if (this.parent.dataType === 'olap') {
+                    outerDiv.appendChild(olapFieldTreeDiv);
                 }
-                var customFormatObj = createElement('input', {
-                    id: this.parentID + 'Custom_Format_Element',
-                    attrs: { 'type': 'text' },
-                    className: cls.CALC_FORMAT_INPUT
-                });
-                customFormatDiv.appendChild(customFormatObj);
-                (this.parent.isAdaptive ? outerDiv.insertBefore(customFormatDiv, select('#' + this.parentID + 'buttonDiv', outerDiv)) : outerDiv.appendChild(customFormatDiv));
+                outerDiv.appendChild(pivotCalcDiv);
             }
         }
         return outerDiv;
@@ -1282,12 +1275,12 @@ var CalculatedField = /** @class */ (function () {
                 this.parentHierarchy = this.fieldType === 'Dimension' ? hierarchyDrop.value : null;
             }
             if (dialogElement.element.querySelector('.' + cls.CALC_FORMAT_TYPE_DIV)) {
-                var formatDrop = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement.element), DropDownList);
-                this.formatType = formatDrop.value;
+                var ddlFormatTypes = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement.element), DropDownList);
+                this.formatType = ddlFormatTypes.value;
             }
             if (dialogElement.element.querySelector('.' + cls.CALC_FORMAT_INPUT)) {
                 var customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement.element), MaskedTextBox);
-                this.formatText = this.parent.dataType === 'olap' ? this.formatType === 'Custom' ? customFormat.value : null : customFormat.value;
+                this.formatText = (this.parent.dataType === 'olap' ? this.formatType : this.getFormat(this.formatType)) === 'Custom' ? customFormat.value : null;
             }
         }
         else {
@@ -1333,9 +1326,8 @@ var CalculatedField = /** @class */ (function () {
             hierarchyDrop.dataBind();
         }
         if (dialogElement.querySelector('.' + cls.CALC_FORMAT_TYPE_DIV)) {
-            var formatStringData = ['Standard', 'Currency', 'Percent', 'None'];
-            var formatDrop = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
-            this.formatType = formatDrop.value = (formatStringData.indexOf(calcInfo.formatString) > -1 ? calcInfo.formatString : 'Custom');
+            var ddlFormatTypes = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
+            this.formatType = ddlFormatTypes.value = (this.formatTypes.indexOf(calcInfo.formatString) > -1 ? calcInfo.formatString : 'Custom');
         }
         if (dialogElement.querySelector('.' + cls.CALC_FORMAT_INPUT)) {
             var customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);
@@ -1354,67 +1346,69 @@ var CalculatedField = /** @class */ (function () {
      * To create treeview.
      * @returns {void}
      */
-    CalculatedField.prototype.createOlapDropElements = function () {
+    CalculatedField.prototype.createDropElements = function () {
         var _this = this;
         var dialogElement = (this.parent.isAdaptive ?
             this.parent.dialogRenderer.parentElement : this.dialog.element);
-        var mData = [];
         var fData = [];
         var fieldData = [];
-        var memberTypeData = ['Measure', 'Dimension'];
-        var formatStringData = ['Standard', 'Currency', 'Percent', 'Custom', 'None'];
-        for (var _i = 0, memberTypeData_1 = memberTypeData; _i < memberTypeData_1.length; _i++) {
-            var type = memberTypeData_1[_i];
-            mData.push({ value: type, text: this.parent.localeObj.getConstant(type) });
-        }
-        for (var _a = 0, formatStringData_1 = formatStringData; _a < formatStringData_1.length; _a++) {
-            var format = formatStringData_1[_a];
-            fData.push({ value: format, text: this.parent.localeObj.getConstant(format) });
-        }
-        var fields = PivotUtil.getClonedData(this.parent.olapEngineModule.fieldListData);
-        for (var _b = 0, _c = fields; _b < _c.length; _b++) {
-            var item = _c[_b];
-            if (item.spriteCssClass &&
-                (item.spriteCssClass.indexOf('e-attributeCDB-icon') > -1 ||
-                    item.spriteCssClass.indexOf('e-hierarchyCDB-icon') > -1)) {
-                fieldData.push({ value: item.id, text: item.caption });
-            }
-        }
-        var memberTypeObj = new DropDownList({
-            dataSource: mData, enableRtl: this.parent.enableRtl, locale: this.parent.locale,
-            fields: { value: 'value', text: 'text' },
-            value: this.fieldType !== null ? this.fieldType : mData[0].value,
-            readonly: this.isEdit,
-            cssClass: cls.MEMBER_OPTIONS_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), width: '100%',
-            change: function (args) {
-                hierarchyListObj.enabled = args.value === 'Dimension' ? true : false;
-                _this.fieldType = args.value;
-                _this.formulaText = select('#' + _this.parentID + 'droppable', document).value;
-                hierarchyListObj.dataBind();
-            }
-        });
-        memberTypeObj.isStringTemplate = true;
-        memberTypeObj.appendTo(select('#' + this.parentID + 'Member_Type_Div', dialogElement));
-        var hierarchyListObj = new DropDownList({
-            dataSource: fieldData, enableRtl: this.parent.enableRtl, locale: this.parent.locale,
-            allowFiltering: true,
-            enabled: memberTypeObj.value === 'Dimension' ? true : false,
-            filterBarPlaceholder: this.parent.localeObj.getConstant('example') + ' ' + fieldData[0].text.toString(),
-            fields: { value: 'value', text: 'text' },
-            value: this.parentHierarchy !== null && memberTypeObj.value === 'Dimension' ?
-                this.parentHierarchy : fieldData[0].value,
-            cssClass: cls.MEMBER_OPTIONS_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), width: '100%',
-            change: function (args) {
-                _this.parentHierarchy = args.value;
-                _this.formulaText = select('#' + _this.parentID + 'droppable', document).value;
+        for (var _i = 0, _a = this.formatTypes; _i < _a.length; _i++) {
+            var format = _a[_i];
+            fData.push({ value: (this.parent.dataType === 'pivot' ? this.getFormat(format) : format), text: this.parent.localeObj.getConstant(format) });
+        }
+        if (this.parent.dataType === 'olap') {
+            var mData = [];
+            var memberTypeData = ['Measure', 'Dimension'];
+            for (var _b = 0, memberTypeData_1 = memberTypeData; _b < memberTypeData_1.length; _b++) {
+                var type = memberTypeData_1[_b];
+                mData.push({ value: type, text: this.parent.localeObj.getConstant(type) });
+            }
+            var fields = PivotUtil.getClonedData(this.parent.olapEngineModule.fieldListData);
+            for (var _c = 0, _d = fields; _c < _d.length; _c++) {
+                var item = _d[_c];
+                if (item.spriteCssClass &&
+                    (item.spriteCssClass.indexOf('e-attributeCDB-icon') > -1 ||
+                        item.spriteCssClass.indexOf('e-hierarchyCDB-icon') > -1)) {
+                    fieldData.push({ value: item.id, text: item.caption });
+                }
             }
-        });
-        hierarchyListObj.isStringTemplate = true;
-        hierarchyListObj.appendTo(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement));
+            var memberTypeObj = new DropDownList({
+                dataSource: mData, enableRtl: this.parent.enableRtl, locale: this.parent.locale,
+                fields: { value: 'value', text: 'text' },
+                value: this.fieldType !== null ? this.fieldType : mData[0].value,
+                readonly: this.isEdit,
+                cssClass: cls.MEMBER_OPTIONS_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), width: '100%',
+                change: function (args) {
+                    hierarchyListObj_1.enabled = args.value === 'Dimension' ? true : false;
+                    _this.fieldType = args.value;
+                    _this.formulaText = select('#' + _this.parentID + 'droppable', document).value;
+                    hierarchyListObj_1.dataBind();
+                }
+            });
+            memberTypeObj.isStringTemplate = true;
+            memberTypeObj.appendTo(select('#' + this.parentID + 'Member_Type_Div', dialogElement));
+            var hierarchyListObj_1 = new DropDownList({
+                dataSource: fieldData, enableRtl: this.parent.enableRtl, locale: this.parent.locale,
+                allowFiltering: true,
+                enabled: memberTypeObj.value === 'Dimension' ? true : false,
+                filterBarPlaceholder: this.parent.localeObj.getConstant('example') + ' ' + fieldData[0].text.toString(),
+                fields: { value: 'value', text: 'text' },
+                value: this.parentHierarchy !== null && memberTypeObj.value === 'Dimension' ?
+                    this.parentHierarchy : fieldData[0].value,
+                cssClass: cls.MEMBER_OPTIONS_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), width: '100%',
+                change: function (args) {
+                    _this.parentHierarchy = args.value;
+                    _this.formulaText = select('#' + _this.parentID + 'droppable', document).value;
+                }
+            });
+            hierarchyListObj_1.isStringTemplate = true;
+            hierarchyListObj_1.appendTo(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement));
+        }
         var formatStringObj = new DropDownList({
             dataSource: fData, enableRtl: this.parent.enableRtl, locale: this.parent.locale,
             fields: { value: 'value', text: 'text' },
-            value: this.formatType !== null ? this.formatType : fData[0].value,
+            value: this.parent.isAdaptive && this.formatType !== null ? this.formatType
+                : this.parent.dataType === 'olap' ? fData[0].value : fData[4].value,
             cssClass: cls.MEMBER_OPTIONS_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), width: '100%',
             change: function (args) {
                 customerFormatObj.enabled = args.value === 'Custom' ? true : false;
@@ -1439,6 +1433,30 @@ var CalculatedField = /** @class */ (function () {
         customerFormatObj.isStringTemplate = true;
         customerFormatObj.appendTo('#' + this.parentID + 'Custom_Format_Element');
     };
+    CalculatedField.prototype.getFormat = function (pivotFormat) {
+        var format = pivotFormat;
+        switch (format) {
+            case 'Standard':
+                format = 'N';
+                break;
+            case 'Currency':
+                format = 'C';
+                break;
+            case 'Percent':
+                format = 'P';
+                break;
+            case 'N':
+                format = 'Standard';
+                break;
+            case 'C':
+                format = 'Currency';
+                break;
+            case 'P':
+                format = 'Percent';
+                break;
+        }
+        return format;
+    };
     /**
      * To create treeview.
      * @returns {void}
@@ -1594,12 +1612,11 @@ var CalculatedField = /** @class */ (function () {
                 args.node.setAttribute('data-membertype', field.fieldType);
                 args.node.setAttribute('data-hierarchy', field.parentHierarchy ? field.parentHierarchy : '');
                 args.node.setAttribute('data-formula', field.formula);
-                var formatStringData = ['Standard', 'Currency', 'Percent', 'None'];
                 var formatString = void 0;
-                formatString = (field.formatString ? formatStringData.indexOf(field.formatString) > -1 ?
+                formatString = (field.formatString ? this.formatTypes.indexOf(field.formatString) > -1 ?
                     field.formatString : 'Custom' : 'None');
                 args.node.setAttribute('data-formatString', formatString);
-                args.node.setAttribute('data-customString', (formatString === 'Custom' ? field.formatString : ''));
+                args.node.setAttribute('data-customformatstring', (formatString === 'Custom' ? field.formatString : ''));
                 var removeElement = createElement('span', {
                     className: cls.GRID_REMOVE + ' e-icons e-list-icon'
                 });
@@ -1639,6 +1656,13 @@ var CalculatedField = /** @class */ (function () {
             args.node.setAttribute('data-type', args.nodeData.type);
             var formatObj = PivotUtil.getFieldByName(field, this.parent.dataSourceSettings.formatSettings);
             args.node.setAttribute('data-formatString', formatObj ? formatObj.format : '');
+            if (formatObj) {
+                var pivotFormat = this.getFormat(formatObj.format);
+                var formatString = (pivotFormat ? this.formatTypes.indexOf(pivotFormat) > -1 ?
+                    formatObj.format : 'Custom' : 'None');
+                args.node.setAttribute('data-customformatstring', (formatString === 'Custom' ? pivotFormat : ''));
+                args.node.setAttribute('data-formatString', formatObj ? formatString : '');
+            }
             var dragElement = createElement('span', {
                 attrs: { 'tabindex': '-1', 'aria-disabled': 'false', 'title': this.parent.localeObj.getConstant('dragField') },
                 className: cls.ICON + ' e-drag'
@@ -1717,7 +1741,7 @@ var CalculatedField = /** @class */ (function () {
             var key = keys[index];
             data.push({
                 header: '<input id=' + this.parentID + '_' + index + ' class=' + cls.CALCCHECK + ' type="checkbox" data-field=' +
-                    key + ' data-caption=' + this.parent.engineModule.fieldList[key].caption + ' data-type=' +
+                    key + ' data-caption="' + this.parent.engineModule.fieldList[key].caption + '" data-type=' +
                     this.parent.engineModule.fieldList[key].type + '/>',
                 content: (this.parent.engineModule.fieldList[key].aggregateType === CALC ||
                     (this.getMenuItems(this.parent.engineModule.fieldList[key].type).length < 1)) ? '' :
@@ -1737,9 +1761,9 @@ var CalculatedField = /** @class */ (function () {
         var _this = this;
         tabObj.items[4].content = this.renderDialogElements().outerHTML;
         tabObj.dataBind();
-        if (this.parent.dataType === 'olap' && this.parent.isAdaptive && this.parent.
+        if (this.parent.isAdaptive && this.parent.
             dialogRenderer.parentElement.querySelector('.' + cls.FORMULA) !== null) {
-            this.createOlapDropElements();
+            this.createDropElements();
         }
         var cancelBtn = new Button({ cssClass: cls.FLAT + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), isPrimary: true, locale: this.parent.locale, enableRtl: this.parent.enableRtl });
         cancelBtn.isStringTemplate = true;
@@ -1763,25 +1787,6 @@ var CalculatedField = /** @class */ (function () {
             });
             this.inputObj.isStringTemplate = true;
             this.inputObj.appendTo('#' + this.parentID + 'ddlelement');
-            if (this.parent.dataType === 'pivot') {
-                var formatInputObj = new MaskedTextBox({
-                    locale: this.parent.locale, enableRtl: this.parent.enableRtl,
-                    placeholder: this.parent.localeObj.getConstant('numberFormatString'),
-                    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');
-                if (this.formatText !== null && this.parent.
-                    dialogRenderer.parentElement.querySelector('.' + cls.CALC_FORMAT_INPUT) !== null) {
-                    this.parent.
-                        dialogRenderer.parentElement.querySelector('.' + cls.CALC_FORMAT_INPUT).value = this.formatText;
-                    formatInputObj.value = this.formatText;
-                }
-            }
             if (this.formulaText !== null && select('#' + this.parentID + 'droppable', this.parent.dialogRenderer.parentElement) !== null) {
                 var drop = select('#' + this.parentID + 'droppable', this.parent.dialogRenderer.parentElement);
                 drop.value = this.formulaText;
@@ -1994,18 +1999,7 @@ var CalculatedField = /** @class */ (function () {
         });
         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,
-                cssClass: this.parent.cssClass
-            });
-            customerFormatObj.isStringTemplate = true;
-            customerFormatObj.appendTo('#' + this.parentID + 'Custom_Format_Element');
-        }
-        if (this.parent.dataType === 'olap' && !this.parent.isAdaptive) {
-            this.createOlapDropElements();
-        }
+        this.createDropElements();
         this.createTreeView();
         this.droppable = new Droppable(select('#' + this.parentID + 'droppable'));
         this.keyboardEvents = new KeyboardEvents(this.parent.calculatedFieldModule.dialog.element, {
@@ -2130,6 +2124,7 @@ var CalculatedField = /** @class */ (function () {
      */
     CalculatedField.prototype.destroy = function () {
         this.removeEventListener();
+        this.formatTypes = null;
     };
     return CalculatedField;
 }());

package/src/common/conditionalformatting/conditional-formatting.js

@@ -38,7 +38,8 @@ var ConditionalFormatting = /** @class */ (function () {
             remove(select('#' + this.parentID + 'conditionalformatting', document));
         }
         this.parent.element.appendChild(createElement('div', {
-            id: this.parentID + 'conditionalformatting'
+            id: this.parentID + 'conditionalformatting',
+            className: cls.FORMAT_DIALOG
         }));
         var buttonModel = [
             {
@@ -73,14 +74,14 @@ var ConditionalFormatting = /** @class */ (function () {
                 showCloseIcon: false, closeOnEscape: false, enableRtl: this.parent.enableRtl, locale: this.parent.locale,
                 position: { X: 'center', Y: 'center' }, allowDragging: true, buttons: buttonModel,
                 beforeOpen: this.beforeOpen.bind(this), close: this.removeDialog.bind(this),
-                cssClass: cls.FORMAT_DIALOG + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), header: this.parent.localeObj.getConstant('conditionalFormating'), target: document.body
+                cssClass: this.parent.cssClass, header: this.parent.localeObj.getConstant('conditionalFormating'), target: document.body
             });
         }
         else {
             this.dialog = new Dialog({
                 allowDragging: true, position: { X: 'center', Y: this.parent.element.offsetTop }, buttons: buttonModel,
                 beforeOpen: this.beforeOpen.bind(this), close: this.removeDialog.bind(this),
-                cssClass: cls.FORMAT_DIALOG + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), isModal: false, closeOnEscape: true, enableRtl: this.parent.enableRtl, locale: this.parent.locale,
+                cssClass: this.parent.cssClass, isModal: false, closeOnEscape: true, enableRtl: this.parent.enableRtl, locale: this.parent.locale,
                 showCloseIcon: true, header: this.parent.localeObj.getConstant('conditionalFormating'), target: this.parent.element
             });
         }

package/src/common/popups/grouping.js

@@ -39,7 +39,7 @@ var Grouping = /** @class */ (function () {
         this.parentElement = parentElement;
         this.selectedCellsInfo = [];
         this.isUpdate = false;
-        var colIndex = Number(target.getAttribute('aria-colindex'));
+        var colIndex = Number(target.getAttribute('data-colindex'));
         var rowIndex = Number(target.getAttribute('index'));
         var cell = this.parent.engineModule.pivotValues[rowIndex][colIndex];
         var fieldName = cell.valueSort.axis.toString();
@@ -235,7 +235,7 @@ var Grouping = /** @class */ (function () {
         /* eslint-enable */
         for (var _i = 0, selectedElements_1 = selectedElements; _i < selectedElements_1.length; _i++) {
             var element = selectedElements_1[_i];
-            var colIndex = Number(element.getAttribute('aria-colindex'));
+            var colIndex = Number(element.getAttribute('data-colindex'));
             var rowIndex = Number(element.getAttribute('index'));
             var cell = this.parent.engineModule.pivotValues[rowIndex][colIndex];
             if (cell && (cell.axis === axis) && !(cell.type === 'grand sum' || cell.type === 'sum') &&