@syncfusion/ej2-pivotview - npm Package Compare versions

Comparing version 16.3.34 to 16.4.40-beta

CHANGELOG.md

@@ -5,2 +5,21 @@ # Changelog
 
+### Pivot Grid
+
+#### Bug Fixes
+
+- #219623 - Text in the field list tab gets completely displayed in mobile layout.
+- #219625 - Scrolling works properly in touch mode when virtual scroll option is enabled.
+- #219625 - In mobile device, virtual scrolling sample is loaded properly from the sample browser.
+- #219625 - In mobile device, last column cells are displayed properly.
+
+#### New Features
+
+- Raw items in the control can be edited and updated at runtime.
+- Provided support to list the raw items for a particular value cell.
+- In the filter pop-up, provided support to set the limit the display field values and search option for refining the values from large data.
+- Provided hyperlink support to perform any custom operation programmatically.
+- Defer update option has been provided to refresh the control on-demand and not during every UI interaction for better performance.
+- Provided support to show or hide subtotals and grand totals for rows and columns.
+- More aggregation types like – Distinct Count, Product, Running Totals, Percentage of Column Total, Percentage of Parent Column Total, Population Var are added.
+
 ## 16.3.21 (2018-09-22)
@@ -7,0 +26,0 @@

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 16.3.34
+*  version : 16.4.40-beta
 *  Copyright Syncfusion Inc. 2001 - 2018. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

package.json

 {
   "name": "@syncfusion/ej2-pivotview",
-  "version": "16.3.34",
+  "version": "16.4.40-beta",
   "description": "The pivot grid, or pivot table, is used to visualize large sets of relational data in a cross-tabular format, similar to an Excel pivot table.",
@@ -11,16 +11,16 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "~16.3.34",
-    "@syncfusion/ej2-buttons": "~16.3.34",
-    "@syncfusion/ej2-calendars": "~16.3.34",
-    "@syncfusion/ej2-compression": "~16.3.34",
-    "@syncfusion/ej2-data": "~16.3.34",
-    "@syncfusion/ej2-dropdowns": "~16.3.34",
-    "@syncfusion/ej2-excel-export": "~16.3.34",
-    "@syncfusion/ej2-file-utils": "~16.3.34",
-    "@syncfusion/ej2-grids": "~16.3.34",
-    "@syncfusion/ej2-inputs": "~16.3.34",
-    "@syncfusion/ej2-lists": "~16.3.34",
-    "@syncfusion/ej2-navigations": "~16.3.34",
-    "@syncfusion/ej2-pdf-export": "~16.3.34",
-    "@syncfusion/ej2-popups": "~16.3.34"
+    "@syncfusion/ej2-base": "~16.4.40-beta",
+    "@syncfusion/ej2-buttons": "~16.4.40-beta",
+    "@syncfusion/ej2-calendars": "~16.4.40-beta",
+    "@syncfusion/ej2-compression": "~16.4.40-beta",
+    "@syncfusion/ej2-data": "~16.4.40-beta",
+    "@syncfusion/ej2-dropdowns": "~16.4.40-beta",
+    "@syncfusion/ej2-excel-export": "~16.4.40-beta",
+    "@syncfusion/ej2-file-utils": "~16.4.40-beta",
+    "@syncfusion/ej2-grids": "~16.4.40-beta",
+    "@syncfusion/ej2-inputs": "~16.4.40-beta",
+    "@syncfusion/ej2-lists": "~16.4.40-beta",
+    "@syncfusion/ej2-navigations": "~16.4.40-beta",
+    "@syncfusion/ej2-pdf-export": "~16.4.40-beta",
+    "@syncfusion/ej2-popups": "~16.4.40-beta"
   },
@@ -30,3 +30,3 @@ "devDependencies": {
     "@types/es6-promise": "0.0.28",
-    "@types/jasmine": "^2.2.29",
+    "@types/jasmine": "2.8.9",
     "@types/jasmine-ajax": "^3.1.27",
@@ -48,5 +48,5 @@ "@types/requirejs": "^2.1.26"
     "type": "git",
-    "url": "https://github.com/syncfusion/ej2-pivotview.git"
+    "url": "https://github.com/syncfusion/ej2-javascript-ui-controls"
   },
   "sideEffects": false
 }

README.md

@@ -12,3 +12,3 @@ # ej2-pivotview
 
-To install Pivot Grid and its dependent packages, use the following command
+To install Pivot Grid and its dependent packages, use the following command.
 
