@syncfusion/ej2-grids - npm Package Compare versions

Comparing version 15.4.30 to 16.1.24

CHANGELOG.md

@@ -7,2 +7,17 @@ # Changelog
 
+#### New Features
+
+- New Excel like column filtering option is added.
+- Added Look-up table or foreign key data binding to grid column.
+- Row height adjustment feature added.
+
+#### Breaking Changes
+
+- All grid enum property values are changed from camel casing to pascal casing. Please refer the below link for complete API changes from `v15.4.23` to `v16.1.24`.
+[Migration](http://ej2.syncfusion.com/documentation/grid/migration.html).
+
+## 15.4.30-preview (2018-02-14)
+
+### Grid
+
 #### Bug Fixes
@@ -9,0 +24,0 @@

dist/global/index.d.ts

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

package.json

 {
   "name": "@syncfusion/ej2-grids",
-  "version": "15.4.30",
+  "version": "16.1.24",
   "description": "Essential JS 2 Grid Component",
@@ -11,15 +11,15 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "^15.4.23",
-    "@syncfusion/ej2-data": "^15.4.30",
-    "@syncfusion/ej2-navigations": "^15.4.30",
-    "@syncfusion/ej2-inputs": "^15.4.29",
-    "@syncfusion/ej2-calendars": "^15.4.26",
-    "@syncfusion/ej2-dropdowns": "^15.4.27",
-    "@syncfusion/ej2-popups": "^15.4.27",
-    "@syncfusion/ej2-buttons": "^15.4.30",
-    "@syncfusion/ej2-lists": "^15.4.26",
-    "@syncfusion/ej2-excel-export": "^15.4.30",
-    "@syncfusion/ej2-pdf-export": "^15.4.30",
-    "@syncfusion/ej2-file-utils": "^15.4.26",
-    "@syncfusion/ej2-compression": "^15.4.26"
+    "@syncfusion/ej2-base": "^16.1.24",
+    "@syncfusion/ej2-data": "^16.1.24",
+    "@syncfusion/ej2-navigations": "^16.1.24",
+    "@syncfusion/ej2-inputs": "^16.1.24",
+    "@syncfusion/ej2-calendars": "^16.1.24",
+    "@syncfusion/ej2-dropdowns": "^16.1.24",
+    "@syncfusion/ej2-popups": "^16.1.24",
+    "@syncfusion/ej2-buttons": "^16.1.24",
+    "@syncfusion/ej2-lists": "^16.1.24",
+    "@syncfusion/ej2-excel-export": "^16.1.24",
+    "@syncfusion/ej2-pdf-export": "^16.1.24",
+    "@syncfusion/ej2-file-utils": "^16.1.24",
+    "@syncfusion/ej2-compression": "^16.1.24"
   },
@@ -26,0 +26,0 @@ "devDependencies": {

src/grid/actions/batch-edit.js

@@ -164,2 +164,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/enum", "../base/util", "../base/constant", "../renderer/row-renderer", "../renderer/cell-renderer", "../models/cell", "../services/row-model-generator"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, enum_1, util_1, events, row_renderer_1, cell_renderer_1, cell_1, row_model_generator_1) {
             }
+            gObj.notify(events.batchCancel, { rows: this.parent.getRowsObject() });
             gObj.selectRow(this.cellDetails.rowIndex);
@@ -172,5 +173,6 @@ this.refreshRowIdx();
             this.saveCell();
-            if (!this.validateFormObj()) {
-                this.bulkDelete(fieldname, data);
+            if (this.validateFormObj()) {
+                this.saveCell(true);
             }
+            this.bulkDelete(fieldname, data);
         };
@@ -314,2 +316,3 @@ BatchEdit.prototype.addRecord = function (data) {
             var mRows = [];
+            var nonMovableRows = [];
             var frzCols = this.parent.getFrozenColumns();
@@ -320,2 +323,5 @@ if (this.parent.frozenRows) {
                     mRows = [].slice.call(this.parent.getHeaderContent().querySelector('.e-movableheader').querySelector('tbody').children);
+                    for (var i = 0; i < mRows.length; i++) {
+                        nonMovableRows[i] = ej2_base_2.createElement('tr', { className: 'emptynonmv' });
+                    }
                 }
@@ -325,2 +331,3 @@ }
                 mRows = mRows.concat([].slice.call(this.parent.getContentTable().querySelector('tbody').children));
+                nonMovableRows = nonMovableRows.concat([].slice.call(this.parent.element.querySelector('.e-movablecontent').querySelector('tbody').children));
             }
@@ -333,2 +340,5 @@ rows = rows.concat([].slice.call(this.parent.getContentTable().querySelector('tbody').children));
                         mRows[i].setAttribute('aria-rowindex', j.toString());
+                        if (nonMovableRows[i].classList.contains('e-row')) {
+                            nonMovableRows[i].setAttribute('aria-rowindex', j.toString());
+                        }
                     }
@@ -409,2 +419,3 @@ j++;
             this.focus.forgetPrevious();
+            gObj.notify(events.batchAdd, { rows: this.parent.getRowsObject() });
             gObj.selectRow(0);
@@ -421,3 +432,2 @@ if (!data) {
             gObj.trigger(events.batchAdd, args1);
-            gObj.notify(events.batchAdd, { rows: this.parent.getRowsObject() });
         };
