@syncfusion/ej2-pivotview 20.1.61 → 20.2.39

package/src/common/base/css-constant.d.ts

@@ -43,12 +43,26 @@ export declare const OLAP_FIELD_LIST_CLASS: string;
 /** @hidden */
 export declare const FIELD_LIST_TREE_CLASS: string;
 /** @hidden */
+export declare const FIELD_LIST_TREE_OUTER_DIV_CLASS: string;
+/** @hidden */
+export declare const FIELD_LIST_TREE_OUTER_DIV_SEARCH_CLASS: string;
+/** @hidden */
+export declare const FIELD_LIST_SEARCH_MODE_CLASS: string;
+/** @hidden */
 export declare const FIELD_HEADER_CLASS: string;
 /** @hidden */
+export declare const FIELD_HEADER_CONTAINER_CLASS: string;
+/** @hidden */
 export declare const FIELD_LIST_TITLE_CLASS: string;
 /** @hidden */
 export declare const FIELD_LIST_TITLE_CONTENT_CLASS: string;
 /** @hidden */
+export declare const FIELD_LIST_SEARCH_CLASS: string;
+/** @hidden */
+export declare const FIELD_LIST_SEARCH_INPUT_CLASS: string;
+/** @hidden */
+export declare const FIELD_LIST_SEARCH_ICON_CLASS: string;
+/** @hidden */
 export declare const FIELD_LIST_FOOTER_CLASS: string;
 /** @hidden */
 export declare const CALCULATED_FIELD_CLASS: string;
@@ -357,6 +371,8 @@ export declare const TREEVIEW: string;
 /** @hidden */
 export declare const TREEVIEWOUTER: string;
 /** @hidden */
+export declare const TREE_CONTAINER: string;
+/** @hidden */
 export declare const CALCCANCELBTN: string;
 /** @hidden */
 export declare const CALCADDBTN: string;

package/src/common/base/css-constant.js

@@ -43,12 +43,26 @@ export var OLAP_FIELD_LIST_CLASS = 'e-olap-field-list-tree';
 /** @hidden */
 export var FIELD_LIST_TREE_CLASS = 'e-field-list-tree';
 /** @hidden */
+export var FIELD_LIST_TREE_OUTER_DIV_CLASS = 'e-field-list-tree-outer-div';
+/** @hidden */
+export var FIELD_LIST_TREE_OUTER_DIV_SEARCH_CLASS = 'e-field-list-tree-outer-div-searchMode';
+/** @hidden */
+export var FIELD_LIST_SEARCH_MODE_CLASS = 'e-search-mode';
+/** @hidden */
 export var FIELD_HEADER_CLASS = 'e-field-header';
 /** @hidden */
+export var FIELD_HEADER_CONTAINER_CLASS = 'e-field-header-container';
+/** @hidden */
 export var FIELD_LIST_TITLE_CLASS = 'e-field-list-title';
 /** @hidden */
 export var FIELD_LIST_TITLE_CONTENT_CLASS = 'e-title-content';
 /** @hidden */
+export var FIELD_LIST_SEARCH_CLASS = 'e-field-list-search';
+/** @hidden */
+export var FIELD_LIST_SEARCH_INPUT_CLASS = 'e-field-list-search-input';
+/** @hidden */
+export var FIELD_LIST_SEARCH_ICON_CLASS = 'e-field-list-search-icon';
+/** @hidden */
 export var FIELD_LIST_FOOTER_CLASS = 'e-field-list-footer';
 /** @hidden */
 export var CALCULATED_FIELD_CLASS = 'e-calculated-field';
@@ -359,6 +373,8 @@ export var TREEVIEW = 'e-pivot-treeview';
 /** @hidden */
 export var TREEVIEWOUTER = 'e-pivot-treeview-outer';
 /** @hidden */
+export var TREE_CONTAINER = 'e-treeContainer';
+/** @hidden */
 export var CALCCANCELBTN = 'e-pivot-cancel-button';
 /** @hidden */
 export var CALCADDBTN = 'e-pivot-add-button';

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