@@ -15,0 +15,0 @@ ```sh

src/base/engine.d.ts

@@ -41,2 +41,14 @@ import { Internationalization, NumberFormatOptions, DateFormatOptions } from '@syncfusion/ej2-base';
     /** @hidden */
+    showSubTotals: boolean;
+    /** @hidden */
+    showRowSubTotals: boolean;
+    /** @hidden */
+    showColumnSubTotals: boolean;
+    /** @hidden */
+    showGrandTotals: boolean;
+    /** @hidden */
+    showRowGrandTotals: boolean;
+    /** @hidden */
+    showColumnGrandTotals: boolean;
+    /** @hidden */
     pageSettings: IPageSettings;
@@ -93,2 +105,4 @@ /** @hidden */
     isHeaderAvail: boolean;
+    /** @hidden */
+    isDrillThrough: boolean;
     private allowValueFilter;
@@ -107,2 +121,3 @@ private isValueFiltered;
     private endPos;
+    private removeCount;
     private colHdrBufferCalculated;
@@ -114,2 +129,5 @@ private colValuesLength;
     private filterPosObj;
+    private selectedHeaders;
+    private rawIndexObject;
+    private isEditing;
     /**
@@ -121,3 +139,3 @@ * Constructor for PivotEngine class
      */
-    constructor(dataSource?: IDataOptions, mode?: string, savedFieldList?: IFieldListOptions, pageSettings?: IPageSettings, enableValueSoring?: boolean);
+    constructor(dataSource?: IDataOptions, mode?: string, savedFieldList?: IFieldListOptions, pageSettings?: IPageSettings, enableValueSoring?: boolean, isDrillThrough?: boolean);
     private getFormattedFields;
@@ -149,2 +167,4 @@ private getFieldList;
     private isEmptyDataAvail;
+    /** @hidden */
+    updateGridData(dataSource: IDataOptions): void;
     generateGridData(dataSource: IDataOptions, headerCollection?: HeaderCollection): void;
@@ -165,2 +185,7 @@ private applyValueSorting;
     private getTableData;
+    private getAggregatedHeaders;
+    private getAggregatedHeaderData;
+    private updateSelectedHeaders;
+    private applyAdvancedAggregate;
+    private updateAggregates;
     private recursiveRowData;
@@ -192,2 +217,8 @@ private updateRowData;
     allowValueFilter?: boolean;
+    showSubTotals?: boolean;
+    showRowSubTotals?: boolean;
+    showColumnSubTotals?: boolean;
+    showGrandTotals?: boolean;
+    showRowGrandTotals?: boolean;
+    showColumnGrandTotals?: boolean;
     conditionalFormatSettings?: IConditionalFormatSettings[];
@@ -282,2 +313,8 @@ }
  */
+export interface ISelectedValues {
+    [key: number]: IAxisSet;
+}
+/**
+ * @hidden
+ */
 export interface IDataSet {
@@ -295,2 +332,5 @@ [key: string]: string | number | Date;
     showNoDataItems?: boolean;
+    baseField?: string;
+    baseItem?: string;
+    showSubTotals?: boolean;
 }
@@ -377,2 +417,5 @@ /**
     aggregateType?: string;
+    baseField?: string;
+    baseItem?: string;
+    filterType?: string;
     format?: string;
@@ -405,2 +448,4 @@ formula?: string;
     rowIndex?: number;
+    columnHeaders?: string | number | Date;
+    rowHeaders?: string | number | Date;
     isSum?: boolean;
@@ -410,2 +455,4 @@ isLevelFiltered?: boolean;
     style?: IStyle;
+    enableHyperlink?: boolean;
+    showSubTotals?: boolean;
 }

src/base/types.d.ts

@@ -20,4 +20,8 @@ /**
 'Sum' | 
+/** Defines product aggregate type */
+'Product' | 
 /** Specifies count aggregate type */
 'Count' | 
+/** Specifies distinct count aggregate type */
+'DistinctCount' | 
 /** Specifies minimum aggregate type */
@@ -29,2 +33,30 @@ 'Min' |
 'Avg' | 
+/** Specifies index aggregate type */
+'Index' | 
+/** Specifies percentage of grand totals of total aggregate type */
+'PercentageOfGrandTotal' | 
+/** Specifies percentage of grand column total aggregate type */
+'PercentageOfColumnTotal' | 
+/** Specifies percentage of grand row total aggregate type */
+'PercentageOfRowTotal' | 
+/** Specifies percentage of grand parent row total aggregate type */
+'PercentageOfParentRowTotal' | 
+/** Specifies percentage of grand parent column total aggregate type */
+'PercentageOfParentColumnTotal' | 
+/** Specifies percentage of grand parent total aggregate type */
+'PercentageOfParentTotal' | 
+/** Specifies running totals aggregate type */
+'RunningTotals' | 
+/** Specifies standard deviation of population aggregate type */
+'PopulationStDev' | 
+/** Specifies sample standard deviation aggregate type */
+'SampleStDev' | 
+/** Specifies variance of population aggregate type */
+'PopulationVar' | 
+/** Specifies sample variance aggregate type */
+'SampleVar' | 
+/** Specifies difference from aggregate type */
+'DifferenceFrom' | 
+/** Specifies % of difference from aggregate type */
+'PercentageOfDifferenceFrom' | 
 /** Specifies 'CalculatedField' aggregate type for calculated fields */
@@ -31,0 +63,0 @@ 'CalculatedField';

src/common/actions/common.js

@@ -50,2 +50,3 @@ import * as events from '../../common/base/constant';
         }
+        this.parent.pivotCommon.control = this.parent;
     };
@@ -52,0 +53,0 @@ /**

src/common/actions/dataSource-update.js

@@ -91,2 +91,3 @@ import * as events from '../../common/base/constant';
         var fields = [rows, columns, values, filters];
+        var field = this.parent.engineModule.fieldList[fieldName];
         for (var len = 0, lnt = fields.length; len < lnt; len++) {
@@ -96,3 +97,6 @@ if (!isDataSource && fields[len]) {
                     if (fields[len][i].name === fieldName) {
-                        dataSourceItem = fields[len][i];
+                        dataSourceItem = fields[len][i].properties ?
+                            fields[len][i].properties : fields[len][i];
+                        dataSourceItem.type = field.type === 'number' ? dataSourceItem.type :
+                            'Count';
                         fields[len].splice(i, 1);
@@ -119,4 +123,7 @@ isDataSource = true;
             caption: field.caption,
-            type: field.aggregateType,
-            showNoDataItems: field.showNoDataItems
+            type: field.aggregateType === undefined ? field.type === 'number' ? 'Sum' :
+                'Count' : field.aggregateType,
+            showNoDataItems: field.showNoDataItems,
+            baseField: field.baseField,
+            baseItem: field.baseItem,
         };
@@ -123,0 +130,0 @@ return newField;

src/common/actions/event-base.d.ts

 import { PivotCommon } from '../base/pivot-common';
-import { ISort, IFilter, IFormatSettings } from '../../base/engine';
+import { ISort, IFilter, IFormatSettings, IFieldOptions } from '../../base/engine';
 import { MaskChangeEventArgs } from '@syncfusion/ej2-inputs';
@@ -49,2 +49,10 @@ import { TreeView } from '@syncfusion/ej2-navigations';
     /**
+     * Gets filter object for the given field name from the dataSource.
+     * @method getFieldByName
+     * @param  {string} fieldName - Gets filter settings for the given field name.
+     * @return {Sort}
+     * @hidden
+     */
+    getFieldByName(fieldName: string, fields: IFieldOptions[]): IFieldOptions;
+    /**
      * Gets format object for the given field name from the dataSource.
@@ -61,4 +69,4 @@ * @method getFilterItemByName
      */
-    searchTreeNodes(args: MaskChangeEventArgs, treeObj: TreeView): void;
+    searchTreeNodes(args: MaskChangeEventArgs, treeObj: TreeView, isFieldCollection: boolean): void;
     private getTreeData;
 }

src/common/actions/event-base.js

@@ -32,5 +32,10 @@ import { isNullOrUndefined, removeClass, addClass } from '@syncfusion/ej2-base';
         if (!isNullOrUndefined(sortObj)) {
-            sortObj = sortObj.properties ?
-                sortObj.properties : sortObj;
-            sortObj.order = isDescending ? 'Ascending' : 'Descending';
+            for (var i = 0; i < this.parent.dataSource.sortSettings.length; i++) {
+                if (this.parent.dataSource.sortSettings[i].name === fieldName) {
+                    this.parent.dataSource.sortSettings.splice(i, 1);
+                    break;
+                }
+            }
+            var newSortObj = { name: fieldName, order: isDescending ? 'Ascending' : 'Descending' };
+            this.parent.dataSource.sortSettings.push(newSortObj);
         }
@@ -96,2 +101,12 @@ else {
     /**
+     * Gets filter object for the given field name from the dataSource.
+     * @method getFieldByName
+     * @param  {string} fieldName - Gets filter settings for the given field name.
+     * @return {Sort}
+     * @hidden
+     */
+    EventBase.prototype.getFieldByName = function (fieldName, fields) {
+        return new DataManager({ json: fields }).executeLocal(new Query().where('name', 'equal', fieldName))[0];
+    };
+    /**
      * Gets format object for the given field name from the dataSource.
@@ -111,22 +126,68 @@ * @method getFilterItemByName
      */
-    EventBase.prototype.searchTreeNodes = function (args, treeObj) {
-        var searchList = [];
-        var nonSearchList = [];
-        var list = [].slice.call(treeObj.element.querySelectorAll('li'));
-        for (var _i = 0, list_1 = list; _i < list_1.length; _i++) {
-            var element = list_1[_i];
-            if ((element.querySelector('.e-list-text').textContent.toLowerCase()).indexOf(args.value.toLowerCase()) > -1) {
-                searchList.push(element);
+    EventBase.prototype.searchTreeNodes = function (args, treeObj, isFieldCollection) {
+        if (isFieldCollection) {
+            var searchList = [];
+            var nonSearchList = [];
+            var list = [].slice.call(treeObj.element.querySelectorAll('li'));
+            for (var _i = 0, list_1 = list; _i < list_1.length; _i++) {
+                var element = list_1[_i];
+                if ((element.querySelector('.e-list-text').textContent.toLowerCase()).indexOf(args.value.toLowerCase()) > -1) {
+                    searchList.push(element);
+                }
+                else {
+                    nonSearchList.push(element);
+                }
             }
+            treeObj.enableNodes(searchList);
+            treeObj.disableNodes(nonSearchList);
+        }
+        else {
+            var searchList = [];
+            var memberCount = 0;
+            for (var _a = 0, _b = this.parent.currentTreeItems; _a < _b.length; _a++) {
+                var item = _b[_a];
+                item.checkedStatus = this.parent.savedTreeFilterPos[memberCount] !== undefined ? false : true;
+                memberCount++;
+            }
+            memberCount = 1;
+            for (var _c = 0, _d = this.parent.currentTreeItems; _c < _d.length; _c++) {
+                var item = _d[_c];
+                if (item.name.toLowerCase().indexOf(args.value.toLowerCase()) > -1) {
+                    if (memberCount <= this.parent.control.maxNodeLimitInMemberEditor) {
+                        searchList.push(item);
+                    }
+                    memberCount++;
+                }
+            }
+            memberCount--;
+            if (memberCount > this.parent.control.maxNodeLimitInMemberEditor) {
+                this.parent.editorLabelElement.innerText = (memberCount - this.parent.control.maxNodeLimitInMemberEditor) +
+                    this.parent.control.localeObj.getConstant('editorDataLimitMsg');
+                this.parent.filterDialog.dialogPopUp.height = (this.parent.filterDialog.allowExcelLikeFilter ? '440px' : '400px');
+                this.parent.isDataOverflow = true;
+            }
             else {
-                nonSearchList.push(element);
+                this.parent.editorLabelElement.innerText = '';
+                this.parent.filterDialog.dialogPopUp.height = (this.parent.filterDialog.allowExcelLikeFilter ? '400px' : '350px');
+                this.parent.isDataOverflow = false;
             }
+            this.parent.isDataOverflow = (memberCount > this.parent.control.maxNodeLimitInMemberEditor);
+            this.parent.editorLabelElement.parentElement.style.display = this.parent.isDataOverflow ? 'inline-block' : 'none';
+            treeObj.fields = { dataSource: searchList, id: 'id', text: 'name', isChecked: 'checkedStatus' };
+            treeObj.dataBind();
         }
-        treeObj.enableNodes(searchList);
-        treeObj.disableNodes(nonSearchList);
     };
     EventBase.prototype.getTreeData = function (isInclude, members, filterItems) {
+        this.parent.currentTreeItems = [];
+        this.parent.currentTreeItemsPos = {};
+        this.parent.savedTreeFilterPos = {};
         var list = [];
-        for (var _i = 0, members_1 = members; _i < members_1.length; _i++) {
-            var member = members_1[_i];
+        var memberCount = 1;
+        var filterObj = {};
+        for (var _i = 0, filterItems_1 = filterItems; _i < filterItems_1.length; _i++) {
+            var item = filterItems_1[_i];
+            filterObj[item] = item;
+        }
+        for (var _a = 0, members_1 = members; _a < members_1.length; _a++) {
+            var member = members_1[_a];
             var obj = {
@@ -137,7 +198,16 @@ id: member.formattedText,
             };
-            if (filterItems && filterItems.indexOf(member.formattedText) >= 0) {
+            if (filterObj[member.formattedText] !== undefined) {
                 obj.checkedStatus = isInclude ? true : false;
             }
-            list.push(obj);
+            if (memberCount <= this.parent.control.maxNodeLimitInMemberEditor) {
+                list.push(obj);
+            }
+            if (!obj.checkedStatus) {
+                this.parent.savedTreeFilterPos[memberCount - 1] = member.formattedText;
+            }
+            this.parent.currentTreeItems.push(obj);
+            this.parent.currentTreeItemsPos[member.formattedText] = memberCount - 1;
+            memberCount++;
         }
+        this.parent.isDataOverflow = (memberCount > this.parent.control.maxNodeLimitInMemberEditor);
         return list;
@@ -144,0 +214,0 @@ };

src/common/actions/field-list.js

@@ -39,2 +39,3 @@ import * as events from '../../common/base/constant';
             },
+            allowDeferLayoutUpdate: this.parent.allowDeferLayoutUpdate,
             renderMode: 'Popup',
@@ -56,7 +57,8 @@ allowCalculatedField: this.parent.allowCalculatedField,
                     if (_this.parent.grid && _this.parent.grid.element) {
+                        var actWidth = _this.parent.grid.element.offsetWidth < 400 ? 400 : _this.parent.grid.element.offsetWidth;
                         setStyleAttribute(_this.element.querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS), {
                             left: formatUnit(_this.parent.enableRtl ?
-                                -Math.abs((_this.parent.isAdaptive ? 500 : _this.parent.grid.element.offsetWidth) -
+                                -Math.abs((actWidth) -
                                     _this.element.querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS).offsetWidth) :
-                                (_this.parent.isAdaptive ? 500 : _this.parent.grid.element.offsetWidth) -
+                                (actWidth) -
                                     _this.element.querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS).offsetWidth)
@@ -63,0 +65,0 @@ });

src/common/actions/keyboard.d.ts

@@ -15,2 +15,3 @@ import { PivotCommon } from '../base/pivot-common';
     private keyActionHandler;
+    private processOpenContextMenu;
     private processSort;
@@ -17,0 +18,0 @@ private processFilter;

src/common/actions/keyboard.js

@@ -15,3 +15,4 @@ import { KeyboardEvents, closest } from '@syncfusion/ej2-base';
             shiftS: 'shift+S',
-            delete: 'delete'
+            delete: 'delete',
+            enter: 'enter'
         };
@@ -37,4 +38,16 @@ this.parent = parent;
                 break;
+            case 'enter':
+                this.processOpenContextMenu(e);
+                break;
         }
     };
+    CommonKeyboardInteraction.prototype.processOpenContextMenu = function (e) {
+        var target = e.target;
+        if (target && closest(target, '.' + cls.PIVOT_BUTTON_CLASS) &&
+            closest(target, '.' + cls.VALUE_AXIS_CLASS)) {
+            target.querySelector('.' + cls.AXISFIELD_ICON_CLASS).click();
+            e.preventDefault();
+            return;
+        }
+    };
     CommonKeyboardInteraction.prototype.processSort = function (e) {
@@ -41,0 +54,0 @@ var target = e.target;

src/common/actions/node-state-modified.js

@@ -52,2 +52,5 @@ import { isNullOrUndefined, closest } from '@syncfusion/ej2-base';
         }
+        else if (this.parent.engineModule.fieldList[fieldName]) {
+            this.parent.engineModule.fieldList[fieldName].isSelected = false;
+        }
         this.parent.dataSourceUpdate.updateDataSource(fieldName, droppedClass, droppedPosition);
@@ -54,0 +57,0 @@ return nodeDropped;

src/common/actions/pivot-button.d.ts

 import { PivotView } from '../../pivotview/base/pivotview';
 import { PivotFieldList } from '../../pivotfieldlist/base/field-list';
 import { IAction } from '../../common/base/interface';
+import { AggregateMenu } from '../popups/aggregate-menu';
 /**
@@ -15,5 +16,10 @@ * Module to render Pivot button
     private handlers;
+    menuOption: AggregateMenu;
     /** Constructor for render module */
     constructor(parent: PivotView | PivotFieldList);
     private renderPivotButton;
+    private createButtonText;
+    private getTypeStatus;
+    private createSummaryType;
+    private createMenuOption;
     private createDraggable;
@@ -29,2 +35,3 @@ private createButtonDragIcon;
     private updateSorting;
+    private updateDataSource;
     private updateFiltering;
@@ -37,2 +44,3 @@ private bindDialogEvents;
     private nodeStateModified;
+    private checkedStateAll;
     private updateFilterState;
@@ -39,0 +47,0 @@ private refreshPivotButtonState;

src/common/actions/pivot-button.js

@@ -7,2 +7,3 @@ import { createElement, Draggable, remove, extend } from '@syncfusion/ej2-base';
 import { Button } from '@syncfusion/ej2-buttons';
+import { AggregateMenu } from '../popups/aggregate-menu';
 /**
@@ -16,2 +17,3 @@ * Module to render Pivot button
         this.parent = parent;
+        this.menuOption = new AggregateMenu(this.parent);
         this.parent.pivotButtonModule = this;
@@ -82,3 +84,7 @@ this.addEventListener();
                             'data-uid': field[i].name, 'tabindex': '0', 'isvalue': i === valuePos ? 'true' : 'false',
-                            'aria-disabled': 'false', 'aria-label': field[i].caption ? field[i].caption : field[i].name
+                            'aria-disabled': 'false', 'aria-label': field[i].caption ? field[i].caption : field[i].name,
+                            'data-type': field[i].type,
+                            'data-caption': field[i].caption ? field[i].caption : field[i].name,
+                            'data-basefield': field[i].baseField,
+                            'data-baseitem': field[i].baseItem
                         }
@@ -95,10 +101,3 @@ });
                     var dragWrapper = this.createButtonDragIcon(buttonElement);
-                    var contentElement = createElement('span', {
-                        attrs: {
-                            'tabindex': '-1', 'aria-disabled': 'false', 'oncontextmenu': 'return false;',
-                            'data-type': valuePos === i ? '' : this.parent.engineModule.fieldList[field[i].name].aggregateType
-                        },
-                        className: cls.PIVOT_BUTTON_CONTENT_CLASS,
-                        innerHTML: field[i].caption ? field[i].caption : field[i].name
-                    });
+                    var contentElement = this.createButtonText(field, i, axis, valuePos);
                     buttonElement.appendChild(contentElement);
@@ -111,2 +110,5 @@ if (['filters', 'values'].indexOf(axis) === -1 && valuePos !== i) {
                     }
+                    if (axis === 'values') {
+                        this.getTypeStatus(field, i, buttonElement);
+                    }
                     var removeElement = createElement('span', {
@@ -144,2 +146,54 @@ attrs: { 'tabindex': '-1', 'aria-disabled': 'false' },
     };
+    PivotButton.prototype.createButtonText = function (field, i, axis, valuePos) {
+        var buttonText;
+        var aggregation;
+        if (this.parent.engineModule.fieldList[field[i].name] !== undefined) {
+            aggregation = this.parent.engineModule.fieldList[field[i].name].aggregateType;
+            if (aggregation === undefined && (this.parent.engineModule.fieldList[field[i].name].type === 'string' || this.parent.engineModule.fieldList[field[i].name].type === 'include' ||
+                this.parent.engineModule.fieldList[field[i].name].type === 'exclude')) {
+                aggregation = 'Count';
+            }
+            else if (aggregation === undefined) {
+                aggregation = this.parent.engineModule.fieldList[field[i].name].aggregateType !== undefined ?
+                    this.parent.engineModule.fieldList[field[i].name].aggregateType : 'Sum';
+            }
+        }
+        var text = field[i].caption ? field[i].caption : field[i].name;
+        buttonText = createElement('span', {
+            attrs: {
+                'tabindex': '-1', 'aria-disabled': 'false', 'oncontextmenu': 'return false;',
+                'data-type': valuePos === i ? '' : aggregation
+            },
+            className: cls.PIVOT_BUTTON_CONTENT_CLASS,
+            innerHTML: axis !== 'values' || aggregation === 'CalculatedField' ? text : this.parent.localeObj.getConstant(aggregation) + ' ' + 'of' + ' ' + text
+        });
+        return buttonText;
+    };
+    PivotButton.prototype.getTypeStatus = function (field, i, buttonElement) {
+        var fieldListItem = this.parent.engineModule.fieldList[field[i].name];
+        if (fieldListItem.aggregateType !== 'CalculatedField' &&
+            fieldListItem.type === 'number') {
+            this.createSummaryType(buttonElement, field[i].name);
+        }
+    };
+    PivotButton.prototype.createSummaryType = function (pivotButton, fieldName) {
+        var spanElement = createElement('span', {
+            attrs: { 'tabindex': '-1', 'aria-disabled': 'false' },
+            className: cls.ICON + ' ' + cls.AXISFIELD_ICON_CLASS
+        });
+        if (this.parent.getModuleName() === 'pivotview') {
+            if (this.parent.groupingBarSettings.showValueTypeIcon) {
+                removeClass([spanElement], cls.ICON_DISABLE);
+            }
+            else {
+                addClass([spanElement], cls.ICON_DISABLE);
+            }
+        }
+        pivotButton.appendChild(spanElement);
+        return spanElement;
+    };
+    PivotButton.prototype.createMenuOption = function (args) {
+        this.menuOption.render(args, this.parentElement);
+        this.parent.pivotButtonModule = this;
+    };
     PivotButton.prototype.createDraggable = function (target) {
@@ -171,3 +225,14 @@ this.draggable = new Draggable(target, {
     PivotButton.prototype.createSortOption = function (pivotButton, fieldName) {
-        var sortCLass = this.parent.engineModule.fieldList[fieldName].sort === 'Descending' ? cls.SORT_DESCEND_CLASS : '';
+        var sortCLass;
+        if (!this.parent.allowDeferLayoutUpdate) {
+            sortCLass = this.parent.engineModule.fieldList[fieldName].sort === 'Descending' ? cls.SORT_DESCEND_CLASS : '';
+        }
+        else {
+            sortCLass = '';
+            for (var i = 0; i < this.parent.dataSource.sortSettings.length; i++) {
+                if (this.parent.dataSource.sortSettings[i].name === fieldName) {
+                    sortCLass = this.parent.dataSource.sortSettings[i].order === 'Descending' ? cls.SORT_DESCEND_CLASS : '';
+                }
+            }
+        }
         var spanElement = createElement('span', {
@@ -195,4 +260,15 @@ attrs: { 'tabindex': '-1', 'aria-disabled': 'false' },
     PivotButton.prototype.createFilterOption = function (pivotButton, fieldName) {
-        var filterCLass = this.parent.engineModule.fieldList[fieldName].filter.length === 0 ?
-            !this.parent.engineModule.fieldList[fieldName].isExcelFilter ? cls.FILTER_CLASS : cls.FILTERED_CLASS : cls.FILTERED_CLASS;
+        var filterCLass;
+        if (!this.parent.allowDeferLayoutUpdate) {
+            filterCLass = this.parent.engineModule.fieldList[fieldName].filter.length === 0 ?
+                !this.parent.engineModule.fieldList[fieldName].isExcelFilter ? cls.FILTER_CLASS : cls.FILTERED_CLASS : cls.FILTERED_CLASS;
+        }
+        else {
+            filterCLass = cls.FILTER_CLASS;
+            for (var i = 0; i < this.parent.dataSource.filterSettings.length; i++) {
+                if (this.parent.dataSource.filterSettings[i].name === fieldName) {
+                    filterCLass = cls.FILTERED_CLASS;
+                }
+            }
+        }
         var spanElement = createElement('span', {
@@ -273,2 +349,3 @@ attrs: {
         }
+        document.body.style.cursor = 'auto';
         if (!this.isButtonDropped(args.target, element)) {
@@ -280,3 +357,3 @@ return;
         if (this.parent.pivotCommon.nodeStateModified.onStateModified(args, element.id)) {
-            this.parent.updateDataSource();
+            this.updateDataSource();
             this.parent.axisFieldModule.render();
@@ -320,4 +397,20 @@ }
         this.parent.pivotCommon.eventBase.updateSorting(args);
-        this.parent.updateDataSource(true);
+        this.updateDataSource(true);
     };
+    PivotButton.prototype.updateDataSource = function (isRefreshGrid) {
+        if (!this.parent.allowDeferLayoutUpdate || this.parent.getModuleName() === 'pivotview') {
+            this.parent.updateDataSource(isRefreshGrid);
+        }
+        else {
+            if (this.parent.getModuleName() === 'pivotfieldlist' && this.parent.renderMode === 'Popup') {
+                this.parent.pivotGridModule.engineModule = this.parent.engineModule;
+                this.parent.pivotGridModule.notify(events.uiUpdate, this);
+                this.parent.
+                    pivotGridModule.setProperties({ dataSource: this.parent.dataSource.properties }, true);
+            }
+            else {
+                this.parent.triggerPopulateEvent();
+            }
+        }
+    };
     PivotButton.prototype.updateFiltering = function (args) {
@@ -387,5 +480,5 @@ this.parent.pivotCommon.eventBase.updateFiltering(args);
         }
-        this.dialogPopUp.hide();
+        this.dialogPopUp.close();
         this.refreshPivotButtonState(fieldName, true);
-        this.parent.updateDataSource(true);
+        this.updateDataSource(true);
     };
@@ -395,6 +488,6 @@ PivotButton.prototype.ClearFilter = function (e) {
         var fieldName = dialogElement.getAttribute('data-fieldname');
-        this.dialogPopUp.hide();
+        this.dialogPopUp.close();
         this.removeDataSourceSettings(fieldName);
         this.refreshPivotButtonState(fieldName, false);
-        this.parent.updateDataSource(true);
+        this.updateDataSource(true);
     };
@@ -413,3 +506,3 @@ PivotButton.prototype.removeButton = function (args) {
         }
-        this.parent.updateDataSource();
+        this.updateDataSource();
     };
@@ -426,13 +519,37 @@ PivotButton.prototype.nodeStateModified = function (args) {
             }
+            this.checkedStateAll(args.action);
             this.memberTreeView.nodeChecked = this.nodeStateModified.bind(this);
         }
+        else {
+            var pos = this.parent.pivotCommon.currentTreeItemsPos[args.data[0].id];
+            if (args.action === 'check') {
+                this.parent.pivotCommon.currentTreeItems[pos].checkedStatus = true;
+            }
+            else {
+                this.parent.pivotCommon.currentTreeItems[pos].checkedStatus = false;
+            }
+        }
         this.parent.pivotCommon.filterDialog.updateCheckedState();
     };
+    PivotButton.prototype.checkedStateAll = function (state) {
+        if (state === 'check') {
+            for (var _i = 0, _a = this.parent.pivotCommon.currentTreeItems; _i < _a.length; _i++) {
+                var item = _a[_i];
+                item.checkedStatus = true;
+            }
+        }
+        else {
+            for (var _b = 0, _c = this.parent.pivotCommon.currentTreeItems; _b < _c.length; _b++) {
+                var item = _c[_b];
+                item.checkedStatus = false;
+            }
+        }
+    };
     PivotButton.prototype.updateFilterState = function (fieldName, args) {
-        var list = [].slice.call(this.memberTreeView.element.querySelectorAll('li'));
         var unCheckedNodeCount = 0;
         var filterItem = { items: [], name: fieldName, type: 'Include' };
-        for (var i = 0, cnt = list.length; i < cnt; i++) {
-            if (list[i].querySelector('.' + cls.CHECK_BOX_FRAME_CLASS).classList.contains(cls.NODE_CHECK_CLASS)) {
-                filterItem.items.push(list[i].getAttribute('data-uid'));
+        for (var _i = 0, _a = this.parent.pivotCommon.currentTreeItems; _i < _a.length; _i++) {
+            var item = _a[_i];
+            if (item.checkedStatus) {
+                filterItem.items.push(item.id);
             }
@@ -445,6 +562,9 @@ else {
         if (filterObject) {
-            filterObject = filterObject.properties ?
-                filterObject.properties : filterObject;
-            filterObject.items = filterItem.items;
-            filterObject.type = filterItem.type;
+            for (var i = 0; i < this.parent.dataSource.filterSettings.length; i++) {
+                if (this.parent.dataSource.filterSettings[i].name === fieldName) {
+                    this.parent.dataSource.filterSettings.splice(i, 1);
+                    break;
+                }
+            }
+            this.parent.dataSource.filterSettings.push(filterItem);
         }
@@ -454,3 +574,3 @@ else {
         }
-        this.dialogPopUp.hide();
+        this.dialogPopUp.close();
         this.refreshPivotButtonState(fieldName, (unCheckedNodeCount > 0) ? true : false);
@@ -460,3 +580,3 @@ if (unCheckedNodeCount === 0) {
         }
-        this.parent.updateDataSource(true);
+        this.updateDataSource(true);
     };
@@ -507,2 +627,5 @@ PivotButton.prototype.refreshPivotButtonState = function (fieldName, isFiltered) {
         }
+        if (axis === 'values' && element.querySelector('.' + cls.AXISFIELD_ICON_CLASS) !== null) {
+            EventHandler.add(element.querySelector('.' + cls.AXISFIELD_ICON_CLASS), 'click', this.createMenuOption, this);
+        }
         EventHandler.add(element.querySelector('.' + cls.REMOVE_CLASS), 'click', this.removeButton, this);
@@ -518,2 +641,5 @@ };
         }
+        if (axis === 'values' && element.querySelector('.' + cls.AXISFIELD_ICON_CLASS) !== null) {
+            EventHandler.remove(element.querySelector('.' + cls.AXISFIELD_ICON_CLASS), 'click', this.createMenuOption);
+        }
         EventHandler.remove(element.querySelector('.' + cls.REMOVE_CLASS), 'click', this.removeButton);
@@ -548,2 +674,3 @@ };
     PivotButton.prototype.destroy = function () {
+        this.menuOption.destroy();
         this.removeEventListener();
@@ -550,0 +677,0 @@ };

src/common/base/constant.d.ts

@@ -34,2 +34,4 @@ /**
 /** @hidden */
+export declare const hyperlinkCellClick: string;
+/** @hidden */
 export declare const resizing: string;
@@ -40,2 +42,16 @@ /** @hidden */
 export declare const cellClick: string;
+/** @hidden */
+export declare const drillThrough: string;
+/** @hidden */
+export declare const beforeColumnsRender: string;
+/** @hidden */
+export declare const selected: string;
+/** @hidden */
+export declare const cellSelected: string;
+/** @hidden */
+export declare const cellDeselected: string;
+/** @hidden */
+export declare const rowSelected: string;
+/** @hidden */
+export declare const rowDeselected: string;
 /**
@@ -42,0 +58,0 @@ * Specifies pivot internal events

src/common/base/constant.js

@@ -34,2 +34,4 @@ /**
 /** @hidden */
+export var hyperlinkCellClick = 'hyperlinkCellClick';
+/** @hidden */
 export var resizing = 'resizing';
@@ -40,2 +42,16 @@ /** @hidden */
 export var cellClick = 'cellClick';
+/** @hidden */
+export var drillThrough = 'drillThrough';
+/** @hidden */
+export var beforeColumnsRender = 'beforeColumnsRender';
+/** @hidden */
+export var selected = 'selected';
+/** @hidden */
+export var cellSelected = 'cellSelected';
+/** @hidden */
+export var cellDeselected = 'cellDeselected';
+/** @hidden */
+export var rowSelected = 'rowSelected';
+/** @hidden */
+export var rowDeselected = 'rowDeselected';
 /**
@@ -42,0 +58,0 @@ * Specifies pivot internal events

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

@@ -18,2 +18,3 @@ /**
 /** @hidden */
+export declare const AXISFIELD_ICON_CLASS: string;
 export declare const WRAPPER_CLASS: string;
@@ -93,2 +94,20 @@ /** @hidden */
 /** @hidden */
+export declare const DRILLTHROUGH_GRID_CLASS: string;
+/** @hidden */
+export declare const DRILLTHROUGH_BODY_CLASS: string;
+/** @hidden */
+export declare const DRILLTHROUGH_BODY_HEADER_CONTAINER_CLASS: string;
+/** @hidden */
+export declare const DRILLTHROUGH_BODY_HEADER_CLASS: string;
+/** @hidden */
+export declare const DRILLTHROUGH_BODY_HEADER_COMMON_CLASS: string;
+/** @hidden */
+export declare const DRILLTHROUGH_BODY_HEADER_VALUE_CLASS: string;
+/** @hidden */
+export declare const DRILLTHROUGH_DIALOG: string;
+/** @hidden */
+export declare const EDITOR_LABEL_WRAPPER_CLASS: string;
+/** @hidden */
+export declare const EDITOR_LABEL_CLASS: string;
+/** @hidden */
 export declare const CHECK_BOX_FRAME_CLASS: string;
@@ -387,1 +406,19 @@ /** @hidden */
 export declare const FROZENHEADER_DIV: string;
+/** @hidden */
+export declare const DEFER_APPLY_BUTTON: string;
+/** @hidden */
+export declare const DEFER_CANCEL_BUTTON: string;
+/** @hidden */
+export declare const LAYOUT_FOOTER: string;
+/** @hidden */
+export declare const CELL_SELECTED_BGCOLOR: string;
+/** @hidden */
+export declare const SELECTED_BGCOLOR: string;
+/** @hidden */
+export declare const BUTTON_LAYOUT: string;
+/** @hidden */
+export declare const CHECKBOX_LAYOUT: string;
+/** @hidden */
+export declare const DEFER_UPDATE_BUTTON: string;
+/** @hidden */
+export declare const HEADERCONTENT: string;

src/common/base/css-constant.js

@@ -18,2 +18,3 @@ /**
 /** @hidden */
+export var AXISFIELD_ICON_CLASS = 'e-dropdown-icon';
 export var WRAPPER_CLASS = 'e-pivotfieldlist-wrapper';
@@ -93,2 +94,20 @@ /** @hidden */
 /** @hidden */
+export var DRILLTHROUGH_GRID_CLASS = 'e-drillthrough-grid';
+/** @hidden */
+export var DRILLTHROUGH_BODY_CLASS = 'e-drillthrough-body';
+/** @hidden */
+export var DRILLTHROUGH_BODY_HEADER_CONTAINER_CLASS = 'e-drillthrough-body-header-container';
+/** @hidden */
+export var DRILLTHROUGH_BODY_HEADER_CLASS = 'e-drillthrough-body-header';
+/** @hidden */
+export var DRILLTHROUGH_BODY_HEADER_COMMON_CLASS = 'e-drillthrough-body-header-common';
+/** @hidden */
+export var DRILLTHROUGH_BODY_HEADER_VALUE_CLASS = 'e-drillthrough-body-header-value';
+/** @hidden */
+export var DRILLTHROUGH_DIALOG = 'e-drillthrough-dialog';
+/** @hidden */
+export var EDITOR_LABEL_WRAPPER_CLASS = 'e-editor-label-wrapper';
+/** @hidden */
+export var EDITOR_LABEL_CLASS = 'e-editor-label';
+/** @hidden */
 export var CHECK_BOX_FRAME_CLASS = 'e-frame';
@@ -387,1 +406,19 @@ /** @hidden */
 export var FROZENHEADER_DIV = 'e-frozenheader';
+/** @hidden */
+export var DEFER_APPLY_BUTTON = 'e-defer-apply-button';
+/** @hidden */
+export var DEFER_CANCEL_BUTTON = 'e-defer-cancel-button';
+/** @hidden */
+export var LAYOUT_FOOTER = 'e-layout-footer';
+/** @hidden */
+export var CELL_SELECTED_BGCOLOR = 'e-cellselectionbackground';
+/** @hidden */
+export var SELECTED_BGCOLOR = 'e-selectionbackground';
+/** @hidden */
+export var BUTTON_LAYOUT = 'e-button-layout';
+/** @hidden */
+export var CHECKBOX_LAYOUT = 'e-checkbox-layout';
+/** @hidden */
+export var DEFER_UPDATE_BUTTON = 'e-defer-update-btn';
+/** @hidden */
+export var HEADERCONTENT = 'e-headercontent';

src/common/base/enum.d.ts

@@ -14,1 +14,8 @@ /**
 'Popup';
+export declare type EditMode = 
+/**  Defines EditMode as Normal */
+'Normal' | 
+/**  Defines EditMode as Dialog */
+'Dialog' | 
+/**  Defines EditMode as Batch */
+'Batch';

src/common/base/interface.d.ts

@@ -1,2 +0,2 @@
-import { IPivotValues, IDataOptions, PivotEngine, IFieldListOptions, IFieldOptions, IAxisSet } from '../../base/engine';
+import { IPivotValues, IDataOptions, PivotEngine, IFieldListOptions, IFieldOptions, IAxisSet, IDataSet } from '../../base/engine';
 import { Mode } from '../base/enum';
@@ -44,2 +44,37 @@ import { L10n } from '@syncfusion/ej2-base';
 }
+export interface HyperCellClickEventArgs {
+    currentCell: Element;
+    data: Object;
+    cancel: boolean;
+}
+export interface DrillThroughEventArgs {
+    currentTarget: Element;
+    currentCell: IAxisSet;
+    rawData: IDataSet[];
+    rowHeaders: string;
+    columnHeaders: string;
+    value: string;
+}
+export interface CellSelectedObject {
+    currentCell: IAxisSet;
+    value: number | string;
+    rowHeaders: string | number | Date;
+    columnHeaders: string | number | Date;
+    measure: string;
+}
+export interface PivotCellSelectedEventArgs {
+    /** Defines the selected cells objects. */
+    selectedCellsInfo?: CellSelectedObject[];
+    pivotValues?: IPivotValues;
+}
+export interface PivotColumn {
+    allowReordering: boolean;
+    allowResizing: boolean;
+    headerText: string;
+    width: string | number;
+}
+export interface BeforeColumnRenderEventArgs {
+    columns: PivotColumn[];
+    dataSource: IDataOptions;
+}
 /**
@@ -46,0 +81,0 @@ * @hidden

src/common/base/pivot-common.d.ts

@@ -11,2 +11,4 @@ import { Internationalization, L10n } from '@syncfusion/ej2-base';
 import { FilterDialog } from '../popups/filter-dialog';
+import { PivotView } from '../../pivotview';
+import { PivotFieldList } from '../../pivotfieldlist';
 /**
@@ -39,2 +41,20 @@ * PivotCommon is used to manipulate the relational or Multi-Dimensional public methods by using their dataSource
     /** @hidden */
+    control: PivotView | PivotFieldList;
+    /** @hidden */
+    currentTreeItems: {
+        [key: string]: Object;
+    }[];
+    /** @hidden */
+    savedTreeFilterPos: {
+        [key: number]: string;
+    };
+    /** @hidden */
+    currentTreeItemsPos: {
+        [key: string]: number;
+    };
+    /** @hidden */
+    editorLabelElement: HTMLLabelElement;
+    /** @hidden */
+    isDataOverflow: boolean;
+    /** @hidden */
     nodeStateModified: NodeStateModified;
@@ -41,0 +61,0 @@ /** @hidden */

src/common/base/pivot-common.js

@@ -21,2 +21,10 @@ import { CommonKeyboardInteraction } from '../actions/keyboard';
     function PivotCommon(control) {
+        /** @hidden */
+        this.currentTreeItems = [];
+        /** @hidden */
+        this.savedTreeFilterPos = {};
+        /** @hidden */
+        this.currentTreeItemsPos = {};
+        /** @hidden */
+        this.isDataOverflow = false;
         this.element = control.element;
@@ -23,0 +31,0 @@ this.moduleName = control.moduleName;

src/common/calculatedfield/calculated-field.js

@@ -19,2 +19,8 @@ import { Dialog } from '@syncfusion/ej2-popups';
 var SUM = 'Sum';
+var DISTINCTCOUNT = 'DistinctCount';
+var PRODUCT = 'Product';
+var STDEV = 'SampleStDev';
+var STDEVP = 'Popultion StDev';
+var VAR = 'SampleVar';
+var VARP = 'PopulationVar';
 var CALC = 'CalculatedField';
@@ -164,17 +170,13 @@ var AGRTYPE = 'AggregateType';
         var menuItems = [
-            {
-                text: COUNT,
-            },
-            {
-                text: AVG
-            },
-            {
-                text: MIN
-            },
-            {
-                text: MAX
-            },
-            {
-                text: SUM
-            }
+            { text: COUNT, },
+            { text: AVG },
+            { text: MIN },
+            { text: MAX },
+            { text: SUM },
+            { text: DISTINCTCOUNT, },
+            { text: PRODUCT },
+            { text: STDEV },
+            { text: STDEVP },
+            { text: VAR },
+            { text: VARP }
         ];
@@ -273,2 +275,5 @@ var menuOptions = {
             this.parent.setProperties({ dataSource: report }, true);
+            if (this.parent.getModuleName() === 'pivotfieldlist' && this.parent.allowDeferLayoutUpdate) {
+                this.parent.isRequiredUpdate = false;
+            }
             this.parent.updateDataSource(false);
@@ -587,3 +592,3 @@ this.isEdit = false;
         var wrapDiv = createElement('div', { id: this.parentID + 'control_wrapper', className: cls.TREEVIEWOUTER });
-        var type = [SUM, COUNT, AVG, MIN, MAX];
+        var type = [SUM, COUNT, AVG, MIN, MAX, DISTINCTCOUNT, PRODUCT, STDEV, STDEVP, VAR, VARP];
         for (var i = 0; i < 5; i++) {
@@ -663,3 +668,3 @@ var input = createElement('input', {
                         Object.keys(_this.parent.engineModule.fieldList).forEach(function (key) {
-                            var type = [SUM, COUNT, AVG, MIN, MAX];
+                            var type = [SUM, COUNT, AVG, MIN, MAX, DISTINCTCOUNT, PRODUCT, STDEV, STDEVP, VAR, VARP];
                             var radiobutton;
@@ -666,0 +671,0 @@ if (key === args.element.querySelector('[data-field').getAttribute('data-field')) {

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

@@ -76,3 +76,10 @@ import { createElement, prepend, remove, Droppable, setStyleAttribute, removeClass } from '@syncfusion/ej2-base';
         }
-        var colGroupElement = this.parent.element.querySelector('.e-frozenheader').querySelector('colgroup').children[0];
+        if (this.parent.isAdaptive) {
+            this.leftAxisPanel.style.minWidth = '180px';
+            this.valuePanel.style.minWidth = '180px';
+        }
+        if (this.parent.firstColWidth) {
+            this.leftAxisPanel.style.minWidth = 'auto';
+            this.valuePanel.style.minWidth = 'auto';
+        }
         this.filterPanel.removeAttribute('style');
@@ -93,5 +100,7 @@ this.columnPanel.removeAttribute('style');
         prepend([this.groupingTable], this.parent.element);
-        setStyleAttribute(this.groupingTable, { width: formatUnit(this.parent.isAdaptive ? 500 : this.parent.grid.width) });
+        setStyleAttribute(this.groupingTable, { width: formatUnit(this.parent.grid.width) });
+        this.groupingTable.style.minWidth = '400px';
         this.parent.axisFieldModule.render();
         this.setGridRowWidth();
+        var colGroupElement = this.parent.element.querySelector('.e-frozenheader').querySelector('colgroup').children[0];
         var rightAxisPanelWidth = formatUnit(this.groupingTable.offsetWidth - parseInt(colGroupElement.style.width, 10));
@@ -109,4 +118,6 @@ setStyleAttribute(this.valuePanel, { width: colGroupElement.style.width });
         });
-        this.parent.element.querySelector('.e-frozenheader').querySelector('.e-rhandler').style.height =
-            topLeftHeight + 'px';
+        if (this.parent.element.querySelector('.e-frozenheader').querySelector('.e-rhandler')) {
+            this.parent.element.querySelector('.e-frozenheader').querySelector('.e-rhandler').style.height =
+                topLeftHeight + 'px';
+        }
         var colRows = [].slice.call(this.parent.element.querySelector('.e-movableheader').querySelector('thead').querySelectorAll('tr'));
@@ -132,3 +143,4 @@ var columnRows = colRows.filter(function (trCell) {
         var _this = this;
-        setStyleAttribute(this.groupingTable, { width: formatUnit(this.parent.isAdaptive ? 500 : this.parent.grid.width) });
+        setStyleAttribute(this.groupingTable, { width: formatUnit(this.parent.grid.width) });
+        this.groupingTable.style.minWidth = '400px';
         var colGroupElement = this.parent.element.querySelector('.e-frozenheader').querySelector('colgroup').children[0];
@@ -142,7 +154,8 @@ var rightAxisWidth = formatUnit(this.groupingTable.offsetWidth - parseInt(colGroupElement.style.width, 10));
             this.timeOutObj = setTimeout(function () {
+                var actWidth = _this.parent.grid.element.offsetWidth < 400 ? 400 : _this.parent.grid.element.offsetWidth;
                 setStyleAttribute(element_1.querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS), {
                     left: formatUnit(_this.parent.enableRtl ?
-                        -Math.abs((_this.parent.isAdaptive ? 500 : _this.parent.grid.element.offsetWidth) -
+                        -Math.abs((actWidth) -
                             element_1.querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS).offsetWidth) :
-                        (_this.parent.isAdaptive ? 500 : _this.parent.grid.element.offsetWidth) -
+                        (actWidth) -
                             element_1.querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS).offsetWidth)
@@ -167,4 +180,6 @@ });
             });
-            this.parent.element.querySelector('.e-frozenheader').querySelector('.e-rhandler').style.height =
-                groupHeight + 'px';
+            if (this.parent.element.querySelector('.e-frozenheader').querySelector('.e-rhandler')) {
+                this.parent.element.querySelector('.e-frozenheader').querySelector('.e-rhandler').style.height =
+                    groupHeight + 'px';
+            }
             var colRowElements = [].slice.call(this.parent.element.querySelector('.e-movableheader').querySelector('thead').querySelectorAll('tr'));
@@ -191,35 +206,51 @@ var columnRows = colRowElements.filter(function (trCell) {
         var colGroupElement = this.parent.element.querySelector('.e-frozenheader').querySelector('colgroup').children[0];
-        if (this.rowPanel.querySelector('.' + cls.PIVOT_BUTTON_CLASS) && !this.parent.isAdaptive) {
-            var pivotButtons = [].slice.call(this.rowPanel.querySelectorAll('.' + cls.PIVOT_BUTTON_WRAPPER_CLASS));
-            var lastButton = pivotButtons[pivotButtons.length - 1];
-            var lastButtonWidth = (lastButton.querySelector('.' + cls.PIVOT_BUTTON_CLASS).offsetWidth +
-                lastButton.querySelector('.e-indent-div').offsetWidth + 20);
-            var buttonWidth = formatUnit(lastButtonWidth < 250 ? 250 : lastButtonWidth);
-            var rowHeaderTable = this.parent.element.querySelector('.e-frozenheader').querySelector('table');
-            var rowContentTable = this.parent.element.querySelector('.e-frozencontent').querySelector('table');
-            var rowContent = this.parent.element.querySelector('.e-frozencontent').querySelector('colgroup').children[0];
-            var colwidth = parseInt(buttonWidth, 10);
-            var gridColumn = this.parent.grid.columns;
-            if (gridColumn && gridColumn.length > 0) {
-                gridColumn[0].width = (gridColumn[0].width >= 250 ? (colwidth > 250 ? colwidth : 250) : (colwidth > 250 ? colwidth : 250));
-            }
-            var valueColWidth = this.parent.renderModule.calculateColWidth(this.parent.dataSource.values.length > 0 ?
-                this.parent.engineModule.pivotValues[0].length : 2);
-            for (var cCnt = 0; cCnt < gridColumn.length; cCnt++) {
-                if (cCnt !== 0) {
-                    if (gridColumn[cCnt].columns) {
-                        this.setColWidth(gridColumn[cCnt].columns, valueColWidth);
+        if (this.rowPanel.querySelector('.' + cls.PIVOT_BUTTON_CLASS)) {
+            if (!this.parent.isAdaptive) {
+                var pivotButtons = [].slice.call(this.rowPanel.querySelectorAll('.' + cls.PIVOT_BUTTON_WRAPPER_CLASS));
+                var lastButton = pivotButtons[pivotButtons.length - 1];
+                var lastButtonWidth = (lastButton.querySelector('.' + cls.PIVOT_BUTTON_CLASS).offsetWidth +
+                    lastButton.querySelector('.e-indent-div').offsetWidth + 20);
+                var resColWidth = (this.parent.isAdaptive ? 180 : 250);
+                var buttonWidth = formatUnit(lastButtonWidth < resColWidth ? resColWidth : lastButtonWidth);
+                var rowHeaderTable = this.parent.element.querySelector('.e-frozenheader').querySelector('table');
+                var rowContentTable = this.parent.element.querySelector('.e-frozencontent').querySelector('table');
+                var rowContent = this.parent.element.querySelector('.e-frozencontent').querySelector('colgroup').children[0];
+                var colwidth = parseInt(buttonWidth, 10);
+                var gridColumn = this.parent.grid.columns;
+                if (gridColumn && gridColumn.length > 0) {
+                    /* tslint:disable:align */
+                    gridColumn[0].width = (gridColumn[0].width >= resColWidth ?
+                        (colwidth > resColWidth ? colwidth : resColWidth) : (colwidth > resColWidth ? colwidth : resColWidth));
+                }
+                var valueColWidth = this.parent.renderModule.calculateColWidth(this.parent.dataSource.values.length > 0 ?
+                    this.parent.engineModule.pivotValues[0].length : 2);
+                for (var cCnt = 0; cCnt < gridColumn.length; cCnt++) {
+                    if (cCnt !== 0) {
+                        if (gridColumn[cCnt].columns) {
+                            this.setColWidth(gridColumn[cCnt].columns, valueColWidth);
+                        }
+                        else {
+                            gridColumn[cCnt].width = valueColWidth;
+                        }
                     }
-                    else {
-                        gridColumn[cCnt].width = valueColWidth;
-                    }
                 }
+                this.parent.posCount = 0;
+                this.parent.setGridColumns(this.parent.grid.columns);
+                this.parent.grid.headerModule.refreshUI();
+                if (!this.parent.firstColWidth) {
+                    colGroupElement.style.width = buttonWidth;
+                    rowContent.style.width = buttonWidth;
+                    rowHeaderTable.style.width = buttonWidth;
+                    rowContentTable.style.width = buttonWidth;
+                    setStyleAttribute(rowHeaderTable, { 'width': buttonWidth });
+                    setStyleAttribute(rowContentTable, { 'width': buttonWidth });
+                }
             }
-            this.parent.grid.headerModule.refreshUI();
-            colGroupElement.style.width = buttonWidth;
-            rowContent.style.width = buttonWidth;
-            rowHeaderTable.style.width = buttonWidth;
-            rowContentTable.style.width = buttonWidth;
-            setStyleAttribute(rowHeaderTable, { 'width': buttonWidth });
-            setStyleAttribute(rowContentTable, { 'width': buttonWidth });
+            else {
+                var pivotButtons = [].slice.call(this.rowPanel.querySelectorAll('.' + cls.PIVOT_BUTTON_WRAPPER_CLASS));
+                for (var _i = 0, pivotButtons_1 = pivotButtons; _i < pivotButtons_1.length; _i++) {
+                    var btn = pivotButtons_1[_i];
+                    btn.style.width = '140px';
+                }
+            }
         }
@@ -226,0 +257,0 @@ this.refreshUI();

src/common/index.d.ts

@@ -19,1 +19,2 @@ /**
 export * from './popups/context-menu';
+export * from './popups/aggregate-menu';

src/common/index.js

@@ -17,1 +17,2 @@ /**
 export * from './popups/context-menu';
+export * from './popups/aggregate-menu';

src/common/popups/error-dialog.js

@@ -39,2 +39,3 @@ import { createElement, remove } from '@syncfusion/ej2-base';
             height: 'auto',
+            zIndex: 1000001,
             position: { X: 'center', Y: 'center' },
@@ -54,6 +55,11 @@ buttons: [
     ErrorDialog.prototype.closeErrorDialog = function () {
-        this.errorPopUp.hide();
+        this.errorPopUp.close();
     };
     ErrorDialog.prototype.removeErrorDialog = function () {
-        remove(document.getElementById(this.parent.parentID + '_ErrorDialog').parentElement);
+        if (this.errorPopUp && !this.errorPopUp.isDestroyed) {
+            this.errorPopUp.destroy();
+        }
+        if (document.getElementById(this.parent.parentID + '_ErrorDialog')) {
+            remove(document.getElementById(this.parent.parentID + '_ErrorDialog'));
+        }
     };
@@ -60,0 +66,0 @@ return ErrorDialog;

src/common/popups/filter-dialog.js

@@ -49,3 +49,4 @@ import { createElement, removeClass, addClass, remove, isNullOrUndefined, setStyleAttribute } from '@syncfusion/ej2-base';
             width: 'auto',
-            height: (this.allowExcelLikeFilter ? '400px' : '350px'),
+            height: this.parent.isDataOverflow ? (this.allowExcelLikeFilter ? '440px' : '400px') :
+                (this.allowExcelLikeFilter ? '400px' : '350px'),
             position: { X: 'center', Y: 'center' },
@@ -72,3 +73,9 @@ buttons: [
             target: target,
-            close: this.removeFilterDialog.bind(this)
+            close: this.removeFilterDialog.bind(this),
+            /* tslint:disable-next-line:typedef */
+            open: function (args) {
+                if (this.element.querySelector('.e-editor-label-wrapper')) {
+                    this.element.querySelector('.e-editor-label-wrapper').style.width = this.element.offsetWidth + 'px';
+                }
+            }
         });
@@ -103,2 +110,12 @@ this.dialogPopUp.appendTo(editorDialog);
         var editorSearch = createElement('input', { attrs: { 'type': 'text' } });
+        var labelWrapper = createElement('div', {
+            id: this.parent.parentID + '_LabelDiv', attrs: { 'tabindex': '-1' },
+            className: cls.EDITOR_LABEL_WRAPPER_CLASS
+        });
+        this.parent.editorLabelElement = createElement('label', { className: cls.EDITOR_LABEL_CLASS });
+        this.parent.editorLabelElement.innerText = this.parent.isDataOverflow ?
+            ((this.parent.currentTreeItems.length - this.parent.control.maxNodeLimitInMemberEditor) +
+                this.parent.control.localeObj.getConstant('editorDataLimitMsg')) : '';
+        labelWrapper.style.display = this.parent.isDataOverflow ? 'inline-block' : 'none';
+        labelWrapper.appendChild(this.parent.editorLabelElement);
         searchWrapper.appendChild(editorSearch);
@@ -124,7 +141,6 @@ var selectAllWrapper = createElement('div', {
             change: function (e) {
-                _this.parent.eventBase.searchTreeNodes(e, _this.memberTreeView);
+                _this.parent.eventBase.searchTreeNodes(e, _this.memberTreeView, false);
                 var filterDialog = _this.dialogPopUp.element;
                 var liList = [].slice.call(_this.memberTreeView.element.querySelectorAll('li'));
-                var disabledList = [].slice.call(_this.memberTreeView.element.querySelectorAll('.' + cls.ICON_DISABLE));
-                if (liList.length === disabledList.length) {
+                if (liList.length === 0) {
                     _this.allMemberSelect.disableNodes([_this.allMemberSelect.element.querySelector('li')]);
@@ -155,5 +171,6 @@ filterDialog.querySelector('.' + cls.OK_BUTTON_CLASS).setAttribute('disabled', 'disabled');
             enableRtl: this.parent.enableRtl,
-            nodeChecking: this.validateTreeNode.bind(this),
+            nodeChecking: this.validateTreeNode.bind(this)
         });
         this.memberTreeView.appendTo(treeViewContainer);
+        editorTreeWrapper.appendChild(labelWrapper);
         return editorTreeWrapper;
@@ -420,35 +437,37 @@ };
         var list = [].slice.call(this.memberTreeView.element.querySelectorAll('li'));
-        var visibleNodes = list.filter(function (node) {
-            return (!node.classList.contains(cls.ICON_DISABLE));
-        });
-        var uncheckedNodes = this.getUnCheckedNodes(visibleNodes);
-        var checkedNodes = this.getCheckedNodes(visibleNodes);
+        var uncheckedNodes = this.getUnCheckedNodes();
+        var checkedNodes = this.getCheckedNodes();
         var firstNode = this.allMemberSelect.element.querySelector('li').querySelector('span.' + cls.CHECK_BOX_FRAME_CLASS);
-        if (checkedNodes.length > 0) {
-            if (uncheckedNodes.length > 0) {
-                removeClass([firstNode], cls.NODE_CHECK_CLASS);
-                addClass([firstNode], cls.NODE_STOP_CLASS);
+        if (list.length > 0) {
+            if (checkedNodes.length > 0) {
+                if (uncheckedNodes.length > 0) {
+                    removeClass([firstNode], cls.NODE_CHECK_CLASS);
+                    addClass([firstNode], cls.NODE_STOP_CLASS);
+                }
+                else if (uncheckedNodes.length === 0) {
+                    removeClass([firstNode], cls.NODE_STOP_CLASS);
+                    addClass([firstNode], cls.NODE_CHECK_CLASS);
+                }
+                filterDialog.querySelector('.' + cls.OK_BUTTON_CLASS).removeAttribute('disabled');
             }
-            else if (uncheckedNodes.length === 0) {
-                removeClass([firstNode], cls.NODE_STOP_CLASS);
-                addClass([firstNode], cls.NODE_CHECK_CLASS);
+            else if (uncheckedNodes.length > 0 && checkedNodes.length === 0) {
+                removeClass([firstNode], [cls.NODE_CHECK_CLASS, cls.NODE_STOP_CLASS]);
+                if (this.getCheckedNodes().length === checkedNodes.length) {
+                    filterDialog.querySelector('.' + cls.OK_BUTTON_CLASS).setAttribute('disabled', 'disabled');
+                }
             }
-            filterDialog.querySelector('.' + cls.OK_BUTTON_CLASS).removeAttribute('disabled');
         }
-        else if (uncheckedNodes.length > 0 && checkedNodes.length === 0) {
-            removeClass([firstNode], [cls.NODE_CHECK_CLASS, cls.NODE_STOP_CLASS]);
-            if (this.getCheckedNodes(list).length === checkedNodes.length) {
-                filterDialog.querySelector('.' + cls.OK_BUTTON_CLASS).setAttribute('disabled', 'disabled');
-            }
+        else {
+            filterDialog.querySelector('.' + cls.OK_BUTTON_CLASS).setAttribute('disabled', 'disabled');
         }
     };
-    FilterDialog.prototype.getCheckedNodes = function (treeNodes) {
-        var checkeNodes = treeNodes.filter(function (node) {
-            return (node.querySelector('.' + cls.CHECK_BOX_FRAME_CLASS).classList.contains(cls.NODE_CHECK_CLASS));
+    FilterDialog.prototype.getCheckedNodes = function () {
+        var checkeNodes = this.parent.currentTreeItems.filter(function (item) {
+            return item.checkedStatus;
         });
         return checkeNodes;
     };
-    FilterDialog.prototype.getUnCheckedNodes = function (treeNodes) {
-        var unCheckeNodes = treeNodes.filter(function (node) {
-            return (!node.querySelector('.' + cls.CHECK_BOX_FRAME_CLASS).classList.contains(cls.NODE_CHECK_CLASS));
+    FilterDialog.prototype.getUnCheckedNodes = function () {
+        var unCheckeNodes = this.parent.currentTreeItems.filter(function (item) {
+            return !item.checkedStatus;
         });
@@ -488,3 +507,3 @@ return unCheckeNodes;
         }
-        this.dialogPopUp.hide();
+        this.dialogPopUp.close();
     };
@@ -491,0 +510,0 @@ FilterDialog.prototype.removeFilterDialog = function () {

src/pivotfieldlist/base/field-list-model.d.ts

@@ -1,2 +0,2 @@
-import { Property, Event, Component, EmitType, Internationalization, extend } from '@syncfusion/ej2-base';import { L10n, remove, addClass, Browser, Complex, ModuleDeclaration } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, removeClass } from '@syncfusion/ej2-base';import { PivotEngine, IFieldListOptions, IPageSettings } from '../../base/engine';import * as events from '../../common/base/constant';import * as cls from '../../common/base/css-constant';import { LoadEventArgs, EnginePopulatingEventArgs, EnginePopulatedEventArgs } from '../../common/base/interface';import { FieldDroppedEventArgs } from '../../common/base/interface';import { Mode } from '../../common/base/enum';import { PivotCommon } from '../../common/base/pivot-common';import { CommonArgs } from '../../common/base/interface';import { Render } from '../renderer/renderer';import { DialogRenderer } from '../renderer/dialog-renderer';import { TreeViewRenderer } from '../renderer/tree-renderer';import { AxisTableRenderer } from '../renderer/axis-table-renderer';import { AxisFieldRenderer } from '../renderer/axis-field-renderer';import { PivotButton } from '../../common/actions/pivot-button';import { PivotView } from '../../pivotview/base/pivotview';import { DataSourceModel, FieldOptionsModel } from '../../pivotview/model/dataSource-model';import { DataSource } from '../../pivotview/model/dataSource';import { CalculatedField } from '../../common/calculatedfield/calculated-field';import { PivotContextMenu } from '../../common/popups/context-menu';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
+import { Property, Event, Component, EmitType, Internationalization, extend } from '@syncfusion/ej2-base';import { L10n, remove, addClass, Browser, Complex, ModuleDeclaration } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, removeClass, isNullOrUndefined } from '@syncfusion/ej2-base';import { PivotEngine, IFieldListOptions, IPageSettings, IDataOptions } from '../../base/engine';import * as events from '../../common/base/constant';import * as cls from '../../common/base/css-constant';import { LoadEventArgs, EnginePopulatingEventArgs, EnginePopulatedEventArgs } from '../../common/base/interface';import { FieldDroppedEventArgs } from '../../common/base/interface';import { Mode } from '../../common/base/enum';import { PivotCommon } from '../../common/base/pivot-common';import { CommonArgs } from '../../common/base/interface';import { Render } from '../renderer/renderer';import { DialogRenderer } from '../renderer/dialog-renderer';import { TreeViewRenderer } from '../renderer/tree-renderer';import { AxisTableRenderer } from '../renderer/axis-table-renderer';import { AxisFieldRenderer } from '../renderer/axis-field-renderer';import { PivotButton } from '../../common/actions/pivot-button';import { PivotView } from '../../pivotview/base/pivotview';import { DataSourceModel, FieldOptionsModel } from '../../pivotview/model/dataSource-model';import { DataSource } from '../../pivotview/model/dataSource';import { CalculatedField } from '../../common/calculatedfield/calculated-field';import { PivotContextMenu } from '../../common/popups/context-menu';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -49,2 +49,14 @@
     /**
+     * If `allowDeferLayoutUpdate` is set to true, then it will enable defer layout update to pivotfieldlist.
+     * @default false
+     */
+    allowDeferLayoutUpdate?: boolean;
+
+    /**
+     * It allows to set the maximum number of nodes to be displayed in the member editor.
+     * @default 1000    
+     */
+    maxNodeLimitInMemberEditor?: number;
+
+    /**
      * This allows any customization of Pivot Field List properties before rendering.
@@ -51,0 +63,0 @@ * @event

src/pivotfieldlist/base/field-list.d.ts

@@ -45,2 +45,8 @@ import { Component, EmitType, Internationalization } from '@syncfusion/ej2-base';
     fieldListSpinnerElement: Element;
+    /** @hidden */
+    clonedDataSource: DataSourceModel;
+    /** @hidden */
+    clonedFieldList: IFieldListOptions;
+    /** @hidden */
+    isRequiredUpdate: boolean;
     private defaultLocale;
@@ -102,2 +108,12 @@ private captionData;
     /**
+     * If `allowDeferLayoutUpdate` is set to true, then it will enable defer layout update to pivotfieldlist.
+     * @default false
+     */
+    allowDeferLayoutUpdate: boolean;
+    /**
+     * It allows to set the maximum number of nodes to be displayed in the member editor.
+     * @default 1000
+     */
+    maxNodeLimitInMemberEditor: number;
+    /**
      * This allows any customization of Pivot Field List properties before rendering.
@@ -197,3 +213,3 @@ * @event
      */
-    updateDataSource(isTreeViewRefresh?: boolean): void;
+    updateDataSource(isTreeViewRefresh?: boolean, isEngineRefresh?: boolean): void;
     /**
@@ -214,2 +230,7 @@ * Updates the Pivot Field List component using dataSource from PivotView component.
     /**
+     * Called internally to trigger populate event.
+     * @hidden
+     */
+    triggerPopulateEvent(): void;
+    /**
      * Destroys the Field Table component.
@@ -216,0 +237,0 @@ * @method destroy

src/pivotfieldlist/base/field-list.js

@@ -22,3 +22,3 @@ var __extends = (this && this.__extends) || (function () {
 import { L10n, remove, addClass, Browser, Complex } from '@syncfusion/ej2-base';
-import { NotifyPropertyChanges, removeClass } from '@syncfusion/ej2-base';
+import { NotifyPropertyChanges, removeClass, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { PivotEngine } from '../../base/engine';
@@ -49,3 +49,6 @@ import * as events from '../../common/base/constant';
     function PivotFieldList(options, element) {
-        return _super.call(this, options, element) || this;
+        var _this = _super.call(this, options, element) || this;
+        /** @hidden */
+        _this.isRequiredUpdate = true;
+        return _this;
     }
@@ -153,4 +156,34 @@ /**
             And: 'and',
+            Sum: 'Sum',
+            Count: 'Count',
+            DistinctCount: 'Distinct Count',
+            Product: 'Product',
+            Avg: 'Avg',
+            Min: 'Min',
+            Max: 'Max',
+            Index: 'Index',
+            SampleStDev: 'Sample StDev',
+            PopulationStDev: 'Population StDev',
+            SampleVar: 'Sample Var',
+            PopulationVar: 'Population Var',
+            RunningTotals: 'Running Totals',
+            DifferenceFrom: 'Difference From',
+            PercentageOfDifferenceFrom: '% of Difference From',
+            PercentageOfGrandTotal: '% of Grand Total',
+            PercentageOfColumnTotal: '% of Column Total',
+            PercentageOfRowTotal: '% of Row Total',
+            PercentageOfParentTotal: '% of Parent Total',
+            PercentageOfParentColumnTotal: '% of Parent Column Total',
+            PercentageOfParentRowTotal: '% of Parent Row Total',
             /* tslint:enable */
-            apply: 'APPLY'
+            apply: 'APPLY',
+            valueFieldSettings: 'Value field settings',
+            sourceName: 'Field name :',
+            sourceCaption: 'Field caption :',
+            summarizeValuesBy: 'Summarize values by :',
+            baseField: 'Base field :',
+            baseItem: 'Base item :',
+            example: 'e.g:',
+            editorDataLimitMsg: ' more items. Search to refine further.',
+            deferLayoutUpdate: 'Defer Layout Update'
         };
@@ -255,4 +288,6 @@ this.localeObj = new L10n(this.getModuleName(), this.defaultLocale, this.locale);
             var pageSettings = this.pivotGridModule ? this.pivotGridModule.pageSettings : undefined;
+            var isDrillThrough = this.pivotGridModule ?
+                (this.pivotGridModule.allowDrillThrough || this.pivotGridModule.editSettings.allowEditing) : true;
             var enableValueSorting = this.pivotGridModule ? this.pivotGridModule.enableValueSorting : undefined;
-            this.engineModule = new PivotEngine(this.dataSource, '', undefined, pageSettings, enableValueSorting);
+            this.engineModule = new PivotEngine(this.dataSource, '', undefined, pageSettings, enableValueSorting, isDrillThrough);
             this.pivotFieldList = this.engineModule.fieldList;
@@ -290,2 +325,7 @@ var eventArgs = {
         this.pivotCommon = new PivotCommon(args);
+        this.pivotCommon.control = this;
+        if (this.allowDeferLayoutUpdate) {
+            this.clonedDataSource = extend({}, this.dataSource, null, true);
+            this.clonedFieldList = extend({}, this.pivotFieldList, null, true);
+        }
     };
@@ -328,3 +368,3 @@ PivotFieldList.prototype.getFieldCaption = function (dataSource) {
      */
-    PivotFieldList.prototype.updateDataSource = function (isTreeViewRefresh) {
+    PivotFieldList.prototype.updateDataSource = function (isTreeViewRefresh, isEngineRefresh) {
         if (this.pivotGridModule) {
@@ -334,6 +374,15 @@ showSpinner(this.pivotGridModule.element);
         showSpinner(this.fieldListSpinnerElement);
-        var pageSettings = this.pivotGridModule ? this.pivotGridModule.pageSettings : undefined;
-        var enableValueSorting = this.pivotGridModule ? this.pivotGridModule.enableValueSorting : undefined;
-        this.engineModule = new PivotEngine(this.dataSource, '', this.pivotFieldList, pageSettings, enableValueSorting);
-        this.getFieldCaption(this.dataSource);
+        if (isNullOrUndefined(isEngineRefresh)) {
+            var pageSettings = this.pivotGridModule ? this.pivotGridModule.pageSettings : undefined;
+            var enableValueSorting = this.pivotGridModule ? this.pivotGridModule.enableValueSorting : undefined;
+            var isDrillThrough = this.pivotGridModule ?
+                (this.pivotGridModule.allowDrillThrough || this.pivotGridModule.editSettings.allowEditing) : undefined;
+            this.engineModule =
+                new PivotEngine(this.dataSource, '', this.pivotFieldList, pageSettings, enableValueSorting, isDrillThrough);
+            this.getFieldCaption(this.dataSource);
+        }
+        else {
+            this.axisFieldModule.render();
+            this.isRequiredUpdate = false;
+        }
         var eventArgs = {
@@ -351,3 +400,17 @@ dataSource: this.dataSource,
         }
-        this.updateView(this.pivotGridModule);
+        if (this.isRequiredUpdate) {
+            if (this.allowDeferLayoutUpdate) {
+                this.clonedDataSource = extend({}, this.dataSource, null, true);
+                this.clonedFieldList = extend({}, this.pivotFieldList, null, true);
+            }
+            this.updateView(this.pivotGridModule);
+        }
+        else if (this.renderMode === 'Popup' && this.allowDeferLayoutUpdate) {
+            this.pivotGridModule.engineModule = this.engineModule;
+            this.pivotGridModule.
+                setProperties({ dataSource: this.dataSource.properties }, true);
+            this.pivotGridModule.notify(events.uiUpdate, this);
+            hideSpinner(this.fieldListSpinnerElement);
+        }
+        this.isRequiredUpdate = true;
         if (!this.pivotGridModule) {
@@ -371,6 +434,9 @@ hideSpinner(this.fieldListSpinnerElement);
             this.pivotFieldList = control.engineModule.fieldList;
-            this.pivotGridModule = control;
+            if (this.renderMode === 'Popup') {
+                this.pivotGridModule = control;
+            }
             this.getFieldCaption(control.dataSource);
             this.pivotCommon.engineModule = this.engineModule;
             this.pivotCommon.dataSource = this.dataSource;
+            this.pivotCommon.control = control;
             if (this.treeViewModule.fieldTable && !this.isAdaptive) {
@@ -380,2 +446,6 @@ this.notify(events.treeViewUpdate, {});
             this.axisFieldModule.render();
+            if (this.renderMode === 'Fixed' && this.allowDeferLayoutUpdate) {
+                this.clonedDataSource = extend({}, this.dataSource, null, true);
+                this.clonedFieldList = extend({}, this.pivotFieldList, null, true);
+            }
         }
@@ -398,2 +468,14 @@ };
     /**
+     * Called internally to trigger populate event.
+     * @hidden
+     */
+    PivotFieldList.prototype.triggerPopulateEvent = function () {
+        var eventArgs = {
+            dataSource: this.dataSource,
+            pivotFieldList: this.pivotFieldList,
+            pivotValues: this.engineModule.pivotValues
+        };
+        this.trigger(events.enginePopulated, eventArgs);
+    };
+    /**
      * Destroys the Field Table component.
@@ -444,2 +526,8 @@ * @method destroy
     __decorate([
+        Property(false)
+    ], PivotFieldList.prototype, "allowDeferLayoutUpdate", void 0);
+    __decorate([
+        Property(1000)
+    ], PivotFieldList.prototype, "maxNodeLimitInMemberEditor", void 0);
+    __decorate([
         Event()
@@ -446,0 +534,0 @@ ], PivotFieldList.prototype, "load", void 0);

src/pivotfieldlist/renderer/dialog-renderer.d.ts

@@ -16,2 +16,4 @@ import { PivotFieldList } from '../base/field-list';
     adaptiveElement: Tab;
+    private deferUpdateApplyButton;
+    private deferUpdateCancelButton;
     /** Constructor for render module */
@@ -26,2 +28,7 @@ constructor(parent: PivotFieldList);
     private renderStaticLayout;
+    private renderDeferUpdateButtons;
+    private createDeferUpdateButtons;
+    private onCheckChange;
+    private applyButtonClick;
+    private cancelButtonClick;
     private renderFieldListDialog;
@@ -33,2 +40,3 @@ /**
     updateDataSource(selectedNodes: string[]): void;
+    private onDeferUpdateClick;
     private renderAdaptiveLayout;
@@ -35,0 +43,0 @@ private createCalculatedButton;

src/pivotfieldlist/renderer/dialog-renderer.js

 import { createElement, isNullOrUndefined, addClass, removeClass } from '@syncfusion/ej2-base';
-import { EventHandler, setStyleAttribute } from '@syncfusion/ej2-base';
+import { EventHandler, setStyleAttribute, extend } from '@syncfusion/ej2-base';
 import * as cls from '../../common/base/css-constant';
 import { Dialog } from '@syncfusion/ej2-popups';
-import { Button } from '@syncfusion/ej2-buttons';
+import { Button, CheckBox } from '@syncfusion/ej2-buttons';
 import { Tab } from '@syncfusion/ej2-navigations';
@@ -73,4 +73,105 @@ import * as events from '../../common/base/constant';
             fieldListWrappper.appendChild(this.parentElement);
+            addClass([fieldListWrappper], cls.STATIC_FIELD_LIST_CLASS);
+            if (this.parent.allowDeferLayoutUpdate) {
+                fieldListWrappper.appendChild(this.createDeferUpdateButtons());
+                this.renderDeferUpdateButtons();
+            }
         }
     };
+    DialogRenderer.prototype.renderDeferUpdateButtons = function () {
+        if (this.parent.allowDeferLayoutUpdate) {
+            var checkBoxObj = new CheckBox({
+                label: this.parent.localeObj.getConstant('deferLayoutUpdate'),
+                checked: true,
+                enableRtl: this.parent.enableRtl,
+                change: this.onCheckChange.bind(this)
+            });
+            checkBoxObj.appendTo('#' + this.parent.element.id + 'DeferUpdateCheckBox');
+            this.deferUpdateApplyButton = new Button({
+                cssClass: cls.DEFER_APPLY_BUTTON + ' ' + cls.DEFER_UPDATE_BUTTON + (this.parent.renderMode === 'Popup' ?
+                    (' ' + cls.BUTTON_FLAT_CLASS) : ''),
+                content: this.parent.localeObj.getConstant('apply'),
+                enableRtl: this.parent.enableRtl,
+                isPrimary: true
+            });
+            this.deferUpdateApplyButton.appendTo('#' + this.parent.element.id + '_DeferUpdateButton1');
+            this.deferUpdateApplyButton.element.onclick = this.parent.renderMode === 'Fixed' ? this.applyButtonClick.bind(this) :
+                this.onDeferUpdateClick.bind(this);
+        }
+        this.deferUpdateCancelButton = new Button({
+            cssClass: cls.DEFER_CANCEL_BUTTON + ' ' + cls.CANCEL_BUTTON_CLASS + (this.parent.renderMode === 'Popup' ?
+                (' ' + cls.BUTTON_FLAT_CLASS) : ''),
+            content: this.parent.allowDeferLayoutUpdate ? this.parent.localeObj.getConstant('cancel') :
+                this.parent.localeObj.getConstant('close'),
+            enableRtl: this.parent.enableRtl, isPrimary: !this.parent.allowDeferLayoutUpdate
+        });
+        this.deferUpdateCancelButton.appendTo('#' + this.parent.element.id + '_DeferUpdateButton2');
+        this.deferUpdateCancelButton.element.onclick = this.parent.renderMode === 'Fixed' ? this.cancelButtonClick.bind(this) :
+            this.onCloseFieldList.bind(this);
+    };
+    DialogRenderer.prototype.createDeferUpdateButtons = function () {
+        var layoutFooter = createElement('div', {
+            className: cls.LAYOUT_FOOTER
+        });
+        if (this.parent.allowDeferLayoutUpdate) {
+            var checkBoxLayout = createElement('div', {
+                className: cls.CHECKBOX_LAYOUT
+            });
+            var deferUpdateCheckBox = createElement('input', {
+                id: this.parent.element.id + 'DeferUpdateCheckBox'
+            });
+            checkBoxLayout.appendChild(deferUpdateCheckBox);
+            layoutFooter.appendChild(checkBoxLayout);
+        }
+        var buttonLayout = createElement('div', {
+            className: cls.BUTTON_LAYOUT
+        });
+        if (this.parent.allowDeferLayoutUpdate) {
+            var deferUpdateButton1 = createElement('button', {
+                id: this.parent.element.id + '_DeferUpdateButton1'
+            });
+            buttonLayout.appendChild(deferUpdateButton1);
+        }
+        var deferUpdateButton2 = createElement('button', {
+            id: this.parent.element.id + '_DeferUpdateButton2'
+        });
+        buttonLayout.appendChild(deferUpdateButton2);
+        layoutFooter.appendChild(buttonLayout);
+        return layoutFooter;
+    };
+    DialogRenderer.prototype.onCheckChange = function (args) {
+        if (args.checked) {
+            this.parent.clonedDataSource = extend({}, this.parent.dataSource, null, true);
+            this.parent.clonedFieldList = extend({}, this.parent.pivotFieldList, null, true);
+        }
+        this.parent.allowDeferLayoutUpdate = !this.parent.allowDeferLayoutUpdate;
+        if (this.parent.renderMode === 'Fixed') {
+            this.deferUpdateApplyButton.setProperties({ disabled: !this.parent.allowDeferLayoutUpdate });
+            this.deferUpdateCancelButton.setProperties({ disabled: !this.parent.allowDeferLayoutUpdate });
+        }
+        else {
+            if (this.parent.allowDeferLayoutUpdate) {
+                this.deferUpdateApplyButton.element.style.display = '';
+                this.deferUpdateCancelButton.setProperties({ content: this.parent.localeObj.getConstant('cancel') });
+                this.deferUpdateCancelButton.isPrimary = false;
+            }
+            else {
+                this.deferUpdateApplyButton.element.style.display = 'none';
+                this.deferUpdateCancelButton.setProperties({ content: this.parent.localeObj.getConstant('close') });
+                this.deferUpdateCancelButton.isPrimary = true;
+            }
+        }
+        this.cancelButtonClick();
+    };
+    DialogRenderer.prototype.applyButtonClick = function () {
+        this.parent.updateDataSource(false);
+        this.parent.clonedDataSource = extend({}, this.parent.dataSource, null, true);
+        this.parent.clonedFieldList = extend({}, this.parent.pivotFieldList, null, true);
+    };
+    DialogRenderer.prototype.cancelButtonClick = function () {
+        this.parent.
+            setProperties({ dataSource: this.parent.clonedDataSource.properties }, true);
+        this.parent.engineModule.fieldList = extend({}, this.parent.clonedFieldList, null, true);
+        this.parent.updateDataSource(false, true);
+    };
     DialogRenderer.prototype.renderFieldListDialog = function (fieldListWrappper) {
@@ -88,2 +189,36 @@ var toggleFieldList = createElement('div', {
         if (this.parent.isAdaptive) {
+            var buttons = [{
+                    click: this.showFieldListDialog.bind(this),
+                    buttonModel: {
+                        cssClass: cls.ADAPTIVE_FIELD_LIST_BUTTON_CLASS + ' ' + cls.BUTTON_SMALL_CLASS + ' ' + cls.BUTTON_ROUND_CLASS,
+                        iconCss: cls.ICON + ' ' + cls.ADD_ICON_CLASS,
+                        isPrimary: true
+                    }
+                }, {
+                    click: this.showCalculatedField.bind(this),
+                    buttonModel: {
+                        cssClass: cls.ADAPTIVE_CALCULATED_FIELD_BUTTON_CLASS +
+                            ' ' + cls.BUTTON_SMALL_CLASS + ' ' + cls.BUTTON_ROUND_CLASS + ' ' + cls.ICON_DISABLE,
+                        iconCss: cls.ICON + ' ' + cls.ADD_ICON_CLASS, enableRtl: this.parent.enableRtl,
+                        isPrimary: true
+                    }
+                }, {
+                    click: this.onDeferUpdateClick.bind(this),
+                    buttonModel: {
+                        content: this.parent.localeObj.getConstant('apply'), enableRtl: this.parent.enableRtl,
+                        cssClass: cls.DEFER_APPLY_BUTTON + ' ' + cls.DEFER_UPDATE_BUTTON + ' ' + cls.BUTTON_FLAT_CLASS,
+                        isPrimary: true
+                    }
+                }, {
+                    click: this.onCloseFieldList.bind(this),
+                    buttonModel: {
+                        cssClass: cls.DEFER_CANCEL_BUTTON + ' ' + cls.CANCEL_BUTTON_CLASS + ' ' + cls.BUTTON_FLAT_CLASS,
+                        content: this.parent.allowDeferLayoutUpdate ? this.parent.localeObj.getConstant('cancel') :
+                            this.parent.localeObj.getConstant('close'),
+                        enableRtl: this.parent.enableRtl
+                    }
+                }];
+            if (!this.parent.allowDeferLayoutUpdate) {
+                buttons.splice(2, 1);
+            }
             this.fieldListDialog = new Dialog({
@@ -101,24 +236,3 @@ animationSettings: { effect: 'Zoom' },
                 position: { X: 'center', Y: 'center' },
-                buttons: [{
-                        click: this.showFieldListDialog.bind(this),
-                        buttonModel: {
-                            cssClass: cls.ADAPTIVE_FIELD_LIST_BUTTON_CLASS + ' ' + cls.BUTTON_SMALL_CLASS + ' ' + cls.BUTTON_ROUND_CLASS,
-                            iconCss: cls.ICON + ' ' + cls.ADD_ICON_CLASS,
-                            isPrimary: true
-                        }
-                    }, {
-                        click: this.showCalculatedField.bind(this),
-                        buttonModel: {
-                            cssClass: cls.ADAPTIVE_CALCULATED_FIELD_BUTTON_CLASS +
-                                ' ' + cls.BUTTON_SMALL_CLASS + ' ' + cls.BUTTON_ROUND_CLASS + ' ' + cls.ICON_DISABLE,
-                            iconCss: cls.ICON + ' ' + cls.ADD_ICON_CLASS,
-                            isPrimary: true
-                        }
-                    }, {
-                        click: this.onCloseFieldList.bind(this),
-                        buttonModel: {
-                            content: this.parent.localeObj.getConstant('close'),
-                            cssClass: cls.CANCEL_BUTTON_CLASS,
-                        }
-                    }],
+                buttons: buttons,
                 target: document.body,
@@ -137,2 +251,3 @@ close: this.removeFieldListIcon.bind(this)
         else {
+            var template = this.createDeferUpdateButtons().outerHTML;
             var headerTemplate = '<div class=' + cls.TITLE_HEADER_CLASS + '><div class=' +
@@ -151,9 +266,3 @@ cls.TITLE_CONTENT_CLASS + '>' + this.parent.localeObj.getConstant('fieldList') + '</div></div>';
                 position: { X: 'center', Y: this.parent.element.offsetTop },
-                buttons: [{
-                        click: this.onCloseFieldList.bind(this),
-                        buttonModel: {
-                            content: this.parent.localeObj.getConstant('close'), cssClass: cls.CANCEL_BUTTON_CLASS,
-                            isPrimary: true
-                        },
-                    }],
+                footerTemplate: template,
                 closeOnEscape: true,
@@ -165,2 +274,3 @@ target: !isNullOrUndefined(this.parent.target) ? ((typeof this.parent.target) === 'string') ?
             this.fieldListDialog.appendTo(fieldListWrappper);
+            this.renderDeferUpdateButtons();
             setStyleAttribute(fieldListWrappper.querySelector('#' + fieldListWrappper.id + '_title'), { 'width': '100%' });
@@ -186,4 +296,13 @@ fieldListWrappper.querySelector('.' + cls.TITLE_HEADER_CLASS).appendChild(this.createCalculatedButton());
         this.parent.axisFieldModule.render();
-        this.parent.updateDataSource(true);
+        if (!this.parent.allowDeferLayoutUpdate) {
+            this.parent.updateDataSource(true);
+        }
+        else {
+            this.parent.triggerPopulateEvent();
+        }
     };
+    DialogRenderer.prototype.onDeferUpdateClick = function () {
+        this.parent.updateDataSource();
+        this.parent.dialogRenderer.fieldListDialog.hide();
+    };
     DialogRenderer.prototype.renderAdaptiveLayout = function (fieldListWrappper) {
@@ -324,2 +443,9 @@ var _this = this;
     DialogRenderer.prototype.onShowFieldList = function () {
+        if (this.parent.allowDeferLayoutUpdate) {
+            if (this.parent.isAdaptive) {
+                this.parent.axisFieldModule.render();
+            }
+            this.parent.clonedDataSource = extend({}, this.parent.dataSource, null, true);
+            this.parent.clonedFieldList = extend({}, this.parent.pivotFieldList, null, true);
+        }
         addClass([this.parent.element.querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS)], cls.ICON_HIDDEN);
@@ -332,2 +458,12 @@ this.parent.dialogRenderer.fieldListDialog.show();
     DialogRenderer.prototype.onCloseFieldList = function () {
+        if (this.parent.allowDeferLayoutUpdate) {
+            this.parent.dataSource =
+                extend({}, this.parent.clonedDataSource.properties, null, true);
+            this.parent.pivotGridModule.engineModule = this.parent.engineModule;
+            this.parent.pivotGridModule.
+                setProperties({ dataSource: this.parent.clonedDataSource.properties }, true);
+            this.parent.engineModule.fieldList = extend({}, this.parent.clonedFieldList, null, true);
+            this.parent.pivotGridModule.notify(events.uiUpdate, this);
+            this.parent.pivotGridModule.notify(events.contentReady, this);
+        }
         this.parent.dialogRenderer.fieldListDialog.hide();
@@ -334,0 +470,0 @@ };

src/pivotfieldlist/renderer/tree-renderer.d.ts

@@ -33,2 +33,3 @@ import { PivotFieldList } from '../base/field-list';
     private nodeStateChange;
+    private updateDataSource;
     private addNode;
@@ -35,0 +36,0 @@ private getTreeUpdate;

src/pivotfieldlist/renderer/tree-renderer.js

@@ -130,3 +130,3 @@ import { createElement, addClass, removeClass, prepend, remove } from '@syncfusion/ej2-base';
             change: function (e) {
-                _this.parent.pivotCommon.eventBase.searchTreeNodes(e, _this.fieldTable);
+                _this.parent.pivotCommon.eventBase.searchTreeNodes(e, _this.fieldTable, true);
             }
@@ -182,3 +182,8 @@ });
         if (this.parent.pivotCommon.nodeStateModified.onStateModified(args, fieldName)) {
-            this.parent.updateDataSource();
+            if (this.parent.allowDeferLayoutUpdate) {
+                this.updateDataSource();
+            }
+            else {
+                this.parent.updateDataSource();
+            }
             this.parent.axisFieldModule.render();
@@ -247,5 +252,27 @@ }
         }
-        this.parent.updateDataSource(true);
+        if (!this.parent.allowDeferLayoutUpdate) {
+            this.parent.updateDataSource(true);
+        }
+        else {
+            if (args.action === 'check') {
+                selectedNode.isSelected = true;
+            }
+            else {
+                selectedNode.isSelected = false;
+            }
+            this.updateDataSource();
+        }
         this.parent.axisFieldModule.render();
     };
+    TreeViewRenderer.prototype.updateDataSource = function () {
+        if (this.parent.getModuleName() === 'pivotfieldlist' && this.parent.renderMode === 'Popup') {
+            this.parent.pivotGridModule.engineModule = this.parent.engineModule;
+            this.parent.pivotGridModule.
+                setProperties({ dataSource: this.parent.dataSource.properties }, true);
+            this.parent.pivotGridModule.notify(events.uiUpdate, this);
+        }
+        else {
+            this.parent.triggerPopulateEvent();
+        }
+    };
     TreeViewRenderer.prototype.addNode = function (args) {
@@ -286,5 +313,7 @@ var fieldList = this.parent.pivotFieldList;
     TreeViewRenderer.prototype.refreshTreeView = function () {
-        this.fieldTable.fields = { dataSource: this.getTreeData(), id: 'id', text: 'caption', isChecked: 'isSelected' };
-        this.fieldTable.dataBind();
-        this.getTreeUpdate();
+        if (this.fieldTable) {
+            this.fieldTable.fields = { dataSource: this.getTreeData(), id: 'id', text: 'caption', isChecked: 'isSelected' };
+            this.fieldTable.dataBind();
+            this.getTreeUpdate();
+        }
     };
@@ -291,0 +320,0 @@ TreeViewRenderer.prototype.getTreeData = function (axis) {

src/pivotview/actions.d.ts

@@ -8,1 +8,2 @@ /**
 export * from './actions/virtualscroll';
+export * from './actions/drill-through';

src/pivotview/actions.js

@@ -8,1 +8,2 @@ /**
 export * from './actions/virtualscroll';
+export * from './actions/drill-through';

src/pivotview/actions/keyboard.js

@@ -94,4 +94,13 @@ import { KeyboardEvents, closest, addClass } from '@syncfusion/ej2-base';
         var target = e.target;
-        if (target && closest(target, '.' + cls.GRID_CLASS) && target.querySelector('.' + cls.ICON)) {
-            target.querySelector('.' + cls.ICON).click();
+        if (target && closest(target, '.' + cls.GRID_CLASS)) {
+            if (target.querySelector('.' + cls.ICON)) {
+                target.querySelector('.' + cls.ICON).click();
+            }
+            else if (target.classList.contains('e-valuescontent')) {
+                target.dispatchEvent(new MouseEvent('dblclick', {
+                    'view': window,
+                    'bubbles': true,
+                    'cancelable': true
+                }));
+            }
             e.preventDefault();
@@ -98,0 +107,0 @@ return;

src/pivotview/actions/pdf-export.js

@@ -68,3 +68,3 @@ import { PdfGrid, PdfPen, PointF, PdfDocument, PdfStandardFont, PdfFontFamily, PdfSolidBrush, PdfColor, PdfStringFormat, PdfVerticalAlignment, PdfTextAlignment, PdfFontStyle, PdfPageTemplateElement, RectangleF, PdfLayoutFormat } from '@syncfusion/ej2-pdf-export';
                                         }
-                                        pdfGridRow.cells.getCell(localCnt).value = cellValue.toString();
+                                        pdfGridRow.cells.getCell(localCnt).value = cellValue ? cellValue.toString() : '';
                                     }
@@ -71,0 +71,0 @@ if (cellValue !== '') {

src/pivotview/actions/virtualscroll.d.ts

@@ -8,2 +8,5 @@ import { PivotView } from '../base/pivotview';
     private previousValues;
+    private frozenPreviousValues;
+    private pageXY;
+    private eventType;
     /** @hidden */
@@ -24,2 +27,6 @@ direction: string;
     private wireEvents;
+    private onWheelScroll;
+    private onTouchScroll;
+    private setPageXY;
+    private getPointXY;
     private update;
@@ -26,0 +33,0 @@ private common;

src/pivotview/actions/virtualscroll.js

@@ -15,2 +15,4 @@ import { EventHandler, setStyleAttribute } from '@syncfusion/ej2-base';
         this.previousValues = { top: 0, left: 0 };
+        this.frozenPreviousValues = { top: 0, left: 0 };
+        this.eventType = '';
         this.parent = parent;
@@ -40,5 +42,77 @@ this.addInternalEvents();
             EventHandler.add(mCont, 'mouseup touchend', this.common(mHdr, mCont, fCont), this);
+            EventHandler.add(fCont, 'wheel', this.onWheelScroll(mCont, fCont), this);
+            EventHandler.add(fCont, 'touchstart pointerdown', this.setPageXY(), this);
+            EventHandler.add(fCont, 'touchmove pointermove', this.onTouchScroll(mHdr, mCont, fCont), this);
+            EventHandler.add(mHdr, 'touchstart pointerdown', this.setPageXY(), this);
+            EventHandler.add(mHdr, 'touchmove pointermove', this.onTouchScroll(mHdr, mCont, fCont), this);
         }
         this.parent.grid.isPreventScrollEvent = true;
     };
+    VirtualScroll.prototype.onWheelScroll = function (mCont, fCont) {
+        var _this = this;
+        var element = mCont;
+        return function (e) {
+            var top = element.scrollTop + (e.deltaMode === 1 ? e.deltaY * 30 : e.deltaY);
+            if (_this.frozenPreviousValues.top === top) {
+                return;
+            }
+            e.preventDefault();
+            fCont.scrollTop = top;
+            element.scrollTop = top;
+            _this.frozenPreviousValues.top = top;
+            _this.eventType = e.type;
+        };
+    };
+    VirtualScroll.prototype.onTouchScroll = function (mHdr, mCont, fCont) {
+        var _this = this;
+        var element = mCont;
+        return function (e) {
+            if (e.pointerType === 'mouse') {
+                return;
+            }
+            var pageXY = _this.getPointXY(e);
+            var top = element.scrollTop + (_this.pageXY.y - pageXY.y);
+            var left = element.scrollLeft + (_this.pageXY.x - pageXY.x);
+            if (_this.parent.element.querySelector('.' + cls.HEADERCONTENT).contains(e.target)) {
+                if (_this.frozenPreviousValues.left === left || left < 0) {
+                    return;
+                }
+                mHdr.scrollLeft = left;
+                element.scrollLeft = left;
+                _this.pageXY.x = pageXY.x;
+                _this.frozenPreviousValues.left = left;
+            }
+            else {
+                if (_this.frozenPreviousValues.top === top || top < 0) {
+                    return;
+                }
+                fCont.scrollTop = top;
+                element.scrollTop = top;
+                _this.pageXY.y = pageXY.y;
+                _this.frozenPreviousValues.top = top;
+            }
+            _this.eventType = e.type;
+        };
+    };
+    VirtualScroll.prototype.setPageXY = function () {
+        var _this = this;
+        return function (e) {
+            if (e.pointerType === 'mouse') {
+                return;
+            }
+            _this.pageXY = _this.getPointXY(e);
+        };
+    };
+    VirtualScroll.prototype.getPointXY = function (e) {
+        var pageXY = { x: 0, y: 0 };
+        if (e.touches && e.touches.length) {
+            pageXY.x = e.touches[0].pageX;
+            pageXY.y = e.touches[0].pageY;
+        }
+        else {
+            pageXY.x = e.pageX;
+            pageXY.y = e.pageY;
+        }
+        return pageXY;
+    };
     VirtualScroll.prototype.update = function (mHdr, mCont, top, left, e) {
@@ -102,3 +176,3 @@ if (this.direction === 'vertical') {
             var left = mCont.scrollLeft;
-            if (e.type === 'wheel' || e.type === 'touchmove') {
+            if (e.type === 'wheel' || e.type === 'touchmove' || _this.eventType === 'wheel' || _this.eventType === 'touchmove') {
                 clearTimeout(timeOutObj);
@@ -142,2 +216,4 @@ /* tslint:disable */
             _this.previousValues.left = left;
+            _this.frozenPreviousValues.left = left;
+            _this.eventType = '';
             mHdr.scrollLeft = mCont.scrollLeft;
@@ -152,3 +228,3 @@ };
             var top = mCont.scrollTop;
-            if (e.type === 'wheel' || e.type === 'touchmove') {
+            if (e.type === 'wheel' || e.type === 'touchmove' || _this.eventType === 'wheel' || _this.eventType === 'touchmove') {
                 clearTimeout(timeOutObj);
@@ -190,2 +266,4 @@ /* tslint:disable */
             _this.previousValues.top = top;
+            _this.frozenPreviousValues.top = top;
+            _this.eventType = '';
             fCont.scrollTop = mCont.scrollTop;
@@ -192,0 +270,0 @@ mCont.scrollTop = fCont.scrollTop;

src/pivotview/base/pivotview-model.d.ts

@@ -1,2 +0,2 @@
-import { Property, Browser, Event, Component, ModuleDeclaration, createElement, setStyleAttribute } from '@syncfusion/ej2-base';import { EmitType, EventHandler, Complex, extend, ChildProperty } from '@syncfusion/ej2-base';import { Internationalization, L10n, NotifyPropertyChanges, INotifyPropertyChanged } from '@syncfusion/ej2-base';import { removeClass, addClass } from '@syncfusion/ej2-base';import { PivotEngine, IPivotValues, IAxisSet, IDataOptions, IDataSet, IPageSettings } from '../../base/engine';import { IConditionalFormatSettings } from '../../base/engine';import { Tooltip, TooltipEventArgs, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import * as events from '../../common/base/constant';import * as cls from '../../common/base/css-constant';import { AxisFields } from '../../common/grouping-bar/axis-field-renderer';import { LoadEventArgs, BeforeExportEventArgs, EnginePopulatingEventArgs } from '../../common/base/interface';import { EnginePopulatedEventArgs, ResizeInfo, ScrollInfo } from '../../common/base/interface';import { CellClickEventArgs, FieldDroppedEventArgs } from '../../common/base/interface';import { Render } from '../renderer/render';import { PivotCommon } from '../../common/base/pivot-common';import { Common } from '../../common/actions/common';import { GroupingBar } from '../../common/grouping-bar/grouping-bar';import { DataSourceModel, DrillOptionsModel } from '../model/dataSource-model';import { DataSource } from '../model/dataSource';import { GridSettings } from '../model/gridsettings';import { GridSettingsModel } from '../model/gridsettings-model';import { PivotButton } from '../../common/actions/pivot-button';import { PivotFieldList } from '../../pivotfieldlist/base/field-list';import { Grid, Column, QueryCellInfoEventArgs, HeaderCellInfoEventArgs, ResizeArgs } from '@syncfusion/ej2-grids';import { PdfExportProperties, ExcelExportProperties, ExcelQueryCellInfoEventArgs, ColumnDragEventArgs } from '@syncfusion/ej2-grids';import { ExcelHeaderQueryCellInfoEventArgs, PdfQueryCellInfoEventArgs, PdfHeaderQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { ExcelExport } from '../actions/excel-export';import { PDFExport } from '../actions/pdf-export';import { CalculatedField } from '../../common/calculatedfield/calculated-field';import { KeyboardInteraction } from '../actions/keyboard';import { PivotContextMenu } from '../../common/popups/context-menu';import { DataManager, ReturnOption, Query } from '@syncfusion/ej2-data';import { ConditionalFormatting } from '../../common/conditionalformatting/conditional-formatting';import { cssClass } from '@syncfusion/ej2-lists';import { VirtualScroll } from '../actions/virtualscroll';
+import { Property, Browser, Event, Component, ModuleDeclaration, createElement, setStyleAttribute, remove } from '@syncfusion/ej2-base';import { EmitType, EventHandler, Complex, extend, ChildProperty, Collection, isNullOrUndefined } from '@syncfusion/ej2-base';import { Internationalization, L10n, NotifyPropertyChanges, INotifyPropertyChanged } from '@syncfusion/ej2-base';import { removeClass, addClass } from '@syncfusion/ej2-base';import { PivotEngine, IPivotValues, IAxisSet, IDataOptions, IDataSet, IPageSettings } from '../../base/engine';import { IConditionalFormatSettings } from '../../base/engine';import { Tooltip, TooltipEventArgs, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import * as events from '../../common/base/constant';import * as cls from '../../common/base/css-constant';import { AxisFields } from '../../common/grouping-bar/axis-field-renderer';import { LoadEventArgs, EnginePopulatingEventArgs, DrillThroughEventArgs, PivotColumn } from '../../common/base/interface';import { ResizeInfo, ScrollInfo, BeforeColumnRenderEventArgs, PivotCellSelectedEventArgs } from '../../common/base/interface';import { CellClickEventArgs, FieldDroppedEventArgs, HyperCellClickEventArgs } from '../../common/base/interface';import { BeforeExportEventArgs, EnginePopulatedEventArgs } from '../../common/base/interface';import { Render } from '../renderer/render';import { PivotCommon } from '../../common/base/pivot-common';import { Common } from '../../common/actions/common';import { GroupingBar } from '../../common/grouping-bar/grouping-bar';import { DataSourceModel, DrillOptionsModel } from '../model/dataSource-model';import { DataSource } from '../model/dataSource';import { GridSettings } from '../model/gridsettings';import { GridSettingsModel } from '../model/gridsettings-model';import { PivotButton } from '../../common/actions/pivot-button';import { PivotFieldList } from '../../pivotfieldlist/base/field-list';import { Grid, Column, QueryCellInfoEventArgs, HeaderCellInfoEventArgs, ColumnModel, Reorder, Resize } from '@syncfusion/ej2-grids';import { CellSelectEventArgs, CellDeselectEventArgs, RowSelectEventArgs, ResizeArgs, RowDeselectEventArgs } from '@syncfusion/ej2-grids';import { EditSettingsModel } from '@syncfusion/ej2-grids';import { PdfExportProperties, ExcelExportProperties, ExcelQueryCellInfoEventArgs, ColumnDragEventArgs } from '@syncfusion/ej2-grids';import { ExcelHeaderQueryCellInfoEventArgs, PdfQueryCellInfoEventArgs, PdfHeaderQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';import { ExcelExport } from '../actions/excel-export';import { PDFExport } from '../actions/pdf-export';import { CalculatedField } from '../../common/calculatedfield/calculated-field';import { KeyboardInteraction } from '../actions/keyboard';import { PivotContextMenu } from '../../common/popups/context-menu';import { DataManager, ReturnOption, Query } from '@syncfusion/ej2-data';import { ConditionalFormatting } from '../../common/conditionalformatting/conditional-formatting';import { cssClass } from '@syncfusion/ej2-lists';import { VirtualScroll } from '../actions/virtualscroll';import { DrillThrough } from '../actions/drill-through';import { Condition } from '../../base/types';import { EditMode } from '../../common';
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -27,5 +27,156 @@
 
+    /**
+     * It allows to set the visibility of drop down icon in GroupingBar button
+     * @default true     
+     */
+    showValueTypeIcon?: boolean;
+
 }
 
 /**
+ * Interface for a class CellEditSettings
+ */
+export interface CellEditSettingsModel {
+
+    /**
+     * If `allowAdding` is set to true, new records can be added to the Grid.
+     * @default false
+     */
+    allowAdding?: boolean;
+
+    /**
+     * If `allowEditing` is set to true, values can be updated in the existing record.
+     * @default false
+     */
+    allowEditing?: boolean;
+
+    /**
+     * If `allowDeleting` is set to true, existing record can be deleted from the Grid.
+     * @default false
+     */
+    allowDeleting?: boolean;
+
+    /**
+     * If `allowCommandColumns` is set to true, an additional column appended to perform CRUD operations in Grid.
+     * @default false
+     */
+    allowCommandColumns?: boolean;
+
+    /**
+     * Defines the mode to edit. The available editing modes are:
+     * * Normal
+     * * Dialog
+     * * Batch
+     * @default Normal
+     */
+    mode?: EditMode;
+
+    /**
+     * If `allowEditOnDblClick` is set to false, Grid will not allow editing of a record on double click.
+     * @default true
+     */
+    allowEditOnDblClick?: boolean;
+
+    /**
+     * if `showConfirmDialog` is set to false, confirm dialog does not show when batch changes are saved or discarded.
+     * @default true
+     */
+    showConfirmDialog?: boolean;
+
+    /**
+     * If `showDeleteConfirmDialog` is set to true, confirm dialog will show delete action. You can also cancel delete command.
+     * @default false
+     */
+    showDeleteConfirmDialog?: boolean;
+
+}
+
+/**
+ * Interface for a class ConditionalSettings
+ */
+export interface ConditionalSettingsModel {
+
+    /**
+     * It allows to set the field name to get visibility of hyperlink based on condition.
+     */
+    measure?: string;
+
+    /**
+     * It allows to set the label name to get visibility of hyperlink based on condition.
+     */
+    label?: string;
+
+    /**
+     * It allows to set the filter conditions to the field.
+     * @default NotEquals
+     */
+    conditions?: Condition;
+
+    /**
+     * It allows to set the value1 get visibility of hyperlink.
+     */
+    value1?: number;
+
+    /**
+     * It allows to set the value2 to get visibility of hyperlink.
+     */
+    value2?: number;
+
+}
+
+/**
+ * Interface for a class HyperlinkSettings
+ */
+export interface HyperlinkSettingsModel {
+
+    /**
+     * It allows to set the visibility of hyperlink in all cells
+     * @default false     
+     */
+    showHyperlink?: boolean;
+
+    /**
+     * It allows to set the visibility of hyperlink in row headers
+     * @default false     
+     */
+    showRowHeaderHyperlink?: boolean;
+
+    /**
+     * It allows to set the visibility of hyperlink in column headers
+     * @default true     
+     */
+    showColumnHeaderHyperlink?: boolean;
+
+    /**
+     * It allows to set the visibility of hyperlink in value cells
+     * @default false     
+     */
+    showValueCellHyperlink?: boolean;
+
+    /**
+     * It allows to set the visibility of hyperlink in summary cells
+     * @default true     
+     */
+    showSummaryCellHyperlink?: boolean;
+
+    /**
+     * It allows to set the visibility of hyperlink based on condition
+     * @default []
+     */
+    conditionalSettings?: ConditionalSettingsModel[];
+
+    /**
+     * It allows to set the visibility of hyperlink based on header text
+     */
+    headerText?: string;
+
+    /**
+     * It allows to set the custom class name for hyperlink options
+     * @default ''
+     */
+    cssClass?: string;
+
+}
+
+/**
  * Interface for a class PivotView
@@ -58,2 +209,7 @@ */
     /**
+     * Configures the settings of hyperlink settings. 
+     */
+    hyperlinkSettings?: HyperlinkSettingsModel;
+
+    /**
      * It allows the user to configure the pivot report as per the user need.
@@ -64,2 +220,9 @@ */
     /**
+     * Configures the edit behavior of the Pivot Grid.
+     * @default { allowAdding: false, allowEditing: false, allowDeleting: false, allowCommandColumns: false, 
+     * mode:'Normal', allowEditOnDblClick: true, showConfirmDialog: true, showDeleteConfirmDialog: false }
+     */
+    editSettings?: CellEditSettingsModel;
+
+    /**
      * It holds the pivot engine data which renders the Pivot widget.
@@ -76,2 +239,8 @@ */
     /**
+     * Allows to display the Tool-Tip on hovering value cells in pivot grid.
+     * @default true
+     */
+    showTooltip?: boolean;
+
+    /**
      * It shows a common button for value fields to move together in column or row axis
@@ -126,2 +295,9 @@ * @default false
     /**
+     * If `allowDrillThrough` set to true, then you can view the raw items that are used to create a 
+     * specified value cell in the pivot grid.
+     * @default false
+     */
+    allowDrillThrough?: boolean;
+
+    /**
      * If `allowPdfExport` is set to true, then it will allow the user to export pivotview to Pdf file.
@@ -133,2 +309,14 @@ * @default false
     /**
+     * If `allowDeferLayoutUpdate` is set to true, then it will enable defer layout update to pivotview.
+     * @default false
+     */
+    allowDeferLayoutUpdate?: boolean;
+
+    /**
+     * It allows to set the maximum number of nodes to be displayed in the member editor.
+     * @default 1000    
+     */
+    maxNodeLimitInMemberEditor?: number;
+
+    /**
     queryCellInfo?: EmitType<QueryCellInfoEventArgs>;
@@ -167,2 +355,17 @@
     /**
+    beforeColumnsRender?: EmitType<BeforeColumnRenderEventArgs>;
+
+    /**
+    selected?: EmitType<CellSelectEventArgs>;
+
+    /**
+    cellDeselected?: EmitType<CellDeselectEventArgs>;
+
+    /**
+    rowSelected?: EmitType<RowSelectEventArgs>;
+
+    /**
+    rowDeselected?: EmitType<RowDeselectEventArgs>;
+
+    /**
      * This allows any customization of PivotView properties on initial rendering.
@@ -221,2 +424,20 @@ * @event
 
+    /**
+     * Triggers when value cell is clicked in the Pivot widget on Drill-Through.
+     * @event 
+     */
+    drillThrough?: EmitType<DrillThroughEventArgs>;
+
+    /**
+     * Triggers when hyperlink cell is clicked in the Pivot widget.
+     * @event 
+     */
+    hyperlinkCellClick?: EmitType<HyperCellClickEventArgs>;
+
+    /**
+     * Triggers when cell got selected in Pivot widget.
+     * @event 
+     */
+    cellSelected?: EmitType<PivotCellSelectedEventArgs>;
+
 }

src/pivotview/base/pivotview.d.ts

@@ -5,8 +5,10 @@ import { Component, ModuleDeclaration } from '@syncfusion/ej2-base';
 import { PivotEngine, IPivotValues, IPageSettings } from '../../base/engine';
-import { PivotViewModel, GroupingBarSettingsModel } from './pivotview-model';
+import { PivotViewModel, GroupingBarSettingsModel, CellEditSettingsModel } from './pivotview-model';
+import { HyperlinkSettingsModel, ConditionalSettingsModel } from './pivotview-model';
 import { Tooltip } from '@syncfusion/ej2-popups';
 import { AxisFields } from '../../common/grouping-bar/axis-field-renderer';
-import { LoadEventArgs, BeforeExportEventArgs, EnginePopulatingEventArgs } from '../../common/base/interface';
-import { EnginePopulatedEventArgs, ResizeInfo, ScrollInfo } from '../../common/base/interface';
-import { CellClickEventArgs, FieldDroppedEventArgs } from '../../common/base/interface';
+import { LoadEventArgs, EnginePopulatingEventArgs, DrillThroughEventArgs, PivotColumn } from '../../common/base/interface';
+import { ResizeInfo, ScrollInfo, BeforeColumnRenderEventArgs, PivotCellSelectedEventArgs } from '../../common/base/interface';
+import { CellClickEventArgs, FieldDroppedEventArgs, HyperCellClickEventArgs } from '../../common/base/interface';
+import { BeforeExportEventArgs, EnginePopulatedEventArgs } from '../../common/base/interface';
 import { Render } from '../renderer/render';
@@ -20,3 +22,5 @@ import { PivotCommon } from '../../common/base/pivot-common';
 import { PivotFieldList } from '../../pivotfieldlist/base/field-list';
-import { Grid, QueryCellInfoEventArgs, HeaderCellInfoEventArgs, ResizeArgs } from '@syncfusion/ej2-grids';
+import { Grid, QueryCellInfoEventArgs, HeaderCellInfoEventArgs, ColumnModel } from '@syncfusion/ej2-grids';
+import { CellSelectEventArgs, CellDeselectEventArgs, RowSelectEventArgs, ResizeArgs, RowDeselectEventArgs } from '@syncfusion/ej2-grids';
+import { EditSettingsModel } from '@syncfusion/ej2-grids';
 import { PdfExportProperties, ExcelExportProperties, ExcelQueryCellInfoEventArgs, ColumnDragEventArgs } from '@syncfusion/ej2-grids';
@@ -31,2 +35,5 @@ import { ExcelHeaderQueryCellInfoEventArgs, PdfQueryCellInfoEventArgs, PdfHeaderQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';
 import { VirtualScroll } from '../actions/virtualscroll';
+import { DrillThrough } from '../actions/drill-through';
+import { Condition } from '../../base/types';
+import { EditMode } from '../../common';
 /**
@@ -51,4 +58,127 @@ * It holds the settings of Grouping Bar.
     showRemoveIcon: boolean;
+    /**
+     * It allows to set the visibility of drop down icon in GroupingBar button
+     * @default true
+     */
+    showValueTypeIcon: boolean;
 }
 /**
+ * Configures the edit behavior of the Grid.
+ */
+export declare class CellEditSettings extends ChildProperty<CellEditSettings> implements EditSettingsModel {
+    /**
+     * If `allowAdding` is set to true, new records can be added to the Grid.
+     * @default false
+     */
+    allowAdding: boolean;
+    /**
+     * If `allowEditing` is set to true, values can be updated in the existing record.
+     * @default false
+     */
+    allowEditing: boolean;
+    /**
+     * If `allowDeleting` is set to true, existing record can be deleted from the Grid.
+     * @default false
+     */
+    allowDeleting: boolean;
+    /**
+     * If `allowCommandColumns` is set to true, an additional column appended to perform CRUD operations in Grid.
+     * @default false
+     */
+    allowCommandColumns: boolean;
+    /**
+     * Defines the mode to edit. The available editing modes are:
+     * * Normal
+     * * Dialog
+     * * Batch
+     * @default Normal
+     */
+    mode: EditMode;
+    /**
+     * If `allowEditOnDblClick` is set to false, Grid will not allow editing of a record on double click.
+     * @default true
+     */
+    allowEditOnDblClick: boolean;
+    /**
+     * if `showConfirmDialog` is set to false, confirm dialog does not show when batch changes are saved or discarded.
+     * @default true
+     */
+    showConfirmDialog: boolean;
+    /**
+     * If `showDeleteConfirmDialog` is set to true, confirm dialog will show delete action. You can also cancel delete command.
+     * @default false
+     */
+    showDeleteConfirmDialog: boolean;
+}
+/**
+ * Configures the conditional based hyper link settings.
+ */
+export declare class ConditionalSettings extends ChildProperty<ConditionalSettings> {
+    /**
+     * It allows to set the field name to get visibility of hyperlink based on condition.
+     */
+    measure: string;
+    /**
+     * It allows to set the label name to get visibility of hyperlink based on condition.
+     */
+    label: string;
+    /**
+     * It allows to set the filter conditions to the field.
+     * @default NotEquals
+     */
+    conditions: Condition;
+    /**
+     * It allows to set the value1 get visibility of hyperlink.
+     */
+    value1: number;
+    /**
+     * It allows to set the value2 to get visibility of hyperlink.
+     */
+    value2: number;
+}
+/**
+ * It holds the settings of Hyperlink.
+ */
+export declare class HyperlinkSettings extends ChildProperty<HyperlinkSettings> {
+    /**
+     * It allows to set the visibility of hyperlink in all cells
+     * @default false
+     */
+    showHyperlink: boolean;
+    /**
+     * It allows to set the visibility of hyperlink in row headers
+     * @default false
+     */
+    showRowHeaderHyperlink: boolean;
+    /**
+     * It allows to set the visibility of hyperlink in column headers
+     * @default true
+     */
+    showColumnHeaderHyperlink: boolean;
+    /**
+     * It allows to set the visibility of hyperlink in value cells
+     * @default false
+     */
+    showValueCellHyperlink: boolean;
+    /**
+     * It allows to set the visibility of hyperlink in summary cells
+     * @default true
+     */
+    showSummaryCellHyperlink: boolean;
+    /**
+     * It allows to set the visibility of hyperlink based on condition
+     * @default []
+     */
+    conditionalSettings: ConditionalSettingsModel[];
+    /**
+     * It allows to set the visibility of hyperlink based on header text
+     */
+    headerText: string;
+    /**
+     * It allows to set the custom class name for hyperlink options
+     * @default ''
+     */
+    cssClass: string;
+}
+/**
  * Represents the PivotView component.
@@ -78,2 +208,10 @@ * ```html
     fieldListSpinnerElement: HTMLElement;