@@ -473,4 +483,8 @@ BatchEdit.prototype.renderMovable = function (ele) {
             if (gObj.editSettings.allowEditing && col.allowEditing) {
-                if (gObj.isEdit && !(this.cellDetails.column.field === field && this.cellDetails.rowIndex === index)) {
+                if (gObj.isEdit && !(this.cellDetails.column.field === field
+                    && (this.cellDetails.rowIndex === index && this.parent.getDataRows().length - 1 !== index))) {
                     this.saveCell();
+                    if (this.cellDetails.rowIndex === index && this.cellDetails.column.field === field) {
+                        return;
+                    }
                 }
@@ -574,12 +588,14 @@ if (gObj.isEdit) {
         BatchEdit.prototype.getColIndex = function (cells, index) {
-            var hiddencol = this.parent.groupSettings.columns.length;
-            var indentCells = 0;
+            var cIdx = 0;
+            if (this.parent.allowGrouping && this.parent.groupSettings.columns) {
+                cIdx = this.parent.groupSettings.columns.length;
+            }
+            if (!ej2_base_3.isNullOrUndefined(this.parent.detailTemplate) || !ej2_base_3.isNullOrUndefined(this.parent.childGrid)) {
+                cIdx++;
+            }
             for (var m = 0; m < cells.length; m++) {
                 var colIndex = parseInt(cells[m].getAttribute('aria-colindex'), 10);
-                if (isNaN(colIndex)) {
-                    indentCells++;
+                if (colIndex === index - cIdx) {
+                    return m;
                 }
-                if (colIndex === index - hiddencol) {
-                    return m - indentCells + hiddencol;
-                }
             }
@@ -586,0 +602,0 @@ return -1;

src/grid/actions/checkbox-filter.js

@@ -146,5 +146,8 @@ define(["require", "exports", "@syncfusion/ej2-base", "../base/util", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "@syncfusion/ej2-buttons", "../base/constant", "../services/value-formatter", "../base/util", "@syncfusion/ej2-popups", "@syncfusion/ej2-inputs", "@syncfusion/ej2-popups", "../base/util"], function (require, exports, ej2_base_1, util_1, ej2_base_2, ej2_data_1, ej2_buttons_1, events, value_formatter_1, util_2, ej2_popups_1, ej2_inputs_1, ej2_popups_2, util_3) {
                 requestType: events.filterBeforeOpen, filterModel: this,
-                columnName: this.options.field, columnType: this.options.type
+                columnName: this.options.field, columnType: this.options.type, cancel: false
             };
             this.parent.trigger(events.actionBegin, args);
+            if (args.cancel) {
+                return;
+            }
             this.dialogObj = new ej2_popups_1.Dialog({
@@ -151,0 +154,0 @@ visible: false, content: this.sBox,

src/grid/actions/clipboard.js

@@ -43,9 +43,17 @@ define(["require", "exports", "@syncfusion/ej2-base", "../base/constant"], function (require, exports, ej2_base_1, events) {
             if (window.getSelection().toString() === '') {
+                var isFrozen = this.parent.getFrozenColumns();
                 this.clipBoardTextArea.value = this.copyContent = '';
+                var mRows = void 0;
                 var rows = this.parent.getRows();
-                if (this.parent.selectionSettings.mode !== 'cell') {
-                    var rows_1 = this.parent.getRows();
+                if (isFrozen) {
+                    mRows = this.parent.getMovableDataRows();
+                }
+                if (this.parent.selectionSettings.mode !== 'Cell') {
                     var selectedIndexes = this.parent.getSelectedRowIndexes().sort(function (a, b) { return a - b; });
                     if (withHeader) {
-                        this.getCopyData([].slice.call(this.parent.element.querySelectorAll('.e-headercell')), false, '\t', withHeader);
+                        var headerTextArray = [];
+                        for (var i = 0; i < this.parent.getVisibleColumns().length; i++) {
+                            headerTextArray[i] = this.parent.getVisibleColumns()[i].headerText;
+                        }
+                        this.getCopyData(headerTextArray, false, '\t', withHeader);
                         this.copyContent += '\n';
@@ -57,3 +65,7 @@ }
                         }
-                        this.getCopyData([].slice.call(rows_1[selectedIndexes[i]].querySelectorAll('.e-rowcell')), false, '\t', withHeader);
+                        var cells = [].slice.call(rows[selectedIndexes[i]].querySelectorAll('.e-rowcell'));
+                        if (isFrozen) {
+                            cells.push.apply(cells, [].slice.call(mRows[selectedIndexes[i]].querySelectorAll('.e-rowcell')));
+                        }
+                        this.getCopyData(cells, false, '\t', withHeader);
                     }
@@ -76,3 +88,8 @@ }
                             }
-                            this.getCopyData([].slice.call(rows[obj.rowIndexes[i]].querySelectorAll('.e-cellselectionbackground')), false, '\t', withHeader);
+                            var cells = [].slice.call(rows[obj.rowIndexes[i]].
+                                querySelectorAll('.e-cellselectionbackground'));
+                            if (isFrozen) {
+                                cells.push.apply(cells, [].slice.call(mRows[obj.rowIndexes[i]].querySelectorAll('.e-cellselectionbackground')));
+                            }
+                            this.getCopyData(cells, false, '\t', withHeader);
                         }
@@ -103,7 +120,15 @@ }
         Clipboard.prototype.getCopyData = function (cells, isCell, splitKey, withHeader) {
+            var isElement = typeof cells[0] !== 'string';
             for (var j = 0; j < cells.length; j++) {
                 if (withHeader && isCell) {
-                    this.copyContent += this.parent.getVisibleColumns()[parseInt(cells[j].getAttribute('aria-colindex'), 10)].headerText + '\n';
+                    this.copyContent += this.parent.getColumns()[parseInt(cells[j].getAttribute('aria-colindex'), 10)].headerText + '\n';
                 }
-                this.copyContent += cells[j].textContent;
+                if (isElement) {
+                    if (!cells[j].classList.contains('e-hide')) {
+                        this.copyContent += cells[j].textContent;
+                    }
+                }
+                else {
+                    this.copyContent += cells[j];
+                }
                 if (j < cells.length - 1) {
@@ -135,3 +160,3 @@ this.copyContent += splitKey;
             var obj = { status: false };
-            if (gridObj.selectionSettings.mode === 'cell') {
+            if (gridObj.selectionSettings.mode === 'Cell') {
                 var rowCellIndxes = gridObj.getSelectedRowCellIndexes();
@@ -138,0 +163,0 @@ var str = void 0;

src/grid/actions/column-chooser.js

@@ -107,5 +107,8 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "@syncfusion/ej2-base", "../base/constant", "@syncfusion/ej2-popups", "../base/util", "@syncfusion/ej2-buttons", "../services/focus-strategy"], function (require, exports, ej2_base_1, ej2_data_1, ej2_base_2, events, ej2_popups_1, util_1, ej2_buttons_1, focus_strategy_1) {
                     requestType: 'beforeOpenColumnChooser', element: this.parent.element,
-                    columns: this.getColumns()
+                    columns: this.getColumns(), cancel: false
                 };
                 this.parent.trigger(events.beforeOpenColumnChooser, args1);
+                if (args1.cancel) {
+                    return;
+                }
                 this.refreshCheckboxState();
@@ -121,3 +124,3 @@ this.dlgObj.dataBind();
                 if (!ej2_base_1.isNullOrUndefined(ej2_base_2.closest(target, '.e-bigger'))) {
-                    this.dlgObj.width = 253;
+                    this.dlgObj.width = 258;
                 }
@@ -268,2 +271,3 @@ if (ej2_base_1.Browser.isDevice) {
                 this.clearActions();
+                this.parent.notify(events.tooltipDestroy, { module: 'edit' });
             }
@@ -270,0 +274,0 @@ };

src/grid/actions/column-menu.js

@@ -46,7 +46,7 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-navigations", "../base/util", "../base/constant", "@syncfusion/ej2-popups", "@syncfusion/ej2-buttons", "../actions/group", "../actions/sort", "../actions/filter", "../actions/resize"], function (require, exports, ej2_base_1, ej2_base_2, ej2_navigations_1, util_1, events, ej2_popups_1, ej2_buttons_1, group_1, sort_1, filter_1, resize_1) {
             if (e.target.classList.contains('e-columnmenu')) {
-                if (!this.isOpen) {
+                if ((this.isOpen && this.headerCell !== this.getHeaderCell(e)) || document.querySelector('.e-grid-menu .e-menu-parent.e-ul')) {
+                    this.columnMenu.close();
                     this.openColumnMenu(e);
                 }
-                else if (this.isOpen && this.headerCell !== this.getHeaderCell(e)) {
-                    this.columnMenu.close();
+                else if (!this.isOpen) {
                     this.openColumnMenu(e);
@@ -163,3 +163,3 @@ }
             }
-            else if (args.item.id && this.getKeyFromId(args.item.id) === 'filter') {
+            else if (args.item.id && this.getKeyFromId(args.item.id) === 'Filter') {
                 args.element.appendChild(ej2_base_2.createElement('span', { className: 'e-icons e-caret' }));
@@ -172,3 +172,3 @@ args.element.className += 'e-filter-item e-menu-caret-icon';
             if (!ej2_base_1.isNullOrUndefined(args.parentItem) &&
-                this.getKeyFromId(args.parentItem.id) === 'columnChooser' &&
+                this.getKeyFromId(args.parentItem.id) === 'ColumnChooser' &&
                 colChooser && this.isChooserItem(colChooser)) {
@@ -210,3 +210,3 @@ args.cancel = true;
             switch (item) {
-                case 'group':
+                case 'Group':
                     if (!this.parent.allowGrouping || (this.parent.ensureModuleInjected(group_1.Group) && this.targetColumn
@@ -217,7 +217,7 @@ && this.parent.groupSettings.columns.indexOf(this.targetColumn.field) >= 0)) {
                     break;
-                case 'autoFitAll':
-                case 'autoFit':
+                case 'AutoFitAll':
+                case 'AutoFit':
                     status = !this.parent.ensureModuleInjected(resize_1.Resize);
                     break;
-                case 'ungroup':
+                case 'Ungroup':
                     if (!this.parent.ensureModuleInjected(group_1.Group) || (this.parent.ensureModuleInjected(group_1.Group) && this.targetColumn
@@ -228,4 +228,4 @@ && this.parent.groupSettings.columns.indexOf(this.targetColumn.field) < 0)) {
                     break;
-                case 'sortDescending':
-                case 'sortAscending':
+                case 'SortDescending':
+                case 'SortAscending':
                     if (this.parent.allowSorting && this.parent.ensureModuleInjected(sort_1.Sort)
@@ -244,4 +244,4 @@ && this.parent.sortSettings.columns.length > 0 && this.targetColumn) {
                     break;
-                case 'filter':
-                    status = !(this.parent.allowFiltering && (this.parent.filterSettings.type !== 'filterbar')
+                case 'Filter':
+                    status = !(this.parent.allowFiltering && (this.parent.filterSettings.type !== 'FilterBar')
                         && this.parent.ensureModuleInjected(filter_1.Filter));
@@ -252,23 +252,23 @@ }
         ColumnMenu.prototype.columnMenuItemClick = function (args) {
-            var item = this.isChooserItem(args.item) ? 'columnChooser' : this.getKeyFromId(args.item.id);
+            var item = this.isChooserItem(args.item) ? 'ColumnChooser' : this.getKeyFromId(args.item.id);
             switch (item) {
-                case 'autoFit':
+                case 'AutoFit':
                     this.parent.autoFitColumns(this.targetColumn.field);
                     break;
-                case 'autoFitAll':
+                case 'AutoFitAll':
                     this.parent.autoFitColumns([]);
                     break;
-                case 'ungroup':
+                case 'Ungroup':
                     this.parent.ungroupColumn(this.targetColumn.field);
                     break;
-                case 'group':
+                case 'Group':
                     this.parent.groupColumn(this.targetColumn.field);
                     break;
-                case 'sortAscending':
-                    this.parent.sortColumn(this.targetColumn.field, 'ascending');
+                case 'SortAscending':
+                    this.parent.sortColumn(this.targetColumn.field, 'Ascending');
                     break;
-                case 'sortDescending':
-                    this.parent.sortColumn(this.targetColumn.field, 'descending');
+                case 'SortDescending':
+                    this.parent.sortColumn(this.targetColumn.field, 'Descending');
                     break;
-                case 'columnChooser':
+                case 'ColumnChooser':
                     var key = this.getKeyFromId(args.item.id, this.CHOOSER);
@@ -285,3 +285,3 @@ var checkbox = args.element.querySelector('.e-checkbox-wrapper .e-frame');
                     break;
-                case 'filter':
+                case 'Filter':
                     this.getFilter(args.element, args.item.id);
@@ -306,3 +306,3 @@ break;
         ColumnMenu.prototype.getDefaultItems = function () {
-            return ['autoFitAll', 'autoFit', 'sortAscending', 'sortDescending', 'group', 'ungroup', 'columnChooser', 'filter'];
+            return ['AutoFitAll', 'AutoFit', 'SortAscending', 'SortDescending', 'Group', 'Ungroup', 'ColumnChooser', 'Filter'];
         };
@@ -315,3 +315,3 @@ ColumnMenu.prototype.getItems = function () {
                 if (typeof item === 'string') {
-                    if (item === 'columnChooser') {
+                    if (item === 'ColumnChooser') {
                         var col = this.getDefaultItem(item);
@@ -334,15 +334,15 @@ col.items = this.createChooserItems();
             switch (item) {
-                case 'sortAscending':
+                case 'SortAscending':
                     menuItem = { iconCss: this.ASCENDING };
                     break;
-                case 'sortDescending':
+                case 'SortDescending':
                     menuItem = { iconCss: this.DESCENDING };
                     break;
-                case 'group':
+                case 'Group':
                     menuItem = { iconCss: this.GROUP };
                     break;
-                case 'ungroup':
+                case 'Ungroup':
                     menuItem = { iconCss: this.UNGROUP };
                     break;
-                case 'filter':
+                case 'Filter':
                     menuItem = { iconCss: this.FILTER };
@@ -375,10 +375,10 @@ break;
             return {
-                'autoFitAll': 'autoFitAll',
-                'autoFit': 'autoFit',
-                'group': 'Group',
-                'ungroup': 'Ungroup',
-                'sortAscending': 'SortAscending',
-                'sortDescending': 'SortDescending',
-                'columnChooser': 'Columnchooser',
-                'filter': 'FilterMenu'
+                'AutoFitAll': 'autoFitAll',
+                'AutoFit': 'autoFit',
+                'Group': 'Group',
+                'Ungroup': 'Ungroup',
+                'SortAscending': 'SortAscending',
+                'SortDescending': 'SortDescending',
+                'ColumnChooser': 'Columnchooser',
+                'Filter': 'FilterMenu'
             };
@@ -407,3 +407,3 @@ };
         ColumnMenu.prototype.appendFilter = function (e) {
-            var filter = 'filter';
+            var filter = 'Filter';
             if (!this.defaultItems[filter]) {
@@ -473,17 +473,17 @@ return;
             if (this.parent.ensureModuleInjected(resize_1.Resize)) {
-                items.push('autoFitAll');
-                items.push('autoFit');
+                items.push('AutoFitAll');
+                items.push('AutoFit');
             }
             if (this.parent.allowGrouping && this.parent.ensureModuleInjected(group_1.Group)) {
-                items.push('group');
-                items.push('ungroup');
+                items.push('Group');
+                items.push('Ungroup');
             }
             if (this.parent.allowSorting && this.parent.ensureModuleInjected(sort_1.Sort)) {
-                items.push('sortAscending');
-                items.push('sortDescending');
+                items.push('SortAscending');
+                items.push('SortDescending');
             }
-            items.push('columnChooser');
-            if (this.parent.allowFiltering && (this.parent.filterSettings.type !== 'filterbar') &&
+            items.push('ColumnChooser');
+            if (this.parent.allowFiltering && (this.parent.filterSettings.type !== 'FilterBar') &&
                 this.parent.ensureModuleInjected(filter_1.Filter)) {
-                items.push('filter');
+                items.push('Filter');
             }
@@ -501,3 +501,3 @@ return items;
             return (this.parent.columnMenuItems &&
-                this.parent.columnMenuItems.indexOf('filter') >= 0) || !this.parent.columnMenuItems;
+                this.parent.columnMenuItems.indexOf('Filter') >= 0) || !this.parent.columnMenuItems;
         };
@@ -504,0 +504,0 @@ return ColumnMenu;

src/grid/actions/command-column.js

@@ -16,19 +16,24 @@ define(["require", "exports", "@syncfusion/ej2-base", "../base/constant", "../base/enum", "../renderer/command-column-renderer"], function (require, exports, ej2_base_1, constant_1, enum_1, command_column_renderer_1) {
             var gObj = this.parent;
-            var gID = this.parent.element.id;
+            var gID = gObj.element.id;
             var target = ej2_base_1.closest(e.target, 'button');
-            if (!target || !gObj.editModule) {
+            if (!target || !gObj.editModule || !ej2_base_1.closest(e.target, '.e-unboundcell')) {
                 return;
             }
-            switch (target.id.split('_')[0]) {
-                case gID + 'edit':
+            var buttonObj = target.ej2_instances[0];
+            var type = buttonObj.commandType;
+            if (buttonObj.disabled) {
+                return;
+            }
+            switch (type) {
+                case 'Edit':
                     gObj.editModule.endEdit();
                     gObj.editModule.startEdit(ej2_base_1.closest(target, 'tr'));
                     break;
-                case gID + 'cancel':
+                case 'Cancel':
                     gObj.editModule.closeEdit();
                     break;
-                case gID + 'save':
+                case 'Save':
                     gObj.editModule.endEdit();
                     break;
-                case gID + 'delete':
+                case 'Delete':
                     gObj.editModule.endEdit();
@@ -35,0 +40,0 @@ gObj.clearSelection();

src/grid/actions/context-menu.d.ts

@@ -49,2 +49,3 @@ import { ContextMenu as Menu } from '@syncfusion/ej2-navigations';
     cell: HTMLTableCellElement;
+    private keyPressHandlerFunction;
     constructor(parent?: IGrid, serviceLocator?: ServiceLocator);
@@ -59,2 +60,3 @@ /**
     removeEventListener(): void;
+    private keyDownHandler(e);
     private render();
@@ -71,2 +73,3 @@ private enableAfterRenderMenu(e);
     private ensureTarget(targetElement, selector);
+    private ensureFrozenHeader(targetElement);
     private ensureDisabledStatus(item);
@@ -73,0 +76,0 @@ /**

src/grid/actions/context-menu.js

@@ -53,6 +53,14 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-navigations", "../base/constant", "../actions/resize", "../actions/page", "../base/util", "../actions/group", "../actions/sort", "../actions/pdf-export", "../actions/excel-export"], function (require, exports, ej2_base_1, ej2_base_2, ej2_navigations_1, events, resize_1, page_1, util_1, group_1, sort_1, pdf_export_1, excel_export_1) {
             this.parent.off(events.uiUpdate, this.enableAfterRenderMenu);
+            ej2_base_1.EventHandler.remove(this.element, 'keydown', this.keyDownHandler.bind(this));
         };
+        ContextMenu.prototype.keyDownHandler = function (e) {
+            if (e.code === 'Tab' || e.which === 9) {
+                this.contextMenu.close();
+            }
+        };
         ContextMenu.prototype.render = function () {
+            this.parent.element.classList.add('e-noselect');
             this.l10n = this.serviceLocator.getService('localization');
             this.element = ej2_base_2.createElement('ul', { id: this.gridID + '_cmenu' });
+            ej2_base_1.EventHandler.add(this.element, 'keydown', this.keyDownHandler.bind(this));
             this.parent.element.appendChild(this.element);
@@ -79,2 +87,3 @@ var target = '#' + this.gridID;
                     ej2_base_2.remove(this.element);
+                    this.parent.element.classList.remove('e-noselect');
                 }
@@ -121,16 +130,16 @@ this.render();
             switch (item) {
-                case 'autoFitAll':
+                case 'AutoFitAll':
                     this.parent.autoFitColumns([]);
                     break;
-                case 'autoFit':
+                case 'AutoFit':
                     this.parent.autoFitColumns(this.targetColumn.field);
                     break;
-                case 'group':
+                case 'Group':
                     this.parent.groupColumn(this.targetColumn.field);
                     break;
-                case 'ungroup':
+                case 'Ungroup':
                     this.parent.ungroupColumn(this.targetColumn.field);
                     break;
-                case 'edit':
-                    if (this.parent.editSettings.mode === 'batch') {
+                case 'Edit':
+                    if (this.parent.editSettings.mode === 'Batch') {
                         if (this.row && this.cell && !isNaN(parseInt(this.cell.getAttribute('aria-colindex'), 10))) {
@@ -145,4 +154,4 @@ this.parent.editModule.editCell(parseInt(this.row.getAttribute('aria-rowindex'), 10), this.parent.getColumns()[parseInt(this.cell.getAttribute('aria-colindex'), 10)].field);
                     break;
-                case 'delete':
-                    if (this.parent.editSettings.mode !== 'batch') {
+                case 'Delete':
+                    if (this.parent.editSettings.mode !== 'Batch') {
                         this.parent.editModule.endEdit();
@@ -152,38 +161,38 @@ }
                     break;
-                case 'save':
+                case 'Save':
                     this.parent.editModule.endEdit();
                     break;
-                case 'cancel':
+                case 'Cancel':
                     this.parent.editModule.closeEdit();
                     break;
-                case 'copy':
+                case 'Copy':
                     this.parent.copy();
                     break;
-                case 'pdfExport':
+                case 'PdfExport':
                     this.parent.pdfExport();
                     break;
-                case 'excelExport':
+                case 'ExcelExport':
                     this.parent.excelExport();
                     break;
-                case 'csvExport':
+                case 'CsvExport':
                     this.parent.csvExport();
                     break;
-                case 'sortAscending':
+                case 'SortAscending':
                     this.isOpen = false;
-                    this.parent.sortColumn(this.targetColumn.field, 'ascending');
+                    this.parent.sortColumn(this.targetColumn.field, 'Ascending');
                     break;
-                case 'sortDescending':
+                case 'SortDescending':
                     this.isOpen = false;
-                    this.parent.sortColumn(this.targetColumn.field, 'descending');
+                    this.parent.sortColumn(this.targetColumn.field, 'Descending');
                     break;
-                case 'firstPage':
+                case 'FirstPage':
                     this.parent.goToPage(1);
                     break;
-                case 'prevPage':
+                case 'PrevPage':
                     this.parent.goToPage(this.parent.pageSettings.currentPage - 1);
                     break;
-                case 'lastPage':
+                case 'LastPage':
                     this.parent.goToPage(this.getLastPage());
                     break;
-                case 'nextPage':
+                case 'NextPage':
                     this.parent.goToPage(this.parent.pageSettings.currentPage + 1);
@@ -228,3 +237,3 @@ break;
                 this.targetColumn = this.getColumn(args.event);
-                this.selectRow(args.event, this.parent.selectionSettings.type !== 'multiple');
+                this.selectRow(args.event, this.parent.selectionSettings.type !== 'Multiple');
                 for (var _i = 0, _a = args.items; _i < _a.length; _i++) {
@@ -240,10 +249,10 @@ var item = _a[_i];
                             this.ensureTarget(args.event.target, exports.menuClass.batchEdit))) {
-                            if (key !== 'save' && key !== 'cancel') {
+                            if (key !== 'Save' && key !== 'Cancel') {
                                 this.hiddenItems.push(item.text);
                             }
                         }
-                        else if (this.parent.editSettings.mode === 'batch' && ((ej2_base_1.closest(args.event.target, '.e-gridform')) ||
+                        else if (this.parent.editSettings.mode === 'Batch' && ((ej2_base_1.closest(args.event.target, '.e-gridform')) ||
                             this.parent.editModule.getBatchChanges()[changedRecords].length ||
                             this.parent.editModule.getBatchChanges()[addedRecords].length ||
-                            this.parent.editModule.getBatchChanges()[deletedRecords].length) && (key === 'save' || key === 'cancel')) {
+                            this.parent.editModule.getBatchChanges()[deletedRecords].length) && (key === 'Save' || key === 'Cancel')) {
                             continue;
@@ -274,3 +283,6 @@ }
             var target = targetElement;
-            if (selector === exports.menuClass.header || selector === exports.menuClass.content) {
+            if (this.ensureFrozenHeader(targetElement) && (selector === exports.menuClass.header || selector === exports.menuClass.content)) {
+                target = ej2_base_1.closest(targetElement, selector === exports.menuClass.header ? 'thead' : 'tbody');
+            }
+            else if (selector === exports.menuClass.content || selector === exports.menuClass.header) {
                 target = util_1.parentsUntil(ej2_base_1.closest(targetElement, '.e-table'), selector.substr(1, selector.length));
@@ -281,4 +293,8 @@ }
             }
-            return target && util_1.parentsUntil(target, 'e-grid') === this.parent.element ? true : false;
+            return target && util_1.parentsUntil(target, 'e-grid') === this.parent.element;
         };
+        ContextMenu.prototype.ensureFrozenHeader = function (targetElement) {
+            return (this.parent.getFrozenColumns() || this.parent.frozenRows)
+                && ej2_base_1.closest(targetElement, exports.menuClass.header) ? true : false;
+        };
         ContextMenu.prototype.ensureDisabledStatus = function (item) {
@@ -288,7 +304,7 @@ var _this = this;
             switch (item) {
-                case 'autoFitAll':
-                case 'autoFit':
+                case 'AutoFitAll':
+                case 'AutoFit':
                     status = !(this.parent.ensureModuleInjected(resize_1.Resize) && !this.parent.isEdit);
                     break;
-                case 'group':
+                case 'Group':
                     if (!this.parent.allowGrouping || (this.parent.ensureModuleInjected(group_1.Group) && this.targetColumn
@@ -299,3 +315,3 @@ && this.parent.groupSettings.columns.indexOf(this.targetColumn.field) >= 0)) {
                     break;
-                case 'ungroup':
+                case 'Ungroup':
                     if (!this.parent.allowGrouping || !this.parent.ensureModuleInjected(group_1.Group)
@@ -307,6 +323,6 @@ || (this.parent.ensureModuleInjected(group_1.Group) && this.targetColumn
                     break;
-                case 'edit':
-                case 'delete':
-                case 'save':
-                case 'cancel':
+                case 'Edit':
+                case 'Delete':
+                case 'Save':
+                case 'Cancel':
                     if (!this.parent.editModule || (this.parent.getDataRows().length === 0)) {
@@ -316,3 +332,3 @@ status = true;
                     break;
-                case 'copy':
+                case 'Copy':
                     if (this.parent.getSelectedRowIndexes().length === 0 ||
@@ -329,3 +345,3 @@ this.parent.getCurrentViewRecords().length === 0) {
                     break;
-                case 'pdfExport':
+                case 'PdfExport':
                     if (!(this.parent.allowPdfExport) || !this.parent.ensureModuleInjected(pdf_export_1.PdfExport)) {
@@ -335,4 +351,4 @@ status = true;
                     break;
-                case 'excelExport':
-                case 'csvExport':
+                case 'ExcelExport':
+                case 'CsvExport':
                     if (!(this.parent.allowExcelExport) || !this.parent.ensureModuleInjected(excel_export_1.ExcelExport)) {
@@ -342,4 +358,4 @@ status = true;
                     break;
-                case 'sortAscending':
-                case 'sortDescending':
+                case 'SortAscending':
+                case 'SortDescending':
                     if ((!this.parent.allowSorting) || !this.parent.ensureModuleInjected(sort_1.Sort)) {
@@ -351,3 +367,3 @@ status = true;
                             if (element.field === _this.targetColumn.field
-                                && element.direction === item.replace('sort', '').toLocaleLowerCase()) {
+                                && element.direction.toLowerCase() === item.toLowerCase().replace('sort', '').toLocaleLowerCase()) {
                                 status = true;
@@ -358,4 +374,4 @@ }
                     break;
-                case 'firstPage':
-                case 'prevPage':
+                case 'FirstPage':
+                case 'PrevPage':
                     if (!this.parent.allowPaging || !this.parent.ensureModuleInjected(page_1.Page) ||
@@ -367,4 +383,4 @@ this.parent.getCurrentViewRecords().length === 0 ||
                     break;
-                case 'lastPage':
-                case 'nextPage':
+                case 'LastPage':
+                case 'NextPage':
                     if (!this.parent.allowPaging || !this.parent.ensureModuleInjected(page_1.Page) ||
@@ -386,2 +402,3 @@ this.parent.getCurrentViewRecords().length === 0 ||
             this.removeEventListener();
+            this.parent.element.classList.remove('e-noselect');
         };
@@ -400,25 +417,25 @@ ContextMenu.prototype.getModuleName = function () {
             switch (item) {
-                case 'autoFitAll':
-                case 'autoFit':
+                case 'AutoFitAll':
+                case 'AutoFit':
                     menuItem = { target: exports.menuClass.header };
                     break;
-                case 'group':
+                case 'Group':
                     menuItem = { target: exports.menuClass.header, iconCss: exports.menuClass.group };
                     break;
-                case 'ungroup':
+                case 'Ungroup':
                     menuItem = { target: exports.menuClass.header, iconCss: exports.menuClass.ungroup };
                     break;
-                case 'edit':
+                case 'Edit':
                     menuItem = { target: exports.menuClass.content, iconCss: exports.menuClass.editIcon };
                     break;
-                case 'delete':
+                case 'Delete':
                     menuItem = { target: exports.menuClass.content, iconCss: exports.menuClass.delete };
                     break;
-                case 'save':
+                case 'Save':
                     menuItem = { target: exports.menuClass.edit, iconCss: exports.menuClass.save };
                     break;
-                case 'cancel':
+                case 'Cancel':
                     menuItem = { target: exports.menuClass.edit, iconCss: exports.menuClass.cancel };
                     break;
-                case 'copy':
+                case 'Copy':
                     menuItem = { target: exports.menuClass.content, iconCss: exports.menuClass.copy };
@@ -429,27 +446,27 @@ break;
                     break;
-                case 'pdfExport':
+                case 'PdfExport':
                     menuItem = { target: exports.menuClass.content, iconCss: exports.menuClass.pdf };
                     break;
-                case 'excelExport':
+                case 'ExcelExport':
                     menuItem = { target: exports.menuClass.content, iconCss: exports.menuClass.excel };
                     break;
-                case 'csvExport':
+                case 'CsvExport':
                     menuItem = { target: exports.menuClass.content, iconCss: exports.menuClass.csv };
                     break;
-                case 'sortAscending':
+                case 'SortAscending':
                     menuItem = { target: exports.menuClass.header, iconCss: exports.menuClass.ascending };
                     break;
-                case 'sortDescending':
+                case 'SortDescending':
                     menuItem = { target: exports.menuClass.header, iconCss: exports.menuClass.descending };
                     break;
-                case 'firstPage':
+                case 'FirstPage':
                     menuItem = { target: exports.menuClass.pager, iconCss: exports.menuClass.fPage };
                     break;
-                case 'prevPage':
+                case 'PrevPage':
                     menuItem = { target: exports.menuClass.pager, iconCss: exports.menuClass.pPage };
                     break;
-                case 'lastPage':
+                case 'LastPage':
                     menuItem = { target: exports.menuClass.pager, iconCss: exports.menuClass.lPage };
                     break;
-                case 'nextPage':
+                case 'NextPage':
                     menuItem = { target: exports.menuClass.pager, iconCss: exports.menuClass.nPage };
@@ -465,28 +482,28 @@ break;
         ContextMenu.prototype.getDefaultItems = function () {
-            return ['autoFitAll', 'autoFit',
-                'group', 'ungroup', 'edit', 'delete', 'save', 'cancel', 'copy', 'export',
-                'pdfExport', 'excelExport', 'csvExport', 'sortAscending', 'sortDescending',
-                'firstPage', 'prevPage', 'lastPage', 'nextPage'];
+            return ['AutoFitAll', 'AutoFit',
+                'Group', 'Ungroup', 'Edit', 'Delete', 'Save', 'Cancel', 'Copy', 'export',
+                'PdfExport', 'ExcelExport', 'CsvExport', 'SortAscending', 'SortDescending',
+                'FirstPage', 'PrevPage', 'LastPage', 'NextPage'];
         };
         ContextMenu.prototype.setLocaleKey = function () {
             return {
-                'autoFitAll': 'autoFitAll',
-                'autoFit': 'autoFit',
-                'copy': 'Copy',
-                'group': 'Group',
-                'ungroup': 'Ungroup',
-                'edit': 'EditRecord',
-                'delete': 'DeleteRecord',
-                'save': 'Save',
-                'cancel': 'CancelButton',
-                'pdfExport': 'Pdfexport',
-                'excelExport': 'Excelexport',
-                'csvExport': 'Csvexport',
+                'AutoFitAll': 'autoFitAll',
+                'AutoFit': 'autoFit',
+                'Copy': 'Copy',
+                'Group': 'Group',
+                'Ungroup': 'Ungroup',
+                'Edit': 'EditRecord',
+                'Delete': 'DeleteRecord',
+                'Save': 'Save',
+                'Cancel': 'CancelButton',
+                'PdfExport': 'Pdfexport',
+                'ExcelExport': 'Excelexport',
+                'CsvExport': 'Csvexport',
                 'export': 'Export',
-                'sortAscending': 'SortAscending',
-                'sortDescending': 'SortDescending',
-                'firstPage': 'FirstPage',
-                'lastPage': 'LastPage',
-                'prevPage': 'PreviousPage',
-                'nextPage': 'NextPage'
+                'SortAscending': 'SortAscending',
+                'SortDescending': 'SortDescending',
+                'FirstPage': 'FirstPage',
+                'LastPage': 'LastPage',
+                'PrevPage': 'PreviousPage',
+                'NextPage': 'NextPage'
             };
@@ -497,2 +514,3 @@ };
             if (cell) {
+                cell.classList.add('e-resized');
                 var uid = cell.querySelector('.e-headercelldiv').getAttribute('e-mappinguid');
@@ -507,3 +525,3 @@ return this.parent.getColumnByUid(uid);
             if (this.row && isSelectable) {
-                this.parent.selectRow(this.parent.getDataRows().indexOf(this.row));
+                this.parent.selectRow(parseInt(this.row.getAttribute('aria-rowindex'), 10));
             }
@@ -510,0 +528,0 @@ };

src/grid/actions/data.js

@@ -41,3 +41,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "../base/util", "../base/constant", "../services/value-formatter", "../actions/checkbox-filter"], function (require, exports, ej2_base_1, ej2_data_1, util_1, events, value_formatter_1, checkbox_filter_1) {
                     var types = column.type instanceof Array ? column.type : [column.type];
-                    types.forEach(function (type) { return query.aggregate(type, column.field); });
+                    types.forEach(function (type) { return query.aggregate(type.toLowerCase(), column.field); });
                 });
@@ -144,3 +144,3 @@ });
                     var col = columns_1[_b];
-                    if (colType[col.field] === 'checkbox' || colType[col.field] === 'excel') {
+                    if (colType[col.field] === 'CheckBox' || colType[col.field] === 'Excel') {
                         checkBoxCols.push(col);
@@ -283,4 +283,6 @@ }
                 var deff = new ej2_data_1.Deferred();
-                var args = { requestType: 'batchsave', changes: changes, key: key, query: query,
-                    endEdit: deff.resolve };
+                var args = {
+                    requestType: 'batchsave', changes: changes, key: key, query: query,
+                    endEdit: deff.resolve
+                };
                 this.setState({ isPending: true, resolver: deff.resolve });
@@ -287,0 +289,0 @@ this.parent.trigger(events.dataSourceChanged, args);

src/grid/actions/edit.js

@@ -10,3 +10,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/constant", "../renderer/edit-renderer", "../renderer/boolean-edit-cell", "../renderer/dropdown-edit-cell", "../renderer/numeric-edit-cell", "../renderer/default-edit-cell", "./inline-edit", "./batch-edit", "./dialog-edit", "@syncfusion/ej2-popups", "../base/util", "@syncfusion/ej2-inputs", "../renderer/datepicker-edit-cell", "@syncfusion/ej2-popups"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, ej2_base_4, events, edit_renderer_1, boolean_edit_cell_1, dropdown_edit_cell_1, numeric_edit_cell_1, default_edit_cell_1, inline_edit_1, batch_edit_1, dialog_edit_1, ej2_popups_1, util_1, ej2_inputs_1, datepicker_edit_cell_1, ej2_popups_2) {
             };
-            this.editType = { 'inline': inline_edit_1.InlineEdit, 'normal': inline_edit_1.InlineEdit, 'batch': batch_edit_1.BatchEdit, 'dialog': dialog_edit_1.DialogEdit };
+            this.editType = { 'Inline': inline_edit_1.InlineEdit, 'Normal': inline_edit_1.InlineEdit, 'Batch': batch_edit_1.BatchEdit, 'Dialog': dialog_edit_1.DialogEdit };
             this.parent = parent;
@@ -90,3 +90,3 @@ this.serviceLocator = serviceLocator;
             var gObj = this.parent;
-            if (!gObj.editSettings.allowEditing || gObj.isEdit || gObj.editSettings.mode === 'batch') {
+            if (!gObj.editSettings.allowEditing || gObj.isEdit || gObj.editSettings.mode === 'Batch') {
                 return;
@@ -112,3 +112,3 @@ }
         Edit.prototype.closeEdit = function () {
-            if (this.parent.editSettings.mode === 'batch' && this.parent.editSettings.showConfirmDialog
+            if (this.parent.editSettings.mode === 'Batch' && this.parent.editSettings.showConfirmDialog
                 && this.parent.element.querySelectorAll('.e-updatedtd').length) {
@@ -154,3 +154,4 @@ this.showDialog('CancelEdit', this.dialogObj);
         Edit.prototype.endEdit = function () {
-            if (this.parent.editSettings.mode === 'batch' && this.parent.editSettings.showConfirmDialog) {
+            if (this.parent.editSettings.mode === 'Batch' && this.parent.editSettings.showConfirmDialog &&
+                (ej2_base_4.isNullOrUndefined(this.formObj) || this.formObj.validate())) {
                 this.showDialog('BatchSaveConfirm', this.dialogObj);
@@ -352,3 +353,3 @@ return;
             var restrictedRequestTypes = ['filterafteropen', 'filterbeforeopen', 'filterchoicerequest', 'save'];
-            if (this.parent.editSettings.mode !== 'batch' && this.formObj && !this.formObj.isDestroyed
+            if (this.parent.editSettings.mode !== 'Batch' && this.formObj && !this.formObj.isDestroyed
                 && restrictedRequestTypes.indexOf(e.requestType) === -1) {
@@ -400,3 +401,3 @@ this.destroyForm();
                 case 'enter':
-                    if (!util_1.parentsUntil(e.target, '.e-unboundcelldiv') && this.parent.editSettings.mode !== 'batch' &&
+                    if (!util_1.parentsUntil(e.target, '.e-unboundcelldiv') && this.parent.editSettings.mode !== 'Batch' &&
                         (util_1.parentsUntil(e.target, 'e-gridcontent') || (this.parent.frozenRows
@@ -440,3 +441,3 @@ && util_1.parentsUntil(e.target, 'e-headercontent')))
             this.parent.editModule.formObj = this.createFormObj(form, rules);
-            if (frzCols && this.parent.editSettings.mode !== 'dialog') {
+            if (frzCols && this.parent.editSettings.mode !== 'Dialog') {
                 this.parent.editModule.mFormObj = this.createFormObj(mForm, mRules);
@@ -471,7 +472,7 @@ }
             var isFHdr;
-            if (this.parent.editSettings.mode !== 'dialog') {
+            if (this.parent.editSettings.mode !== 'Dialog') {
                 isFHdr = (this.parent.frozenRows && this.parent.frozenRows
                     > (parseInt(ej2_base_1.closest(inputElement, '.e-row').getAttribute('aria-rowindex'), 10) || 0));
             }
-            return this.parent.editSettings.mode !== 'dialog' ? isFHdr ? this.parent.getHeaderTable() : this.parent.getContentTable() :
+            return this.parent.editSettings.mode !== 'Dialog' ? isFHdr ? this.parent.getHeaderTable() : this.parent.getContentTable() :
                 this.parent.element.querySelector('#' + this.parent.element.id + '_dialogEdit_wrapper');
@@ -495,3 +496,3 @@ };
             var isScroll = gcontent.scrollHeight > gcontent.clientHeight;
-            var isInline = this.parent.editSettings.mode !== 'dialog';
+            var isInline = this.parent.editSettings.mode !== 'Dialog';
             var isFHdr;
@@ -498,0 +499,0 @@ if (isInline) {

src/grid/actions/excel-export.js

@@ -12,3 +12,3 @@ define(["require", "exports", "../base/constant", "@syncfusion/ej2-excel-export", "@syncfusion/ej2-base", "../actions/data", "./export-helper", "../services/summary-model-generator", "../base/enum", "@syncfusion/ej2-data"], function (require, exports, events, ej2_excel_export_1, ej2_base_1, data_1, export_helper_1, summary_model_generator_1, enum_1, ej2_data_1) {
             this.rowLength = 1;
-            this.expType = 'appendtosheet';
+            this.expType = 'AppendToSheet';
             this.includeHiddenColumn = false;
@@ -41,3 +41,3 @@ this.isCsvExport = false;
             this.footer = undefined;
-            this.expType = 'appendtosheet';
+            this.expType = 'AppendToSheet';
             this.includeHiddenColumn = false;
@@ -94,3 +94,3 @@ this.exportValueFormatter = new export_helper_1.ExportValueFormatter();
             if (!ej2_base_1.isNullOrUndefined(exportProperties) && !ej2_base_1.isNullOrUndefined(exportProperties.multipleExport)) {
-                this.expType = (!ej2_base_1.isNullOrUndefined(exportProperties.multipleExport.type) ? exportProperties.multipleExport.type : 'appendtosheet');
+                this.expType = (!ej2_base_1.isNullOrUndefined(exportProperties.multipleExport.type) ? exportProperties.multipleExport.type : 'AppendToSheet');
                 if (!ej2_base_1.isNullOrUndefined(exportProperties.multipleExport.blankRows)) {
@@ -106,3 +106,3 @@ blankRows = exportProperties.multipleExport.blankRows;
             }
-            else if (this.expType === 'newsheet') {
+            else if (this.expType === 'NewSheet') {
                 this.workSheet = workbook.worksheets;
@@ -123,7 +123,7 @@ this.rows = [];
                 if (!ej2_base_1.isNullOrUndefined(isMultipleExport)) {
-                    if (!ej2_base_1.isNullOrUndefined(exportProperties.header) && (isMultipleExport || this.expType === 'newsheet')) {
+                    if (!ej2_base_1.isNullOrUndefined(exportProperties.header) && (isMultipleExport || this.expType === 'NewSheet')) {
                         this.processExcelHeader(JSON.parse(JSON.stringify(exportProperties.header)));
                     }
                     if (!ej2_base_1.isNullOrUndefined(exportProperties.footer)) {
-                        if (this.expType === 'appendtosheet') {
+                        if (this.expType === 'AppendToSheet') {
                             if (!isMultipleExport) {
@@ -158,3 +158,3 @@ this.footer = JSON.parse(JSON.stringify(exportProperties.footer));
             }
-            else if (!ej2_base_1.isNullOrUndefined(exportProperties) && exportProperties.exportType === 'currentpage') {
+            else if (!ej2_base_1.isNullOrUndefined(exportProperties) && exportProperties.exportType === 'CurrentPage') {
                 this.processRecordContent(gObj, r, headerRow, isMultipleExport, gObj.getCurrentViewRecords());
@@ -192,3 +192,3 @@ }
             if (!ej2_base_1.isNullOrUndefined(this.footer)) {
-                if ((this.expType === 'appendtosheet' && !isMultipleExport) || (this.expType === 'newsheet')) {
+                if ((this.expType === 'AppendToSheet' && !isMultipleExport) || (this.expType === 'NewSheet')) {
                     this.processExcelFooter(this.footer);
@@ -401,25 +401,25 @@ }
                                     if (key === cell.column.type) {
-                                        if (!ej2_base_1.isNullOrUndefined(row.data[cell.column.field].sum)) {
-                                            eCell.value = row.data[cell.column.field].sum;
+                                        if (!ej2_base_1.isNullOrUndefined(row.data[cell.column.field].Sum)) {
+                                            eCell.value = row.data[cell.column.field].Sum;
                                         }
-                                        else if (!ej2_base_1.isNullOrUndefined(row.data[cell.column.field].average)) {
-                                            eCell.value = row.data[cell.column.field].average;
+                                        else if (!ej2_base_1.isNullOrUndefined(row.data[cell.column.field].Average)) {
+                                            eCell.value = row.data[cell.column.field].Average;
                                         }
-                                        else if (!ej2_base_1.isNullOrUndefined(row.data[cell.column.field].max)) {
-                                            eCell.value = row.data[cell.column.field].max;
+                                        else if (!ej2_base_1.isNullOrUndefined(row.data[cell.column.field].Max)) {
+                                            eCell.value = row.data[cell.column.field].Max;
                                         }
-                                        else if (!ej2_base_1.isNullOrUndefined(row.data[cell.column.field].min)) {
-                                            eCell.value = row.data[cell.column.field].min;
+                                        else if (!ej2_base_1.isNullOrUndefined(row.data[cell.column.field].Min)) {
+                                            eCell.value = row.data[cell.column.field].Min;
                                         }
-                                        else if (!ej2_base_1.isNullOrUndefined(row.data[cell.column.field].count)) {
-                                            eCell.value = row.data[cell.column.field].count;
+                                        else if (!ej2_base_1.isNullOrUndefined(row.data[cell.column.field].Count)) {
+                                            eCell.value = row.data[cell.column.field].Count;
                                         }
-                                        else if (!ej2_base_1.isNullOrUndefined(row.data[cell.column.field].truecount)) {
-                                            eCell.value = row.data[cell.column.field].truecount;
+                                        else if (!ej2_base_1.isNullOrUndefined(row.data[cell.column.field].TrueCount)) {
+                                            eCell.value = row.data[cell.column.field].TrueCount;
                                         }
-                                        else if (!ej2_base_1.isNullOrUndefined(row.data[cell.column.field].falsecount)) {
-                                            eCell.value = row.data[cell.column.field].falsecount;
+                                        else if (!ej2_base_1.isNullOrUndefined(row.data[cell.column.field].FalseCount)) {
+                                            eCell.value = row.data[cell.column.field].FalseCount;
                                         }
-                                        else if (!ej2_base_1.isNullOrUndefined(row.data[cell.column.field].custom)) {
-                                            eCell.value = row.data[cell.column.field].custom;
+                                        else if (!ej2_base_1.isNullOrUndefined(row.data[cell.column.field].Custom)) {
+                                            eCell.value = row.data[cell.column.field].Custom;
                                         }
@@ -600,3 +600,3 @@ }
         ExcelExport.prototype.processExcelHeader = function (header) {
-            if (!ej2_base_1.isNullOrUndefined(header.rows) && (this.expType === 'newsheet' || this.rowLength === 1)) {
+            if (!ej2_base_1.isNullOrUndefined(header.rows) && (this.expType === 'NewSheet' || this.rowLength === 1)) {
                 var noRows = void 0;
@@ -603,0 +603,0 @@ if (header.headerRows === undefined) {

src/grid/actions/excel-filter.d.ts

@@ -46,2 +46,3 @@ import { FilterSettings } from '../base/grid';
     private hoverHandler(e);
+    private ensureTextFilter();
     private preventClose(args);
@@ -48,0 +49,0 @@ private getContextBounds(context);

src/grid/actions/excel-filter.js

@@ -100,3 +100,3 @@ var __extends = (this && this.__extends) || (function () {
             if (type !== 'boolean') {
-                ul.appendChild(this.createMenuElem(this.getLocalizedLabel(options[type]), 'e-submenu', isCheckIcon ? 'e-icon-check' : icon + ' e-emptyicon', true));
+                ul.appendChild(this.createMenuElem(this.getLocalizedLabel(options[type]), 'e-submenu', isCheckIcon && this.ensureTextFilter() ? 'e-icon-check' : icon + ' e-emptyicon', true));
             }
@@ -124,3 +124,3 @@ this.menu.appendChild(ul);
             var menuItem = util_1.parentsUntil(e.target, 'e-menu-item');
-            if (menuItem && this.getLocalizedLabel('ClearFilter') === menuItem.innerText) {
+            if (menuItem && this.getLocalizedLabel('ClearFilter') === menuItem.innerText.trim()) {
                 this.clearFilter();
@@ -157,18 +157,3 @@ this.closeDialog();
             }
-            var selectedMenu;
-            var predicates = this.existingPredicate[this.options.field];
-            if (predicates && predicates.length === 2) {
-                if (predicates[0].operator === 'greaterThanOrEqual' && predicates[1].operator === 'lessThanOrEqual') {
-                    selectedMenu = 'Between';
-                }
-                else {
-                    selectedMenu = 'CustomFilter';
-                }
-            }
-            else {
-                if (predicates && predicates.length === 1) {
-                    this.optrData = this.customFilterOperators[this.options.type + 'Operator'];
-                    selectedMenu = this.getSelectedText(predicates[0].operator);
-                }
-            }
+            var selectedMenu = this.ensureTextFilter();
             if (!this.isCMenuOpen && isSubMenu) {
@@ -201,2 +186,21 @@ li.classList.add('e-selected');
         };
+        ExcelFilter.prototype.ensureTextFilter = function () {
+            var selectedMenu;
+            var predicates = this.existingPredicate[this.options.field];
+            if (predicates && predicates.length === 2) {
+                if (predicates[0].operator === 'greaterThanOrEqual' && predicates[1].operator === 'lessThanOrEqual') {
+                    selectedMenu = 'Between';
+                }
+                else {
+                    selectedMenu = 'CustomFilter';
+                }
+            }
+            else {
+                if (predicates && predicates.length === 1) {
+                    this.optrData = this.customFilterOperators[this.options.type + 'Operator'];
+                    selectedMenu = this.getSelectedText(predicates[0].operator);
+                }
+            }
+            return selectedMenu;
+        };
         ExcelFilter.prototype.preventClose = function (args) {
@@ -443,2 +447,5 @@ if (args.event instanceof MouseEvent && args.event.target.classList.contains('e-submenu')) {
             dlgConetntEle.appendChild(table);
+            var colGroup = ej2_base_1.createElement('colGroup');
+            colGroup.innerHTML = '<col style="width: 50%"></col><col style="width: 50%"></col>';
+            table.appendChild(colGroup);
             var optr = this.renderOperatorUI(column, table, '-xlfl-frstoptr', predicates, true);
@@ -445,0 +452,0 @@ this.renderFlValueUI(column, optr, '-xlfl-frstvalue', predicates, true);

src/grid/actions/filter.js

@@ -10,3 +10,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "../base/util", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "../base/constant", "../base/enum", "../renderer/row-renderer", "../models/cell", "../models/row", "../renderer/filter-cell-renderer", "../base/util", "../renderer/filter-menu-renderer", "../actions/checkbox-filter", "../actions/excel-filter"], function (require, exports, ej2_base_1, util_1, ej2_base_2, ej2_data_1, events, enum_1, row_renderer_1, cell_1, row_1, filter_cell_renderer_1, util_2, filter_menu_renderer_1, checkbox_filter_1, excel_filter_1) {
             this.nextFlMenuOpen = '';
-            this.type = { 'menu': filter_menu_renderer_1.FilterMenuRenderer, 'checkbox': checkbox_filter_1.CheckBoxFilter, 'excel': excel_filter_1.ExcelFilter };
+            this.type = { 'Menu': filter_menu_renderer_1.FilterMenuRenderer, 'CheckBox': checkbox_filter_1.CheckBoxFilter, 'Excel': excel_filter_1.ExcelFilter };
             this.filterOperators = {
@@ -30,3 +30,3 @@ contains: 'contains', endsWith: 'endswith', equal: 'equal', greaterThan: 'greaterthan', greaterThanOrEqual: 'greaterthanorequal',
             this.getLocalizedCustomOperators();
-            if (this.parent.filterSettings.type === 'filterbar') {
+            if (this.parent.filterSettings.type === 'FilterBar') {
                 if (gObj.columns.length) {
@@ -206,3 +206,3 @@ var fltrElem = this.parent.element.querySelector('.e-filterbar');
             this.column = gObj.getColumnByField(fieldName);
-            if (this.filterSettings.type === 'filterbar') {
+            if (this.filterSettings.type === 'FilterBar') {
                 filterCell = gObj.getHeaderContent().querySelector('[id=\'' + this.column.field + '_filterBarcell\']');
@@ -236,3 +236,3 @@ }
             }
-            if (this.filterSettings.type === 'filterbar' && filterCell.value !== filterValue) {
+            if (this.filterSettings.type === 'FilterBar' && filterCell.value !== filterValue) {
                 filterCell.value = filterValue;
@@ -356,3 +356,3 @@ }
                 if (cols[i].field === field || cols[i].field === column.foreignKeyValue) {
-                    if (this.filterSettings.type === 'filterbar' && !isClearFilterBar) {
+                    if (this.filterSettings.type === 'FilterBar' && !isClearFilterBar) {
                         var selector = '[id=\'' + cols[i].field + '_filterBarcell\']';
@@ -365,3 +365,3 @@ fCell = this.parent.getHeaderContent().querySelector(selector);
                     fltrElement.removeAttribute('aria-filtered');
-                    if (this.filterSettings.type !== 'filterbar') {
+                    if (this.filterSettings.type !== 'FilterBar') {
                         var iconClass = this.parent.showColumnMenu ? '.e-columnmenu' : '.e-icon-filter';
@@ -390,3 +390,3 @@ fltrElement.querySelector(iconClass).classList.remove('e-filtered');
                 }
-                if ((this.filterSettings.mode === 'immediate' || e.keyCode === 13) && e.keyCode !== 9) {
+                if ((this.filterSettings.mode === 'Immediate' || e.keyCode === 13) && e.keyCode !== 9) {
                     this.value = target.value.trim();
@@ -403,3 +403,3 @@ this.processFilter(e);
         Filter.prototype.updateFilterMsg = function () {
-            if (this.filterSettings.type === 'filterbar') {
+            if (this.filterSettings.type === 'FilterBar') {
                 var gObj = this.parent;
@@ -589,3 +589,3 @@ var columns = this.filterSettings.columns;
         Filter.prototype.columnPositionChanged = function (e) {
-            if (this.parent.filterSettings.type !== 'filterbar') {
+            if (this.parent.filterSettings.type !== 'FilterBar') {
                 return;
@@ -623,4 +623,4 @@ }
             var target = e.target;
-            if (target.classList.contains('e-filtermenudiv') && (this.parent.filterSettings.type === 'menu' ||
-                this.parent.filterSettings.type === 'checkbox' || this.parent.filterSettings.type === 'excel')) {
+            if (target.classList.contains('e-filtermenudiv') && (this.parent.filterSettings.type === 'Menu' ||
+                this.parent.filterSettings.type === 'CheckBox' || this.parent.filterSettings.type === 'Excel')) {
                 var gObj = this.parent;
@@ -642,4 +642,4 @@ var col = gObj.getColumnByUid(util_2.parentsUntil(target, 'e-headercell').firstElementChild.getAttribute('e-mappinguid'));
         Filter.prototype.clickHandler = function (e) {
-            if (this.filterSettings.mode === 'immediate' || this.parent.filterSettings.type === 'menu' ||
-                this.parent.filterSettings.type === 'checkbox' || this.parent.filterSettings.type === 'excel') {
+            if (this.filterSettings.mode === 'Immediate' || this.parent.filterSettings.type === 'Menu' ||
+                this.parent.filterSettings.type === 'CheckBox' || this.parent.filterSettings.type === 'Excel') {
                 var gObj = this.parent;
@@ -657,3 +657,3 @@ var target = e.target;
                 }
-                if (this.filterSettings.mode === 'immediate' && target.classList.contains('e-clear-icon')) {
+                if (this.filterSettings.mode === 'Immediate' && target.classList.contains('e-clear-icon')) {
                     var targetText = target.previousElementSibling;
@@ -660,0 +660,0 @@ this.removeFilteredColsByField(targetText.id.slice(0, -14));

src/grid/actions/group.d.ts

@@ -13,2 +13,4 @@ import { GroupSettingsModel } from '../base/grid-model';
     private column;
+    private isAppliedGroup;
+    private isAppliedUnGroup;
     private visualElement;
@@ -101,2 +103,3 @@ private helper;
     onActionComplete(e: NotifyArgs): void;
+    private groupAddSortingQuery(colName);
     private addColToGroupDrop(field);
@@ -103,0 +106,0 @@ private refreshToggleBtn(isRemove?);

src/grid/actions/group.js

@@ -7,2 +7,4 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/util", "../base/constant", "../services/aria-service"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, util_1, events, aria_service_1) {
             var _this = this;
+            this.isAppliedGroup = false;
+            this.isAppliedUnGroup = false;
             this.visualElement = ej2_base_2.createElement('div', {
@@ -153,3 +155,4 @@ className: 'e-cloneproperties e-dragclone e-gdclone',
             var gObj = this.parent;
-            if (!this.groupSettings.columns.length || ['tab', 'shiftTab'].indexOf(e.action) > -1) {
+            if ((!this.groupSettings.columns.length ||
+                ['altDownArrow', 'altUpArrow', 'ctrlDownArrow', 'ctrlUpArrow', 'enter'].indexOf(e.action) === -1)) {
                 return;
@@ -183,7 +186,7 @@ }
                 case 'enter':
-                    if (this.parent.isEdit) {
+                    if (this.parent.isEdit || (ej2_base_2.closest(e.target, '#' + this.parent.element.id + '_searchbar') !== null)) {
                         return;
                     }
                     var element = this.focus.getFocusedElement();
-                    var row = element.parentElement.querySelector('[class^="e-record"]');
+                    var row = element ? element.parentElement.querySelector('[class^="e-record"]') : null;
                     if (!row) {
@@ -231,6 +234,6 @@ break;
                 if (gObj.getColumnHeaderByField(field).querySelectorAll('.e-ascending').length) {
-                    gObj.sortColumn(field, 'descending', true);
+                    gObj.sortColumn(field, 'Descending', true);
                 }
                 else {
-                    gObj.sortColumn(field, 'ascending', true);
+                    gObj.sortColumn(field, 'Ascending', true);
                 }
@@ -350,3 +353,4 @@ }
             else {
-                if (this.element.innerHTML === this.l10n.getConstant('GroupDropArea') && this.groupSettings.columns.length === 1) {
+                if (this.element.innerHTML === this.l10n.getConstant('GroupDropArea') && (this.groupSettings.columns.length === 1
+                    || !this.isAppliedGroup && !this.isAppliedUnGroup)) {
                     this.element.innerHTML = '';
@@ -391,2 +395,3 @@ }
             this.colName = columnName;
+            this.isAppliedGroup = true;
             if (this.contentRefresh) {
@@ -399,2 +404,3 @@ this.updateModel();
             this.updateGroupDropArea();
+            this.isAppliedGroup = false;
         };
@@ -426,2 +432,3 @@ Group.prototype.ungroupColumn = function (columnName) {
             if (gObj.allowGrouping) {
+                this.isAppliedUnGroup = true;
                 this.parent.dataBind();
@@ -436,14 +443,3 @@ }
             this.groupSettings.columns = columns;
-            while (i < gObj.sortSettings.columns.length) {
-                if (gObj.sortSettings.columns[i].field === this.colName) {
-                    break;
-                }
-                i++;
-            }
-            if (gObj.sortSettings.columns.length === i) {
-                gObj.sortSettings.columns.push({ field: this.colName, direction: 'ascending' });
-            }
-            else if (!gObj.allowSorting) {
-                gObj.sortSettings.columns[i].direction = 'ascending';
-            }
+            this.groupAddSortingQuery(this.colName);
             this.parent.dataBind();
@@ -463,9 +459,28 @@ };
             this.parent.trigger(events.actionComplete, ej2_base_3.extend(e, args));
+            this.colName = null;
         };
+        Group.prototype.groupAddSortingQuery = function (colName) {
+            var i = 0;
+            while (i < this.parent.sortSettings.columns.length) {
+                if (this.parent.sortSettings.columns[i].field === colName) {
+                    break;
+                }
+                i++;
+            }
+            if (this.parent.sortSettings.columns.length === i) {
+                this.parent.sortSettings.columns.push({ field: colName, direction: 'Ascending' });
+            }
+            else if (!this.parent.allowSorting) {
+                this.parent.sortSettings.columns[i].direction = 'Ascending';
+            }
+        };
         Group.prototype.addColToGroupDrop = function (field) {
             var gObj = this.parent;
-            var direction = 'ascending';
+            var direction = 'Ascending';
             var groupedColumn = ej2_base_2.createElement('div', { className: 'e-grid-icon e-groupheadercell' });
             var childDiv = ej2_base_2.createElement('div', { attrs: { 'ej-mappingname': field } });
             var column = this.parent.getColumnByField(field);
+            if (ej2_base_3.isNullOrUndefined(column)) {
+                return;
+            }
             var headerCell = gObj.getColumnHeaderByUid(column.uid);
@@ -494,6 +509,7 @@ if (!ej2_base_3.isNullOrUndefined(column.headerTemplate)) {
             if (headerCell.querySelectorAll('.e-ascending,.e-descending').length) {
-                direction = headerCell.querySelector('.e-ascending') ? 'ascending' : 'descending';
+                direction = headerCell.querySelector('.e-ascending') ? 'Ascending' : 'Descending';
             }
             childDiv.appendChild(ej2_base_2.createElement('span', {
-                className: 'e-groupsort e-icons ' + ('e-' + direction + ' e-icon-' + direction), innerHTML: '&nbsp;',
+                className: 'e-groupsort e-icons ' +
+                    ('e-' + direction.toLowerCase() + ' e-icon-' + direction.toLowerCase()), innerHTML: '&nbsp;',
                 attrs: { tabindex: '-1', 'aria-label': 'sort the grouped column' }
@@ -532,5 +548,6 @@ }));
         Group.prototype.removeColFromGroupDrop = function (field) {
-            if (!ej2_base_3.isNullOrUndefined(field)) {
+            if (!ej2_base_3.isNullOrUndefined(this.getGHeaderCell(field))) {
                 ej2_base_2.remove(this.getGHeaderCell(field));
                 this.updateGroupDropArea();
+                this.isAppliedUnGroup = false;
             }
@@ -546,6 +563,22 @@ };
                     case 'columns':
+                        var args = void 0;
                         if (this.contentRefresh) {
-                            var args = this.groupSettings.columns.indexOf(this.colName) > -1 ? {
-                                columnName: this.colName, requestType: 'grouping', type: events.actionBegin
-                            } : { requestType: 'ungrouping', type: events.actionBegin };
+                            if (!this.isAppliedUnGroup) {
+                                if (!this.isAppliedGroup) {
+                                    this.updateGroupDropArea();
+                                    for (var i = 0; i < this.groupSettings.columns.length; i++) {
+                                        this.colName = this.groupSettings.columns[i];
+                                        var col = this.parent.getColumnByField(this.colName);
+                                        col.visible = this.parent.groupSettings.showGroupedColumn;
+                                        this.groupAddSortingQuery(this.colName);
+                                        if (i < this.groupSettings.columns.length - 1) {
+                                            this.addColToGroupDrop(this.groupSettings.columns[i]);
+                                        }
+                                    }
+                                }
+                                args = { columnName: this.colName, requestType: 'grouping', type: events.actionBegin };
+                            }
+                            else {
+                                args = { requestType: 'ungrouping', type: events.actionBegin };
+                            }
                             this.parent.notify(events.modelChanged, args);
@@ -625,3 +658,3 @@ }
                 else if (this.getGHeaderCell(cols[i].field) && this.getGHeaderCell(cols[i].field).querySelectorAll('.e-groupsort').length) {
-                    if (cols[i].direction === 'ascending') {
+                    if (cols[i].direction === 'Ascending') {
                         ej2_base_2.classList(this.getGHeaderCell(cols[i].field).querySelector('.e-groupsort'), ['e-ascending', 'e-icon-ascending'], ['e-descending', 'e-icon-descending']);
@@ -628,0 +661,0 @@ }

src/grid/actions/normal-edit.js

@@ -32,3 +32,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/util", "../base/constant", "../renderer/row-renderer"], function (require, exports, ej2_base_1, ej2_base_2, util_1, events, row_renderer_1) {
                 case 'save':
-                    if (!(this.parent.isCheckBoxSelection || this.parent.selectionSettings.type === 'multiple')
+                    if (!(this.parent.isCheckBoxSelection || this.parent.selectionSettings.type === 'Multiple')
                         || (!this.parent.isPersistSelection)) {
@@ -75,3 +75,3 @@ this.parent.selectRow(0);
             gObj.clearSelection();
-            if (gObj.editSettings.mode === 'dialog') {
+            if (gObj.editSettings.mode === 'Dialog') {
                 args.row.classList.add('e-dlgeditrow');
@@ -100,3 +100,3 @@ }
             editedData = gObj.editModule.getCurrentEditedData(gObj.element.querySelector('.e-gridform'), editedData);
-            if (gObj.getFrozenColumns() && gObj.editSettings.mode === 'normal') {
+            if (gObj.getFrozenColumns() && gObj.editSettings.mode === 'Normal') {
                 var mForm = gObj.element.querySelector('.e-movableheader').querySelector('.e-gridform');
@@ -132,3 +132,3 @@ if (gObj.frozenRows && mForm) {
             this.stopEditStatus();
-            if (gObj.editSettings.mode === 'dialog' && args.action !== 'add') {
+            if (gObj.editSettings.mode === 'Dialog' && args.action !== 'add') {
                 gObj.element.querySelector('.e-dlgeditrow').classList.remove('e-dlgeditrow');
@@ -170,3 +170,3 @@ }
             this.parent.trigger(events.actionComplete, args);
-            if (!(this.parent.isCheckBoxSelection || this.parent.selectionSettings.type === 'multiple')
+            if (!(this.parent.isCheckBoxSelection || this.parent.selectionSettings.type === 'Multiple')
                 || (!this.parent.isPersistSelection)) {
@@ -211,3 +211,3 @@ this.parent.selectRow(this.rowIndex > -1 ? this.rowIndex : this.editRowIndex);
             gObj.trigger(events.actionBegin, args);
-            if (this.parent.editSettings.mode === 'dialog') {
+            if (this.parent.editSettings.mode === 'Dialog') {
                 this.parent.notify(events.dialogDestroy, {});
@@ -218,3 +218,3 @@ }
             args.type = events.actionComplete;
-            if (gObj.editSettings.mode !== 'dialog') {
+            if (gObj.editSettings.mode !== 'Dialog') {
                 this.refreshRow(args.data);
@@ -317,2 +317,3 @@ }
             this.removeEventListener();
+            this.renderer.destroy();
         };
@@ -319,0 +320,0 @@ return NormalEdit;

src/grid/actions/pdf-export.js

@@ -255,3 +255,3 @@ define(["require", "exports", "../base/constant", "@syncfusion/ej2-pdf-export", "@syncfusion/ej2-pdf-export", "@syncfusion/ej2-pdf-export", "@syncfusion/ej2-pdf-export", "@syncfusion/ej2-pdf-export", "@syncfusion/ej2-pdf-export", "./export-helper", "../actions/data", "../services/summary-model-generator", "@syncfusion/ej2-base", "../base/enum", "@syncfusion/ej2-data", "@syncfusion/ej2-base"], function (require, exports, events, ej2_pdf_export_1, ej2_pdf_export_2, ej2_pdf_export_3, ej2_pdf_export_4, ej2_pdf_export_5, ej2_pdf_export_6, export_helper_1, data_1, summary_model_generator_1, ej2_base_1, enum_1, ej2_data_1, ej2_base_2) {
                                 cell.rowSpan = rows[i].cells[j].rowSpan;
-                                cell.style.stringFormat = this.getVerticalAlignment('bottom', cell.style.stringFormat, rows[i].cells[j].column.textAlign);
+                                cell.style.stringFormat = this.getVerticalAlignment('Bottom', cell.style.stringFormat, rows[i].cells[j].column.textAlign);
                                 for (var k = 1; k < rows[i].cells[j].rowSpan; k++) {
@@ -286,3 +286,3 @@ pdfGrid.headers.getHeader(i + k).cells.getCell(cellIndex).value = null;
                     var pdfPageSettings = new ej2_pdf_export_6.PdfPageSettings();
-                    pdfPageSettings.orientation = (pdfExportProperties.pageOrientation === 'landscape') ? ej2_pdf_export_6.PdfPageOrientation.Landscape : ej2_pdf_export_6.PdfPageOrientation.Portrait;
+                    pdfPageSettings.orientation = (pdfExportProperties.pageOrientation === 'Landscape') ? ej2_pdf_export_6.PdfPageOrientation.Landscape : ej2_pdf_export_6.PdfPageOrientation.Portrait;
                     pdfPageSettings.size = this.getPageSize(pdfExportProperties.pageSize);
@@ -317,3 +317,3 @@ section.setPageSettings(pdfPageSettings);
                 else if (!ej2_base_1.isNullOrUndefined(pdfExportProperties.exportType)) {
-                    if (pdfExportProperties.exportType === 'currentpage') {
+                    if (pdfExportProperties.exportType === 'CurrentPage') {
                         dataSource = this.parent.getCurrentViewRecords();
@@ -344,3 +344,3 @@ this.currentViewData = true;
                 switch (content.type) {
-                    case 'text':
+                    case 'Text':
                         if (content.value === '' || content.value === undefined || content.value === null || typeof content.value !== 'string') {
@@ -351,6 +351,6 @@ throw new Error('please enter the valid input value in text content...');
                         break;
-                    case 'pagenumber':
+                    case 'PageNumber':
                         this.drawPageNumber(template, content);
                         break;
-                    case 'image':
+                    case 'Image':
                         if (content.src === undefined || content.src === null || content.src === '') {
@@ -361,3 +361,3 @@ throw new Error('please enter the valid base64 string in image content...');
                         break;
-                    case 'line':
+                    case 'Line':
                         this.drawLine(template, content);
@@ -376,3 +376,3 @@ break;
             else {
-                if (content.type === 'line') {
+                if (content.type === 'Line') {
                     if (content.points === undefined || content.points === null) {
@@ -612,25 +612,25 @@ throw new Error('please enter valid points in ' + content.type + ' content...');
         PdfExport.prototype.getSummaryWithoutTemplate = function (data) {
-            if (!ej2_base_1.isNullOrUndefined(data.sum)) {
-                return data.sum;
+            if (!ej2_base_1.isNullOrUndefined(data.Sum)) {
+                return data.Sum;
             }
-            else if (!ej2_base_1.isNullOrUndefined(data.average)) {
-                return data.average;
+            else if (!ej2_base_1.isNullOrUndefined(data.Average)) {
+                return data.Average;
             }
-            else if (!ej2_base_1.isNullOrUndefined(data.max)) {
-                return data.max;
+            else if (!ej2_base_1.isNullOrUndefined(data.Max)) {
+                return data.Max;
             }
-            else if (!ej2_base_1.isNullOrUndefined(data.min)) {
-                return data.min;
+            else if (!ej2_base_1.isNullOrUndefined(data.Min)) {
+                return data.Min;
             }
-            else if (!ej2_base_1.isNullOrUndefined(data.count)) {
-                return data.count;
+            else if (!ej2_base_1.isNullOrUndefined(data.Count)) {
+                return data.Count;
             }
-            else if (!ej2_base_1.isNullOrUndefined(data.truecount)) {
-                return data.truecount;
+            else if (!ej2_base_1.isNullOrUndefined(data.TrueCount)) {
+                return data.TrueCount;
             }
-            else if (!ej2_base_1.isNullOrUndefined(data.falsecount)) {
-                return data.falsecount;
+            else if (!ej2_base_1.isNullOrUndefined(data.FalseCount)) {
+                return data.FalseCount;
             }
-            else if (!ej2_base_1.isNullOrUndefined(data.custom)) {
-                return data.custom;
+            else if (!ej2_base_1.isNullOrUndefined(data.Custom)) {
+                return data.Custom;
             }
@@ -749,12 +749,12 @@ };
             switch (textAlign) {
-                case 'right':
+                case 'Right':
                     format.alignment = ej2_pdf_export_3.PdfTextAlignment.Right;
                     break;
-                case 'center':
+                case 'Center':
                     format.alignment = ej2_pdf_export_3.PdfTextAlignment.Center;
                     break;
-                case 'justify':
+                case 'Justify':
                     format.alignment = ej2_pdf_export_3.PdfTextAlignment.Justify;
                     break;
-                case 'left':
+                case 'Left':
                     format.alignment = ej2_pdf_export_3.PdfTextAlignment.Left;
@@ -771,9 +771,9 @@ break;
             switch (verticalAlign) {
-                case 'bottom':
+                case 'Bottom':
                     format.lineAlignment = ej2_pdf_export_4.PdfVerticalAlignment.Bottom;
                     break;
-                case 'middle':
+                case 'Middle':
                     format.lineAlignment = ej2_pdf_export_4.PdfVerticalAlignment.Middle;
                     break;
-                case 'top':
+                case 'Top':
                     format.lineAlignment = ej2_pdf_export_4.PdfVerticalAlignment.Top;
@@ -818,9 +818,9 @@ break;
             switch (pageNumberType) {
-                case 'lowerlatin':
+                case 'LowerLatin':
                     return 2;
-                case 'lowerroman':
+                case 'LowerRoman':
                     return 3;
-                case 'upperlatin':
+                case 'UpperLatin':
                     return 4;
-                case 'upperroman':
+                case 'UpperRoman':
                     return 5;
@@ -838,9 +838,9 @@ default:
                     switch (content.style.hAlign) {
-                        case 'right':
+                        case 'Right':
                             format.alignment = ej2_pdf_export_3.PdfTextAlignment.Right;
                             break;
-                        case 'center':
+                        case 'Center':
                             format.alignment = ej2_pdf_export_3.PdfTextAlignment.Center;
                             break;
-                        case 'justify':
+                        case 'Justify':
                             format.alignment = ej2_pdf_export_3.PdfTextAlignment.Justify;
@@ -861,55 +861,55 @@ break;
             switch (pageSize) {
-                case 'letter':
+                case 'Letter':
                     return new ej2_pdf_export_6.SizeF(612, 792);
-                case 'note':
+                case 'Note':
                     return new ej2_pdf_export_6.SizeF(540, 720);
-                case 'legal':
+                case 'Legal':
                     return new ej2_pdf_export_6.SizeF(612, 1008);
-                case 'a0':
+                case 'A0':
                     return new ej2_pdf_export_6.SizeF(2380, 3368);
-                case 'a1':
+                case 'A1':
                     return new ej2_pdf_export_6.SizeF(1684, 2380);
-                case 'a2':
+                case 'A2':
                     return new ej2_pdf_export_6.SizeF(1190, 1684);
-                case 'a3':
+                case 'A3':
                     return new ej2_pdf_export_6.SizeF(842, 1190);
-                case 'a5':
+                case 'A5':
                     return new ej2_pdf_export_6.SizeF(421, 595);
-                case 'a6':
+                case 'A6':
                     return new ej2_pdf_export_6.SizeF(297, 421);
-                case 'a7':
+                case 'A7':
                     return new ej2_pdf_export_6.SizeF(210, 297);
-                case 'a8':
+                case 'A8':
                     return new ej2_pdf_export_6.SizeF(148, 210);
-                case 'a9':
+                case 'A9':
                     return new ej2_pdf_export_6.SizeF(105, 148);
-                case 'b0':
+                case 'B0':
                     return new ej2_pdf_export_6.SizeF(2836, 4008);
-                case 'b1':
+                case 'B1':
                     return new ej2_pdf_export_6.SizeF(2004, 2836);
-                case 'b2':
+                case 'B2':
                     return new ej2_pdf_export_6.SizeF(1418, 2004);
-                case 'b3':
+                case 'B3':
                     return new ej2_pdf_export_6.SizeF(1002, 1418);
-                case 'b4':
+                case 'B4':
                     return new ej2_pdf_export_6.SizeF(709, 1002);
-                case 'b5':
+                case 'B5':
                     return new ej2_pdf_export_6.SizeF(501, 709);
-                case 'archa':
+                case 'Archa':
                     return new ej2_pdf_export_6.SizeF(648, 864);
-                case 'archb':
+                case 'Archb':
                     return new ej2_pdf_export_6.SizeF(864, 1296);
-                case 'archc':
+                case 'Archc':
                     return new ej2_pdf_export_6.SizeF(1296, 1728);
-                case 'archd':
+                case 'Archd':
                     return new ej2_pdf_export_6.SizeF(1728, 2592);
-                case 'arche':
+                case 'Arche':
                     return new ej2_pdf_export_6.SizeF(2592, 3456);
-                case 'flsa':
+                case 'Flsa':
                     return new ej2_pdf_export_6.SizeF(612, 936);
-                case 'halfletter':
+                case 'HalfLetter':
                     return new ej2_pdf_export_6.SizeF(396, 612);
-                case 'letter11x17':
+                case 'Letter11x17':
                     return new ej2_pdf_export_6.SizeF(792, 1224);
-                case 'ledger':
+                case 'Ledger':
                     return new ej2_pdf_export_6.SizeF(1224, 792);
@@ -922,9 +922,9 @@ default:
             switch (dashStyle) {
-                case 'dash':
+                case 'Dash':
                     return 1;
-                case 'dot':
+                case 'Dot':
                     return 2;
-                case 'dashdot':
+                case 'DashDot':
                     return 3;
-                case 'dashdotdot':
+                case 'DashDotDot':
                     return 4;
@@ -931,0 +931,0 @@ default:

src/grid/actions/print.js

@@ -47,3 +47,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "../base/util", "../base/grid", "../base/constant"], function (require, exports, ej2_base_1, util_1, grid_1, events) {
                 else if (key === 'allowPaging') {
-                    printGridModel[key] = this.parent.printMode === 'currentpage';
+                    printGridModel[key] = this.parent.printMode === 'CurrentPage';
                 }
@@ -85,3 +85,3 @@ else {
             var gObj = this.parent;
-            if (gObj.allowPaging && gObj.printMode === 'currentpage') {
+            if (gObj.allowPaging && gObj.printMode === 'CurrentPage') {
                 gObj.element.querySelector('.e-gridpager').style.display = 'none';
@@ -111,3 +111,3 @@ }
             gObj.element.querySelector('.e-content').style.overflowX = 'hidden';
-            if (gObj.allowFiltering && gObj.filterSettings.type === 'filterbar') {
+            if (gObj.allowFiltering && gObj.filterSettings.type === 'FilterBar') {
                 gObj.element.querySelector('.e-filterbar').style.display = 'none';
@@ -114,0 +114,0 @@ }

src/grid/actions/reorder.js

@@ -75,8 +75,28 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/util", "../base/constant"], function (require, exports, ej2_base_1, ej2_base_2, util_1, events) {
             if (destElem && !(!this.chkDropPosition(this.element, destElem) || !this.chkDropAllCols(this.element, destElem))) {
-                var headers = this.getHeaderCells();
-                var oldIdx = util_1.getElementIndex(this.element, headers);
-                var columns = this.getColumnsModel(this.parent.columns);
-                var column = columns[oldIdx];
-                var newIndex = this.targetParentContainerIndex(this.element, destElem);
-                this.moveColumns(newIndex, column);
+                if (this.parent.enableColumnVirtualization) {
+                    var columns = this.parent.columns;
+                    var sourceUid_1 = this.element.querySelector('.e-headercelldiv').getAttribute('e-mappinguid');
+                    var col = this.parent.getColumns(true).filter(function (col) { return col.uid === sourceUid_1; });
+                    var colMatchIndex_1 = null;
+                    var column = col[0];
+                    var destUid_1 = destElem.querySelector('.e-headercelldiv').getAttribute('e-mappinguid');
+                    var bool = columns.some(function (col, index) {
+                        if (col.uid === destUid_1) {
+                            colMatchIndex_1 = index;
+                            return col.uid === destUid_1;
+                        }
+                        return false;
+                    });
+                    if (!ej2_base_1.isNullOrUndefined(colMatchIndex_1)) {
+                        this.moveColumns(colMatchIndex_1, column);
+                    }
+                }
+                else {
+                    var headers = this.getHeaderCells();
+                    var oldIdx = util_1.getElementIndex(this.element, headers);
+                    var columns = this.getColumnsModel(this.parent.columns);
+                    var column = columns[oldIdx];
+                    var newIndex = this.targetParentContainerIndex(this.element, destElem);
+                    this.moveColumns(newIndex, column);
+                }
             }
@@ -83,0 +103,0 @@ };

src/grid/actions/resize.js

@@ -156,2 +156,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "../services/width-controller", "../base/constant", "../base/util"], function (require, exports, ej2_base_1, width_controller_1, events, util_1) {
         Resize.prototype.render = function () {
+            this.unwireEvents();
             this.wireEvents();
@@ -401,7 +402,12 @@ this.setHandlerHeight();
             if (left > this.parentElementWidth) {
-                this.helper.style.left = this.parentElementWidth - borderWidth + 'px';
+                left = this.parentElementWidth - borderWidth;
             }
-            else {
-                this.helper.style.left = left + 'px';
+            if (this.parent.getFrozenColumns()) {
+                var table = ej2_base_1.closest(rect, '.e-table');
+                var fLeft = table.offsetLeft;
+                if (left < fLeft) {
+                    left = fLeft;
+                }
             }
+            this.helper.style.left = left + 'px';
         };
@@ -408,0 +414,0 @@ Resize.prototype.calcPos = function (elem) {

src/grid/actions/row-reorder.js

@@ -11,3 +11,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/util", "../base/constant"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, util_1, events) {
                 if (document.getElementsByClassName('e-griddragarea').length ||
-                    (!e.sender.target.classList.contains('e-selectionbackground') && gObj.selectionSettings.type !== 'single')) {
+                    (!e.sender.target.classList.contains('e-selectionbackground') && gObj.selectionSettings.type !== 'Single')) {
                     return false;
@@ -21,3 +21,3 @@ }
                 var tbody = ej2_base_3.createElement('tbody');
-                if (gObj.selectionSettings.mode === 'row' && gObj.selectionSettings.type === 'single') {
+                if (gObj.selectionSettings.mode === 'Row' && gObj.selectionSettings.type === 'Single') {
                     var index = parseInt(e.sender.target.parentElement.getAttribute('aria-rowindex'), 10);
@@ -24,0 +24,0 @@ gObj.selectRow(index);

src/grid/actions/search.d.ts

@@ -7,2 +7,4 @@ import { IGrid, IAction, NotifyArgs } from '../base/interface';
     private parent;
+    private refreshSearch;
+    private actionCompleteFunc;
     /**
@@ -44,2 +46,3 @@ * Constructor for Grid search module.
      */
+    onSearchComplete(e: NotifyArgs): void;
     onActionComplete(e: NotifyArgs): void;
@@ -46,0 +49,0 @@ /**

src/grid/actions/search.js

@@ -20,2 +20,5 @@ define(["require", "exports", "@syncfusion/ej2-base", "../base/constant", "../base/util"], function (require, exports, ej2_base_1, events, util_1) {
             }
+            else if (this.refreshSearch) {
+                gObj.refresh();
+            }
         };
@@ -27,4 +30,6 @@ Search.prototype.addEventListener = function () {
             this.parent.on(events.inBoundModelChanged, this.onPropertyChanged, this);
-            this.parent.on(events.searchComplete, this.onActionComplete, this);
+            this.parent.on(events.searchComplete, this.onSearchComplete, this);
             this.parent.on(events.destroy, this.destroy, this);
+            this.actionCompleteFunc = this.onActionComplete.bind(this);
+            this.parent.addEventListener(events.actionComplete, this.actionCompleteFunc);
         };
@@ -36,4 +41,5 @@ Search.prototype.removeEventListener = function () {
             this.parent.off(events.inBoundModelChanged, this.onPropertyChanged);
-            this.parent.off(events.searchComplete, this.onActionComplete);
+            this.parent.off(events.searchComplete, this.onSearchComplete);
             this.parent.off(events.destroy, this.destroy);
+            this.parent.removeEventListener(events.actionComplete, this.actionCompleteFunc);
         };
@@ -58,3 +64,3 @@ Search.prototype.destroy = function () {
         };
-        Search.prototype.onActionComplete = function (e) {
+        Search.prototype.onSearchComplete = function (e) {
             this.parent.trigger(events.actionComplete, ej2_base_1.extend(e, {
@@ -64,2 +70,5 @@ searchString: this.parent.searchSettings.key, requestType: 'searching', type: events.actionComplete
         };
+        Search.prototype.onActionComplete = function (e) {
+            this.refreshSearch = e.requestType !== 'searching';
+        };
         Search.prototype.getModuleName = function () {
@@ -66,0 +75,0 @@ return 'search';

src/grid/actions/selection.d.ts

@@ -57,3 +57,2 @@ import { IGrid, IAction, IIndex, ISelectedCell } from '../base/interface';
     private persistSelectedData;
-    private selectionRequest;
     private onDataBoundFunction;
@@ -65,4 +64,2 @@ private actionBeginFunction;
     private focus;
-    private checkAllRecords;
-    private unSelectRowKey;
     /**
@@ -202,2 +199,3 @@ * Constructor for the Grid selection module
     removeEventListener(): void;
+    private columnPositionChanged();
     private refreshHeader();
@@ -216,2 +214,4 @@ private rowsRemoved(e);
     private dataSuccess(res);
+    private setRowSelection(state);
+    private getData();
     private refreshPersistSelection();
@@ -218,0 +218,0 @@ private actionBegin(e);

src/grid/actions/show-hide.js

@@ -11,2 +11,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "../base/util", "../base/constant"], function (require, exports, ej2_base_1, util_1, events) {
             var columns = this.getColumns(keys, showBy);
+            this.parent.notify(events.tooltipDestroy, { module: 'edit' });
             columns.forEach(function (value) {
@@ -13,0 +14,0 @@ value.visible = true;

src/grid/actions/sort.js

@@ -223,2 +223,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/util", "../base/constant", "../services/aria-service"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, util_1, events, aria_service_1) {
                 !(target.classList.contains('e-resized')) &&
+                !e.target.classList.contains('e-rhandler') &&
                 !e.target.classList.contains('e-columnmenu') &&
@@ -228,4 +229,4 @@ !e.target.classList.contains('e-filtermenudiv')) {
                 var colObj = gObj.getColumnByUid(target.querySelector('.e-headercelldiv').getAttribute('e-mappinguid'));
-                var direction = !target.querySelectorAll('.e-ascending').length ? 'ascending' :
-                    'descending';
+                var direction = !target.querySelectorAll('.e-ascending').length ? 'Ascending' :
+                    'Descending';
                 if (colObj.type !== 'checkbox') {
@@ -258,4 +259,4 @@ this.initiateSort(target, e, colObj);
             var field = column.field;
-            var direction = !target.querySelectorAll('.e-ascending').length ? 'ascending' :
-                'descending';
+            var direction = !target.querySelectorAll('.e-ascending').length ? 'Ascending' :
+                'Descending';
             if (e.shiftKey || (this.sortSettings.allowUnsort && target.querySelectorAll('.e-descending').length)
@@ -311,3 +312,3 @@ && !(gObj.groupSettings.columns.indexOf(field) > -1)) {
                 filterElement = header.querySelector('.e-sortfilterdiv');
-                if (cols[i].direction === 'ascending') {
+                if (cols[i].direction === 'Ascending') {
                     ej2_base_3.classList(filterElement, ['e-ascending', 'e-icon-ascending'], []);
@@ -314,0 +315,0 @@ }

src/grid/actions/toolbar.js

@@ -7,4 +7,4 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-navigations", "../base/constant", "../base/util", "../services/focus-strategy"], function (require, exports, ej2_base_1, ej2_base_2, ej2_navigations_1, events, util_1, focus_strategy_1) {
             this.predefinedItems = {};
-            this.items = ['add', 'edit', 'update', 'delete', 'cancel', 'print', 'search',
-                'columnchooser', 'pdfexport', 'excelexport', 'csvexport', 'wordexport'];
+            this.items = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'Print', 'Search',
+                'ColumnChooser', 'PdfExport', 'ExcelExport', 'CsvExport', 'WordExport'];
             this.parent = parent;
@@ -17,13 +17,14 @@ this.gridID = parent.element.id;
             this.l10n = this.serviceLocator.getService('localization');
-            var preItems = ['add', 'edit', 'update', 'delete', 'cancel', 'print',
-                'pdfexport', 'excelexport', 'wordexport', 'csvexport'];
+            var preItems = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'Print',
+                'PdfExport', 'ExcelExport', 'WordExport', 'CsvExport'];
             for (var _i = 0, preItems_1 = preItems; _i < preItems_1.length; _i++) {
                 var item = preItems_1[_i];
-                var localeName = item[0].toUpperCase() + item.slice(1);
+                var itemStr = item.toLowerCase();
+                var localeName = itemStr[0].toUpperCase() + itemStr.slice(1);
                 this.predefinedItems[item] = {
-                    id: this.gridID + '_' + item, prefixIcon: 'e-' + item,
+                    id: this.gridID + '_' + itemStr, prefixIcon: 'e-' + itemStr,
                     text: this.l10n.getConstant(localeName), tooltipText: this.l10n.getConstant(localeName)
                 };
             }
-            this.predefinedItems.search = {
+            this.predefinedItems.Search = {
                 id: this.gridID + '_search',
@@ -38,3 +39,3 @@ template: '<div class="e-input-group e-search" role="search">\
             };
-            this.predefinedItems.columnchooser = {
+            this.predefinedItems.ColumnChooser = {
                 id: this.gridID + '_' + 'columnchooser', cssClass: 'e-cc e-ccdiv e-cc-toolbar', suffixIcon: 'e-' + 'columnchooser-btn',
@@ -100,3 +101,3 @@ text: 'Columns', tooltipText: 'columns', align: 'right',
             edit.allowDeleting && hasData ? enableItems.push(this.gridID + '_delete') : disableItems.push(this.gridID + '_delete');
-            if (gObj.editSettings.mode === 'batch') {
+            if (gObj.editSettings.mode === 'Batch') {
                 if (gObj.element.querySelectorAll('.e-updatedtd').length && (edit.allowAdding || edit.allowEditing)) {
@@ -103,0 +104,0 @@ enableItems.push(this.gridID + '_update');

src/grid/base/constant.d.ts

@@ -58,2 +58,4 @@ /** @hidden */
 /** @hidden */
+export declare const batchCancel: string;
+/** @hidden */
 export declare const batchDelete: string;
@@ -60,0 +62,0 @@ /** @hidden */

src/grid/base/constant.js

@@ -32,2 +32,3 @@ define(["require", "exports"], function (require, exports) {
     exports.batchAdd = 'batchAdd';
+    exports.batchCancel = 'batchCancel';
     exports.batchDelete = 'batchDelete';
@@ -48,3 +49,3 @@ exports.beforeBatchAdd = 'beforeBatchAdd';
     exports.resizeStart = 'resizeStart';
-    exports.onResize = 'onResize';
+    exports.onResize = 'resizing';
     exports.resizeStop = 'resizeStop';
@@ -51,0 +52,0 @@ exports.checkBoxChange = 'checkBoxChange';

src/grid/base/enum.d.ts

@@ -16,20 +16,20 @@ /**
  * Defines directions of Sorting. They are
- * * ascending
- * * descending
+ * * Ascending
+ * * Descending
  */
-export declare type SortDirection = 'ascending' | 'descending';
+export declare type SortDirection = 'Ascending' | 'Descending';
 /**
  * Defines types of Selection. They are
- * * single - Allows user to select a row or cell.
- * * multiple - Allows user to select multiple rows or cells.
+ * * Single - Allows user to select a row or cell.
+ * * Multiple - Allows user to select multiple rows or cells.
  */
-export declare type SelectionType = 'single' | 'multiple';
+export declare type SelectionType = 'Single' | 'Multiple';
 /**
  * Defines alignments of text, they are
- * * left
- * * right
- * * center
- * * justify
+ * * Left
+ * * Right
+ * * Center
+ * * Justify
  */
-export declare type TextAlign = 'left' | 'right' | 'center' | 'justify';
+export declare type TextAlign = 'Left' | 'Right' | 'Center' | 'Justify';
 /**
@@ -73,9 +73,9 @@ * Defines types of Cell
  * Defines modes of GridLine, They are
- * * both - Displays both the horizontal and vertical grid lines.
- * * none - No grid lines are displayed.
- * * horizontal - Displays the horizontal grid lines only.
- * * vertical - Displays the vertical grid lines only.
- * * default - Displays grid lines based on the theme.
+ * * Both - Displays both the horizontal and vertical grid lines.
+ * * None - No grid lines are displayed.
+ * * Horizontal - Displays the horizontal grid lines only.
+ * * Vertical - Displays the vertical grid lines only.
+ * * Default - Displays grid lines based on the theme.
  */
-export declare type GridLine = 'both' | 'none' | 'horizontal' | 'vertical' | 'default';
+export declare type GridLine = 'Both' | 'None' | 'Horizontal' | 'Vertical' | 'Default';
 /**
@@ -95,41 +95,42 @@ * Defines types of Render
  * Defines modes of Selection, They are
- * * row
- * * cell
- * * both
+ * * Row
+ * * Cell
+ * * Both
  */
-export declare type SelectionMode = 'cell' | 'row' | 'both';
+export declare type SelectionMode = 'Cell' | 'Row' | 'Both';
 /**
  * Print mode options are
- * * allpages - Print all pages records of the Grid.
- * * currentpage - Print current page records of the Grid.
+ * * AllPages - Print all pages records of the Grid.
+ * * CurrentPage - Print current page records of the Grid.
  */
-export declare type PrintMode = 'allpages' | 'currentpage';
+export declare type PrintMode = 'AllPages' | 'CurrentPage';
 /**
  * Defines types of Filter
- * * menu - Specifies the filter type as menu.
- * * excel - Specifies the filter type as excel.
- * * filterbar - Specifies the filter type as filterbar.
+ * * Menu - Specifies the filter type as menu.
+ * * Excel - Specifies the filter type as excel.
+ * * FilterBar - Specifies the filter type as filter bar.
+ * * CheckBox - Specifies the filter type as check box.
  */
-export declare type FilterType = 'filterbar' | 'excel' | 'menu' | 'checkbox';
+export declare type FilterType = 'FilterBar' | 'Excel' | 'Menu' | 'CheckBox';
 /**
  * Filter bar mode options are
- * * onenter - Initiate filter operation after Enter key is pressed.
- * * immediate -  Initiate filter operation after certain time interval. By default time interval is 1500 ms.
+ * * OnEnter - Initiate filter operation after Enter key is pressed.
+ * * Immediate -  Initiate filter operation after certain time interval. By default time interval is 1500 ms.
  */
-export declare type FilterBarMode = 'onenter' | 'immediate';
+export declare type FilterBarMode = 'OnEnter' | 'Immediate';
 /**
  * Defines the aggregate types.
  */
-export declare type AggregateType = 'sum' | 'average' | 'max' | 'min' | 'count' | 'truecount' | 'falsecount' | 'custom';
+export declare type AggregateType = 'Sum' | 'Average' | 'Max' | 'Min' | 'Count' | 'TrueCount' | 'FalseCount' | 'Custom';
 /**
  * Defines the wrap mode.
- * * both -  Wraps both header and content.
- * * header - Wraps header alone.
- * * content - Wraps content alone.
+ * * Both -  Wraps both header and content.
+ * * Header - Wraps header alone.
+ * * Content - Wraps content alone.
  */
-export declare type WrapMode = 'both' | 'header' | 'content';
+export declare type WrapMode = 'Both' | 'Header' | 'Content';
 /**
  * Defines Multiple Export Type.
  */
-export declare type MultipleExportType = 'appendtosheet' | 'newsheet';
+export declare type MultipleExportType = 'AppendToSheet' | 'NewSheet';
 /**
@@ -139,27 +140,27 @@ * Defines Predefined toolbar items.
  */
-export declare type ToolbarItems = 'add' | 'delete' | 'update' | 'cancel' | 'edit' | 'search' | 'columnchooser' | 'print' | 'pdfexport' | 'excelexport' | 'csvexport' | 'wordexport';
+export declare type ToolbarItems = 'Add' | 'Delete' | 'Update' | 'Cancel' | 'Edit' | 'Search' | 'ColumnChooser' | 'Print' | 'PdfExport' | 'ExcelExport' | 'CsvExport' | 'WordExport';
 /**
  * Defines the cell content's overflow mode. The available modes are
- * * `clip` -  Truncates the cell content when it overflows its area.
- * * `ellipsis` -  Displays ellipsis when the cell content overflows its area.
- * * `ellipsiswithtooltip` - Displays ellipsis when the cell content overflows its area
+ * * `Clip` -  Truncates the cell content when it overflows its area.
+ * * `Ellipsis` -  Displays ellipsis when the cell content overflows its area.
+ * * `EllipsisWithTooltip` - Displays ellipsis when the cell content overflows its area
  * also it will display tooltip while hover on ellipsis applied cell.
  */
-export declare type ClipMode = 'clip' | 'ellipsis' | 'ellipsiswithtooltip';
+export declare type ClipMode = 'Clip' | 'Ellipsis' | 'EllipsisWithTooltip';
 /**
  * Defines the Command Buttons type.
- * * edit -  Edit the current record.
- * * delete - Delete the current record.
- * * save - Save the current edited record.
- * * cancel - Cancel the edited state.
+ * * Edit -  Edit the current record.
+ * * Delete - Delete the current record.
+ * * Save - Save the current edited record.
+ * * Cancel - Cancel the edited state.
  */
-export declare type CommandButtonType = 'edit' | 'delete' | 'save' | 'cancel';
+export declare type CommandButtonType = 'Edit' | 'Delete' | 'Save' | 'Cancel';
 /**
  * Defines the default items of context menu.
  */
-export declare type ContextMenuItem = 'autoFitAll' | 'autoFit' | 'group' | 'ungroup' | 'edit' | 'delete' | 'save' | 'cancel' | 'copy' | 'pdfExport' | 'excelExport' | 'csvExport' | 'sortAscending' | 'sortDescending' | 'firstPage' | 'prevPage' | 'lastPage' | 'nextPage';
+export declare type ContextMenuItem = 'AutoFitAll' | 'AutoFit' | 'Group' | 'Ungroup' | 'Edit' | 'Delete' | 'Save' | 'Cancel' | 'Copy' | 'PdfExport' | 'ExcelExport' | 'CsvExport' | 'SortAscending' | 'SortDescending' | 'FirstPage' | 'PrevPage' | 'LastPage' | 'NextPage';
 /**
  * Defines the default items of Column menu.
  */
-export declare type ColumnMenuItem = 'autoFitAll' | 'autoFit' | 'group' | 'ungroup' | 'sortAscending' | 'sortDescending' | 'columnChooser' | 'filter';
+export declare type ColumnMenuItem = 'AutoFitAll' | 'AutoFit' | 'Group' | 'Ungroup' | 'SortAscending' | 'SortDescending' | 'ColumnChooser' | 'Filter';
 /**
@@ -183,30 +184,43 @@ * Defines Predefined toolbar items.
 }
-export declare type PdfPageSize = 'letter' | 'note' | 'legal' | 'a0' | 'a1' | 'a2' | 'a3' | 'a4' | 'a5' | 'a6' | 'a7' | 'a8' | 'a9' | 'b0' | 'b1' | 'b2' | 'b3' | 'b4' | 'b5' | 'archa' | 'archb' | 'archc' | 'archd' | 'arche' | 'flsa' | 'halfletter' | 'letter11x17' | 'ledger';
-export declare type PageOrientation = 'landscape' | 'portrait';
-export declare type ContentType = 'image' | 'line' | 'pagenumber' | 'text';
-export declare type PdfPageNumberType = 'lowerlatin' | 'lowerroman' | 'upperlatin' | 'upperroman' | 'numeric' | 'arabic';
-export declare type PdfDashStyle = 'solid' | 'dash' | 'dot' | 'dashdot' | 'dashdotdot';
+export declare type PdfPageSize = 'Letter' | 'Note' | 'Legal' | 'A0' | 'A1' | 'A2' | 'A3' | 'A4' | 'A5' | 'A6' | 'A7' | 'A8' | 'A9' | 'B0' | 'B1' | 'B2' | 'B3' | 'B4' | 'B5' | 'Archa' | 'Archb' | 'Archc' | 'Archd' | 'Arche' | 'Flsa' | 'HalfLetter' | 'Letter11x17' | 'Ledger';
+export declare type PageOrientation = 'Landscape' | 'Portrait';
+export declare type ContentType = 'Image' | 'Line' | 'PageNumber' | 'Text';
+export declare type PdfPageNumberType = 'LowerLatin' | 'LowerRoman' | 'UpperLatin' | 'UpperRoman' | 'Numeric' | 'Arabic';
+export declare type PdfDashStyle = 'Solid' | 'Dash' | 'Dot' | 'DashDot' | 'DashDotDot';
 /**
  * Defines PDF horizontal alignment.
  */
-export declare type PdfHAlign = 'left' | 'right' | 'center' | 'justify';
+export declare type PdfHAlign = 'Left' | 'Right' | 'Center' | 'Justify';
 /**
  * Defines PDF vertical alignment.
  */
-export declare type PdfVAlign = 'top' | 'bottom' | 'middle';
+export declare type PdfVAlign = 'Top' | 'Bottom' | 'Middle';
 /**
  * Defines Export Type.
  */
-export declare type ExportType = 'currentpage' | 'allpages';
+export declare type ExportType = 'CurrentPage' | 'AllPages';
 /**
  * Defines Excel horizontal alignment.
  */
-export declare type ExcelHAlign = 'left' | 'right' | 'center' | 'fill';
+export declare type ExcelHAlign = 'Left' | 'Right' | 'Center' | 'Fill';
 /**
  * Defines Excel vertical alignment.
  */
-export declare type ExcelVAlign = 'top' | 'bottom' | 'center' | 'justify';
+export declare type ExcelVAlign = 'Top' | 'Bottom' | 'Center' | 'Justify';
 /**
  * Defines border line style.
  */
-export declare type BorderLineStyle = 'thin' | 'thick';
+export declare type BorderLineStyle = 'Thin' | 'Thick';
+export declare type CheckState = 'Check' | 'Uncheck' | 'Intermediate' | 'None';
+/**
+ * Defines mode of cell selection.
+ * * Ascending
+ * * Descending
+ */
+export declare type CellSelectionMode = 'Flow' | 'Box';
+/**
+ * Defines modes of editing.
+ * * Ascending
+ * * Descending
+ */
+export declare type EditMode = 'Normal' | 'Dialog' | 'Batch';

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

@@ -1,2 +0,2 @@
-import { Component, ModuleDeclaration, ChildProperty, Browser, closest, extend } from '@syncfusion/ej2-base';
import { isNullOrUndefined, setValue, getValue } from '@syncfusion/ej2-base';
import { createElement, addClass, removeClass, append, remove, classList } from '@syncfusion/ej2-base';
import { Property, Collection, Complex, Event, NotifyPropertyChanges, INotifyPropertyChanged, L10n } from '@syncfusion/ej2-base';
import { EventHandler, KeyboardEvents, KeyboardEventArgs, EmitType } from '@syncfusion/ej2-base';
import { Query, DataManager, DataUtil } from '@syncfusion/ej2-data';
import { ItemModel, ClickEventArgs } from '@syncfusion/ej2-navigations';
import { createSpinner, hideSpinner, showSpinner, Tooltip } from '@syncfusion/ej2-popups';
import { iterateArrayOrObject, prepareColumns, parentsUntil, wrap, templateCompiler, refreshForeignData } from './util';
import * as events from '../base/constant';
import { IRenderer, IValueFormatter, IFilterOperator, IIndex, RowDataBoundEventArgs, QueryCellInfoEventArgs } from './interface';
import { CellDeselectEventArgs, CellSelectEventArgs, CellSelectingEventArgs, ParentDetails, ContextMenuItemModel } from './interface';
import { PdfQueryCellInfoEventArgs, ExcelQueryCellInfoEventArgs, ExcelExportProperties, PdfExportProperties } from './interface';
import { ColumnMenuOpenEventArgs, RecordDoubleClickEventArgs, DataResult, PendingState } from './interface';
import { FailureEventArgs, FilterEventArgs, ColumnDragEventArgs, GroupEventArgs, PrintEventArgs, ICustomOptr } from './interface';
import { RowDeselectEventArgs, RowSelectEventArgs, RowSelectingEventArgs, PageEventArgs, RowDragEventArgs } from './interface';
import { BeforeBatchAddArgs, BeforeBatchDeleteArgs, BeforeBatchSaveArgs, ResizeArgs, ColumnMenuItemModel } from './interface';
import { BatchAddArgs, BatchDeleteArgs, BeginEditArgs, CellEditArgs, CellSaveArgs, BeforeDataBoundArgs, RowInfo } from './interface';
import { DetailDataBoundEventArgs, ColumnChooserEventArgs, AddEventArgs, SaveEventArgs, EditEventArgs, DeleteEventArgs } from './interface';
import { ExcelExportCompleteArgs, PdfExportCompleteArgs, DataStateChangeEventArgs, DataSourceChangedEventArgs } from './interface';
import { SearchEventArgs, SortEventArgs, ISelectedCell, EJ2Intance, BeforeCopyEventArgs, CheckBoxChangeEventArgs } from './interface';
import { Render } from '../renderer/render';
import { Column, ColumnModel } from '../models/column';
import { Action, SelectionType, GridLine, RenderType, SortDirection, SelectionMode, PrintMode, FilterType, FilterBarMode } from './enum';
import { WrapMode, ToolbarItems, ContextMenuItem, ColumnMenuItem, ToolbarItem } from './enum';
import { Data } from '../actions/data';
import { Cell } from '../models/cell';
import { RowRenderer } from '../renderer/row-renderer';
import { CellRenderer } from '../renderer/cell-renderer';
import { CellRendererFactory } from '../services/cell-render-factory';
import { ServiceLocator } from '../services/service-locator';
import { ValueFormatter } from '../services/value-formatter';
import { RendererFactory } from '../services/renderer-factory';
import { ColumnWidthService } from '../services/width-controller';
import { AriaService } from '../services/aria-service';
import { FocusStrategy } from '../services/focus-strategy';
import { PageSettingsModel, AggregateRowModel } from '../models/models';
import { PageSettings } from '../models/page-settings';
import { Sort } from '../actions/sort';
import { Page } from '../actions/page';
import { Selection } from '../actions/selection';
import { Filter } from '../actions/filter';
import { Search } from '../actions/search';
import { Resize } from '../actions/resize';
import { Reorder } from '../actions/reorder';
import { RowDD } from '../actions/row-reorder';
import { ShowHide } from '../actions/show-hide';
import { Scroll } from '../actions/scroll';
import { Group } from '../actions/group';
import { Print } from '../actions/print';
import { DetailRow } from '../actions/detail-row';
import { Toolbar } from '../actions/toolbar';
import { AggregateRow } from '../models/aggregate';
import { Edit } from '../actions/edit';
import { Row } from '../models/row';
import { ColumnChooser } from '../actions/column-chooser';
import { ExcelExport } from '../actions/excel-export';
import { PdfExport } from '../actions/pdf-export';
import { Clipboard } from '../actions/clipboard';
import { CommandColumn } from '../actions/command-column';
import { ContextMenu } from '../actions/context-menu';
import { BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnMenu } from '../actions/column-menu';
import { CheckState } from './type';
+import { Component, ModuleDeclaration, ChildProperty, Browser, closest, extend } from '@syncfusion/ej2-base';
import { isNullOrUndefined, setValue, getValue } from '@syncfusion/ej2-base';
import { createElement, addClass, removeClass, append, remove, classList } from '@syncfusion/ej2-base';
import { Property, Collection, Complex, Event, NotifyPropertyChanges, INotifyPropertyChanged, L10n } from '@syncfusion/ej2-base';
import { EventHandler, KeyboardEvents, KeyboardEventArgs, EmitType } from '@syncfusion/ej2-base';
import { Query, DataManager, DataUtil } from '@syncfusion/ej2-data';
import { ItemModel, ClickEventArgs } from '@syncfusion/ej2-navigations';
import { createSpinner, hideSpinner, showSpinner, Tooltip } from '@syncfusion/ej2-popups';
import { iterateArrayOrObject, prepareColumns, parentsUntil, wrap, templateCompiler, refreshForeignData } from './util';
import * as events from '../base/constant';
import { IRenderer, IValueFormatter, IFilterOperator, IIndex, RowDataBoundEventArgs, QueryCellInfoEventArgs } from './interface';
import { CellDeselectEventArgs, CellSelectEventArgs, CellSelectingEventArgs, ParentDetails, ContextMenuItemModel } from './interface';
import { PdfQueryCellInfoEventArgs, ExcelQueryCellInfoEventArgs, ExcelExportProperties, PdfExportProperties } from './interface';
import { ColumnMenuOpenEventArgs, RecordDoubleClickEventArgs, DataResult, PendingState } from './interface';
import { FailureEventArgs, FilterEventArgs, ColumnDragEventArgs, GroupEventArgs, PrintEventArgs, ICustomOptr } from './interface';
import { RowDeselectEventArgs, RowSelectEventArgs, RowSelectingEventArgs, PageEventArgs, RowDragEventArgs } from './interface';
import { BeforeBatchAddArgs, BeforeBatchDeleteArgs, BeforeBatchSaveArgs, ResizeArgs, ColumnMenuItemModel } from './interface';
import { BatchAddArgs, BatchDeleteArgs, BeginEditArgs, CellEditArgs, CellSaveArgs, BeforeDataBoundArgs, RowInfo } from './interface';
import { DetailDataBoundEventArgs, ColumnChooserEventArgs, AddEventArgs, SaveEventArgs, EditEventArgs, DeleteEventArgs } from './interface';
import { ExcelExportCompleteArgs, PdfExportCompleteArgs, DataStateChangeEventArgs, DataSourceChangedEventArgs } from './interface';
import { SearchEventArgs, SortEventArgs, ISelectedCell, EJ2Intance, BeforeCopyEventArgs, CheckBoxChangeEventArgs } from './interface';
import { Render } from '../renderer/render';
import { Column, ColumnModel } from '../models/column';
import { Action, SelectionType, GridLine, RenderType, SortDirection, SelectionMode, PrintMode, FilterType, FilterBarMode } from './enum';
import { WrapMode, ToolbarItems, ContextMenuItem, ColumnMenuItem, ToolbarItem, CellSelectionMode, EditMode } from './enum';
import { Data } from '../actions/data';
import { Cell } from '../models/cell';
import { RowRenderer } from '../renderer/row-renderer';
import { CellRenderer } from '../renderer/cell-renderer';
import { CellRendererFactory } from '../services/cell-render-factory';
import { ServiceLocator } from '../services/service-locator';
import { ValueFormatter } from '../services/value-formatter';
import { RendererFactory } from '../services/renderer-factory';
import { ColumnWidthService } from '../services/width-controller';
import { AriaService } from '../services/aria-service';
import { FocusStrategy } from '../services/focus-strategy';
import { PageSettingsModel, AggregateRowModel } from '../models/models';
import { PageSettings } from '../models/page-settings';
import { Sort } from '../actions/sort';
import { Page } from '../actions/page';
import { Selection } from '../actions/selection';
import { Filter } from '../actions/filter';
import { Search } from '../actions/search';
import { Resize } from '../actions/resize';
import { Reorder } from '../actions/reorder';
import { RowDD } from '../actions/row-reorder';
import { ShowHide } from '../actions/show-hide';
import { Scroll } from '../actions/scroll';
import { Group } from '../actions/group';
import { Print } from '../actions/print';
import { DetailRow } from '../actions/detail-row';
import { Toolbar } from '../actions/toolbar';
import { AggregateRow } from '../models/aggregate';
import { Edit } from '../actions/edit';
import { Row } from '../models/row';
import { ColumnChooser } from '../actions/column-chooser';
import { ExcelExport } from '../actions/excel-export';
import { PdfExport } from '../actions/pdf-export';
import { Clipboard } from '../actions/clipboard';
import { CommandColumn } from '../actions/command-column';
import { ContextMenu } from '../actions/context-menu';
import { BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnMenu } from '../actions/column-menu';
import { CheckState } from './enum';
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -127,2 +127,3 @@
      * If ignoreAccent is set to true, then filter ignores the diacritic characters or accents while filtering.
+     * @default false
      */
@@ -176,6 +177,7 @@ ignoreAccent?: boolean;
      * Defines options for filtering type. The available options are 
-     * * `menu` - Specifies the filter type as menu. 
-     * * `checkbox` - Specifies the filter type as checkbox.      
-     * * `filterbar` - Specifies the filter type as filterbar.  
-     * @default filterbar 
+     * * `Menu` - Specifies the filter type as menu. 
+     * * `CheckBox` - Specifies the filter type as checkbox.      
+     * * `FilterBar` - Specifies the filter type as filterbar.  
+     * * `Excel` - Specifies the filter type as checkbox.      
+     * @default FilterBar 
      */
@@ -186,5 +188,5 @@ type?: FilterType;
      * Defines the filter bar modes. The available options are,
-     * * `onenter`: Initiates filter operation after Enter key is pressed. 
-     * * `immediate`: Initiates filter operation after a certain time interval. By default, time interval is 1500 ms. 
-     * @default onenter
+     * * `OnEnter`: Initiates filter operation after Enter key is pressed. 
+     * * `Immediate`: Initiates filter operation after a certain time interval. By default, time interval is 1500 ms. 
+     * @default OnEnter
      */
@@ -208,5 +210,5 @@ mode?: FilterBarMode;
      * (string, number, date and boolean). Based on the column type, this customize operator list will render in filter menu.
-     * @default null
      * 
      * > Check the [`Filter Menu Operator`](./how-to.html#customizing-filter-menu-operators-list) customization.
+     * @default null
      */
@@ -217,5 +219,5 @@ operators?: ICustomOptr;
      * If ignoreAccent set to true, then filter ignores the diacritic characters or accents while filtering.
-     * @default false
      * 
      * > Check the [`Diacritics`](./filtering.html/#diacritics) filtering.
+     * @default false
      */
@@ -233,3 +235,3 @@ ignoreAccent?: boolean;
      * Grid supports row, cell, and both (row and cell) selection mode. 
-     * @default row
+     * @default Row
      */
@@ -241,13 +243,13 @@ mode?: SelectionMode;
      * [`mode`](./api-selectionSettings.html#mode-selectionmode) to be either cell or both.
-     * * `flow`: Selects the range of cells between start index and end index that also includes the other cells of the selected rows.
-     * * `box`: Selects the range of cells within the start and end column indexes that includes in between cells of rows within the range.
-     * @default flow
+     * * `Flow`: Selects the range of cells between start index and end index that also includes the other cells of the selected rows.
+     * * `Box`: Selects the range of cells within the start and end column indexes that includes in between cells of rows within the range.
+     * @default Flow
      */
-    cellSelectionMode?: string;
+    cellSelectionMode?: CellSelectionMode;
 
     /**
      * Defines options for selection type. They are 
-     * * `single`: Allows selection of only a row or a cell. 
-     * * `multiple`: Allows selection of multiple rows or cells. 
-     * @default single 
+     * * `Single`: Allows selection of only a row or a cell. 
+     * * `Multiple`: Allows selection of multiple rows or cells. 
+     * @default Single 
      */
@@ -352,6 +354,6 @@ type?: SelectionType;
      * Defines the `wrapMode` of the Grid. The available modes are: 
-     * * `both`: Wraps both the header and content. 
-     * * `content`: Wraps the header alone.
-     * * `header`: Wraps the content alone. 
-     * @default both
+     * * `Both`: Wraps both the header and content. 
+     * * `Content`: Wraps the header alone.
+     * * `Header`: Wraps the content alone. 
+     * @default Both
      */
@@ -442,8 +444,8 @@ wrapMode?: WrapMode;
      * Defines the mode to edit. The available editing modes are:
-     * * Inline
+     * * Normal
      * * Dialog
-     * * Batch  
-     * @default normal 
+     * * Batch
+     * @default Normal 
      */
-    mode?: string;
+    mode?: EditMode;
 
@@ -483,5 +485,5 @@ /**
     /**
-     * If `enableAltRow` is set to true, the grid will render with `e-altrow` CSS class to the alternative tr elements.
-     * @default true     
+     * If `enableAltRow` is set to true, the grid will render with `e-altrow` CSS class to the alternative tr elements.    
      * > Check the [`AltRow`](./row.html#styling-alternate-rows) to customize the styles of alternative rows.
+     * @default true 
      */
@@ -497,5 +499,5 @@ enableAltRow?: boolean;
     /**
-     * Enables or disables the key board interaction of Grid.     
+     * Enables or disables the key board interaction of Grid.          
+     * @hidden 
      * @default true     
-     * @hidden 
      */
@@ -513,3 +515,3 @@ allowKeyboard?: boolean;
      * Configures the text wrap in the Grid.  
-     * @default {wrapMode:"both"}     
+     * @default {wrapMode:"Both"}     
      */
@@ -604,3 +606,3 @@ textWrapSettings?: TextWrapSettingsModel;
      * Configures the selection settings.  
-     * @default {mode: 'row', cellSelectionMode: 'flow', type: 'single'}    
+     * @default {mode: 'Row', cellSelectionMode: 'Flow', type: 'Single'}    
      */
@@ -647,3 +649,3 @@ selectionSettings?: SelectionSettingsModel;
      * Configures the filter settings of the Grid.  
-     * @default {columns: [], type: 'filterbar', mode: 'immediate', showFilterBarStatus: true, immediateModeDelay: 1500 , operators: {}}    
+     * @default {columns: [], type: 'FilterBar', mode: 'Immediate', showFilterBarStatus: true, immediateModeDelay: 1500 , operators: {}}    
      */
@@ -677,3 +679,3 @@ filterSettings?: FilterSettingsModel;
      * Configures the edit settings. 
-     * @default { allowAdding: false, allowEditing: false, allowDeleting: false, mode:'normal',
+     * @default { allowAdding: false, allowEditing: false, allowDeleting: false, mode:'Normal',
      * allowEditOnDblClick: true, showConfirmDialog: true, showDeleteConfirmDialog: false }    
@@ -712,8 +714,8 @@ */
      * Defines the mode of grid lines. The available modes are, 
-     * * `both`: Displays both horizontal and vertical grid lines. 
-     * * `none`: No grid lines are displayed.
-     * * `horizontal`: Displays the horizontal grid lines only. 
-     * * `vertical`: Displays the vertical grid lines only.
-     * * `default`: Displays grid lines based on the theme.
-     * @default default
+     * * `Both`: Displays both horizontal and vertical grid lines. 
+     * * `None`: No grid lines are displayed.
+     * * `Horizontal`: Displays the horizontal grid lines only. 
+     * * `Vertical`: Displays the vertical grid lines only.
+     * * `Default`: Displays grid lines based on the theme.
+     * @default Default
      */
@@ -757,5 +759,5 @@ gridLines?: GridLine;
      * Defines the print modes. The available print modes are   
-     * * `allpages`: Prints all pages of the Grid. 
-     * * `currentpage`: Prints the current page of the Grid.
-     * @default allpages
+     * * `AllPages`: Prints all pages of the Grid. 
+     * * `CurrentPage`: Prints the current page of the Grid.
+     * @default AllPages
      */
@@ -803,12 +805,12 @@ printMode?: PrintMode;
      * The available built-in ToolBar items are:
-     * * add: Adds a new record.
-     * * edit: Edits the selected record.
-     * * update: Updates the edited record.
-     * * delete: Deletes the selected record.
-     * * cancel: Cancels the edit state.
-     * * search: Searches records by the given key.
-     * * print: Prints the Grid.
-     * * excelexport - Export the Grid to Excel(excelExport() method manually to make export.)
-     * * pdfexport - Export the Grid to PDF(pdfExport() method manually to make export.)
-     * * csvexport - Export the Grid to CSV(csvExport() method manually to make export.)<br><br>
+     * * Add: Adds a new record.
+     * * Edit: Edits the selected record.
+     * * Update: Updates the edited record.
+     * * Delete: Deletes the selected record.
+     * * Cancel: Cancels the edit state.
+     * * Search: Searches records by the given key.
+     * * Print: Prints the Grid.
+     * * ExcelExport - Export the Grid to Excel(excelExport() method manually to make export.)
+     * * PdfExport - Export the Grid to PDF(pdfExport() method manually to make export.)
+     * * CsvExport - Export the Grid to CSV(csvExport() method manually to make export.)<br><br>
      * The following code example implements the custom toolbar items.
@@ -827,20 +829,20 @@ *
      * The available built-in items are,  
-     * * `autoFitAll` - Auto fit the size of all columns. 
-     * * `autoFit` - Auto fit the current column.
-     * * `group` - Group by current column. 
-     * * `ungroup` - Ungroup by current column.
-     * * `edit` - Edit the current record.
-     * * `delete` - Delete the current record.
-     * * `save` - Save the edited record.
-     * * `cancel` - Cancel the edited state.
-     * * `copy` - Copy the selected records.
-     * * `pdfExport` - Export the grid as Pdf format.
-     * * `excelExport` - Export the grid as Excel format.
-     * * `csvExport` - Export the grid as CSV format.
-     * * `sortAscending` - Sort the current column in ascending order.
-     * * `sortDescending` - Sort the current column in descending order.
-     * * `firstPage` - Go to the first page.
-     * * `prevPage` - Go to the previous page.
-     * * `lastPage` - Go to the last page.
-     * * `nextPage` - Go to the next page.
+     * * `AutoFitAll` - Auto fit the size of all columns. 
+     * * `AutoFit` - Auto fit the current column.
+     * * `Group` - Group by current column. 
+     * * `Ungroup` - Ungroup by current column.
+     * * `Edit` - Edit the current record.
+     * * `Delete` - Delete the current record.
+     * * `Save` - Save the edited record.
+     * * `Cancel` - Cancel the edited state.
+     * * `Copy` - Copy the selected records.
+     * * `PdfExport` - Export the grid as Pdf format.
+     * * `ExcelExport` - Export the grid as Excel format.
+     * * `CsvExport` - Export the grid as CSV format.
+     * * `SortAscending` - Sort the current column in ascending order.
+     * * `SortDescending` - Sort the current column in descending order.
+     * * `FirstPage` - Go to the first page.
+     * * `PrevPage` - Go to the previous page.
+     * * `LastPage` - Go to the last page.
+     * * `NextPage` - Go to the next page.
      * 
@@ -855,9 +857,9 @@ * @default null
      * The available built-in items are,
-     * * `autoFitAll` - Auto fit the size of all columns. 
-     * * `autoFit` - Auto fit the current column.
-     * * `group` - Group by current column. 
-     * * `ungroup` - Ungroup by current column.
-     * * `sortAscending` - Sort the current column in ascending order.
-     * * `sortDescending` - Sort the current column in descending order.
-     * * `filter` - Filter options will show based on filterSettings property like checkbox filter, excel filter, menu filter.
+     * * `AutoFitAll` - Auto fit the size of all columns. 
+     * * `AutoFit` - Auto fit the current column.
+     * * `Group` - Group by current column. 
+     * * `Ungroup` - Ungroup by current column.
+     * * `SortAscending` - Sort the current column in ascending order.
+     * * `SortDescending` - Sort the current column in descending order.
+     * * `Filter` - Filter options will show based on filterSettings property like checkbox filter, excel filter, menu filter.
      * @default null
@@ -1165,3 +1167,3 @@ */
      */
-    onResize?: EmitType<ResizeArgs>;
+    resizing?: EmitType<ResizeArgs>;
 
@@ -1168,0 +1170,0 @@ /**

src/grid/base/interface.d.ts

@@ -14,3 +14,4 @@ import { Component, NumberFormatOptions, DateFormatOptions, EmitType, KeyboardEventArgs, L10n } from '@syncfusion/ej2-base';
 import { PredicateModel } from './grid-model';
-import { SentinelType, Offsets, CheckState } from './type';
+import { SentinelType, Offsets } from './type';
+import { CheckState } from './enum';
 import { Edit } from '../actions/edit';
@@ -17,0 +18,0 @@ import { DropDownListModel } from '@syncfusion/ej2-dropdowns';

src/grid/base/type.d.ts

@@ -30,2 +30,1 @@ import { ColumnModel, AggregateColumnModel } from '../models/models';
 };
-export declare type CheckState = 'check' | 'uncheck' | 'intermediate' | 'none';

src/grid/base/util.js

@@ -239,6 +239,6 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "../models/column", "@syncfusion/ej2-popups"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, ej2_data_1, column_1, ej2_popups_1) {
     function calculateAggregate(type, data, column, context) {
-        if (type === 'custom') {
+        if (type === 'Custom') {
             return column.customAggregate ? column.customAggregate.call(context, data, column) : '';
         }
-        return ej2_data_1.DataUtil.aggregates[type](data, column.field);
+        return ej2_data_1.DataUtil.aggregates[type.toLowerCase()](data, column.field);
     }
@@ -293,3 +293,3 @@ exports.calculateAggregate = calculateAggregate;
         var dlg = inst.element.querySelector('#' + inst.element.id + 'EditConfirm');
-        return inst.editSettings.mode === 'batch' &&
+        return inst.editSettings.mode === 'Batch' &&
             (inst.element.querySelectorAll('.e-updatedtd').length) && inst.editSettings.showConfirmDialog &&
@@ -296,0 +296,0 @@ (dlg ? dlg.classList.contains('e-popup-close') : true);

src/grid/models/column.d.ts

@@ -46,3 +46,3 @@ import { NumberFormatOptions, DateFormatOptions } from '@syncfusion/ej2-base';
      * Defines the alignment of the column in both header and content cells.
-     * @default left
+     * @default Left
      */
@@ -52,7 +52,7 @@ textAlign: TextAlign;
      * Defines the cell content's overflow mode. The available modes are
-     * * `clip` -  Truncates the cell content when it overflows its area.
-     * * `ellipsis` -  Displays ellipsis when the cell content overflows its area.
-     * * `ellipsiswithtooltip` - Displays ellipsis when the cell content overflows its area
+     * * `Clip` -  Truncates the cell content when it overflows its area.
+     * * `Ellipsis` -  Displays ellipsis when the cell content overflows its area.
+     * * `EllipsisWithTooltip` - Displays ellipsis when the cell content overflows its area
      * also it will display tooltip while hover on ellipsis applied cell.
-     * @default ellipsis
+     * @default Ellipsis
      */
@@ -62,4 +62,3 @@ clipMode: ClipMode;
      * Define the alignment of column header which is used to align the text of column header.
-     * @default left
-     * @hidden
+     * @default Left
      */
@@ -158,3 +157,3 @@ headerTextAlign: TextAlign;
      * If `displayAsCheckBox` is set to true, it displays the column value as a check box instead of Boolean value.
-     * @default true
+     * @default false
      */
@@ -280,6 +279,6 @@ displayAsCheckBox: boolean;
      * The available built-in command buttons are
-     * * edit - Edit the record.
-     * * delete - Delete the record.
-     * * save - Save the record.
-     * * cancel - Cancel the edit state.
+     * * Edit - Edit the record.
+     * * Delete - Delete the record.
+     * * Save - Save the record.
+     * * Cancel - Cancel the edit state.
      * {% codeBlock src="grid/command-column-api/index.ts" %}{% endcodeBlock %}
@@ -375,12 +374,12 @@ * @default null
      * Defines the alignment of the column in both header and content cells.
-     * @default left
+     * @default Left
      */
-    textAlign?: string | TextAlign;
+    textAlign?: TextAlign;
     /**
      * Defines the cell content's overflow mode. The available modes are
-     * * `clip` -  Truncates the cell content when it overflows its area.
-     * * `ellipsis` -  Displays ellipsis when the cell content overflows its area.
-     * * `ellipsiswithtooltip` - Displays ellipsis when the cell content overflows its area
+     * * `Clip` -  Truncates the cell content when it overflows its area.
+     * * `Ellipsis` -  Displays ellipsis when the cell content overflows its area.
+     * * `EllipsisWithTooltip` - Displays ellipsis when the cell content overflows its area
      * also it will display tooltip while hover on ellipsis applied cell.
-     * @default ellipsis
+     * @default Ellipsis
      */
@@ -390,6 +389,6 @@ clipMode?: ClipMode;
      * Define the alignment of column header which is used to align the text of column header.
-     * @default left
+     * @default Left
      * @hidden
      */
-    headerTextAlign?: string | TextAlign;
+    headerTextAlign?: TextAlign;
     /**
@@ -427,3 +426,2 @@ * If `disableHtmlEncode` is set to true, it encodes the HTML of the header and content cells.
      * @default null
-     * @hidden
      */
@@ -505,3 +503,3 @@ headerTemplate?: string;
      * If `displayAsCheckBox` is set to true, it displays the column value as a check box instead of Boolean value.
-     * @default true
+     * @default false
      */
@@ -613,4 +611,4 @@ displayAsCheckBox?: boolean;
      * Defines the tool tip text for stacked headers.
+     * @hidden
      * @default null
-     * @hidden
      */
@@ -680,6 +678,6 @@ toolTip?: string;
      * The available built-in command buttons are
-     * * edit - Edit the record.
-     * * delete - Delete the record.
-     * * save - Save the record.
-     * * cancel - Cancel the edit state.
+     * * Edit - Edit the record.
+     * * Delete - Delete the record.
+     * * Save - Save the record.
+     * * Cancel - Cancel the edit state.
      *
@@ -686,0 +684,0 @@ * The following code example implements the custom command column.

src/grid/models/column.js

@@ -17,3 +17,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "../services/value-formatter", "../base/util"], function (require, exports, ej2_base_1, ej2_data_1, value_formatter_1, util_1) {
             this.edit = {};
-            this.sortDirection = 'descending';
+            this.sortDirection = 'Descending';
             ej2_base_1.merge(this, options);
@@ -32,3 +32,3 @@ this.uid = util_1.getUid('grid-column');
             if (this.commands && !this.textAlign) {
-                this.textAlign = 'right';
+                this.textAlign = 'Right';
             }
@@ -51,3 +51,3 @@ if (this.template || this.commandsTemplate) {
                 this.sortComparer = function comparer(x, y) {
-                    if (this.sortDirection === 'descending') {
+                    if (this.sortDirection === 'Descending') {
                         var z = x;
@@ -64,3 +64,3 @@ x = y;
                     y = ej2_base_1.getValue(_this.foreignKeyValue, util_1.getForeignData(_this, {}, y)[0]);
-                    return _this.sortDirection === 'descending' ? ej2_data_1.DataUtil.fnDescending(x, y) : ej2_data_1.DataUtil.fnAscending(x, y);
+                    return _this.sortDirection === 'Descending' ? ej2_data_1.DataUtil.fnDescending(x, y) : ej2_data_1.DataUtil.fnAscending(x, y);
                 };
@@ -67,0 +67,0 @@ }

src/grid/renderer/batch-edit-renderer.d.ts

@@ -19,2 +19,3 @@ import { IGrid } from '../base/interface';
     private getEditElement(elements, args);
+    removeEventListener(): void;
 }

src/grid/renderer/batch-edit-renderer.js

@@ -26,2 +26,4 @@ define(["require", "exports", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1) {
         };
+        BatchEditRender.prototype.removeEventListener = function () {
+        };
         return BatchEditRender;
@@ -28,0 +30,0 @@ }());

src/grid/renderer/boolean-edit-cell.js

@@ -44,3 +44,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-buttons", "@syncfusion/ej2-base", "../base/util"], function (require, exports, ej2_base_1, ej2_buttons_1, ej2_base_2, util_1) {
             this.obj = new ej2_buttons_1.CheckBox(ej2_base_2.extend({
-                label: this.parent.editSettings.mode !== 'dialog' ? '' : args.column.headerText,
+                label: this.parent.editSettings.mode !== 'Dialog' ? '' : args.column.headerText,
                 checked: chkState,
@@ -53,3 +53,3 @@ disabled: !util_1.isEditable(args.column, args.requestType, args.element), enableRtl: this.parent.enableRtl,
         BooleanEditCell.prototype.checkBoxChange = function (args) {
-            if (this.editRow && this.editType !== 'dialog') {
+            if (this.editRow && this.editType !== 'Dialog') {
                 var add = false;
@@ -56,0 +56,0 @@ if (!args.checked) {

src/grid/renderer/cell-renderer.js

@@ -109,3 +109,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/util", "@syncfusion/ej2-buttons", "../base/constant"], function (require, exports, ej2_base_1, ej2_base_2, util_1, ej2_buttons_1, constant_1) {
             }
-            if (this.parent.checkAllRows === 'check' && this.parent.enableVirtualization) {
+            if (this.parent.checkAllRows === 'Check' && this.parent.enableVirtualization) {
                 cell.isSelected = true;
@@ -140,6 +140,6 @@ }
             }
-            if (column.clipMode === 'clip') {
+            if (column.clipMode === 'Clip') {
                 node.classList.add('e-gridclip');
             }
-            else if (column.clipMode === 'ellipsiswithtooltip') {
+            else if (column.clipMode === 'EllipsisWithTooltip') {
                 node.classList.add('e-ellipsistooltip');
@@ -146,0 +146,0 @@ }

src/grid/renderer/command-column-renderer.js

@@ -53,14 +53,18 @@ var __extends = (this && this.__extends) || (function () {
             var button = this.buttonElement.cloneNode();
-            ej2_base_1.attributes(button, { 'id': this.parent.element.id + (buttonOption.type || '') + '_' + index, 'type': 'button',
-                title: buttonOption.buttonOption.content || buttonOption.type });
+            ej2_base_1.attributes(button, {
+                'id': this.parent.element.id + (buttonOption.type || '') + '_' + index, 'type': 'button',
+                title: buttonOption.buttonOption.content || buttonOption.type
+            });
             button.onclick = buttonOption.buttonOption.click;
-            node.firstElementChild.appendChild(new ej2_buttons_1.Button(buttonOption.buttonOption, button).element);
+            var buttonObj = new ej2_buttons_1.Button(buttonOption.buttonOption, button);
+            buttonObj.commandType = buttonOption.type;
+            node.firstElementChild.appendChild(buttonObj.element);
             switch (buttonOption.type) {
-                case 'edit':
-                case 'delete':
-                    ej2_base_1.addClass([button], ['e-edit-delete', 'e-' + buttonOption.type + 'button']);
+                case 'Edit':
+                case 'Delete':
+                    ej2_base_1.addClass([button], ['e-edit-delete', 'e-' + buttonOption.type.toLowerCase() + 'button']);
                     break;
-                case 'cancel':
-                case 'save':
-                    ej2_base_1.addClass([button], ['e-save-cancel', 'e-' + buttonOption.type + 'button']);
+                case 'Cancel':
+                case 'Save':
+                    ej2_base_1.addClass([button], ['e-save-cancel', 'e-' + buttonOption.type.toLowerCase() + 'button']);
                     break;
@@ -67,0 +71,0 @@ }

src/grid/renderer/content-renderer.js

@@ -67,3 +67,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/util", "../base/constant", "./row-renderer", "./cell-merge-renderer", "../services/row-model-generator", "../services/group-model-generator", "../base/util"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, util_1, events, row_renderer_1, cell_merge_renderer_1, row_model_generator_1, group_model_generator_1, util_2) {
             this.ariaService.setOptions(this.getTable(), {
-                multiselectable: this.parent.selectionSettings.type === 'multiple'
+                multiselectable: this.parent.selectionSettings.type === 'Multiple'
             });
@@ -70,0 +70,0 @@ this.initializeContentDrop();

src/grid/renderer/datepicker-edit-cell.js

@@ -19,3 +19,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-calendars", "../base/util"], function (require, exports, ej2_base_1, ej2_base_2, ej2_calendars_1, util_1) {
         DatePickerEditCell.prototype.write = function (args) {
-            var isInline = this.parent.editSettings.mode !== 'dialog';
+            var isInline = this.parent.editSettings.mode !== 'Dialog';
             this.obj = new ej2_calendars_1.DatePicker(ej2_base_1.extend({
@@ -22,0 +22,0 @@ floatLabelType: isInline ? 'Never' : 'Always',

src/grid/renderer/default-edit-cell.js

@@ -23,5 +23,5 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-inputs", "../base/util"], function (require, exports, ej2_base_1, ej2_inputs_1, util_1) {
             var col = args.column;
-            var isInline = this.parent.editSettings.mode !== 'dialog';
+            var isInline = this.parent.editSettings.mode !== 'Dialog';
             ej2_inputs_1.Input.createInput({
-                element: args.element, floatLabelType: this.parent.editSettings.mode !== 'dialog' ? 'Never' : 'Always',
+                element: args.element, floatLabelType: this.parent.editSettings.mode !== 'Dialog' ? 'Never' : 'Always',
                 properties: {
@@ -28,0 +28,0 @@ enableRtl: this.parent.enableRtl, enabled: util_1.isEditable(args.column, args.requestType, args.element),

src/grid/renderer/dialog-edit-renderer.d.ts

@@ -30,2 +30,3 @@ import { IGrid } from '../base/interface';
     private getEditElement(elements);
+    removeEventListener(): void;
 }

src/grid/renderer/dialog-edit-renderer.js

@@ -30,4 +30,6 @@ define(["require", "exports", "@syncfusion/ej2-popups", "@syncfusion/ej2-base", "../base/constant", "../base/util"], function (require, exports, ej2_popups_1, ej2_base_1, events, util_1) {
             this.setLocaleObj();
+            var position = this.parent.element.getBoundingClientRect().height < 400 ?
+                { X: 'center', Y: 'top' } : { X: 'center', Y: 'center' };
             this.dialogObj = new ej2_popups_1.Dialog({
-                header: this.isEdit ? this.l10n.getConstant('EditFormTitle') + args.primaryKeyValue[0] :
+                header: this.isEdit ? this.l10n.getConstant('EditFormTitle') + '  ' + args.primaryKeyValue[0] :
                     this.l10n.getConstant('AddFormTitle'), isModal: true, visible: true, cssClass: 'e-edit-dialog',
@@ -37,2 +39,3 @@ content: this.getEditElement(elements),
                 allowDragging: true,
+                position: position,
                 close: this.dialogClose.bind(this),
@@ -99,2 +102,9 @@ closeOnEscape: true, width: '330px', target: gObj.element, animationSettings: { effect: 'None' },
         };
+        DialogEditRender.prototype.removeEventListener = function () {
+            if (this.parent.isDestroyed) {
+                return;
+            }
+            this.parent.off(events.dialogDestroy, this.destroy);
+            this.parent.off(events.destroy, this.destroy);
+        };
         return DialogEditRender;
@@ -101,0 +111,0 @@ }());

src/grid/renderer/dropdown-edit-cell.js

@@ -17,3 +17,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-dropdowns", "@syncfusion/ej2-data", "../base/util", "../base/util"], function (require, exports, ej2_base_1, ej2_base_2, ej2_dropdowns_1, ej2_data_1, util_1, util_2) {
             this.column = args.column;
-            var isInline = this.parent.editSettings.mode !== 'dialog';
+            var isInline = this.parent.editSettings.mode !== 'Dialog';
             this.obj = new ej2_dropdowns_1.DropDownList(ej2_base_1.extend({
@@ -20,0 +20,0 @@ dataSource: this.parent.dataSource instanceof ej2_data_1.DataManager ?

src/grid/renderer/edit-renderer.d.ts

@@ -39,2 +39,3 @@ import { IGrid } from '../base/interface';
     private getEditElements(args);
+    destroy(): void;
 }

src/grid/renderer/edit-renderer.js

@@ -7,4 +7,4 @@ define(["require", "exports", "@syncfusion/ej2-base", "./inline-edit-renderer", "./batch-edit-renderer", "./dialog-edit-renderer", "@syncfusion/ej2-base", "../base/enum", "../services/row-model-generator"], function (require, exports, ej2_base_1, inline_edit_renderer_1, batch_edit_renderer_1, dialog_edit_renderer_1, ej2_base_2, enum_1, row_model_generator_1) {
             this.editType = {
-                'inline': inline_edit_renderer_1.InlineEditRender,
-                'normal': inline_edit_renderer_1.InlineEditRender, 'batch': batch_edit_renderer_1.BatchEditRender, 'dialog': dialog_edit_renderer_1.DialogEditRender
+                'Inline': inline_edit_renderer_1.InlineEditRender,
+                'Normal': inline_edit_renderer_1.InlineEditRender, 'Batch': batch_edit_renderer_1.BatchEditRender, 'Dialog': dialog_edit_renderer_1.DialogEditRender
             };
@@ -32,3 +32,3 @@ this.parent = parent;
             var form = gObj.element.querySelector('.e-gridform');
-            if (frzCols && gObj.editSettings.mode === 'normal') {
+            if (frzCols && gObj.editSettings.mode === 'Normal') {
                 var rowIndex = parseInt(args.row.getAttribute('aria-rowindex'), 10);
@@ -42,3 +42,3 @@ if (gObj.frozenRows && (args.requestType === 'add' || rowIndex < gObj.frozenRows)) {
             }
-            var cols = gObj.editSettings.mode !== 'batch' ? gObj.getColumns() : [gObj.getColumnByField(args.columnName)];
+            var cols = gObj.editSettings.mode !== 'Batch' ? gObj.getColumns() : [gObj.getColumnByField(args.columnName)];
             for (var _i = 0, cols_1 = cols; _i < cols_1.length; _i++) {
@@ -50,3 +50,3 @@ var col = cols_1[_i];
                 value = col.valueAccessor(col.field, args.rowData, col);
-                if (frzCols && cols.indexOf(col) >= frzCols && gObj.editSettings.mode === 'normal') {
+                if (frzCols && cols.indexOf(col) >= frzCols && gObj.editSettings.mode === 'Normal') {
                     cell = fForm.querySelector('[e-mappinguid=' + col.uid + ']');
@@ -75,3 +75,3 @@ }
             }
-            if (this.parent.editSettings.mode === 'batch') {
+            if (this.parent.editSettings.mode === 'Batch') {
                 this.focus.onClick({ target: ej2_base_1.closest(elem, 'td') }, true);
@@ -89,3 +89,3 @@ }
             var elements = {};
-            var cols = gObj.editSettings.mode !== 'batch' ? gObj.getColumns() : [gObj.getColumnByField(args.columnName)];
+            var cols = gObj.editSettings.mode !== 'Batch' ? gObj.getColumns() : [gObj.getColumnByField(args.columnName)];
             for (var i = 0, len = cols.length; i < len; i++) {
@@ -123,3 +123,3 @@ var col = cols[i];
                 ej2_base_2.classList(input, ['e-input', 'e-field'], []);
-                if (col.textAlign === 'right') {
+                if (col.textAlign === 'Right') {
                     input.classList.add('e-ralign');
@@ -134,2 +134,5 @@ }
         };
+        EditRender.prototype.destroy = function () {
+            this.renderer.removeEventListener();
+        };
         return EditRender;
@@ -136,0 +139,0 @@ }());

src/grid/renderer/filter-menu-renderer.js

@@ -20,3 +20,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-popups", "./filter-menu-operator", "./string-filter-ui", "./number-filter-ui", "./boolean-filter-ui", "./date-filter-ui", "../base/util", "../base/constant"], function (require, exports, ej2_base_1, ej2_base_2, ej2_popups_1, filter_menu_operator_1, string_filter_ui_1, number_filter_ui_1, boolean_filter_ui_1, date_filter_ui_1, util_1, events) {
             this.col = this.parent.getColumnByField(args.field);
-            if (ej2_base_1.isNullOrUndefined(this.col.filter) || (ej2_base_1.isNullOrUndefined(this.col.filter.type) || this.col.filter.type === 'menu')) {
+            if (ej2_base_1.isNullOrUndefined(this.col.filter) || (ej2_base_1.isNullOrUndefined(this.col.filter.type) || this.col.filter.type === 'Menu')) {
                 this.renderDlgContent(args.target, this.col);
@@ -23,0 +23,0 @@ }

src/grid/renderer/footer-renderer.d.ts

@@ -13,4 +13,5 @@ import { IRenderer, IGrid } from '../base/interface';
     private aggregates;
-    private freezeContentRender;
     private freezeTable;
+    private frozenContent;
+    private movableContent;
     constructor(gridModule?: IGrid, serviceLocator?: ServiceLocator);
@@ -17,0 +18,0 @@ /**

src/grid/renderer/footer-renderer.js

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/constant", "./content-renderer", "./row-renderer", "../services/summary-model-generator", "../base/enum", "../base/util"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, constant_1, content_renderer_1, row_renderer_1, summary_model_generator_1, enum_1, util_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/constant", "./content-renderer", "./row-renderer", "../services/summary-model-generator", "../base/util"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, constant_1, content_renderer_1, row_renderer_1, summary_model_generator_1, util_1) {
     "use strict";
@@ -23,3 +23,2 @@ Object.defineProperty(exports, "__esModule", { value: true });
             _this.modelGenerator = new summary_model_generator_1.SummaryModelGenerator(_this.parent);
-            _this.freezeContentRender = serviceLocator.getService('rendererFactory').getRenderer(enum_1.RenderType.Content);
             _this.addEventListener();
@@ -37,4 +36,4 @@ return _this;
                 innerDiv.appendChild(mDiv);
-                this.freezeContentRender.setFrozenContent(fDiv);
-                this.freezeContentRender.setMovableContent(mDiv);
+                this.frozenContent = fDiv;
+                this.movableContent = mDiv;
                 movableContent = mDiv;
@@ -62,5 +61,5 @@ }
                 var freezeTable = table.cloneNode(true);
-                this.freezeContentRender.getFrozenContent().appendChild(freezeTable);
+                this.frozenContent.appendChild(freezeTable);
                 this.freezeTable = freezeTable;
-                this.freezeContentRender.getMovableContent().appendChild(table);
+                this.movableContent.appendChild(table);
                 ej2_base_1.remove(table.querySelector('colgroup'));
@@ -105,3 +104,3 @@ var colGroup = ((this.parent.getHeaderContent().querySelector('.e-movableheader').querySelector('colgroup')).cloneNode(true));
             if (this.parent.getFrozenColumns()) {
-                var frozenDiv = this.freezeContentRender.getFrozenContent();
+                var frozenDiv = this.frozenContent;
                 if (!frozenDiv.offsetHeight) {
@@ -108,0 +107,0 @@ frozenDiv.style.height = this.getTable().offsetHeight + 'px';

src/grid/renderer/freeze-renderer.js

@@ -124,3 +124,3 @@ var __extends = (this && this.__extends) || (function () {
                 var hdrClassList = this.parent.getHeaderContent().firstChild.classList;
-                if (wrapMode !== 'header' || obj.isModeChg) {
+                if (wrapMode !== 'Header' || obj.isModeChg) {
                     fRows = cont.querySelector('.e-frozencontent').querySelectorAll('tr');
@@ -130,3 +130,3 @@ mRows = cont.querySelector('.e-movablecontent').querySelectorAll('tr');
                 }
-                if (wrapMode === 'content' && this.parent.allowTextWrap) {
+                if (wrapMode === 'Content' && this.parent.allowTextWrap) {
                     hdrClassList.add('e-wrap');
@@ -137,3 +137,3 @@ }
                 }
-                if (wrapMode === 'both' || obj.isModeChg) {
+                if (wrapMode === 'Both' || obj.isModeChg) {
                     fRows = fHdr.querySelectorAll('tr');
@@ -143,4 +143,4 @@ mRows = mHdr.querySelectorAll('tr');
                 else {
-                    fRows = fHdr.querySelector(wrapMode === 'content' ? 'tbody' : 'thead').querySelectorAll('tr');
-                    mRows = mHdr.querySelector(wrapMode === 'content' ? 'tbody' : 'thead').querySelectorAll('tr');
+                    fRows = fHdr.querySelector(wrapMode === 'Content' ? 'tbody' : 'thead').querySelectorAll('tr');
+                    mRows = mHdr.querySelector(wrapMode === 'Content' ? 'tbody' : 'thead').querySelectorAll('tr');
                 }
@@ -164,4 +164,4 @@ this.setWrapHeight(fRows, mRows, obj.isModeChg, false, this.colDepth > 1);
             for (var i = 0, len = fRows.length; i < len; i++) {
-                if (isModeChg && ((wrapMode === 'header' && isContReset) || ((wrapMode === 'content' && tHead.contains(fRows[i]))
-                    || (wrapMode === 'header' && tBody.contains(fRows[i])))) || isStackedHdr) {
+                if (isModeChg && ((wrapMode === 'Header' && isContReset) || ((wrapMode === 'Content' && tHead.contains(fRows[i]))
+                    || (wrapMode === 'Header' && tBody.contains(fRows[i])))) || isStackedHdr) {
                     fRows[i].style.height = null;
@@ -168,0 +168,0 @@ mRows[i].style.height = null;

src/grid/renderer/header-cell-renderer.js

@@ -66,3 +66,3 @@ var __extends = (this && this.__extends) || (function () {
             node.appendChild(this.sortEle.cloneNode());
-            if ((this.parent.allowFiltering && this.parent.filterSettings.type !== 'filterbar') &&
+            if ((this.parent.allowFiltering && this.parent.filterSettings.type !== 'FilterBar') &&
                 (column.allowFiltering && !ej2_base_1.isNullOrUndefined(column.field)) &&
@@ -113,13 +113,13 @@ !(this.parent.showColumnMenu && column.showColumnMenu)) {
                 innerDIV.style.textAlign = alignment;
-                if (alignment === 'right' || alignment === 'left') {
-                    node.classList.add(alignment === 'right' ? 'e-rightalign' : 'e-leftalign');
+                if (alignment === 'Right' || alignment === 'Left') {
+                    node.classList.add(alignment === 'Right' ? 'e-rightalign' : 'e-leftalign');
                 }
-                else if (alignment === 'center') {
+                else if (alignment === 'Center') {
                     node.classList.add('e-centeralign');
                 }
             }
-            if (column.clipMode === 'clip') {
+            if (column.clipMode === 'Clip') {
                 node.classList.add('e-gridclip');
             }
-            else if (column.clipMode === 'ellipsiswithtooltip') {
+            else if (column.clipMode === 'EllipsisWithTooltip') {
                 node.classList.add('e-ellipsistooltip');
@@ -126,0 +126,0 @@ }

src/grid/renderer/header-renderer.js

@@ -405,3 +405,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/enum", "./row-renderer", "../models/cell", "../models/row", "../base/constant", "@syncfusion/ej2-base", "../base/util"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, enum_1, row_renderer_1, cell_1, row_1, events, ej2_base_4, util_1) {
             }
-            if (this.parent.allowTextWrap && this.parent.textWrapSettings.wrapMode === 'header') {
+            if (this.parent.allowTextWrap && this.parent.textWrapSettings.wrapMode === 'Header') {
                 util_1.wrap(rows, true);
@@ -408,0 +408,0 @@ }

src/grid/renderer/inline-edit-renderer.d.ts

@@ -24,2 +24,3 @@ import { IGrid } from '../base/interface';
     private getEditElement(elements?, isEdit?, tdElement?);
+    removeEventListener(): void;
 }

src/grid/renderer/inline-edit-renderer.js

@@ -175,2 +175,4 @@ define(["require", "exports", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1) {
         };
+        InlineEditRender.prototype.removeEventListener = function () {
+        };
         return InlineEditRender;
@@ -177,0 +179,0 @@ }());

src/grid/renderer/numeric-edit-cell.js

@@ -16,3 +16,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-inputs", "../base/util"], function (require, exports, ej2_base_1, ej2_base_2, ej2_inputs_1, util_1) {
         NumericEditCell.prototype.read = function (element) {
-            element.ej2_instances[0].focusOut(event);
+            element.blur();
             return element.ej2_instances[0].value;
@@ -22,3 +22,3 @@ };
             var col = args.column;
-            var isInline = this.parent.editSettings.mode !== 'dialog';
+            var isInline = this.parent.editSettings.mode !== 'Dialog';
             this.obj = new ej2_inputs_1.NumericTextBox(ej2_base_1.extend({
@@ -28,3 +28,3 @@ value: parseFloat(args.rowData[col.field]), enableRtl: this.parent.enableRtl,
                 enabled: util_1.isEditable(args.column, args.requestType, args.element),
-                floatLabelType: this.parent.editSettings.mode !== 'dialog' ? 'Never' : 'Always',
+                floatLabelType: this.parent.editSettings.mode !== 'Dialog' ? 'Never' : 'Always',
             }, col.edit.params));
@@ -31,0 +31,0 @@ this.obj.appendTo(args.element);

src/grid/renderer/row-renderer.js

@@ -37,3 +37,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/constant", "../base/util", "../base/enum", "./cell-merge-renderer"], function (require, exports, ej2_base_1, ej2_base_2, constant_1, util_1, enum_1, cell_merge_renderer_1) {
             if (row.isDataRow && this.parent.isCheckBoxSelection
-                && this.parent.checkAllRows === 'check' && this.parent.enableVirtualization) {
+                && this.parent.checkAllRows === 'Check' && this.parent.enableVirtualization) {
                 row.isSelected = true;
@@ -58,5 +58,7 @@ if (this.parent.getSelectedRowIndexes().indexOf(row.index) === -1) {
                 if (row.cells[i].cellType !== enum_1.CellType.Filter) {
-                    if (row.cells[i].cellType === enum_1.CellType.Data) {
-                        this.parent.trigger(constant_1.queryCellInfo, ej2_base_1.extend(cellArgs, { cell: td, column: cell.column, colSpan: 1,
-                            foreignKeyData: row.cells[i].foreignKeyData }));
+                    if (row.cells[i].cellType === enum_1.CellType.Data || row.cells[i].cellType === enum_1.CellType.CommandColumn) {
+                        this.parent.trigger(constant_1.queryCellInfo, ej2_base_1.extend(cellArgs, {
+                            cell: td, column: cell.column, colSpan: 1,
+                            foreignKeyData: row.cells[i].foreignKeyData
+                        }));
                         if (cellArgs.colSpan > 1 || row.cells[i].cellSpan > 1) {
@@ -63,0 +65,0 @@ var cellMerge = new cell_merge_renderer_1.CellMergeRender(this.serviceLocator, this.parent);

src/grid/renderer/string-filter-ui.js

@@ -55,5 +55,9 @@ define(["require", "exports", "@syncfusion/ej2-dropdowns", "@syncfusion/ej2-data", "@syncfusion/ej2-base", "../base/util"], function (require, exports, ej2_dropdowns_1, ej2_data_1, ej2_base_1, util_1) {
             var actuiObj = document.querySelector('#strui-' + column.uid).ej2_instances[0];
+            if (ej2_base_1.Browser.isDevice) {
+                actuiObj.hidePopup();
+                actuiObj.focusOut();
+            }
             var filterValue = actuiObj.value;
-            if (ej2_base_1.isNullOrUndefined(filterValue) && filterOptr !== 'equal' && filterOptr !== 'notEqual') {
-                filterValue = '';
+            if (ej2_base_1.isNullOrUndefined(filterValue) || filterValue === '') {
+                filterValue = null;
             }
@@ -60,0 +64,0 @@ filterObj.filterByColumn(column.field, filterOptr, filterValue, 'and', false);

src/grid/renderer/summary-cell-renderer.js

@@ -23,3 +23,4 @@ var __extends = (this && this.__extends) || (function () {
             var key;
-            key = !ej2_base_1.isNullOrUndefined(column.type) ? column.field + ' - ' + (column.type) : column.columnName;
+            key = !ej2_base_1.isNullOrUndefined(column.type) ?
+                column.field + ' - ' + (typeof column.type === 'string' ? column.type.toLowerCase() : '') : column.columnName;
             return data[column.columnName] ? data[column.columnName][key] : '';
@@ -26,0 +27,0 @@ };

src/grid/renderer/virtual-content-renderer.js

@@ -159,2 +159,3 @@ var __extends = (this && this.__extends) || (function () {
             }
+            this.vgenerator.checkAndResetCache(e.requestType);
             this.refreshOffsets();
@@ -161,0 +162,0 @@ this.setVirtualHeight();

src/grid/services/focus-strategy.d.ts

@@ -22,2 +22,3 @@ import { KeyboardEventArgs } from '@syncfusion/ej2-base';
     private skipFocus;
+    private focusByClick;
     private passiveHandler;
@@ -24,0 +25,0 @@ private prevIndexes;

src/grid/services/focus-strategy.js

@@ -21,2 +21,3 @@ var __extends = (this && this.__extends) || (function () {
             this.skipFocus = true;
+            this.focusByClick = false;
             this.prevIndexes = {};
@@ -28,2 +29,3 @@ this.parent = parent;
             var target = e.target;
+            this.focusByClick = true;
             this.skipFocus = target.classList.contains('e-grid');
@@ -53,3 +55,3 @@ };
         FocusStrategy.prototype.onBlur = function (e) {
-            if ((e && (!e.relatedTarget || ej2_base_1.closest(e.relatedTarget, '.e-grid')))) {
+            if ((this.parent.isEdit || e && (!e.relatedTarget || ej2_base_1.closest(e.relatedTarget, '.e-grid')))) {
                 return;
@@ -60,3 +62,5 @@ }
             this.currentInfo.skipAction = false;
-            this.getContent().getFocusInfo().elementToFocus.tabIndex = 0;
+            if (this.getContent().getFocusInfo().elementToFocus) {
+                this.getContent().getFocusInfo().elementToFocus.tabIndex = 0;
+            }
         };
@@ -69,3 +73,4 @@ FocusStrategy.prototype.onClick = function (e, force) {
                 !ej2_base_1.isNullOrUndefined(ej2_base_1.closest(e.target, '.e-frozenheader'));
-            if (!isContent && ej2_base_1.isNullOrUndefined(ej2_base_1.closest(e.target, '.e-gridheader'))) {
+            if (!isContent && ej2_base_1.isNullOrUndefined(ej2_base_1.closest(e.target, '.e-gridheader')) ||
+                e.target.classList.contains('e-content')) {
                 return;
@@ -129,3 +134,8 @@ }
             }
-            return (this.parent.editSettings.mode !== 'batch' && (this.parent.isEdit || ['insert', 'f2', 'delete'].indexOf(e.action) > -1)
+            if (['pageUp', 'pageDown'].indexOf(e.action) > -1) {
+                this.clearIndicator();
+                return true;
+            }
+            return (e.action === 'delete'
+                || (this.parent.editSettings.mode !== 'Batch' && (this.parent.isEdit || ['insert', 'f2'].indexOf(e.action) > -1))
                 || (ej2_base_1.closest(document.activeElement, '.e-filterbarcell') !== null ||
@@ -197,2 +207,3 @@ ej2_base_1.closest(document.activeElement, '#' + this.parent.element.id + '_searchbar') !== null
             this.prevIndexes = { rowIndex: rowIndex, cellIndex: cellIndex };
+            this.focusByClick = false;
         };
@@ -221,2 +232,6 @@ FocusStrategy.prototype.refreshMatrix = function (content) {
                 cFocus.generateRows(updateRow, { matrix: matrix, handlerInstance: (e.args && e.args.isFrozen) ? _this.fHeader : _this.header });
+                if (!ej2_base_2.Browser.isDevice && !_this.focusByClick && e && e.args && e.args.requestType === 'paging') {
+                    _this.skipFocus = false;
+                    _this.parent.element.focus();
+                }
             };
@@ -241,2 +256,3 @@ };
             this.parent.on(event.batchAdd, this.refreshMatrix(true), this);
+            this.parent.on(event.batchCancel, this.refreshMatrix(true), this);
             this.parent.on(event.batchDelete, this.refreshMatrix(true), this);
@@ -265,2 +281,3 @@ this.parent.on(event.detailDataBound, this.refreshMatrix(true), this);
             this.parent.off(event.batchDelete, this.refreshMatrix(true));
+            this.parent.off(event.batchCancel, this.refreshMatrix(true));
             this.parent.off(event.detailDataBound, this.refreshMatrix(true));
@@ -454,2 +471,3 @@ this.parent.off(event.onEmpty, this.refreshMatrix(true));
                 ej2_base_1.isNullOrUndefined(ej2_base_1.closest(ej2_base_1.closest(e.target, '.e-grid'), 'td.e-detailcell')) ? null : target : target;
+            target = target && ej2_base_1.closest(target, 'table').classList.contains('e-table') ? target : null;
             if (!target) {
@@ -471,2 +489,5 @@ return false;
             info.element = this.getTable().rows[rowIndex].cells[cellIndex];
+            if (!info.element) {
+                return info;
+            }
             info.elementToFocus = !info.element.classList.contains('e-unboundcell') && !info.element.classList.contains('e-detailcell')
@@ -521,3 +542,3 @@ && !info.element.classList.contains('e-templatecell') ? this.getFocusable(info.element) : info.element;
             var len = handlerInstance.matrix.matrix.length;
-            var defaultLen = this.parent.allowFiltering && this.parent.filterSettings.type === 'filterbar' ? len + 1 : len;
+            var defaultLen = this.parent.allowFiltering && this.parent.filterSettings.type === 'FilterBar' ? len + 1 : len;
             handlerInstance.matrix.matrix = handlerInstance.matrix.matrix.slice(0, defaultLen);
@@ -636,3 +657,3 @@ handlerInstance.matrix.rows = defaultLen;
             var length = this.matrix.matrix.length;
-            if (this.parent.allowFiltering && this.parent.filterSettings.type === 'filterbar') {
+            if (this.parent.allowFiltering && this.parent.filterSettings.type === 'FilterBar') {
                 this.matrix.rows = ++this.matrix.rows;
@@ -639,0 +660,0 @@ rows[0].cells.forEach(function (cell, cIndex) {

src/grid/services/summary-model-generator.js

@@ -114,3 +114,3 @@ var __extends = (this && this.__extends) || (function () {
             types.forEach(function (type) {
-                var key = column.field + ' - ' + type;
+                var key = column.field + ' - ' + type.toLowerCase();
                 var disp = column.columnName;
@@ -117,0 +117,0 @@ var val = group.aggregates && !ej2_base_1.isNullOrUndefined(group.aggregates[key]) ? group.aggregates[key] :

src/grid/services/virtual-row-model-generator.js

@@ -108,3 +108,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "../services/row-model-generator", "../services/group-model-generator"], function (require, exports, ej2_base_1, row_model_generator_1, group_model_generator_1) {
         VirtualRowModelGenerator.prototype.checkAndResetCache = function (action) {
-            var clear = ['paging', 'refresh', 'sorting', 'filtering', 'searching', 'grouping', 'ungrouping']
+            var clear = ['paging', 'refresh', 'sorting', 'filtering', 'searching', 'grouping', 'ungrouping', 'reorder']
                 .some(function (value) { return action === value; });
@@ -111,0 +111,0 @@ if (clear) {

src/grid/services/width-controller.js

@@ -129,4 +129,6 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/constant", "../models/column"], function (require, exports, ej2_base_1, ej2_base_2, constant_1, column_1) {
             var movableWidth = ej2_base_2.formatUnit(this.getTableWidth(columns));
-            this.parent.getHeaderContent().querySelector('.e-movableheader').firstElementChild.style.width
-                = movableWidth;
+            if (this.parent.getHeaderContent().querySelector('.e-movableheader').firstElementChild) {
+                this.parent.getHeaderContent().querySelector('.e-movableheader').firstElementChild.style.width
+                    = movableWidth;
+            }
             this.parent.getContent().querySelector('.e-movablecontent').firstElementChild.style.width =
@@ -133,0 +135,0 @@ movableWidth;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24706306

increased by2.33%

Lines of code

253035

increased by1.19%

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-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@15.4.23(transitive)

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

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

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

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

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

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

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

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

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

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

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

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

• - Removedintl@1.2.5(transitive)

• Updated@syncfusion/ej2-base@^16.1.24

• Updated@syncfusion/ej2-buttons@^16.1.24

• Updated@syncfusion/ej2-calendars@^16.1.24

• Updated@syncfusion/ej2-compression@^16.1.24

• Updated@syncfusion/ej2-data@^16.1.24

• Updated@syncfusion/ej2-dropdowns@^16.1.24

• Updated@syncfusion/ej2-excel-export@^16.1.24

• Updated@syncfusion/ej2-file-utils@^16.1.24

• Updated@syncfusion/ej2-inputs@^16.1.24

• Updated@syncfusion/ej2-lists@^16.1.24

• Updated@syncfusion/ej2-navigations@^16.1.24

• Updated@syncfusion/ej2-pdf-export@^16.1.24

• Updated@syncfusion/ej2-popups@^16.1.24