@@ -983,13 +983,15 @@ var CalculatedField = /** @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
                 }
             }
         ];
@@ -997,7 +999,7 @@ var CalculatedField = /** @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'),
                 }
             };
@@ -1431,7 +1433,8 @@ var CalculatedField = /** @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');
@@ -1738,7 +1741,7 @@ var CalculatedField = /** @class */ (function () {
             dialogRenderer.parentElement.querySelector('.' + cls.FORMULA) !== null) {
             this.createOlapDropElements();
         }
-        var cancelBtn = new Button({ cssClass: cls.FLAT, isPrimary: true, locale: this.parent.locale, enableRtl: this.parent.enableRtl });
+        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;
         cancelBtn.appendTo('#' + this.parentID + 'cancelBtn');
         if (cancelBtn.element) {
@@ -1746,7 +1749,7 @@ var CalculatedField = /** @class */ (function () {
         }
         if (this.parent.
             dialogRenderer.parentElement.querySelector('.' + cls.FORMULA) !== null && this.parent.isAdaptive) {
-            var okBtn = new Button({ cssClass: cls.FLAT + ' ' + cls.OUTLINE_CLASS, isPrimary: true, locale: this.parent.locale, enableRtl: this.parent.enableRtl });
+            var okBtn = new Button({ cssClass: cls.FLAT + ' ' + cls.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({
@@ -1755,7 +1758,8 @@ var CalculatedField = /** @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');
@@ -1766,7 +1770,8 @@ var CalculatedField = /** @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');
@@ -1792,7 +1797,7 @@ var CalculatedField = /** @class */ (function () {
             }
         }
         else if (this.parent.isAdaptive) {
-            var addBtn = new Button({ cssClass: cls.FLAT, isPrimary: true, locale: this.parent.locale, enableRtl: this.parent.enableRtl });
+            var addBtn = new Button({ cssClass: cls.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') {
@@ -1849,7 +1854,8 @@ var CalculatedField = /** @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]);
@@ -1886,7 +1892,8 @@ var CalculatedField = /** @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);
@@ -1982,14 +1989,16 @@ var CalculatedField = /** @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');
@@ -2030,14 +2039,14 @@ var CalculatedField = /** @class */ (function () {
                 {
                     click: isRemove ? this.removeCalcField.bind(this, node) : this.replaceFormula.bind(this, calcInfo),
                     buttonModel: {
-                        cssClass: cls.OK_BUTTON_CLASS + ' ' + cls.FLAT_CLASS,
+                        cssClass: cls.OK_BUTTON_CLASS + ' ' + cls.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: cls.CANCEL_BUTTON_CLASS,
+                        cssClass: cls.CANCEL_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                         content: isRemove ? this.parent.localeObj.getConstant('no') : this.parent.localeObj.getConstant('cancel'), isPrimary: true
                     }
                 }

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

@@ -44,8 +44,8 @@ var ConditionalFormatting = /** @class */ (function () {
             {
                 click: this.addButtonClick.bind(this),
                 buttonModel: {
-                    cssClass: this.parent.isAdaptive ? (cls.FORMAT_ROUND_BUTTON + ' ' + cls.FORMAT_CONDITION_BUTTON) :
-                        cls.FORMAT_CONDITION_BUTTON,
+                    cssClass: (this.parent.isAdaptive ? (cls.FORMAT_ROUND_BUTTON + ' ' + cls.FORMAT_CONDITION_BUTTON) :
+                        cls.FORMAT_CONDITION_BUTTON) + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                     iconCss: cls.ICON + ' ' + cls.ADD_ICON_CLASS,
                     content: this.parent.isAdaptive ? '' : this.parent.localeObj.getConstant('condition')
                 }
@@ -54,7 +54,7 @@ var ConditionalFormatting = /** @class */ (function () {
                 click: this.applyButtonClick.bind(this),
                 isFlat: true,
                 buttonModel: {
-                    isPrimary: true, cssClass: cls.FORMAT_APPLY_BUTTON,
+                    isPrimary: true, cssClass: cls.FORMAT_APPLY_BUTTON + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                     content: this.parent.localeObj.getConstant('apply')
                 }
             },
@@ -62,7 +62,7 @@ var ConditionalFormatting = /** @class */ (function () {
                 click: this.cancelButtonClick.bind(this),
                 isFlat: true,
                 buttonModel: {
-                    cssClass: cls.FORMAT_CANCEL_BUTTON,
+                    cssClass: cls.FORMAT_CANCEL_BUTTON + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                     content: this.parent.localeObj.getConstant('cancel')
                 }
             }
@@ -430,7 +430,7 @@ var ConditionalFormatting = /** @class */ (function () {
         addClass([this.backgroundColor[i].element.nextElementSibling.querySelector('.e-selected-color')], cls.ICON);
         var toggleBtn = new Button({
             iconCss: cls.ICON + ' ' + cls.FORMAT_DELETE_ICON,
-            cssClass: cls.FLAT, locale: this.parent.locale, enableRtl: this.parent.enableRtl
+            cssClass: cls.FLAT + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), locale: this.parent.locale, enableRtl: this.parent.enableRtl
         });
         toggleBtn.isStringTemplate = true;
         toggleBtn.appendTo('#' + this.parentID + 'removeButton' + i);

package/src/common/grouping-bar/grouping-bar.js

@@ -504,7 +504,7 @@ var GroupingBar = /** @class */ (function () {
         }
         element.prepend(createElement('div', { id: this.parent.element.id + '_AllFields' }));
         var toolbarObj = new Toolbar({
-            cssClass: cls.ALL_FIELDS_PANEL_CLASS,
+            cssClass: cls.ALL_FIELDS_PANEL_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
             enableRtl: this.parent.enableRtl,
             items: [{ template: '<div class=' + cls.GROUP_ALL_FIELDS_CLASS + '></div>' }],
             allowKeyboard: false,

package/src/common/popups/aggregate-menu.js

@@ -172,13 +172,13 @@ var AggregateMenu = /** @class */ (function () {
             buttons: [
                 {
                     click: this.updateValueSettings.bind(this),
-                    buttonModel: { cssClass: cls.OK_BUTTON_CLASS, content: this.parent.localeObj.getConstant('ok'), isPrimary: true }
+                    buttonModel: { cssClass: cls.OK_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('ok'), isPrimary: true }
                 },
                 {
                     click: function () {
                         _this.valueDialog.hide();
                     },
-                    buttonModel: { cssClass: cls.CANCEL_BUTTON_CLASS, content: this.parent.localeObj.getConstant('cancel') }
+                    buttonModel: { cssClass: cls.CANCEL_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('cancel') }
                 }
             ],
             closeOnEscape: (this.parent.getModuleName() === 'pivotfieldlist' && this.parent.renderMode === 'Popup') ? false : true,
@@ -336,7 +336,8 @@ var AggregateMenu = /** @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);

package/src/common/popups/drillthrough-dialog.js

@@ -226,6 +226,7 @@ var DrillThroughDialog = /** @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];
@@ -397,10 +398,10 @@ var DrillThroughDialog = /** @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) : '') } }
                         ]
                     });
                 }

package/src/common/popups/error-dialog.js

@@ -47,7 +47,7 @@ var ErrorDialog = /** @class */ (function () {
             buttons: [
                 {
                     click: this.closeErrorDialog.bind(this),
-                    buttonModel: { cssClass: cls.OK_BUTTON_CLASS, content: this.parent.localeObj.getConstant('ok'), isPrimary: true }
+                    buttonModel: { cssClass: cls.OK_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('ok'), isPrimary: true }
                 }
             ],
             cssClass: this.parent.cssClass,

package/src/common/popups/filter-dialog.js

@@ -61,19 +61,19 @@ var FilterDialog = /** @class */ (function () {
             buttons: [
                 {
                     buttonModel: {
-                        cssClass: 'e-clear-filter-button' + (this.allowExcelLikeFilter ? '' : ' ' + cls.ICON_DISABLE),
+                        cssClass: 'e-clear-filter-button' + (this.allowExcelLikeFilter ? '' : ' ' + cls.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: cls.OK_BUTTON_CLASS, content: this.parent.localeObj.getConstant('ok'), isPrimary: true
+                        cssClass: cls.OK_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('ok'), isPrimary: true
                     }
                 },
                 {
                     click: this.closeFilterDialog.bind(this),
-                    buttonModel: { cssClass: cls.CANCEL_BUTTON_CLASS, content: this.parent.localeObj.getConstant('cancel') }
+                    buttonModel: { cssClass: cls.CANCEL_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('cancel') }
                 }
             ],
             closeOnEscape: this.parent.renderMode === 'Popup' ? false : true,
@@ -175,7 +175,7 @@ var FilterDialog = /** @class */ (function () {
         this.editorSearch = new MaskedTextBox({
             placeholder: this.parent.localeObj.getConstant('search') + ' ' + '&#8220' + filterCaption + '&#8220',
             enableRtl: this.parent.enableRtl,
-            cssClass: cls.EDITOR_SEARCH_CLASS,
+            cssClass: cls.EDITOR_SEARCH_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
             showClearButton: true,
             change: function (e) {
                 if (_this.parent.dataType === 'olap') {
@@ -213,7 +213,8 @@ var FilterDialog = /** @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)) {
@@ -238,7 +239,8 @@ var FilterDialog = /** @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);
@@ -249,7 +251,7 @@ var FilterDialog = /** @class */ (function () {
         if (this.parent.dataType === 'pivot' && treeData && treeData.length > 0) {
             var sortOrder = this.parent.engineModule.fieldList[fieldName].sort;
             var sortWrapper = createElement('div', {
-                className: cls.FILTER_SORT_CLASS + ' e-btn-group' + (this.parent.enableRtl ? ' ' + cls.RTL : ''),
+                className: cls.FILTER_SORT_CLASS + ' e-btn-group' + (this.parent.enableRtl ? ' ' + cls.RTL : '') + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                 id: this.parent.element.id + '_Member_Sort'
             });
             this.parent.element.appendChild(sortWrapper);
@@ -262,11 +264,11 @@ var FilterDialog = /** @class */ (function () {
                 id: this.parent.element.id + '_Sort_Descend', attrs: { 'type': 'button' }
             });
             var sortBtnElement = new Button({
-                iconCss: cls.ICON + ' ' + cls.SORT_ASCEND_ICON_CLASS, enableRtl: this.parent.enableRtl
+                iconCss: cls.ICON + ' ' + cls.SORT_ASCEND_ICON_CLASS, enableRtl: this.parent.enableRtl, cssClass: this.parent.cssClass
             });
             sortBtnElement.appendTo(sortAscendElement);
             sortBtnElement = new Button({
-                iconCss: cls.ICON + ' ' + cls.SORT_DESCEND_ICON_CLASS, enableRtl: this.parent.enableRtl
+                iconCss: cls.ICON + ' ' + cls.SORT_DESCEND_ICON_CLASS, enableRtl: this.parent.enableRtl, cssClass: this.parent.cssClass
             });
             sortBtnElement.appendTo(sortDescendElement);
             sortWrapper.appendChild(sortAscendElement);
@@ -613,7 +615,8 @@ var FilterDialog = /** @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);
@@ -935,7 +938,9 @@ var FilterDialog = /** @class */ (function () {
                     else {
                         return;
                     }
-                }, width: '100%'
+                },
+                width: '100%',
+                cssClass: this.parent.cssClass
             });
             var inputObj2_2 = new NumericTextBox({
                 placeholder: this.parent.localeObj.getConstant('enterValue'),
@@ -954,7 +959,9 @@ var FilterDialog = /** @class */ (function () {
                     else {
                         return;
                     }
-                }, width: '100%'
+                },
+                width: '100%',
+                cssClass: this.parent.cssClass
             });
             inputObj1_2.isStringTemplate = true;
             inputObj1_2.appendTo(inputDiv1);
@@ -975,7 +982,9 @@ var FilterDialog = /** @class */ (function () {
                     else {
                         return;
                     }
-                }, width: '100%'
+                },
+                width: '100%',
+                cssClass: this.parent.cssClass
             });
             var inputObj2_3 = new MaskedTextBox({
                 placeholder: this.parent.localeObj.getConstant('enterValue'),
@@ -990,7 +999,9 @@ var FilterDialog = /** @class */ (function () {
                     else {
                         return;
                     }
-                }, width: '100%'
+                },
+                width: '100%',
+                cssClass: this.parent.cssClass
             });
             inputObj1_3.isStringTemplate = true;
             inputObj1_3.appendTo(inputDiv1);

package/src/common/popups/formatting-dialog.js

@@ -50,13 +50,13 @@ var NumberFormatting = /** @class */ (function () {
             buttons: [
                 {
                     click: this.updateFormatting.bind(this),
-                    buttonModel: { cssClass: cls.OK_BUTTON_CLASS, content: this.parent.localeObj.getConstant('apply'), isPrimary: true }
+                    buttonModel: { cssClass: cls.OK_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('apply'), isPrimary: true }
                 },
                 {
                     click: function () {
                         _this.dialog.hide();
                     },
-                    buttonModel: { cssClass: cls.CANCEL_BUTTON_CLASS, content: this.parent.localeObj.getConstant('cancel') }
+                    buttonModel: { cssClass: cls.CANCEL_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('cancel') }
                 }
             ],
             closeOnEscape: true,

package/src/common/popups/grouping.js

@@ -274,13 +274,13 @@ var Grouping = /** @class */ (function () {
             buttons: [
                 {
                     click: this.updateGroupSettings.bind(this),
-                    buttonModel: { cssClass: cls.OK_BUTTON_CLASS, content: this.parent.localeObj.getConstant('ok'), isPrimary: true }
+                    buttonModel: { cssClass: cls.OK_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('ok'), isPrimary: true }
                 },
                 {
                     click: function () {
                         _this.groupDialog.hide();
                     },
-                    buttonModel: { cssClass: cls.CANCEL_BUTTON_CLASS, content: this.parent.localeObj.getConstant('cancel') }
+                    buttonModel: { cssClass: cls.CANCEL_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('cancel') }
                 }
             ],
             overlayClick: function () {
@@ -349,7 +349,8 @@ var Grouping = /** @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);
@@ -357,7 +358,8 @@ var Grouping = /** @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);
@@ -505,7 +507,8 @@ var Grouping = /** @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);
@@ -517,7 +520,8 @@ var Grouping = /** @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);
@@ -529,7 +533,8 @@ var Grouping = /** @class */ (function () {
                             format: '###',
                             min: 1,
                             value: selectedInterval,
-                            width: '100%'
+                            width: '100%',
+                            cssClass: this.parent.cssClass
                         });
                         intervalObj.isStringTemplate = true;
                         intervalObj.appendTo(intervalInputField1);
@@ -539,6 +544,7 @@ var Grouping = /** @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) :
@@ -554,6 +560,7 @@ var Grouping = /** @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) :

package/src/common/popups/toolbar.js

@@ -54,6 +54,7 @@ var Toolbar = /** @class */ (function () {
             locale: this.parent.locale,
             items: this.getItems(),
             allowKeyboard: false,
+            cssClass: this.parent.cssClass,
             width: !this.parent.gridSettings.allowAutoResizing ? (this.parent.grid ? (this.parent.getGridWidthAsNumber() - 2) : (this.parent.getWidthAsNumber() - 2)) : 'auto'
         });
         this.toolbar.isStringTemplate = true;
@@ -146,7 +147,7 @@ var Toolbar = /** @class */ (function () {
                     var toDisable = this.parent.displayOption.view === 'Chart';
                     items.push({
                         prefixIcon: cls.TOOLBAR_GRID + ' ' + cls.ICON, tooltipText: this.parent.localeObj.getConstant('grid'),
-                        id: this.parent.element.id + 'grid', cssClass: toDisable ? cls.MENU_DISABLE : '',
+                        id: this.parent.element.id + 'grid', cssClass: (toDisable ? cls.MENU_DISABLE : '') + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                         click: this.menuItemClick.bind(this)
                     });
                     break;
@@ -154,7 +155,7 @@ var Toolbar = /** @class */ (function () {
                     var validTypes = (this.parent.displayOption.view === 'Table');
                     items.push({
                         template: '<ul id="' + this.parent.element.id + 'chart_menu"></ul>',
-                        id: this.parent.element.id + 'chartmenu', cssClass: validTypes ? cls.MENU_DISABLE : ''
+                        id: this.parent.element.id + 'chartmenu', cssClass: (validTypes ? cls.MENU_DISABLE : '') + (this.parent.cssClass ? (' ' + this.parent.cssClass) : '')
                     });
                     break;
                 case 'MDX':
@@ -648,14 +649,14 @@ var Toolbar = /** @class */ (function () {
                 {
                     buttonModel: {
                         content: this.parent.localeObj.getConstant('yes'), isPrimary: true,
-                        cssClass: cls.OK_BUTTON_CLASS
+                        cssClass: cls.OK_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : '')
                     },
                     click: this.okButtonClick.bind(this)
                 },
                 {
                     buttonModel: {
                         content: this.parent.localeObj.getConstant('no'),
-                        cssClass: cls.CANCEL_BUTTON_CLASS
+                        cssClass: cls.CANCEL_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : '')
                     },
                     click: this.cancelButtonClick.bind(this)
                 }
@@ -1077,7 +1078,7 @@ var Toolbar = /** @class */ (function () {
             this.parent.element.appendChild(inputCheckbox);
             var checkbox = new CheckBox({
                 label: this.parent.localeObj.getConstant('multipleAxes'),
-                cssClass: 'e-multipleAxes',
+                cssClass: 'e-multipleAxes' + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                 checked: this.parent.chartSettings.enableMultipleAxis,
                 change: function (args) {
                     document.getElementById(_this_1.parent.element.id + '_' + 'multipleAxes').click();
@@ -1109,7 +1110,7 @@ var Toolbar = /** @class */ (function () {
             var checkbox = new CheckBox({
                 label: this.parent.localeObj.getConstant('showLegend'),
                 checked: this.getLableState(this.parent.chartSettings.chartSeries.type),
-                cssClass: 'e-showLegend',
+                cssClass: 'e-showLegend' + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                 change: function (args) {
                     document.getElementById(_this_1.parent.element.id + '_' + 'showLegend').click();
                 },
@@ -1483,11 +1484,11 @@ var Toolbar = /** @class */ (function () {
             buttons: [
                 {
                     click: function () { _this_1.chartTypeDialogUpdate(); },
-                    buttonModel: { cssClass: cls.OK_BUTTON_CLASS, content: this.parent.localeObj.getConstant('ok'), isPrimary: true },
+                    buttonModel: { cssClass: cls.OK_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('ok'), isPrimary: true },
                 },
                 {
                     click: function () { _this_1.removeDialog(); },
-                    buttonModel: { cssClass: cls.CANCEL_BUTTON_CLASS, content: this.parent.localeObj.getConstant('cancel') }
+                    buttonModel: { cssClass: cls.CANCEL_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('cancel') }
                 }
             ],
             closeOnEscape: true,
@@ -1629,7 +1630,7 @@ var Toolbar = /** @class */ (function () {
         var _this_1 = this;
         var checkbox = new CheckBox({
             label: this.parent.localeObj.getConstant('multipleAxes'),
-            cssClass: 'e-dialog-multiple-axis',
+            cssClass: 'e-dialog-multiple-axis' + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
             checked: this.parent.chartSettings.enableMultipleAxis ? this.parent.chartSettings.enableMultipleAxis : false,
             change: function (args) {
                 getInstance(select('#' + _this_1.parent.element.id + '_AxisModeOption'), DropDownList).enabled = args.checked;
@@ -1641,7 +1642,7 @@ var Toolbar = /** @class */ (function () {
             label: this.parent.localeObj.getConstant('showLegend'),
             checked: this.getLableState(this.parent.chartSettings.chartSeries.type),
             change: function () { _this_1.chartLableState = true; },
-            cssClass: 'e-dialog-show-legend',
+            cssClass: 'e-dialog-show-legend' + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale
         });