+    /** @hidden */
+    isRowCellHyperlink: Boolean;
+    /** @hidden */
+    isColumnCellHyperlink: Boolean;
+    /** @hidden */
+    isValueCellHyperlink: Boolean;
+    /** @hidden */
+    isSummaryCellHyperlink: Boolean;
     pivotView: PivotView;
@@ -103,2 +241,4 @@ /** @hidden */
     /** @hidden */
+    drillThroughModule: DrillThrough;
+    /** @hidden */
     calculatedFieldModule: CalculatedField;
@@ -124,2 +264,10 @@ /** @hidden */
     scrollPosObject: ScrollInfo;
+    /** @hidden */
+    pivotColumns: PivotColumn[];
+    /** @hidden */
+    firstColWidth: number | string;
+    /** @hidden */
+    totColWidth: number;
+    /** @hidden */
+    posCount: number;
     protected needsID: boolean;
@@ -145,2 +293,6 @@ /**
     /**
+     * Configures the settings of hyperlink settings.
+     */
+    hyperlinkSettings: HyperlinkSettingsModel;
+    /**
      * It allows the user to configure the pivot report as per the user need.
@@ -150,2 +302,8 @@ */
     /**
+     * Configures the edit behavior of the Pivot Grid.
+     * @default { allowAdding: false, allowEditing: false, allowDeleting: false, allowCommandColumns: false,
+     * mode:'Normal', allowEditOnDblClick: true, showConfirmDialog: true, showDeleteConfirmDialog: false }
+     */
+    editSettings: CellEditSettingsModel;
+    /**
      * It holds the pivot engine data which renders the Pivot widget.
@@ -160,2 +318,7 @@ */
     /**
+     * Allows to display the Tool-Tip on hovering value cells in pivot grid.
+     * @default true
+     */
+    showTooltip: boolean;
+    /**
      * It shows a common button for value fields to move together in column or row axis
@@ -202,2 +365,8 @@ * @default false
     /**
+     * If `allowDrillThrough` set to true, then you can view the raw items that are used to create a
+     * specified value cell in the pivot grid.
+     * @default false
+     */
+    allowDrillThrough: boolean;
+    /**
      * If `allowPdfExport` is set to true, then it will allow the user to export pivotview to Pdf file.
@@ -207,2 +376,12 @@ * @default false
     allowPdfExport: boolean;
+    /**
+     * If `allowDeferLayoutUpdate` is set to true, then it will enable defer layout update to pivotview.
+     * @default false
+     */
+    allowDeferLayoutUpdate: boolean;
+    /**
+     * It allows to set the maximum number of nodes to be displayed in the member editor.
+     * @default 1000
+     */
+    maxNodeLimitInMemberEditor: number;
     /** @hidden */
@@ -230,2 +409,12 @@ protected queryCellInfo: EmitType<QueryCellInfoEventArgs>;
     protected columnDrop: EmitType<ColumnDragEventArgs>;
+    /** @hidden */
+    beforeColumnsRender: EmitType<BeforeColumnRenderEventArgs>;
+    /** @hidden */
+    selected: EmitType<CellSelectEventArgs>;
+    /** @hidden */
+    cellDeselected: EmitType<CellDeselectEventArgs>;
+    /** @hidden */
+    rowSelected: EmitType<RowSelectEventArgs>;
+    /** @hidden */
+    rowDeselected: EmitType<RowDeselectEventArgs>;
     /**
@@ -277,2 +466,17 @@ * This allows any customization of PivotView properties on initial rendering.
     /**
+     * Triggers when value cell is clicked in the Pivot widget on Drill-Through.
+     * @event
+     */
+    drillThrough: EmitType<DrillThroughEventArgs>;
+    /**
+     * Triggers when hyperlink cell is clicked in the Pivot widget.
+     * @event
+     */
+    hyperlinkCellClick: EmitType<HyperCellClickEventArgs>;
+    /**
+     * Triggers when cell got selected in Pivot widget.
+     * @event
+     */
+    cellSelected: EmitType<PivotCellSelectedEventArgs>;
+    /**
      * Constructor for creating the widget
@@ -295,2 +499,3 @@ * @param  {PivotViewModel} options?
     private onBeforeTooltipOpen;
+    private renderToolTip;
     private initProperties;
@@ -400,3 +605,10 @@ /**
     private mouseClickHandler;
+    private framePivotColumns;
     /** @hidden */
+    setGridColumns(gridcolumns: ColumnModel[]): void;
+    /** hidden */
+    triggerColumnRenderEvent(gridcolumns: ColumnModel[]): void;
+    /** hidden */
+    setCommonColumnsWidth(columns: ColumnModel[], width: number): void;
+    /** @hidden */
     onWindowResize(): void;
@@ -409,3 +621,4 @@ private CellClicked;
     private applyFormatting;
+    private applyHyperlinkSettings;
     private checkCondition;
 }

src/pivotview/model/dataSource-model.d.ts

@@ -42,2 +42,18 @@ import { Property, Complex, Collection, ChildProperty, NumberFormatOptions, DateFormatOptions } from '@syncfusion/ej2-base';import { IDataSet, IDataOptions, IFieldOptions, IFilter, ISort, ICalculatedFieldSettings } from '../../base/engine';import { IDrillOptions, IValueSortSettings, IFormatSettings, IConditionalFormatSettings } from '../../base/engine';import { SummaryTypes, Sorting, FilterType, Operators, Condition } from '../../base/types';import { IStyle } from '../../base/engine';import { DataManager } from '@syncfusion/ej2-data';
 
+    /**
+     * It allows to set the base field to aggregate the values.
+     */
+    baseField?: string;
+
+    /**
+     * It allows to set the base item to aggregate the values.
+     */
+    baseItem?: string;
+
+    /**
+     * It allows to disable or enable sub totals in row/column axis.
+     * @default true
+     */
+    showSubTotals?: boolean;
+
 }
@@ -380,2 +396,38 @@
     /**
+     * It allows enable/disable sub total in pivot table.
+     * @default true
+     */
+    showSubTotals?: boolean;
+
+    /**
+     * It allows enable/disable row sub total in pivot table.
+     * @default true
+     */
+    showRowSubTotals?: boolean;
+
+    /**
+     * It allows enable/disable column sub total in pivot table.
+     * @default true
+     */
+    showColumnSubTotals?: boolean;
+
+    /**
+     * It allows enable/disable grand total in pivot table.
+     * @default true
+     */
+    showGrandTotals?: boolean;
+
+    /**
+     * It allows enable/disable row grand total in pivot table.
+     * @default true
+     */
+    showRowGrandTotals?: boolean;
+
+    /**
+     * It allows enable/disable column grand total in pivot table.
+     * @default true
+     */
+    showColumnGrandTotals?: boolean;
+
+    /**
      * It allows to set the settings of number formatting.
@@ -382,0 +434,0 @@ * @default []

src/pivotview/model/dataSource.d.ts

@@ -43,2 +43,15 @@ import { ChildProperty, NumberFormatOptions, DateFormatOptions } from '@syncfusion/ej2-base';
     showNoDataItems: boolean;
+    /**
+     * It allows to set the base field to aggregate the values.
+     */
+    baseField: string;
+    /**
+     * It allows to set the base item to aggregate the values.
+     */
+    baseItem: string;
+    /**
+     * It allows to disable or enable sub totals in row/column axis.
+     * @default true
+     */
+    showSubTotals: boolean;
 }
@@ -311,2 +324,32 @@ export declare class FieldListFieldOptions extends FieldOptions {
     /**
+     * It allows enable/disable sub total in pivot table.
+     * @default true
+     */
+    showSubTotals: boolean;
+    /**
+     * It allows enable/disable row sub total in pivot table.
+     * @default true
+     */
+    showRowSubTotals: boolean;
+    /**
+     * It allows enable/disable column sub total in pivot table.
+     * @default true
+     */
+    showColumnSubTotals: boolean;
+    /**
+     * It allows enable/disable grand total in pivot table.
+     * @default true
+     */
+    showGrandTotals: boolean;
+    /**
+     * It allows enable/disable row grand total in pivot table.
+     * @default true
+     */
+    showRowGrandTotals: boolean;
+    /**
+     * It allows enable/disable column grand total in pivot table.
+     * @default true
+     */
+    showColumnGrandTotals: boolean;
+    /**
      * It allows to set the settings of number formatting.
@@ -313,0 +356,0 @@ * @default []

src/pivotview/model/dataSource.js

@@ -44,2 +44,11 @@ var __extends = (this && this.__extends) || (function () {
     ], FieldOptions.prototype, "showNoDataItems", void 0);
+    __decorate([
+        Property()
+    ], FieldOptions.prototype, "baseField", void 0);
+    __decorate([
+        Property()
+    ], FieldOptions.prototype, "baseItem", void 0);
+    __decorate([
+        Property(true)
+    ], FieldOptions.prototype, "showSubTotals", void 0);
     return FieldOptions;
@@ -300,2 +309,20 @@ }(ChildProperty));
     __decorate([
+        Property(true)
+    ], DataSource.prototype, "showSubTotals", void 0);
+    __decorate([
+        Property(true)
+    ], DataSource.prototype, "showRowSubTotals", void 0);
+    __decorate([
+        Property(true)
+    ], DataSource.prototype, "showColumnSubTotals", void 0);
+    __decorate([
+        Property(true)
+    ], DataSource.prototype, "showGrandTotals", void 0);
+    __decorate([
+        Property(true)
+    ], DataSource.prototype, "showRowGrandTotals", void 0);
+    __decorate([
+        Property(true)
+    ], DataSource.prototype, "showColumnGrandTotals", void 0);
+    __decorate([
         Property([])
@@ -302,0 +329,0 @@ ], DataSource.prototype, "formatSettings", void 0);

src/pivotview/model/gridsettings-model.d.ts

@@ -1,2 +0,2 @@
-import { Property, ChildProperty, EmitType, Event } from '@syncfusion/ej2-base';import { ExcelHeaderQueryCellInfoEventArgs, GridLine, ClipMode, BeforeCopyEventArgs, PrintMode } from '@syncfusion/ej2-grids';import { ExcelQueryCellInfoEventArgs, PdfHeaderQueryCellInfoEventArgs, SelectionSettingsModel } from '@syncfusion/ej2-grids';import { QueryCellInfoEventArgs, HeaderCellInfoEventArgs, CellSelectEventArgs, RowSelectEventArgs } from '@syncfusion/ej2-grids';import { CellSelectingEventArgs, CellDeselectEventArgs, ResizeArgs, PrintEventArgs } from '@syncfusion/ej2-grids';import { ContextMenuItemModel, RowDeselectEventArgs, PdfQueryCellInfoEventArgs, ColumnDragEventArgs } from '@syncfusion/ej2-grids';import { BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-navigations';
+import { Property, ChildProperty, EmitType, Event } from '@syncfusion/ej2-base';import { ExcelHeaderQueryCellInfoEventArgs, GridLine, ClipMode, BeforeCopyEventArgs, PrintMode } from '@syncfusion/ej2-grids';import { ExcelQueryCellInfoEventArgs, PdfHeaderQueryCellInfoEventArgs, SelectionSettingsModel } from '@syncfusion/ej2-grids';import { QueryCellInfoEventArgs, HeaderCellInfoEventArgs, CellSelectEventArgs, RowSelectEventArgs } from '@syncfusion/ej2-grids';import { CellSelectingEventArgs, CellDeselectEventArgs, ResizeArgs, PrintEventArgs } from '@syncfusion/ej2-grids';import { ContextMenuItemModel, RowDeselectEventArgs, PdfQueryCellInfoEventArgs, ColumnDragEventArgs } from '@syncfusion/ej2-grids';import { BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-navigations';import { BeforeColumnRenderEventArgs } from '../../common';
 
@@ -249,2 +249,8 @@ /**
 
+    /**
+     * This allows to configure the column before it renders.
+     * @event 
+     */
+    beforeColumnsRender?: EmitType<BeforeColumnRenderEventArgs>;
+
 }

src/pivotview/model/gridsettings.d.ts

@@ -8,2 +8,3 @@ import { ChildProperty, EmitType } from '@syncfusion/ej2-base';
 import { BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-navigations';
+import { BeforeColumnRenderEventArgs } from '../../common';
 /**
@@ -217,2 +218,7 @@ *  Represents Pivot widget model class.
     columnDrop: EmitType<ColumnDragEventArgs>;
+    /**
+     * This allows to configure the column before it renders.
+     * @event
+     */
+    beforeColumnsRender: EmitType<BeforeColumnRenderEventArgs>;
 }

src/pivotview/model/gridsettings.js

@@ -140,4 +140,7 @@ var __extends = (this && this.__extends) || (function () {
     ], GridSettings.prototype, "columnDrop", void 0);
+    __decorate([
+        Event()
+    ], GridSettings.prototype, "beforeColumnsRender", void 0);
     return GridSettings;
 }(ChildProperty));
 export { GridSettings };

src/pivotview/model/pivotvalues-model.d.ts

@@ -83,2 +83,12 @@ import { Property, ChildProperty } from '@syncfusion/ej2-base';import { INumberIndex, IDataSet, IAxisSet, IPivotValues } from '../../base/engine';
 
+    /**
+     * Specifies the column header of a value cell.
+     */
+    columnHeaders?: string | number | Date;
+
+    /**
+     * Specifies the row header of a value cell.
+     */
+    rowHeaders?: string | number | Date;
+
 }

src/pivotview/model/pivotvalues.d.ts

@@ -69,2 +69,10 @@ import { ChildProperty } from '@syncfusion/ej2-base';
     isSum: boolean;
+    /**
+     * Specifies the column header of a value cell.
+     */
+    columnHeaders: string | number | Date;
+    /**
+     * Specifies the row header of a value cell.
+     */
+    rowHeaders: string | number | Date;
 }
@@ -71,0 +79,0 @@ /**

src/pivotview/model/pivotvalues.js

@@ -75,4 +75,10 @@ var __extends = (this && this.__extends) || (function () {
     ], AxisSet.prototype, "isSum", void 0);
+    __decorate([
+        Property()
+    ], AxisSet.prototype, "columnHeaders", void 0);
+    __decorate([
+        Property()
+    ], AxisSet.prototype, "rowHeaders", void 0);
     return AxisSet;
 }(ChildProperty));
 export { AxisSet };

src/pivotview/renderer/render.d.ts

@@ -21,2 +21,3 @@ import { PivotEngine } from '../../base/engine';
     private lastSpan;
+    private timeOutObj;
     /** Constructor for render module */
@@ -34,4 +35,6 @@ constructor(parent: PivotView);
     private setGroupWidth;
+    private selected;
     private rowCellBoundEvent;
     private columnCellBoundEvent;
+    private onHyperCellClick;
     private getRowStartPos;
@@ -43,3 +46,4 @@ private frameDataSource;
     frameStackedHeaders(): ColumnModel[];
-    private setSavedWidth;
+    /** hidden */
+    setSavedWidth(column: string, width: number): number;
     private frameEmptyColumns;
@@ -54,2 +58,4 @@ /** @hidden */
     private exportContentEvent;
+    private unWireEvents;
+    private wireEvents;
 }

src/pivotview/renderer/render.js

 import { Reorder, headerRefreshed } from '@syncfusion/ej2-grids';
 import { Grid, Resize, ExcelExport, PdfExport, ContextMenu, Freeze } from '@syncfusion/ej2-grids';
 import { Selection } from '@syncfusion/ej2-grids';
-import { createElement, setStyleAttribute, remove, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { createElement, setStyleAttribute, remove, isNullOrUndefined, EventHandler } from '@syncfusion/ej2-base';
 import * as cls from '../../common/base/css-constant';
@@ -22,3 +22,3 @@ import * as events from '../../common/base/constant';
     /** @hidden */
-    /* tslint:enable */
+    /* tslint:disable */
     Render.prototype.render = function () {
@@ -121,9 +121,21 @@ var parent = this.parent;
             rowSelecting: this.gridSettings.rowSelecting ? this.gridSettings.rowSelecting.bind(this.parent) : undefined,
-            rowSelected: this.gridSettings.rowSelected ? this.gridSettings.rowSelected.bind(this.parent) : undefined,
+            rowSelected: function (args) {
+                parent.renderModule.selected(args);
+                parent.trigger(events.rowSelected, args);
+            },
             rowDeselecting: this.gridSettings.rowDeselecting ? this.gridSettings.rowDeselecting.bind(this.parent) : undefined,
-            rowDeselected: this.gridSettings.rowDeselected ? this.gridSettings.rowDeselected.bind(this.parent) : undefined,
+            rowDeselected: function (args) {
+                parent.renderModule.selected(args);
+                parent.trigger(events.rowDeselected, args);
+            },
             cellSelecting: this.gridSettings.cellSelecting ? this.gridSettings.cellSelecting.bind(this.parent) : undefined,
-            cellSelected: this.gridSettings.cellSelected ? this.gridSettings.cellSelected.bind(this.parent) : undefined,
+            cellSelected: function (args) {
+                parent.renderModule.selected(args);
+                parent.trigger(events.selected, args);
+            },
             cellDeselecting: this.gridSettings.cellDeselecting ? this.gridSettings.cellDeselecting.bind(this.parent) : undefined,
-            cellDeselected: this.gridSettings.cellDeselected ? this.gridSettings.cellDeselected.bind(this.parent) : undefined,
+            cellDeselected: function (args) {
+                parent.renderModule.selected(args);
+                parent.trigger(events.cellDeselected, args);
+            },
             resizeStart: this.gridSettings.resizeStart ? this.gridSettings.resizeStart.bind(this.parent) : undefined,
@@ -239,10 +251,11 @@ columnDragStart: this.gridSettings.columnDragStart ? this.gridSettings.columnDragStart.bind(this) : undefined,
             this.parent.groupingBarModule.refreshUI();
-            if (this.parent.element.querySelector('.e-group-row').offsetWidth < 245) {
+            if (this.parent.element.querySelector('.e-group-row').offsetWidth < 245 && !this.parent.firstColWidth) {
                 args.cancel = true;
                 var gridColumn = this.parent.grid.columns;
+                var resColWidth = (this.parent.isAdaptive ? 180 : 250);
                 if (gridColumn && gridColumn.length > 0) {
-                    gridColumn[0].width = 250;
+                    gridColumn[0].width = resColWidth;
                 }
-                this.parent.element.querySelector('.e-frozenheader').querySelector('col').style.width = '250px';
-                this.parent.element.querySelector('.e-frozencontent').querySelector('col').style.width = '250px';
+                this.parent.element.querySelector('.e-frozenheader').querySelector('col').style.width = (resColWidth + 'px');
+                this.parent.element.querySelector('.e-frozencontent').querySelector('col').style.width = (resColWidth + 'px');
             }
@@ -256,5 +269,51 @@ this.parent.element.querySelector('.e-group-values').style.width =
     };
+    /* tslint:disable */
+    Render.prototype.selected = function (args) {
+        var _this = this;
+        clearTimeout(this.timeOutObj);
+        this.timeOutObj = setTimeout(function () {
+            var pivotArgs = { selectedCellsInfo: [], pivotValues: _this.parent.pivotValues };
+            var selectedElements = _this.parent.element.querySelectorAll('.' + cls.CELL_SELECTED_BGCOLOR);
+            selectedElements = selectedElements.length === 0 ? _this.parent.element.querySelectorAll('.' + cls.SELECTED_BGCOLOR) :
+                selectedElements;
+            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 rowIndex = Number(element.getAttribute('index'));
+                var cell = _this.engine.pivotValues[rowIndex][colIndex];
+                if (cell.axis === 'value') {
+                    pivotArgs.selectedCellsInfo.push({
+                        currentCell: cell,
+                        value: cell.value,
+                        columnHeaders: cell.columnHeaders,
+                        rowHeaders: cell.rowHeaders,
+                        measure: cell.actualText.toString()
+                    });
+                }
+                else if (cell.axis === 'column') {
+                    pivotArgs.selectedCellsInfo.push({
+                        currentCell: cell,
+                        value: cell.formattedText,
+                        columnHeaders: cell.valueSort.levelName,
+                        rowHeaders: '',
+                        measure: ''
+                    });
+                }
+                else {
+                    pivotArgs.selectedCellsInfo.push({
+                        currentCell: cell,
+                        value: cell.formattedText,
+                        columnHeaders: '',
+                        rowHeaders: cell.valueSort.levelName,
+                        measure: ''
+                    });
+                }
+            }
+            _this.parent.trigger(events.cellSelected, pivotArgs);
+        }, 300);
+    };
     Render.prototype.rowCellBoundEvent = function (args) {
         var tCell = args.cell;
         if (tCell && this.engine) {
+            var customClass = this.parent.hyperlinkSettings.cssClass;
             tCell.setAttribute('index', (Number(tCell.getAttribute('index')) + this.engine.headerContent.length).toString());
@@ -309,3 +368,3 @@ var cell = args.data[0];
                     className: cls.CELLVALUE,
-                    innerHTML: localizedText
+                    innerHTML: (this.parent.isRowCellHyperlink || cell.enableHyperlink ? '<a  data-url="' + localizedText + '" class="e-hyperlinkcell ' + customClass + '">' + localizedText + '</a>' : localizedText)
                 }));
@@ -340,5 +399,9 @@ var vSort = this.parent.pivotView.dataSource.valueSortSettings;
                     className: cls.CELLVALUE,
-                    innerHTML: innerText
+                    innerHTML: ((tCell.className.indexOf('e-summary') !== -1 && this.parent.isSummaryCellHyperlink) ||
+                        (tCell.className.indexOf('e-summary') === -1 && this.parent.isValueCellHyperlink) ||
+                        cell.enableHyperlink ? '<a data-url="' + innerText + '" class="e-hyperlinkcell ' + customClass + '">' + innerText + '</a>' : innerText)
                 }));
             }
+            this.unWireEvents(tCell);
+            this.wireEvents(tCell);
         }
@@ -352,2 +415,3 @@ this.parent.trigger(events.queryCellInfo, args);
             if (cell) {
+                var customClass = this.parent.hyperlinkSettings.cssClass;
                 var level = cell.level ? cell.level : 0;
@@ -386,2 +450,12 @@ if ((cell.level === -1 && !cell.rowSpan && cell.rowIndex !== this.engine.headerContent.length - 1)
                 tCell.classList.add(cls.COLUMNSHEADER);
+                if (this.parent.isColumnCellHyperlink || cell.enableHyperlink) {
+                    if (tCell.querySelector('.e-stackedheadercelldiv')) {
+                        var innerText = tCell.querySelector('.e-stackedheadercelldiv').innerText;
+                        tCell.querySelector('.e-stackedheadercelldiv').innerHTML = '<a data-url="' + innerText + '" class="e-hyperlinkcell ' + customClass + '">' + innerText + '</a>';
+                    }
+                    else if (tCell.querySelector('.e-headertext')) {
+                        var innerText = tCell.querySelector('.e-headertext').innerText;
+                        tCell.querySelector('.e-headertext').innerHTML = '<a data-url="' + innerText + '" class="e-hyperlinkcell ' + customClass + '">' + innerText + '</a>';
+                    }
+                }
                 if (cell.hasChild === true) {
@@ -410,2 +484,4 @@ var hdrdiv = tCell.querySelector('.e-headercelldiv');
                 tCell = this.appendValueSortIcon(cell, tCell, cell.rowIndex, cell.colIndex);
+                this.unWireEvents(tCell);
+                this.wireEvents(tCell);
             }
@@ -415,2 +491,15 @@ }
     };
+    Render.prototype.onHyperCellClick = function (e) {
+        var cell = e.target.parentElement.parentElement;
+        cell = (cell.className.indexOf('e-headercelldiv') > -1 ? cell.parentElement : cell);
+        var args = {
+            currentCell: cell,
+            data: this.engine.pivotValues[Number(cell.getAttribute('index'))][Number(cell.getAttribute('aria-colindex'))],
+            cancel: true
+        };
+        this.parent.trigger(events.hyperlinkCellClick, args);
+        if (!args.cancel) {
+            window.open(e.target.getAttribute('data-url'));
+        }
+    };
     Render.prototype.getRowStartPos = function () {
@@ -468,15 +557,13 @@ var pivotValues = this.parent.pivotValues;
             Number(this.parent.width);
+        var resColWidth = (this.parent.showGroupingBar && this.parent.groupingBarModule) ? (this.parent.isAdaptive ? 180 : 250) : (this.parent.isAdaptive ? 140 : 200);
         if (this.parent.showGroupingBar && this.parent.groupingBarModule && this.parent.grid && this.parent.dataSource.rows.length > 0) {
-            var gridColumn = this.parent.grid.columns;
-            parWidth = parWidth - gridColumn[0].width;
+            parWidth = parWidth - (this.gridSettings.columnWidth > resColWidth ? this.gridSettings.columnWidth : resColWidth);
             colCount = colCount - 1;
         }
-        var colWidth = (colCount * this.gridSettings.columnWidth + 80) < parWidth ?
-            (parWidth / colCount) : this.gridSettings.columnWidth;
+        var colWidth = (colCount * this.gridSettings.columnWidth + 78) < parWidth ? (parWidth / colCount) : this.gridSettings.columnWidth;
         return colWidth;
     };
     Render.prototype.calculateGridWidth = function () {
-        var colTotWidth = (this.engine.pivotValues[0].length * this.gridSettings.columnWidth + 80);
         var parWidth = this.parent.width;
-        if (this.parent.width === 'auto' && this.parent.element.offsetWidth < colTotWidth) {
+        if (this.parent.width === 'auto' && this.parent.element.offsetWidth < this.parent.totColWidth) {
             parWidth = this.parent.element.offsetWidth;
@@ -513,3 +600,6 @@ }
                                 minWidth: 30,
-                                format: cCnt === 0 ? '' : this.formatList[(cCnt - 1) % this.parent.dataSource.values.length]
+                                format: cCnt === 0 ? '' : this.formatList[(cCnt - 1) % this.parent.dataSource.values.length],
+                                allowReordering: this.parent.gridSettings.allowReordering,
+                                allowResizing: this.parent.gridSettings.allowResizing,
+                                visible: true
                             };
@@ -534,3 +624,6 @@ }
                                             this.setSavedWidth(colField[cCnt].valueSort.levelName, colWidth) : colWidth,
-                                        minWidth: 30
+                                        minWidth: 30,
+                                        allowReordering: this.parent.gridSettings.allowReordering,
+                                        allowResizing: this.parent.gridSettings.allowResizing,
+                                        visible: true
                                     };
@@ -555,9 +648,11 @@ innerModel = [integrateModel[splitPos[innerPos]]];
             } while (headerCnt > 0);
+            var resColWidth = (this.parent.showGroupingBar && this.parent.groupingBarModule) ? (this.parent.isAdaptive ? 180 : 250) : (this.parent.isAdaptive ? 140 : 200);
             integrateModel[0] = {
                 field: (0 + '.formattedText'),
-                width: this.setSavedWidth('0.formattedText', (this.parent.showGroupingBar && this.parent.groupingBarModule) ?
-                    colWidth < 250 ? 250 : colWidth : colWidth < 200 ? 200 : colWidth),
+                width: this.setSavedWidth('0.formattedText', colWidth < resColWidth ? resColWidth : colWidth),
                 minWidth: 30,
                 headerText: '',
-                allowReordering: false
+                allowReordering: false,
+                allowResizing: this.parent.gridSettings.allowResizing,
+                visible: true
             };
@@ -568,4 +663,6 @@ }
         }
+        this.parent.triggerColumnRenderEvent(integrateModel);
         return integrateModel;
     };
+    /** hidden */
     Render.prototype.setSavedWidth = function (column, width) {
@@ -617,4 +714,7 @@ width = this.parent.resizeInfo[column] ? this.parent.resizeInfo[column] : width;
         if (args.column.field === '0.formattedText') {
+            var isValueCell = args.data[0].type === 'value';
+            var level = isValueCell ? (this.lastSpan + 1) : args.data[0].level;
             this.colPos = 0;
-            args.style = { hAlign: 'Left', indent: args.data[0].level * 2 };
+            args.style = { hAlign: 'Left', indent: level * 2 };
+            this.lastSpan = isValueCell ? this.lastSpan : level;
         }
@@ -632,3 +732,6 @@ else {
         if (args.column.field === '0.formattedText') {
-            args.style = { paragraphIndent: args.data[0].level * 10 };
+            var isValueCell = args.data[0].type === 'value';
+            var level = isValueCell ? (this.lastSpan + 1) : args.data[0].level;
+            args.style = { paragraphIndent: level * 10 };
+            this.lastSpan = isValueCell ? this.lastSpan : level;
         }
@@ -659,4 +762,20 @@ this.parent.trigger(events.pdfQueryCellInfo, args);
     };
+    Render.prototype.unWireEvents = function (cell) {
+        if (cell.querySelector('.e-hyperlinkcell')) {
+            EventHandler.remove(cell.querySelector('.e-hyperlinkcell'), this.parent.isAdaptive ? 'touchend' : 'click', this.onHyperCellClick);
+        }
+        else {
+            return;
+        }
+    };
+    Render.prototype.wireEvents = function (cell) {
+        if (cell.querySelector('.e-hyperlinkcell')) {
+            EventHandler.add(cell.querySelector('.e-hyperlinkcell'), this.parent.isAdaptive ? 'touchend' : 'click', this.onHyperCellClick, this);
+        }
+        else {
+            return;
+        }
+    };
     return Render;
 }());
 export { Render };

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

10931596

increased by59.7%

Number of package files

209

increased by26.67%

Lines of code

103200

increased by65.11%

Worsened metrics

Number of low quality alerts

3

increased by50%

Dependency changes

• + Added@syncfusion/ej2-base@16.4.52(transitive)

• + Added@syncfusion/ej2-buttons@16.4.55(transitive)

• + Added@syncfusion/ej2-calendars@16.4.55(transitive)

• + Added@syncfusion/ej2-compression@16.4.52(transitive)

• + Added@syncfusion/ej2-data@16.4.52(transitive)

• + Added@syncfusion/ej2-dropdowns@16.4.55(transitive)

• + Added@syncfusion/ej2-excel-export@16.4.52(transitive)

• + Added@syncfusion/ej2-file-utils@16.4.52(transitive)

• + Added@syncfusion/ej2-grids@16.4.55(transitive)

• + Added@syncfusion/ej2-inputs@16.4.55(transitive)

• + Added@syncfusion/ej2-lists@16.4.52(transitive)

• + Added@syncfusion/ej2-navigations@16.4.54(transitive)

• + Added@syncfusion/ej2-pdf-export@16.4.52(transitive)

• + Added@syncfusion/ej2-popups@16.4.54(transitive)

• + Added@syncfusion/ej2-splitbuttons@16.4.53(transitive)

• - Removed@syncfusion/ej2-base@16.3.34(transitive)

• - Removed@syncfusion/ej2-buttons@16.3.34(transitive)

• - Removed@syncfusion/ej2-calendars@16.3.34(transitive)

• - Removed@syncfusion/ej2-compression@16.3.34(transitive)

• - Removed@syncfusion/ej2-data@16.3.34(transitive)

• - Removed@syncfusion/ej2-dropdowns@16.3.34(transitive)

• - Removed@syncfusion/ej2-excel-export@16.3.34(transitive)

• - Removed@syncfusion/ej2-file-utils@16.3.34(transitive)

• - Removed@syncfusion/ej2-grids@16.3.34(transitive)

• - Removed@syncfusion/ej2-inputs@16.3.34(transitive)

• - Removed@syncfusion/ej2-lists@16.3.34(transitive)

• - Removed@syncfusion/ej2-navigations@16.3.34(transitive)

• - Removed@syncfusion/ej2-pdf-export@16.3.34(transitive)

• - Removed@syncfusion/ej2-popups@16.3.34(transitive)

• - Removed@syncfusion/ej2-splitbuttons@16.3.34(transitive)

• Updated@syncfusion/ej2-base@~16.4.40-beta

• Updated@syncfusion/ej2-buttons@~16.4.40-beta

• Updated@syncfusion/ej2-calendars@~16.4.40-beta

• Updated@syncfusion/ej2-compression@~16.4.40-beta

• Updated@syncfusion/ej2-data@~16.4.40-beta

• Updated@syncfusion/ej2-dropdowns@~16.4.40-beta

• Updated@syncfusion/ej2-excel-export@~16.4.40-beta

• Updated@syncfusion/ej2-file-utils@~16.4.40-beta

• Updated@syncfusion/ej2-grids@~16.4.40-beta

• Updated@syncfusion/ej2-inputs@~16.4.40-beta

• Updated@syncfusion/ej2-lists@~16.4.40-beta

• Updated@syncfusion/ej2-navigations@~16.4.40-beta

• Updated@syncfusion/ej2-pdf-export@~16.4.40-beta

• Updated@syncfusion/ej2-popups@~16.4.40-beta