@syncfusion/ej2-grids - npm Package Compare versions

Comparing version 1.0.25 to 15.4.17

dist/es6/grid/actions.js

@@ -26,1 +26,8 @@ export * from './actions/data';
 export * from './actions/export-helper';
+export * from './actions/clipboard';
+export * from './actions/command-column';
+export * from './actions/checkbox-filter';
+export * from './actions/context-menu';
+export * from './actions/freeze';
+export * from './actions/column-menu';
+export * from './actions/excel-filter';

dist/es6/grid/actions/batch-edit.js

@@ -1,4 +0,5 @@
-import { extend, addClass } from '@syncfusion/ej2-base';
+import { extend, addClass, removeClass } from '@syncfusion/ej2-base';
 import { remove, classList, createElement } from '@syncfusion/ej2-base';
 import { isNullOrUndefined } from '@syncfusion/ej2-base';
+import { CellType } from '../base/enum';
 import { parentsUntil, inArray } from '../base/util';
@@ -8,2 +9,3 @@ import * as events from '../base/constant';
 import { CellRenderer } from '../renderer/cell-renderer';
+import { Cell } from '../models/cell';
 import { RowModelGenerator } from '../services/row-model-generator';
@@ -16,2 +18,3 @@ var BatchEdit = (function () {
         this.renderer = renderer;
+        this.focus = serviceLocator.getService('focus');
         this.addEventListener();
@@ -25,4 +28,6 @@ }
         this.parent.on(events.dblclick, this.dblClickHandler, this);
-        this.parent.on(events.keyPressed, this.keyPressHandler, this);
-        this.parent.addEventListener(events.dataBound, this.dataBound.bind(this));
+        this.parent.on(events.beforeCellFocused, this.onBeforeCellFocused, this);
+        this.parent.on(events.cellFocused, this.onCellFocused, this);
+        this.dataBoundFunction = this.dataBound.bind(this);
+        this.parent.addEventListener(events.dataBound, this.dataBoundFunction);
         this.parent.on(events.doubleTap, this.dblClickHandler, this);
@@ -36,4 +41,5 @@ };
         this.parent.off(events.dblclick, this.dblClickHandler);
-        this.parent.off(events.keyPressed, this.keyPressHandler);
-        this.parent.removeEventListener(events.dataBound, this.dataBound);
+        this.parent.off(events.beforeCellFocused, this.onBeforeCellFocused);
+        this.parent.on(events.cellFocused, this.onCellFocused);
+        this.parent.removeEventListener(events.dataBound, this.dataBoundFunction);
         this.parent.off(events.doubleTap, this.dblClickHandler);
@@ -56,79 +62,53 @@ };
     BatchEdit.prototype.dblClickHandler = function (e) {
-        var target = e.target;
+        var target = parentsUntil(e.target, 'e-rowcell');
         var tr = parentsUntil(e.target, 'e-row');
-        if ((parentsUntil(target, 'e-rowcell')) && tr) {
-            this.editCell(parseInt(tr.getAttribute('aria-rowindex'), 10), this.parent.columns[parseInt(parentsUntil(target, 'e-rowcell').getAttribute('aria-colindex'), 10)].field);
+        if (target && tr && !isNaN(parseInt(target.getAttribute('aria-colindex'), 10))) {
+            this.editCell(parseInt(tr.getAttribute('aria-rowindex'), 10), this.parent.columns[parseInt(target.getAttribute('aria-colindex'), 10)].field);
         }
     };
-    BatchEdit.prototype.keyPressHandler = function (e) {
+    BatchEdit.prototype.onBeforeCellFocused = function (e) {
+        if (this.parent.isEdit && this.validateFormObj() &&
+            (e.byClick || (['tab', 'shiftTab', 'enter', 'shiftEnter'].indexOf(e.keyArgs.action) > -1))) {
+            e.cancel = true;
+            if (e.byClick) {
+                e.clickArgs.preventDefault();
+            }
+            else {
+                e.keyArgs.preventDefault();
+            }
+        }
+    };
+    BatchEdit.prototype.onCellFocused = function (e) {
+        var clear = !e.container.isContent || !e.container.isDataCell;
+        if (!e.byKey || clear) {
+            return;
+        }
+        var _a = e.container.indexes, rowIndex = _a[0], cellIndex = _a[1];
         var isEdit = this.parent.isEdit;
         if (!document.querySelectorAll('.e-popup-open').length) {
-            this.saveCell();
             isEdit = isEdit && !this.validateFormObj();
-            switch (e.action) {
+            switch (e.keyArgs.action) {
                 case 'tab':
-                    if (isEdit) {
-                        this.editNextCell();
-                    }
-                    break;
                 case 'shiftTab':
                     if (isEdit) {
-                        this.editPrevCell();
+                        this.editCellFromIndex(rowIndex, cellIndex);
                     }
                     break;
                 case 'enter':
-                    e.preventDefault();
-                    if (isEdit && this.cellDetails.rowIndex + 1 < this.parent.getDataRows().length) {
-                        this.editCell(this.cellDetails.rowIndex + 1, this.cellDetails.column.field);
+                case 'shiftEnter':
+                    e.keyArgs.preventDefault();
+                    if (isEdit) {
+                        this.editCell(rowIndex, this.cellDetails.column.field);
                     }
                     break;
                 case 'f2':
-                    this.editCellFromIndex(this.cellDetails.rowIndex, this.cellDetails.cellIndex);
+                    this.editCellFromIndex(rowIndex, cellIndex);
+                    this.focus.focus();
                     break;
             }
-            if (this.parent.isEdit || !(this.cellDetails.cellIndex === 0 && this.cellDetails.rowIndex === 0) ||
-                !(this.cellDetails.rowIndex === this.parent.getDataRows().length &&
-                    this.cellDetails.cellIndex === this.parent.columns.length - 1)) {
-                e.preventDefault();
-            }
         }
-        this.reFocusOnError(e);
     };
-    BatchEdit.prototype.reFocusOnError = function (e) {
-        if (this.validateFormObj() && (e.action === 'tab' || e.action === 'shiftTab')) {
-            e.target.focus();
-            e.preventDefault();
-        }
-    };
     BatchEdit.prototype.isAddRow = function (index) {
         return this.parent.getDataRows()[index].classList.contains('e-insertedrow');
     };
-    BatchEdit.prototype.editNextCell = function () {
-        var oldIdx = this.cellDetails.cellIndex;
-        var cellIdx = this.findNextEditableCell(this.cellDetails.cellIndex + 1, this.isAddRow(this.cellDetails.rowIndex));
-        if (cellIdx > -1) {
-            this.cellDetails.cellIndex = cellIdx;
-        }
-        else if (this.cellDetails.rowIndex + 1 < this.parent.getDataRows().length) {
-            this.cellDetails.rowIndex++;
-            this.cellDetails.cellIndex = this.findNextEditableCell(0, this.isAddRow(this.cellDetails.rowIndex));
-        }
-        if (oldIdx !== this.cellDetails.cellIndex) {
-            this.editCellFromIndex(this.cellDetails.rowIndex, this.cellDetails.cellIndex);
-        }
-    };
-    BatchEdit.prototype.editPrevCell = function () {
-        var oldIdx = this.cellDetails.cellIndex;
-        var cellIdx = this.findPrevEditableCell(this.cellDetails.cellIndex - 1, this.isAddRow(this.cellDetails.rowIndex));
-        if (cellIdx > -1) {
-            this.cellDetails.cellIndex = cellIdx;
-        }
-        else if (this.cellDetails.rowIndex - 1 > -1) {
-            this.cellDetails.rowIndex--;
-            this.cellDetails.cellIndex = this.findPrevEditableCell(this.parent.columns.length - 1, this.isAddRow(this.cellDetails.rowIndex));
-        }
-        if (oldIdx !== this.cellDetails.cellIndex) {
-            this.editCellFromIndex(this.cellDetails.rowIndex, this.cellDetails.cellIndex);
-        }
-    };
     BatchEdit.prototype.editCellFromIndex = function (rowIdx, cellIdx) {
@@ -141,3 +121,3 @@ this.cellDetails.rowIndex = rowIdx;
         var gObj = this.parent;
-        var rows = gObj.contentModule.getRows();
+        var rows = this.parent.getRowsObject();
         var rowRenderer = new RowRenderer(this.serviceLocator, null, this.parent);
@@ -209,3 +189,3 @@ var tr;
         };
-        var rows = this.parent.contentModule.getRows();
+        var rows = this.parent.getRowsObject();
         for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {
@@ -229,3 +209,3 @@ var row = rows_1[_i];
     BatchEdit.prototype.removeRowObjectFromUID = function (uid) {
-        var rows = this.parent.contentModule.getRows();
+        var rows = this.parent.getRowsObject();
         var i = 0;
@@ -240,3 +220,3 @@ for (var len = rows.length; i < len; i++) {
     BatchEdit.prototype.addRowObject = function (row) {
-        this.parent.contentModule.getRows().unshift(row);
+        this.parent.getRowsObject().unshift(row);
     };
@@ -275,4 +255,4 @@ BatchEdit.prototype.bulkDelete = function (fieldname, data) {
         gObj.trigger(events.batchDelete, args);
+        gObj.notify(events.batchDelete, { rows: this.parent.getRowsObject() });
         gObj.notify(events.toolbarRefresh, {});
-        gObj.element.focus();
     };
@@ -325,2 +305,3 @@ BatchEdit.prototype.refreshRowIdx = function () {
             tr.insertBefore(createElement('td', { className: 'e-indentcell' }), tr.firstChild);
+            modelData[0].cells.unshift(new Cell({ cellType: CellType.Indent }));
         }
@@ -336,2 +317,3 @@ var tbody = gObj.getContentTable().querySelector('tbody');
         this.refreshRowIdx();
+        this.focus.forgetPrevious();
         gObj.selectRow(0);
@@ -348,2 +330,3 @@ if (!data) {
         gObj.trigger(events.batchAdd, args1);
+        gObj.notify(events.batchAdd, { rows: this.parent.getRowsObject() });
     };
@@ -363,14 +346,2 @@ BatchEdit.prototype.findNextEditableCell = function (columnIndex, isAdd) {
     };
-    BatchEdit.prototype.findPrevEditableCell = function (columnIndex, isAdd) {
-        var cols = this.parent.columns;
-        for (var i = columnIndex; i > -1; i--) {
-            if (!isAdd && this.checkNPCell(cols[i])) {
-                return i;
-            }
-            else if (isAdd && !cols[i].template && cols[i].visible && cols[i].allowEditing) {
-                return i;
-            }
-        }
-        return -1;
-    };
     BatchEdit.prototype.checkNPCell = function (col) {
@@ -413,4 +384,5 @@ return !col.template && col.visible && !col.isPrimaryKey && !col.isIdentity && col.allowEditing;
             var rowData = extend({}, this.getDataByIndex(index));
+            var cells = [].slice.apply(row.cells);
             var args = {
-                cell: row.cells[this.getCellIdx(col.uid)], row: row,
+                cell: cells[this.getColIndex(cells, this.getCellIdx(col.uid))], row: row,
                 columnName: col.field, columnObject: col, isForeignKey: !isNullOrUndefined(col.foreignKeyValue),
@@ -421,2 +393,5 @@ primaryKey: keys, rowData: rowData,
             };
+            if (!args.cell) {
+                return;
+            }
             gObj.trigger(events.cellEdit, args);
@@ -427,5 +402,5 @@ if (args.cancel) {
             this.cellDetails = {
-                rowData: rowData, column: col, value: args.value, isForeignKey: args.isForeignKey,
+                rowData: rowData, column: col, value: args.value, isForeignKey: args.isForeignKey, rowIndex: index,
+                cellIndex: parseInt(args.cell.getAttribute('aria-colindex'), 10)
             };
-            this.setCellIdx(args.cell);
             if (args.cell.classList.contains('e-updatedtd')) {
@@ -435,5 +410,7 @@ this.isColored = true;
             }
+            gObj.isEdit = true;
             gObj.clearSelection();
-            gObj.selectRow(this.cellDetails.rowIndex);
-            gObj.isEdit = true;
+            if (!gObj.element.classList.contains('e-checkboxselection') || !gObj.element.classList.contains('e-persistselection')) {
+                gObj.selectRow(this.cellDetails.rowIndex, true);
+            }
             this.renderer.update(args);
@@ -484,2 +461,11 @@ this.form = gObj.element.querySelector('#' + gObj.element.id + 'EditForm');
     };
+    BatchEdit.prototype.getColIndex = function (cells, index) {
+        for (var m = 0; m < cells.length; m++) {
+            var colIndex = parseInt(cells[m].getAttribute('aria-colindex'), 10);
+            if (colIndex === index) {
+                return m;
+            }
+        }
+        return -1;
+    };
     BatchEdit.prototype.saveCell = function (isForceSave) {
@@ -513,4 +499,4 @@ var gObj = this.parent;
         this.refreshTD(args.cell, column, gObj.getRowObjectFromUID(tr.getAttribute('data-uid')), args.value);
-        classList(tr, [], ['e-editedrow', 'e-batchrow']);
-        args.cell.classList.remove('e-editedbatchcell');
+        removeClass([tr], ['e-editedrow', 'e-batchrow']);
+        removeClass([args.cell], ['e-editedbatchcell', 'e-boolcell']);
         gObj.isEdit = false;
@@ -528,12 +514,4 @@ if (!isNullOrUndefined(args.value) && args.value.toString() ===
     };
-    BatchEdit.prototype.valComplete = function (args) {
-        var edit = this.parent.editModule;
-        edit.validationComplete(args);
-    };
-    BatchEdit.prototype.customPlacement = function (inputElement, error) {
-        var edit = this.parent.editModule;
-        edit.valErrorPlacement(inputElement, error);
-    };
     return BatchEdit;
 }());
 export { BatchEdit };

dist/es6/grid/actions/column-chooser.js

@@ -1,8 +0,8 @@
-import { createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { createElement, addClass, isNullOrUndefined, Browser } from '@syncfusion/ej2-base';
 import { Query, DataManager } from '@syncfusion/ej2-data';
 import { EventHandler, closest } from '@syncfusion/ej2-base';
-import { CheckBox } from '@syncfusion/ej2-buttons';
 import * as events from '../base/constant';
 import { Dialog, calculateRelativeBasedPosition } from '@syncfusion/ej2-popups';
-import { changeButtonType } from '../base/util';
+import { changeButtonType, createCboxWithWrap, toogleCheckbox, parentsUntil } from '../base/util';
+import { createCheckBox } from '@syncfusion/ej2-buttons';
 var ColumnChooser = (function () {
@@ -17,5 +17,18 @@ function ColumnChooser(parent, serviceLocator) {
         this.isInitialOpen = false;
+        this.isCustomizeOpenCC = false;
+        this.cBoxTrue = createCheckBox(true, { checked: true, label: ' ' });
+        this.cBoxFalse = createCheckBox(true, { checked: false, label: ' ' });
         this.parent = parent;
         this.serviceLocator = serviceLocator;
         this.addEventListener();
+        this.cBoxTrue.insertBefore(createElement('input', {
+            className: 'e-chk-hidden e-cc e-cc-chbox', attrs: { type: 'checkbox' }
+        }), this.cBoxTrue.firstChild);
+        this.cBoxFalse.insertBefore(createElement('input', {
+            className: 'e-chk-hidden e-cc e-cc-chbox', attrs: { 'type': 'checkbox' }
+        }), this.cBoxFalse.firstChild);
+        this.cBoxFalse.querySelector('.e-frame').classList.add('e-uncheck');
+        if (this.parent.enableRtl) {
+            addClass([this.cBoxTrue, this.cBoxFalse], ['e-rtl']);
+        }
     }
@@ -25,2 +38,5 @@ ColumnChooser.prototype.destroy = function () {
         this.unWireEvents();
+        if (!isNullOrUndefined(this.dlgObj) && this.dlgObj.element) {
+            this.dlgObj.destroy();
+        }
     };
@@ -34,2 +50,3 @@ ColumnChooser.prototype.addEventListener = function () {
         this.parent.addEventListener(events.dataBound, this.hideDialog.bind(this));
+        this.parent.on(events.destroy, this.destroy, this);
     };
@@ -42,2 +59,3 @@ ColumnChooser.prototype.removeEventListener = function () {
         this.parent.off(events.initialEnd, this.render);
+        this.parent.off(events.destroy, this.destroy);
     };
@@ -51,21 +69,23 @@ ColumnChooser.prototype.render = function () {
         var targetElement = e.target;
-        if (!isNullOrUndefined(closest(targetElement, '.e-cc')) || !isNullOrUndefined(closest(targetElement, '.e-cc-toolbar'))) {
-            if (targetElement.classList.contains('e-columnchooser-btn') || targetElement.classList.contains('e-cc-toolbar')) {
-                if ((this.initialOpenDlg && this.dlgObj.visible) || !this.isDlgOpen) {
-                    this.isDlgOpen = true;
-                    return;
+        if (!this.isCustomizeOpenCC) {
+            if (!isNullOrUndefined(closest(targetElement, '.e-cc')) || !isNullOrUndefined(closest(targetElement, '.e-cc-toolbar'))) {
+                if (targetElement.classList.contains('e-columnchooser-btn') || targetElement.classList.contains('e-cc-toolbar')) {
+                    if ((this.initialOpenDlg && this.dlgObj.visible) || !this.isDlgOpen) {
+                        this.isDlgOpen = true;
+                        return;
+                    }
                 }
+                else if (targetElement.classList.contains('e-cc-cancel')) {
+                    targetElement.parentElement.querySelector('.e-ccsearch').value = '';
+                    this.columnChooserSearch('');
+                    this.removeCancelIcon();
+                }
             }
-            else if (targetElement.classList.contains('e-cc-cancel')) {
-                targetElement.parentElement.querySelector('.e-ccsearch').value = '';
-                this.columnChooserSearch('');
-                this.removeCancelIcon();
+            else {
+                if (!isNullOrUndefined(this.dlgObj) && this.dlgObj.visible && !targetElement.classList.contains('e-toolbar-items')) {
+                    this.dlgObj.hide();
+                    this.isDlgOpen = false;
+                }
             }
         }
-        else {
-            if (!isNullOrUndefined(this.dlgObj) && this.dlgObj.visible) {
-                this.dlgObj.hide();
-                this.isDlgOpen = false;
-            }
-        }
     };
@@ -98,3 +118,3 @@ ColumnChooser.prototype.hideDialog = function () {
             }
-            if (this.parent.element.classList.contains('e-device')) {
+            if (Browser.isDevice) {
                 this.dlgObj.target = document.body;
@@ -115,6 +135,4 @@ this.dlgObj.position = { X: 'center', Y: 'center' };
             this.dlgObj.show();
-            this.wireEvents();
         }
         else {
-            this.unWireEvents();
             this.hideDialog();
@@ -125,2 +143,3 @@ this.addcancelIcon();
     ColumnChooser.prototype.openColumnChooser = function (X, Y) {
+        this.isCustomizeOpenCC = true;
         if (this.dlgObj.visible) {
@@ -148,6 +167,15 @@ this.hideDialog();
         }
+        this.dlgObj.beforeOpen = this.customDialogOpen.bind(this);
         this.dlgObj.show();
         this.isInitialOpen = true;
-        this.wireEvents();
+        this.dlgObj.beforeClose = this.customDialogClose.bind(this);
     };
+    ColumnChooser.prototype.customDialogOpen = function () {
+        var searchElement = this.dlgObj.content.querySelector('input.e-ccsearch');
+        EventHandler.add(searchElement, 'keyup', this.columnChooserManualSearch, this);
+    };
+    ColumnChooser.prototype.customDialogClose = function () {
+        var searchElement = this.dlgObj.content.querySelector('input.e-ccsearch');
+        EventHandler.remove(searchElement, 'keyup', this.columnChooserManualSearch);
+    };
     ColumnChooser.prototype.renderDlgContent = function () {
@@ -190,2 +218,3 @@ var y;
         changeButtonType(this.dlgObj.element);
+        this.wireEvents();
     };
@@ -204,8 +233,4 @@ ColumnChooser.prototype.renderChooserList = function () {
         searchDiv.appendChild(ccsearchicon);
-        ccsearchele.addEventListener('focus', function () {
-            ccsearchele.parentElement.classList.add('e-input-focus');
-        });
-        ccsearchele.addEventListener('blur', function () {
-            ccsearchele.parentElement.classList.remove('e-input-focus');
-        });
+        ccsearchele.addEventListener('focus', this.searchFocus.bind(this, ccsearchele));
+        ccsearchele.addEventListener('blur', this.searchBlur.bind(this, ccsearchele));
         var innerDivContent = this.refreshCheckboxList(this.parent.getColumns());
@@ -218,2 +243,8 @@ this.innerDiv.appendChild(innerDivContent);
     };
+    ColumnChooser.prototype.searchFocus = function (targt) {
+        targt.parentElement.classList.add('e-input-focus');
+    };
+    ColumnChooser.prototype.searchBlur = function (targt) {
+        targt.parentElement.classList.remove('e-input-focus');
+    };
     ColumnChooser.prototype.confirmDlgBtnClick = function (args) {
@@ -239,3 +270,3 @@ this.stateChangeColumns = [];
         for (var index = 0; index < stateColumns.length; index++) {
-            var colUid = stateColumns[index].replace('e-cc', '');
+            var colUid = stateColumns[index];
             var currentCol = this.parent.getColumnByUid(colUid);
@@ -249,23 +280,20 @@ currentCol.visible = state;
         this.showColumn = [];
-        this.unWireEvents();
         this.hideDialog();
         this.addcancelIcon();
     };
-    ColumnChooser.prototype.checkstatecolumn = function (e) {
-        var targetEle = e.event.target;
-        var uncheckColumn = targetEle.id;
-        if (e.checked) {
-            if (this.hideColumn.indexOf(uncheckColumn) !== -1) {
-                this.hideColumn.splice(this.hideColumn.indexOf(uncheckColumn), 1);
+    ColumnChooser.prototype.checkstatecolumn = function (isChecked, coluid) {
+        if (isChecked) {
+            if (this.hideColumn.indexOf(coluid) !== -1) {
+                this.hideColumn.splice(this.hideColumn.indexOf(coluid), 1);
             }
-            if (this.showColumn.indexOf(uncheckColumn) === -1) {
-                this.showColumn.push(uncheckColumn);
+            if (this.showColumn.indexOf(coluid) === -1) {
+                this.showColumn.push(coluid);
             }
         }
         else {
-            if (this.showColumn.indexOf(uncheckColumn) !== -1) {
-                this.showColumn.splice(this.showColumn.indexOf(uncheckColumn), 1);
+            if (this.showColumn.indexOf(coluid) !== -1) {
+                this.showColumn.splice(this.showColumn.indexOf(coluid), 1);
             }
-            if (this.hideColumn.indexOf(uncheckColumn) === -1) {
-                this.hideColumn.push(uncheckColumn);
+            if (this.hideColumn.indexOf(coluid) === -1) {
+                this.hideColumn.push(coluid);
             }
@@ -305,2 +333,3 @@ }
     ColumnChooser.prototype.wireEvents = function () {
+        EventHandler.add(this.dlgObj.element, 'click', this.checkBoxClickHandler, this);
         var searchElement = this.dlgObj.content.querySelector('input.e-ccsearch');
@@ -310,5 +339,27 @@ EventHandler.add(searchElement, 'keyup', this.columnChooserManualSearch, this);
     ColumnChooser.prototype.unWireEvents = function () {
+        if (this.dlgObj.element) {
+            EventHandler.remove(this.dlgObj.element, 'click', this.checkBoxClickHandler);
+        }
         var searchElement = this.dlgObj.content.querySelector('input.e-ccsearch');
         EventHandler.remove(searchElement, 'keyup', this.columnChooserManualSearch);
     };
+    ColumnChooser.prototype.checkBoxClickHandler = function (e) {
+        var checkstate;
+        var elem = parentsUntil(e.target, 'e-checkbox-wrapper');
+        if (elem) {
+            toogleCheckbox(elem.parentElement);
+            elem.querySelector('.e-chk-hidden').focus();
+            if (elem.querySelector('.e-check')) {
+                checkstate = true;
+            }
+            else if (elem.querySelector('.e-uncheck')) {
+                checkstate = false;
+            }
+            else {
+                return;
+            }
+            var columnUid = parentsUntil(elem, 'e-ccheck').getAttribute('uid');
+            this.checkstatecolumn(checkstate, columnUid);
+        }
+    };
     ColumnChooser.prototype.refreshCheckboxList = function (gdCol, searchVal) {
@@ -327,3 +378,4 @@ this.ulElement = createElement('ul', { className: 'e-ccul-ele e-cc' });
             var element = this.parent.element.querySelectorAll('.e-cc-chbox')[i];
-            var column = this.parent.getColumnByUid(element.id.replace('e-cc', ''));
+            var columnUID = parentsUntil(element, 'e-ccheck').getAttribute('uid');
+            var column = this.parent.getColumnByUid(columnUID);
             if (column.visible) {
@@ -337,2 +389,7 @@ element.checked = true;
     };
+    ColumnChooser.prototype.createCheckBox = function (label, checked, uid) {
+        var cbox = checked ? this.cBoxTrue.cloneNode(true) : this.cBoxFalse.cloneNode(true);
+        cbox.querySelector('.e-label').innerHTML = label;
+        return createCboxWithWrap(uid, cbox, 'e-ccheck');
+    };
     ColumnChooser.prototype.renderCheckbox = function (column) {
@@ -345,19 +402,6 @@ var cclist;
             cclist = createElement('li', { className: 'e-cclist e-cc', styles: 'list-style:None', id: 'e-ccli_' + column.uid });
-            var cclabe = createElement('label', { className: 'e-cc' });
-            var cccheckboxlist = createElement('input', {
-                className: 'e-cc e-cc-chbox ',
-                id: 'e-cc' + column.uid, attrs: { type: 'checkbox' }
-            });
-            cclabe.appendChild(cccheckboxlist);
-            hideColState = this.hideColumn.indexOf('e-cc' + column.uid) === -1 ? false : true;
-            showColState = this.showColumn.indexOf('e-cc' + column.uid) === -1 ? false : true;
-            checkBoxObj = new CheckBox({ label: column.headerText, checked: true, change: this.checkstatecolumn.bind(this) });
-            if ((column.visible && !hideColState) || showColState) {
-                checkBoxObj.checked = true;
-            }
-            else {
-                checkBoxObj.checked = false;
-            }
-            checkBoxObj.appendTo(cccheckboxlist);
-            cclist.appendChild(cclabe);
+            hideColState = this.hideColumn.indexOf(column.uid) === -1 ? false : true;
+            showColState = this.showColumn.indexOf(column.uid) === -1 ? false : true;
+            var cccheckboxlist = this.createCheckBox(column.headerText, (column.visible && !hideColState) || showColState, column.uid);
+            cclist.appendChild(cccheckboxlist);
             this.ulElement.appendChild(cclist);
@@ -388,5 +432,6 @@ }
     ColumnChooser.prototype.mOpenDlg = function () {
-        this.dlgObj.element.querySelector('.e-cc-searchdiv').classList.remove('e-input-focus');
-        var chele = this.dlgObj.element.querySelectorAll('.e-cc-chbox')[0];
-        chele.focus();
+        if (Browser.isDevice) {
+            this.dlgObj.element.querySelector('.e-cc-searchdiv').classList.remove('e-input-focus');
+            this.dlgObj.element.querySelectorAll('.e-cc-chbox')[0].focus();
+        }
     };
@@ -393,0 +438,0 @@ ColumnChooser.prototype.getModuleName = function () {

dist/es6/grid/actions/data.js

 import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';
 import { Query, DataManager, Predicate } from '@syncfusion/ej2-data';
-import { getActualProperties } from '../base/util';
+import { getActualProperties, setFormatter } from '../base/util';
 import * as events from '../base/constant';
+import { ValueFormatter } from '../services/value-formatter';
+import { CheckBoxFilter } from '../actions/checkbox-filter';
 var Data = (function () {
-    function Data(parent) {
+    function Data(parent, serviceLocator) {
         this.parent = parent;
+        this.serviceLocator = serviceLocator;
         this.initDataManager();
@@ -30,10 +33,25 @@ if (this.parent.isDestroyed) {
             var columns = gObj.filterSettings.columns;
-            for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {
-                var col = columns_1[_i];
-                var sType = gObj.getColumnByField(col.field).type;
-                if (sType !== 'date' && sType !== 'datetime') {
-                    query.where(col.field, col.operator, col.value, !col.matchCase);
+            var predicate = void 0;
+            if (gObj.filterSettings.type === 'checkbox') {
+                var predicates = CheckBoxFilter.getPredicate(gObj.filterSettings.columns);
+                for (var _i = 0, _a = Object.keys(predicates); _i < _a.length; _i++) {
+                    var prop = _a[_i];
+                    var and = 'and';
+                    var obj = predicates[prop];
+                    predicate = !isNullOrUndefined(predicate) ?
+                        predicate[and](obj) :
+                        obj;
                 }
-                else {
-                    query.where(this.getDatePredicate(col));
+                query.where(predicate);
+            }
+            else {
+                for (var _b = 0, columns_1 = columns; _b < columns_1.length; _b++) {
+                    var col = columns_1[_b];
+                    var sType = gObj.getColumnByField(col.field).type;
+                    if (sType !== 'date' && sType !== 'datetime') {
+                        query.where(col.field, col.operator, col.value, !col.matchCase);
+                    }
+                    else {
+                        query.where(this.getDatePredicate(col));
+                    }
                 }
@@ -74,3 +92,10 @@ }
             for (var i = 0, len = columns.length; i < len; i++) {
-                query.group(columns[i]);
+                var isGrpFmt = gObj.getColumnByField(columns[i]).enableGroupByFormat;
+                var format = gObj.getColumnByField(columns[i]).format;
+                if (isGrpFmt) {
+                    query.group(columns[i], this.formatGroupColumn.bind(this), format);
+                }
+                else {
+                    query.group(columns[i], null);
+                }
             }
@@ -107,2 +132,17 @@ }
     };
+    Data.prototype.formatGroupColumn = function (value, field) {
+        var gObj = this.parent;
+        var serviceLocator = this.serviceLocator;
+        var column = gObj.getColumnByField(field);
+        var date = value;
+        if (!column.type) {
+            column.type = date.getDay ? (date.getHours() > 0 || date.getMinutes() > 0 ||
+                date.getSeconds() > 0 || date.getMilliseconds() > 0 ? 'datetime' : 'date') : typeof (value);
+        }
+        if (isNullOrUndefined(column.getFormatter())) {
+            setFormatter(serviceLocator, column);
+        }
+        var formatVal = ValueFormatter.prototype.toView(value, column.getFormatter());
+        return formatVal;
+    };
     Data.prototype.crudActions = function (args) {
@@ -137,2 +177,3 @@ this.generateQuery();
     Data.prototype.getDatePredicate = function (filterObject) {
+        var datePredicate;
         var prevDate;
@@ -143,17 +184,24 @@ var nextDate;
         var value = new Date(filterObject.value);
-        prevDate = new Date(value.setDate(value.getDate() - 1));
-        nextDate = new Date(value.setDate(value.getDate() + 2));
-        prevObj.value = prevDate;
-        nextObj.value = nextDate;
-        if (filterObject.operator === 'equal') {
-            prevObj.operator = 'greaterthan';
-            nextObj.operator = 'lessthan';
+        if (filterObject.operator === 'equal' || filterObject.operator === 'notequal') {
+            prevDate = new Date(value.setDate(value.getDate() - 1));
+            nextDate = new Date(value.setDate(value.getDate() + 2));
+            prevObj.value = prevDate;
+            nextObj.value = nextDate;
+            if (filterObject.operator === 'equal') {
+                prevObj.operator = 'greaterthan';
+                nextObj.operator = 'lessthan';
+            }
+            else if (filterObject.operator === 'notequal') {
+                prevObj.operator = 'lessthanorequal';
+                nextObj.operator = 'greaterthanorequal';
+            }
+            var predicateSt = new Predicate(prevObj.field, prevObj.operator, prevObj.value, false);
+            var predicateEnd = new Predicate(nextObj.field, nextObj.operator, nextObj.value, false);
+            datePredicate = filterObject.operator === 'equal' ? predicateSt.and(predicateEnd) : predicateSt.or(predicateEnd);
         }
         else {
-            prevObj.operator = 'lessthanorequal';
-            nextObj.operator = 'greaterthanorequal';
+            var predicates = new Predicate(prevObj.field, prevObj.operator, prevObj.value, false);
+            datePredicate = predicates;
         }
-        var predicateSt = new Predicate(prevObj.field, prevObj.operator, prevObj.value, false);
-        var predicateEnd = new Predicate(nextObj.field, nextObj.operator, nextObj.value, false);
-        return filterObject.operator === 'equal' ? predicateSt.and(predicateEnd) : predicateSt.or(predicateEnd);
+        return datePredicate;
     };
@@ -167,3 +215,3 @@ Data.prototype.addRows = function (e) {
         var json = this.dataManager.dataSource.json;
-        this.dataManager.dataSource.json = json.filter(function (value, index) { return e.indexes.indexOf(index) === -1; });
+        this.dataManager.dataSource.json = json.filter(function (value, index) { return e.records.indexOf(value) === -1; });
     };
@@ -170,0 +218,0 @@ Data.prototype.destroy = function () {

dist/es6/grid/actions/detail-row.js

@@ -6,4 +6,7 @@ import { createElement, closest, classList } from '@syncfusion/ej2-base';
 import { AriaService } from '../services/aria-service';
+import { Row } from '../models/row';
+import { Cell } from '../models/cell';
+import { CellType } from '../base/enum';
 var DetailRow = (function () {
-    function DetailRow(parent) {
+    function DetailRow(parent, locator) {
         this.aria = new AriaService();
@@ -14,2 +17,3 @@ this.parent = parent;
         }
+        this.focus = locator.getService('focus');
         this.parent.on(events.click, this.clickHandler, this);
@@ -27,2 +31,3 @@ this.parent.on(events.destroy, this.destroy, this);
             var tr = target.parentElement;
+            var uid_1 = tr.getAttribute('data-uid');
             var nextRow = this.parent.getContentTable().querySelector('tbody').children[tr.rowIndex + 1];
@@ -41,4 +46,9 @@ if (target.classList.contains('e-detailrowcollapse')) {
                     detailCell.setAttribute('colspan', this.parent.getVisibleColumns().length.toString());
+                    var row = new Row({
+                        isDataRow: true,
+                        cells: [new Cell({ cellType: CellType.Indent }), new Cell({ isDataCell: true, visible: true })]
+                    });
                     for (var i = 0, len = gObj.groupSettings.columns.length; i < len; i++) {
                         detailRow.appendChild(createElement('td', { className: 'e-indentcell' }));
+                        row.cells.unshift(new Cell({ cellType: CellType.Indent }));
                     }
@@ -72,4 +82,10 @@ detailRow.appendChild(createElement('td', { className: 'e-detailindentcell' }));
                     }
+                    detailRow.appendChild(detailCell);
+                    tr.parentNode.insertBefore(detailRow, tr.nextSibling);
+                    var idx_1;
+                    this.parent.getRowsObject().some(function (r, rIndex) { idx_1 = rIndex; return r.uid === uid_1; });
                     gObj.getRows().splice(tr.rowIndex + 1, 0, detailRow);
+                    this.parent.getRowsObject().splice(idx_1 + 1, 0, row);
                     gObj.trigger(events.detailDataBound, { detailElement: detailCell, data: data });
+                    gObj.notify(events.detailDataBound, { rows: this.parent.getRowsObject() });
                 }
@@ -156,2 +172,12 @@ classList(target, ['e-detailrowexpand'], ['e-detailrowcollapse']);
                 break;
+            case 'enter':
+                if (this.parent.isEdit) {
+                    return;
+                }
+                var element = this.focus.getFocusedElement();
+                if (!element.classList.contains('e-detailrowcollapse') && !element.classList.contains('e-detailrowexpand')) {
+                    break;
+                }
+                this.toogleExpandcollapse(element);
+                break;
         }
@@ -158,0 +184,0 @@ };

dist/es6/grid/actions/edit.js

 import { EventHandler } from '@syncfusion/ej2-base';
 import { extend, getValue } from '@syncfusion/ej2-base';
-import { createElement } from '@syncfusion/ej2-base';
+import { remove, createElement } from '@syncfusion/ej2-base';
 import { isNullOrUndefined, setValue } from '@syncfusion/ej2-base';
@@ -16,9 +16,9 @@ import * as events from '../base/constant';
 import { parentsUntil, changeButtonType } from '../base/util';
-import { Tooltip } from '@syncfusion/ej2-popups';
 import { FormValidator } from '@syncfusion/ej2-inputs';
+import { DatePickerEditCell } from '../renderer/datepicker-edit-cell';
 var Edit = (function () {
     function Edit(parent, serviceLocator) {
         this.editCellType = {
-            'dropdownedit': DropDownEditCell,
-            'numericedit': NumericEditCell, 'booleanedit': BooleanEditCell, 'default': DefaultEditCell
+            'dropdownedit': DropDownEditCell, 'numericedit': NumericEditCell,
+            'datepickeredit': DatePickerEditCell, 'booleanedit': BooleanEditCell, 'defaultedit': DefaultEditCell
         };
@@ -29,4 +29,7 @@ this.editType = { 'inline': InlineEdit, 'normal': InlineEdit, 'batch': BatchEdit, 'dialog': DialogEdit };
         this.serviceLocator = serviceLocator;
+        this.l10n = this.serviceLocator.getService('localization');
         this.addEventListener();
         this.updateEditObj();
+        this.createAlertDlg();
+        this.createConfirmDlg();
     }
@@ -37,3 +40,3 @@ Edit.prototype.updateColTypeObj = function () {
             col.edit = extend(new this.editCellType[col.editType && this.editCellType[col.editType] ?
-                col.editType : 'default'](this.parent, this.serviceLocator), col.edit || {});
+                col.editType : 'defaultedit'](this.parent, this.serviceLocator), col.edit || {});
         }
@@ -77,5 +80,2 @@ };
         this.updateColTypeObj();
-        this.l10n = this.serviceLocator.getService('localization');
-        this.createAlertDlg();
-        this.createConfirmDlg();
     };
@@ -127,2 +127,3 @@ Edit.prototype.wireEvents = function () {
         gObj.element.querySelector('.e-gridpopup').style.display = 'none';
+        this.parent.notify('start-edit', {});
     };
@@ -137,2 +138,3 @@ Edit.prototype.closeEdit = function () {
         this.refreshToolbar();
+        this.parent.notify('close-edit', {});
     };
@@ -148,2 +150,3 @@ Edit.prototype.refreshToolbar = function () {
         this.refreshToolbar();
+        this.parent.notify('start-add', {});
     };
@@ -214,2 +217,3 @@ Edit.prototype.deleteRecord = function (fieldname, data) {
         obj.content = '<div>' + this.l10n.getConstant(content) + '</div>';
+        obj.dataBind();
         obj.show();
@@ -221,3 +225,3 @@ };
             case 'number':
-                val = !isNullOrUndefined(parseFloat(value)) ? parseFloat(value) : null;
+                val = !isNaN(parseFloat(value)) ? parseFloat(value) : null;
                 break;
@@ -238,6 +242,6 @@ case 'boolean':
     Edit.prototype.destroyToolTip = function () {
-        var elements = [].slice.call(this.parent.element.querySelectorAll('td.e-tooltip'));
+        var elements = [].slice.call(this.parent.getContentTable().querySelectorAll('.e-griderror'));
         for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
             var elem = elements_1[_i];
-            elem.ej2_instances[0].destroy();
+            remove(elem);
         }
@@ -316,4 +320,6 @@ };
         this.parent.on(events.destroyForm, this.destroyForm, this);
-        this.parent.addEventListener(events.actionBegin, this.onActionBegin.bind(this));
-        this.parent.addEventListener(events.actionComplete, this.actionComplete.bind(this));
+        this.actionBeginFunction = this.onActionBegin.bind(this);
+        this.actionCompleteFunction = this.actionComplete.bind(this);
+        this.parent.addEventListener(events.actionBegin, this.actionBeginFunction);
+        this.parent.addEventListener(events.actionComplete, this.actionCompleteFunction);
         this.parent.on(events.initialEnd, this.wireEvents, this);
@@ -332,8 +338,9 @@ };
         this.parent.off(events.destroyForm, this.destroyForm);
-        this.parent.removeEventListener(events.actionComplete, this.actionComplete);
-        this.parent.removeEventListener(events.actionBegin, this.onActionBegin);
+        this.parent.removeEventListener(events.actionComplete, this.actionCompleteFunction);
+        this.parent.removeEventListener(events.actionBegin, this.actionBeginFunction);
         this.parent.off(events.initialEnd, this.unwireEvents);
     };
     Edit.prototype.actionComplete = function (e) {
-        if (e.requestType !== 'add' && e.requestType !== 'beginEdit' && e.requestType !== 'delete') {
+        var actions = ['add', 'beginEdit', 'save', 'delete', 'cancel'];
+        if (actions.indexOf(e.requestType) < 0) {
             this.parent.isEdit = false;
@@ -349,3 +356,3 @@ }
             var value = void 0;
-            if (col) {
+            if (col && col.field) {
                 var temp = col.edit.read;
@@ -355,3 +362,8 @@ if (typeof temp === 'string') {
                 }
-                value = gObj.editModule.getValueFromType(col, col.edit.read(inputs[i]));
+                if (col.type !== 'checkbox') {
+                    value = gObj.editModule.getValueFromType(col, col.edit.read(inputs[i]));
+                }
+                else {
+                    value = inputs[i].checked;
+                }
                 setValue(col.field, value, editedData);
@@ -363,3 +375,3 @@ }
     Edit.prototype.onActionBegin = function (e) {
-        if (this.parent.editSettings.mode !== 'batch' && this.formObj && !this.formObj.isDestroyed && !e.cancel) {
+        if (this.parent.editSettings.mode !== 'batch' && e.requestType !== 'save' && this.formObj && !this.formObj.isDestroyed) {
             this.destroyForm();
@@ -388,4 +400,8 @@ this.destroyWidgets();
         this.removeEventListener();
+        var elem = this.dialogObj.element;
         this.dialogObj.destroy();
+        remove(elem);
+        elem = this.alertDObj.element;
         this.alertDObj.destroy();
+        remove(elem);
         this.unwireEvents();
@@ -405,3 +421,3 @@ };
             case 'enter':
-                if (this.parent.editSettings.mode !== 'batch' &&
+                if (!parentsUntil(e.target, '.e-unboundcelldiv') && this.parent.editSettings.mode !== 'batch' &&
                     parentsUntil(e.target, 'e-gridcontent') && !document.querySelectorAll('.e-popup-open').length) {
@@ -448,13 +464,11 @@ e.preventDefault();
         if (this.parent.isEdit) {
-            var td = parentsUntil(inputElement, 'e-rowcell');
-            if (!td.ej2_instances || !td.ej2_instances.length) {
-                var tooltip = new Tooltip({
-                    opensOn: 'custom', content: error, position: 'bottom center', cssClass: 'e-griderror',
-                    animation: { open: { effect: 'None' }, close: { effect: 'None' } }
-                });
-                tooltip.appendTo(td);
-                tooltip.open(td);
+            var id = error.getAttribute('for');
+            var parentElem = this.parent.editSettings.mode !== 'dialog' ? this.parent.getContentTable() :
+                this.parent.element.querySelector('#' + this.parent.element.id + '_dialogEdit_wrapper');
+            var elem = parentElem.querySelector('#' + id + '_Error');
+            if (!elem) {
+                this.createTooltip(inputElement, error, id, '');
             }
             else {
-                td.ej2_instances[0].content = error;
+                elem.querySelector('.e-tip-content').innerHTML = error.innerHTML;
             }
@@ -465,17 +479,39 @@ }
         if (this.parent.isEdit) {
-            var elem = parentsUntil(document.getElementById(this.parent.element.id + args.inputName), 'e-rowcell');
-            if (elem && elem.ej2_instances && elem.ej2_instances.length) {
-                var tObj = elem.ej2_instances[0];
+            var parentElem = this.parent.editSettings.mode !== 'dialog' ? this.parent.getContentTable() :
+                this.parent.element.querySelector('#' + this.parent.element.id + '_dialogEdit_wrapper');
+            var elem = parentElem.querySelector('#' + args.inputName + '_Error');
+            if (elem) {
                 if (args.status === 'failure') {
-                    tObj.open(parentsUntil(args.element, 'e-rowcell'));
+                    elem.style.display = '';
                 }
                 else {
-                    tObj.close();
+                    elem.style.display = 'none';
                 }
-                tObj.refresh();
             }
         }
     };
+    Edit.prototype.createTooltip = function (element, error, name, display) {
+        var table = this.parent.editSettings.mode !== 'dialog' ? this.parent.getContentTable() :
+            this.parent.element.querySelector('#' + this.parent.element.id + '_dialogEdit_wrapper').querySelector('.e-dlg-content');
+        var client = table.getBoundingClientRect();
+        var inputClient = parentsUntil(element, 'e-rowcell').getBoundingClientRect();
+        var div = createElement('div', {
+            className: 'e-tooltip-wrap e-popup e-griderror',
+            id: name + '_Error',
+            styles: 'display:' + display + ';top:' +
+                (inputClient.bottom - client.top + table.scrollTop + 9) + 'px;left:' +
+                (inputClient.left - client.left + table.scrollLeft + inputClient.width / 2) + 'px;'
+        });
+        var content = createElement('div', { className: 'e-tip-content' });
+        content.appendChild(error);
+        var arrow = createElement('div', { className: 'e-arrow-tip e-tip-top' });
+        arrow.appendChild(createElement('div', { className: 'e-arrow-tip-outer e-tip-top' }));
+        arrow.appendChild(createElement('div', { className: 'e-arrow-tip-inner e-tip-top' }));
+        div.appendChild(content);
+        div.appendChild(arrow);
+        table.appendChild(div);
+        div.style.left = (parseInt(div.style.left, 10) - div.offsetWidth / 2) + 'px';
+    };
     return Edit;
 }());
 export { Edit };

dist/es6/grid/actions/excel-export.js

 import * as events from '../base/constant';
 import { Workbook } from '@syncfusion/ej2-excel-export';
-import { isNullOrUndefined, getEnumValue, compile } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, getEnumValue, compile, extend } from '@syncfusion/ej2-base';
 import { Data } from '../actions/data';
@@ -20,2 +20,3 @@ import { ExportHelper, ExportValueFormatter } from './export-helper';
         this.isCsvExport = false;
+        this.isElementIdChanged = false;
         this.parent = parent;
@@ -29,2 +30,3 @@ }
             gObj.element.id = new Date().toISOString();
+            this.isElementIdChanged = true;
         }
@@ -205,2 +207,5 @@ this.parent = gObj;
             }
+            if (this.isElementIdChanged) {
+                gObj.element.id = '';
+            }
         }
@@ -293,12 +298,16 @@ };
                 if (!isNullOrUndefined(value)) {
-                    var args = {
-                        column: headerRow.columns[c], value: value, style: undefined
-                    };
-                    gObj.trigger(events.excelQueryCellInfo, args);
+                    var excelCellArgs = { data: record[r], column: headerRow.columns[c] };
+                    gObj.trigger(events.excelQueryCellInfo, extend(excelCellArgs, {
+                        column: headerRow.columns[c], data: record[r],
+                        value: value, style: undefined, colSpan: 1
+                    }));
                     var cell = {};
                     cell.index = index + level;
-                    cell.value = args.value;
-                    if (args.style !== undefined) {
+                    cell.value = excelCellArgs.value;
+                    if (excelCellArgs.colSpan > 1) {
+                        cell.colSpan = excelCellArgs.colSpan;
+                    }
+                    if (excelCellArgs.style !== undefined) {
                         var styleIndex = this.getColumnStyle(gObj, index + level);
-                        cell.style = this.mergeOptions(this.styles[styleIndex], args.style);
+                        cell.style = this.mergeOptions(this.styles[styleIndex], excelCellArgs.style);
                     }
@@ -305,0 +314,0 @@ else {

dist/es6/grid/actions/filter.js

@@ -1,6 +0,5 @@
-import { EventHandler } from '@syncfusion/ej2-base';
-import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';
+import { EventHandler, isNullOrUndefined, extend, closest } from '@syncfusion/ej2-base';
 import { getActualPropFromColl, isActionPrevent } from '../base/util';
 import { remove, createElement, matches } from '@syncfusion/ej2-base';
-import { DataUtil } from '@syncfusion/ej2-data';
+import { DataUtil, Query, DataManager } from '@syncfusion/ej2-data';
 import * as events from '../base/constant';
@@ -12,2 +11,6 @@ import { CellType } from '../base/enum';
 import { FilterCellRenderer } from '../renderer/filter-cell-renderer';
+import { parentsUntil } from '../base/util';
+import { FilterMenuRenderer } from '../renderer/filter-menu-renderer';
+import { CheckBoxFilter } from '../actions/checkbox-filter';
+import { ExcelFilter } from '../actions/excel-filter';
 var Filter = (function () {
@@ -18,2 +21,4 @@ function Filter(parent, filterSettings, serviceLocator) {
         this.values = {};
+        this.nextFlMenuOpen = '';
+        this.type = { 'menu': FilterMenuRenderer, 'checkbox': CheckBoxFilter, 'excel': ExcelFilter };
         this.filterOperators = {
@@ -23,2 +28,3 @@ contains: 'contains', endsWith: 'endswith', equal: 'equal', greaterThan: 'greaterthan', greaterThanOrEqual: 'greaterthanorequal',
         };
+        this.fltrDlgDetails = { field: '', isOpen: false };
         this.parent = parent;
@@ -31,22 +37,32 @@ this.filterSettings = filterSettings;
         var gObj = this.parent;
-        if (gObj.columns.length) {
-            var rowRenderer = new RowRenderer(this.serviceLocator, CellType.Filter);
-            var row = void 0;
-            var cellrender = this.serviceLocator.getService('cellRendererFactory');
-            cellrender.addCellRenderer(CellType.Filter, new FilterCellRenderer(this.parent, this.serviceLocator));
-            this.l10n = this.serviceLocator.getService('localization');
-            this.valueFormatter = this.serviceLocator.getService('valueFormatter');
-            rowRenderer.element = createElement('tr', { className: 'e-filterbar' });
-            row = this.generateRow();
-            row.data = this.values;
-            this.element = rowRenderer.render(row, gObj.getColumns());
-            this.parent.getHeaderContent().querySelector('thead').appendChild(this.element);
-            var detail = this.element.querySelector('.e-detailheadercell');
-            if (detail) {
-                detail.className = 'e-filterbarcell e-mastercell';
+        this.l10n = this.serviceLocator.getService('localization');
+        this.getLocalizedCustomOperators();
+        if (this.parent.filterSettings.type === 'filterbar') {
+            if (gObj.columns.length) {
+                var rowRenderer = new RowRenderer(this.serviceLocator, CellType.Filter, gObj);
+                var row = void 0;
+                var cellrender = this.serviceLocator.getService('cellRendererFactory');
+                cellrender.addCellRenderer(CellType.Filter, new FilterCellRenderer(this.parent, this.serviceLocator));
+                this.valueFormatter = this.serviceLocator.getService('valueFormatter');
+                rowRenderer.element = createElement('tr', { className: 'e-filterbar' });
+                row = this.generateRow();
+                row.data = this.values;
+                this.element = rowRenderer.render(row, gObj.getColumns());
+                this.parent.getHeaderContent().querySelector('thead').appendChild(this.element);
+                var detail = this.element.querySelector('.e-detailheadercell');
+                if (detail) {
+                    detail.className = 'e-filterbarcell e-mastercell';
+                }
+                var gCells = [].slice.call(this.element.querySelectorAll('.e-grouptopleftcell'));
+                if (gCells.length) {
+                    gCells[gCells.length - 1].classList.add('e-lastgrouptopleftcell');
+                }
+                this.wireEvents();
             }
-            this.wireEvents();
         }
     };
     Filter.prototype.destroy = function () {
+        if (this.filterModule) {
+            this.filterModule.destroy();
+        }
         this.filterSettings.columns = [];
@@ -56,3 +72,5 @@ this.updateFilterMsg();
         this.unWireEvents();
-        remove(this.element);
+        if (this.element) {
+            remove(this.element);
+        }
     };
@@ -165,4 +183,8 @@ Filter.prototype.generateRow = function (index) {
         this.parent.on(events.contentReady, this.initialEnd, this);
+        this.parent.on(events.filterMenuClose, this.filterMenuClose, this);
+        EventHandler.add(document, 'click', this.clickHandler, this);
+        this.parent.on(events.filterOpen, this.columnMenuFilter, this);
     };
     Filter.prototype.removeEventListener = function () {
+        EventHandler.remove(document, 'click', this.clickHandler);
         if (this.parent.isDestroyed) {
@@ -177,3 +199,35 @@ return;
         this.parent.off(events.headerRefreshed, this.render);
+        this.parent.off(events.filterOpen, this.columnMenuFilter);
+        this.parent.off(events.filterMenuClose, this.filterMenuClose);
     };
+    Filter.prototype.filterMenuClose = function (args) {
+        this.fltrDlgDetails.isOpen = false;
+    };
+    Filter.prototype.columnMenuFilter = function (args) {
+        this.column = args.col;
+        var ele = closest(args.target, '#' + args.id);
+        if (args.isClose && !ele) {
+            this.filterModule.closeDialog();
+        }
+        else if (ele) {
+            this.filterDialogOpen(this.column, args.target);
+        }
+    };
+    Filter.prototype.filterDialogOpen = function (col, target, left, top) {
+        var gObj = this.parent;
+        if (this.filterModule) {
+            this.filterModule.closeDialog();
+        }
+        this.filterModule = new this.type[col.filter.type || this.parent.filterSettings.type](this.parent, gObj.filterSettings, this.serviceLocator, this.customOperators, this);
+        this.filterModule.openDialog({
+            type: col.type, field: col.field, displayName: col.headerText,
+            dataSource: col.filter.dataSource || gObj.dataSource, format: col.format,
+            filteredColumns: gObj.filterSettings.columns, target: target,
+            sortedColumns: gObj.sortSettings.columns, formatFn: col.getFormatter(),
+            parserFn: col.getParser(), query: gObj.query, template: col.getFilterItemTemplate(),
+            hideSearchbox: isNullOrUndefined(col.filter.hideSearchbox) ? false : col.filter.hideSearchbox,
+            handler: this.filterHandler.bind(this), localizedStrings: {},
+            position: { X: left, Y: top }
+        });
+    };
     Filter.prototype.filterByColumn = function (fieldName, filterOperator, filterValue, predicate, matchCase, actualFilterValue, actualOperator) {
@@ -183,3 +237,5 @@ var gObj = this.parent;
         this.column = gObj.getColumnByField(fieldName);
-        filterCell = this.element.querySelector('#' + this.column.field + '_filterBarcell');
+        if (this.filterSettings.type === 'filterbar') {
+            filterCell = gObj.getHeaderContent().querySelector('#' + this.column.field + '_filterBarcell');
+        }
         if (!isNullOrUndefined(this.column.allowFiltering) && !this.column.allowFiltering) {
@@ -200,3 +256,6 @@ return;
         this.operator = filterOperator;
-        filterValue = filterValue.toString();
+        filterValue = !isNullOrUndefined(filterValue) && filterValue.toString();
+        if (this.column.type === 'number' || this.column.type === 'date') {
+            this.matchCase = true;
+        }
         this.values[this.column.field] = filterValue;
@@ -209,3 +268,3 @@ gObj.getColumnHeaderByField(fieldName).setAttribute('aria-filtered', 'true');
         }
-        if (filterCell.value !== filterValue) {
+        if (this.filterSettings.type === 'filterbar' && filterCell.value !== filterValue) {
             filterCell.value = filterValue;
@@ -243,2 +302,5 @@ }
                     break;
+                case 'type':
+                    this.parent.refreshHeader();
+                    break;
             }
@@ -272,2 +334,3 @@ }
     Filter.prototype.removeFilteredColsByField = function (field, isClearFilterBar) {
+        var fCell;
         var cols = this.filterSettings.columns;
@@ -283,8 +346,12 @@ if (isActionPrevent(this.parent)) {
             if (cols[i].field === field) {
-                if (!(isClearFilterBar === false)) {
-                    this.element.querySelector('#' + cols[i].field + '_filterBarcell').value = '';
+                if (this.filterSettings.type === 'filterbar' && !isClearFilterBar) {
+                    fCell = this.parent.getHeaderContent().querySelector('#' + cols[i].field + '_filterBarcell');
                     delete this.values[field];
                 }
                 cols.splice(i, 1);
-                this.parent.getColumnHeaderByField(field).removeAttribute('aria-filtered');
+                var fltrElement = this.parent.getColumnHeaderByField(field);
+                fltrElement.removeAttribute('aria-filtered');
+                if (this.filterSettings.type !== 'filterbar') {
+                    fltrElement.querySelector('.e-icon-filter').classList.remove('e-filtered');
+                }
                 this.isRemove = true;
@@ -305,3 +372,3 @@ this.parent.notify(events.modelChanged, {
         var target = e.target;
-        if (matches(target, '.e-filterbar input')) {
+        if (target && matches(target, '.e-filterbar input')) {
             this.column = gObj.getColumnByField(target.id.split('_')[0]);
@@ -345,22 +412,26 @@ if (!this.column) {
     Filter.prototype.updateFilterMsg = function () {
-        var gObj = this.parent;
-        var columns = this.filterSettings.columns;
-        var column;
-        if (!this.filterSettings.showFilterBarStatus) {
-            return;
-        }
-        if (columns.length > 0 && this.filterStatusMsg !== this.l10n.getConstant('InvalidFilterMessage')) {
-            this.filterStatusMsg = '';
-            for (var index = 0; index < columns.length; index++) {
-                column = gObj.getColumnByField(columns[index].field);
-                if (index) {
-                    this.filterStatusMsg += ' && ';
+        if (this.filterSettings.type === 'filterbar') {
+            var gObj = this.parent;
+            var columns = this.filterSettings.columns;
+            var formater = this.serviceLocator.getService('valueFormatter');
+            var column = void 0;
+            var value = void 0;
+            if (!this.filterSettings.showFilterBarStatus) {
+                return;
+            }
+            if (columns.length > 0 && this.filterStatusMsg !== this.l10n.getConstant('InvalidFilterMessage')) {
+                this.filterStatusMsg = '';
+                for (var index = 0; index < columns.length; index++) {
+                    column = gObj.getColumnByField(columns[index].field);
+                    if (index) {
+                        this.filterStatusMsg += ' && ';
+                    }
+                    this.filterStatusMsg += column.headerText + ': ' + this.values[column.field];
                 }
-                this.filterStatusMsg += column.headerText + ': ' + this.values[column.field];
             }
+            if (gObj.allowPaging) {
+                gObj.updateExternalMessage(this.filterStatusMsg);
+            }
+            this.filterStatusMsg = '';
         }
-        if (gObj.allowPaging) {
-            gObj.updateExternalMessage(this.filterStatusMsg);
-        }
-        this.filterStatusMsg = '';
     };
@@ -399,3 +470,4 @@ Filter.prototype.checkForSkipInput = function (column, value) {
     Filter.prototype.onTimerTick = function () {
-        var filterElement = this.element.querySelector('#' + this.column.field + '_filterBarcell');
+        var filterElement = this.parent.getHeaderContent()
+            .querySelector('#' + this.column.field + '_filterBarcell');
         var filterValue = JSON.parse(JSON.stringify(filterElement.value));
@@ -512,4 +584,96 @@ this.stopTimer();
     };
+    Filter.prototype.getLocalizedCustomOperators = function () {
+        var numOptr = [
+            { value: 'equal', text: this.l10n.getConstant('Equal') },
+            { value: 'greaterThan', text: this.l10n.getConstant('GreaterThan') },
+            { value: 'greaterThanOrEqual', text: this.l10n.getConstant('GreaterThanOrEqual') },
+            { value: 'lessThan', text: this.l10n.getConstant('LessThan') },
+            { value: 'lessThanOrEqual', text: this.l10n.getConstant('LessThanOrEqual') },
+            { value: 'notEqual', text: this.l10n.getConstant('NotEqual') }
+        ];
+        this.customOperators = {
+            stringOperator: [
+                { value: 'startsWith', text: this.l10n.getConstant('StartsWith') },
+                { value: 'endsWith', text: this.l10n.getConstant('EndsWith') },
+                { value: 'contains', text: this.l10n.getConstant('Contains') },
+                { value: 'equal', text: this.l10n.getConstant('Equal') }, { value: 'notEqual', text: this.l10n.getConstant('NotEqual') }
+            ],
+            numberOperator: numOptr,
+            dateOperator: numOptr,
+            datetimeOperator: numOptr,
+            booleanOperator: [
+                { value: 'equal', text: this.l10n.getConstant('Equal') }, { value: 'notEqual', text: this.l10n.getConstant('NotEqual') }
+            ]
+        };
+    };
+    ;
+    Filter.prototype.clickHandler = function (e) {
+        if (this.parent.filterSettings.type === 'menu' ||
+            this.parent.filterSettings.type === 'checkbox' || this.parent.filterSettings.type === 'excel') {
+            var gObj = this.parent;
+            var target = e.target;
+            var elem = parentsUntil(target, 'e-filter-popup');
+            if (elem) {
+                return;
+            }
+            if (target.classList.contains('e-filtermenudiv')) {
+                var col = gObj.getColumnByUid(parentsUntil(target, 'e-headercell').firstElementChild.getAttribute('e-mappinguid'));
+                var gClient = gObj.element.getBoundingClientRect();
+                var fClient = target.getBoundingClientRect();
+                this.column = col;
+                if (this.fltrDlgDetails.field === col.field && this.fltrDlgDetails.isOpen) {
+                    return;
+                }
+                if (this.filterModule) {
+                    this.filterModule.closeDialog();
+                }
+                this.fltrDlgDetails = { field: col.field, isOpen: true };
+                this.filterDialogOpen(this.column, target, fClient.right - gClient.left, fClient.bottom - gClient.top);
+            }
+            else {
+                var datepickerEle = target.classList.contains('e-day');
+                if (this.filterModule &&
+                    (!parentsUntil(target, 'e-popup-wrapper')
+                        && (!closest(target, '.e-filter-item.e-menu-item'))
+                        && (!parentsUntil(target, 'e-popup'))) && !datepickerEle) {
+                    this.filterModule.closeDialog(target);
+                }
+            }
+        }
+    };
+    Filter.prototype.filterHandler = function (args) {
+        var filterIconElement;
+        var dataManager = new DataManager(this.filterSettings.columns);
+        var query = new Query().where('field', this.filterOperators.equal, args.field);
+        var result = dataManager.executeLocal(query);
+        for (var i = 0; i < result.length; i++) {
+            var index = -1;
+            for (var j = 0; j < this.filterSettings.columns.length; j++) {
+                if (result[i].field === this.filterSettings.columns[j].field) {
+                    index = j;
+                    break;
+                }
+            }
+            if (index !== -1) {
+                this.filterSettings.columns.splice(index, 1);
+            }
+        }
+        var iconClass = this.parent.showColumnMenu ? '.e-columnmenu' : '.e-icon-filter';
+        filterIconElement = this.parent.getColumnHeaderByField(args.field).querySelector(iconClass);
+        if (args.action === 'filtering') {
+            this.filterSettings.columns = this.filterSettings.columns.concat(args.filterCollection);
+            if (this.filterSettings.columns.length && filterIconElement) {
+                filterIconElement.classList.add('e-filtered');
+            }
+        }
+        else {
+            if (filterIconElement) {
+                filterIconElement.classList.remove('e-filtered');
+            }
+            this.parent.refresh();
+        }
+        this.parent.dataBind();
+    };
     return Filter;
 }());
 export { Filter };

dist/es6/grid/actions/group.js

 import { Draggable, Droppable } from '@syncfusion/ej2-base';
-import { createElement, closest, remove, classList } from '@syncfusion/ej2-base';
+import { createElement, closest, remove, classList, addClass, removeClass } from '@syncfusion/ej2-base';
 import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';
@@ -69,2 +69,3 @@ import { parentsUntil, isActionPrevent } from '../base/util';
         this.sortedColumns = sortedColumns;
+        this.focus = serviceLocator.getService('focus');
         this.addEventListener();
@@ -183,2 +184,13 @@ }
                 break;
+            case 'enter':
+                if (this.parent.isEdit) {
+                    return;
+                }
+                var element = this.focus.getFocusedElement();
+                var row = element.parentElement.querySelector('[class^="e-record"]');
+                if (!row) {
+                    break;
+                }
+                this.expandCollapseRows(row);
+                break;
         }
@@ -242,3 +254,4 @@ };
             if (trgt.classList.contains('e-recordpluscollapse')) {
-                trgt.className = 'e-recordplusexpand';
+                addClass([trgt], 'e-recordplusexpand');
+                removeClass([trgt], 'e-recordpluscollapse');
                 trgt.firstElementChild.className = 'e-icons e-gdiagonaldown e-icon-gdownarrow';
@@ -249,3 +262,4 @@ expand = true;
                 isHide = true;
-                trgt.className = 'e-recordpluscollapse';
+                removeClass([trgt], 'e-recordplusexpand');
+                addClass([trgt], 'e-recordpluscollapse');
                 trgt.firstElementChild.className = 'e-icons e-gnextforward e-icon-grightarrow';
@@ -280,3 +294,4 @@ }
             for (var i = 0, len = toExpand.length; i < len; i++) {
-                toExpand[i].className = 'e-recordpluscollapse';
+                removeClass([toExpand[i]], 'e-recordplusexpand');
+                addClass([toExpand[i]], 'e-recordpluscollapse');
                 toExpand[i].firstElementChild.className = 'e-icons e-gnextforward e-icon-grightarrow';
@@ -458,6 +473,17 @@ this.expandCollapseRows(toExpand[i]);
         var headerCell = gObj.getColumnHeaderByUid(column.uid);
-        childDiv.appendChild(createElement('span', {
-            className: 'e-grouptext', innerHTML: column.headerText,
-            attrs: { tabindex: '-1', 'aria-label': 'sort the grouped column' }
-        }));
+        if (!isNullOrUndefined(column.headerTemplate)) {
+            if (column.headerTemplate.indexOf('#') !== -1) {
+                childDiv.innerHTML = document.querySelector(column.headerTemplate).innerHTML.trim();
+            }
+            else {
+                childDiv.innerHTML = column.headerTemplate;
+            }
+            childDiv.firstElementChild.classList.add('e-grouptext');
+        }
+        else {
+            childDiv.appendChild(createElement('span', {
+                className: 'e-grouptext', innerHTML: column.headerText,
+                attrs: { tabindex: '-1', 'aria-label': 'sort the grouped column' }
+            }));
+        }
         if (this.groupSettings.showToggleButton) {
@@ -490,12 +516,14 @@ childDiv.appendChild(createElement('span', {
                     var column = this.parent.getColumnByUid(headers[i].getAttribute('e-mappinguid'));
-                    if (headers[i].querySelectorAll('.e-grptogglebtn').length) {
-                        remove(headers[i].querySelectorAll('.e-grptogglebtn')[0]);
+                    if (!this.parent.showColumnMenu || (this.parent.showColumnMenu && !column.showColumnMenu)) {
+                        if (headers[i].querySelectorAll('.e-grptogglebtn').length) {
+                            remove(headers[i].querySelectorAll('.e-grptogglebtn')[0]);
+                        }
+                        if (!isRemove) {
+                            headers[i].appendChild(createElement('span', {
+                                className: 'e-grptogglebtn e-icons ' +
+                                    (this.groupSettings.columns.indexOf(column.field) > -1 ? 'e-toggleungroup e-icon-ungroup'
+                                        : 'e-togglegroup e-icon-group'), attrs: { tabindex: '-1', 'aria-label': 'Group button' }
+                            }));
+                        }
                     }
-                    if (!isRemove) {
-                        headers[i].appendChild(createElement('span', {
-                            className: 'e-grptogglebtn e-icons ' +
-                                (this.groupSettings.columns.indexOf(column.field) > -1 ? 'e-toggleungroup e-icon-ungroup'
-                                    : 'e-togglegroup e-icon-group'), attrs: { tabindex: '-1', 'aria-label': 'Group button' }
-                        }));
-                    }
                 }
@@ -502,0 +530,0 @@ }

dist/es6/grid/actions/normal-edit.js

@@ -16,3 +16,3 @@ import { extend } from '@syncfusion/ej2-base';
         var gObj = this.parent;
-        if (parentsUntil(target, 'e-gridcontent')) {
+        if (parentsUntil(target, 'e-gridcontent') && !parentsUntil(target, 'e-unboundcelldiv')) {
             this.rowIndex = parentsUntil(target, 'e-rowcell') ? parseInt(target.parentElement.getAttribute('aria-rowindex'), 10) : -1;
@@ -30,5 +30,9 @@ if (gObj.isEdit) {
     NormalEdit.prototype.editComplete = function (e) {
+        this.parent.isEdit = false;
         switch (e.requestType) {
             case 'save':
-                this.parent.selectRow(0);
+                if (!this.parent.element.classList.contains('e-checkboxselection')
+                    || !this.parent.element.classList.contains('e-persistselection')) {
+                    this.parent.selectRow(0);
+                }
                 this.parent.trigger(events.actionComplete, extend(e, {
@@ -47,3 +51,2 @@ requestType: 'save',
         }
-        this.parent.element.focus();
     };
@@ -69,4 +72,7 @@ NormalEdit.prototype.startEdit = function (tr) {
         }
+        gObj.isEdit = true;
         gObj.clearSelection();
-        gObj.isEdit = true;
+        if (gObj.editSettings.mode === 'dialog') {
+            args.row.classList.add('e-dlgeditrow');
+        }
         this.renderer.update(args);
@@ -106,4 +112,9 @@ this.uid = tr.getAttribute('data-uid');
         }
-        this.parent.notify(events.dialogDestroy, {});
+        gObj.editModule.destroyWidgets();
+        gObj.editModule.destroyForm();
+        gObj.notify(events.dialogDestroy, {});
         this.stopEditStatus();
+        if (gObj.editSettings.mode === 'dialog' && args.action !== 'add') {
+            gObj.element.querySelector('.e-dlgeditrow').classList.remove('e-dlgeditrow');
+        }
     };
@@ -134,5 +145,9 @@ NormalEdit.prototype.editHandler = function (args) {
         args.type = events.actionComplete;
+        this.parent.isEdit = false;
         this.refreshRow(args.data);
         this.parent.trigger(events.actionComplete, args);
-        this.parent.selectRow(this.rowIndex > -1 ? this.rowIndex : this.editRowIndex);
+        if (!this.parent.element.classList.contains('e-checkboxselection')
+            || !this.parent.element.classList.contains('e-persistselection')) {
+            this.parent.selectRow(this.rowIndex > -1 ? this.rowIndex : this.editRowIndex);
+        }
         this.parent.element.focus();
@@ -143,3 +158,2 @@ this.parent.hideSpinner();
         this.parent.trigger(events.actionFailure, e);
-        this.parent.hideSpinner();
     };
@@ -155,2 +169,5 @@ NormalEdit.prototype.refreshRow = function (data) {
     NormalEdit.prototype.closeEdit = function () {
+        if (!this.parent.isEdit) {
+            return;
+        }
         var gObj = this.parent;
@@ -161,2 +178,3 @@ var args = {
         gObj.trigger(events.actionBegin, args);
+        gObj.isEdit = false;
         this.stopEditStatus();
@@ -168,3 +186,2 @@ args.type = events.actionComplete;
         gObj.selectRow(this.rowIndex);
-        gObj.element.focus();
         gObj.trigger(events.actionComplete, args);
@@ -174,11 +191,11 @@ };
         var gObj = this.parent;
-        if (gObj.isEdit) {
-            return;
-        }
         if (data) {
             gObj.notify(events.modelChanged, {
-                requestType: 'add', type: events.actionBegin, data: data
+                requestType: 'save', type: events.actionBegin, data: data, selectedRow: 0, action: 'add'
             });
             return;
         }
+        if (gObj.isEdit) {
+            return;
+        }
         this.previousData = {};
@@ -198,4 +215,4 @@ this.uid = '';
         }
+        gObj.isEdit = true;
         gObj.clearSelection();
-        gObj.isEdit = true;
         this.renderer.addNew({ rowData: args.data, requestType: 'add' });
@@ -216,3 +233,2 @@ gObj.editModule.applyFormValidation();
         var gObj = this.parent;
-        gObj.isEdit = false;
         var elem = gObj.element.querySelector('.e-addedrow');
@@ -219,0 +235,0 @@ if (elem) {

dist/es6/grid/actions/page.js

@@ -91,4 +91,5 @@ import { extend } from '@syncfusion/ej2-base';
                 gObj.notify(events.preventBatch, { instance: this, handler: this.goToPage, arg1: e.currentPage });
+                this.isForceCancel = true;
                 this.pagerObj.currentPage = gObj.pageSettings.currentPage;
-                this.isForceCancel = true;
+                this.pagerObj.dataBind();
             }
@@ -95,0 +96,0 @@ else {

dist/es6/grid/actions/pdf-export.js

@@ -175,2 +175,3 @@ import * as events from '../base/constant';
             row.cells.getCell(groupIndex).value = value;
+            row.cells.getCell(groupIndex + 1).style.stringFormat = new PdfStringFormat(PdfTextAlignment.Left);
             row.style.setBorder(border);
@@ -652,6 +653,9 @@ row.style.setFont(font);
                 var value = items[columns[j].field];
+                var data = items;
                 var args = {
+                    data: data,
                     value: value,
                     column: columns[j],
-                    style: undefined
+                    style: undefined,
+                    colSpan: 1
                 };
@@ -664,2 +668,13 @@ gObj.trigger(events.pdfQueryCellInfo, args);
                 }
+                if (args.colSpan > 1) {
+                    if ((j + startIndex + 1 + args.colSpan) > gridRow.cells.count) {
+                        args.colSpan = gridRow.cells.count - (j + startIndex + 1);
+                    }
+                    cell.columnSpan = args.colSpan;
+                    for (var i = 1; i < cell.columnSpan; i++) {
+                        var spanCell = gridRow.cells.getCell(j + startIndex + i);
+                        spanCell.value = '';
+                    }
+                    j += (args.colSpan - 1);
+                }
             }
@@ -666,0 +681,0 @@ }

dist/es6/grid/actions/resize.js

@@ -130,3 +130,8 @@ import { EventHandler, createElement, detach, formatUnit, Browser, closest } from '@syncfusion/ej2-base';
         }
-        this.parent.on(events.headerRefreshed, this.render, this);
+        if (this.parent.frozenColumns) {
+            this.parent.on(events.freezeRefresh, this.render, this);
+        }
+        else {
+            this.parent.on(events.headerRefreshed, this.render, this);
+        }
     };
@@ -162,3 +167,5 @@ Resize.prototype.removeEventListener = function () {
     Resize.prototype.getResizeHandlers = function () {
-        return [].slice.call(this.parent.getHeaderTable().querySelectorAll('.' + resizeClassList.root));
+        return this.parent.frozenColumns ?
+            [].slice.call(this.parent.getHeaderContent().querySelectorAll('.' + resizeClassList.root))
+            : [].slice.call(this.parent.getHeaderTable().querySelectorAll('.' + resizeClassList.root));
     };
@@ -272,3 +279,3 @@ Resize.prototype.setHandlerHeight = function () {
     Resize.prototype.resizeEnd = function (e) {
-        if (!this.helper) {
+        if (!this.helper || this.parent.isDestroyed) {
             return;
@@ -338,3 +345,11 @@ }
         var rect = closest(this.element, resizeClassList.header);
-        var tr = [].slice.call(this.parent.getHeaderTable().querySelectorAll('tr'));
+        var tr = [].slice.call(this.parent.getHeaderContent().querySelectorAll('tr'));
+        if (this.parent.frozenColumns) {
+            if (rect.parentElement.children.length !== this.parent.frozenColumns) {
+                tr.splice(0, tr.length / 2);
+            }
+            else {
+                tr.splice(tr.length / 2, tr.length / 2);
+            }
+        }
         for (var i = tr.indexOf(rect.parentElement); i < tr.length; i++) {
@@ -348,3 +363,4 @@ height += tr[i].offsetHeight;
     Resize.prototype.getScrollBarWidth = function (height) {
-        var ele = this.parent.getContent().firstChild;
+        var ele = this.parent.frozenColumns ? this.parent.getContent().querySelector('.e-movablecontent')
+            : this.parent.getContent().firstChild;
         return (ele.scrollHeight > ele.clientHeight && height) ||
@@ -351,0 +367,0 @@ ele.scrollWidth > ele.clientWidth ? getScrollBarWidth() : 0;

dist/es6/grid/actions/row-reorder.js

@@ -67,2 +67,5 @@ import { Draggable } from '@syncfusion/ej2-base';
             var gObj = _this.parent;
+            if (_this.parent.isDestroyed) {
+                return;
+            }
             var target = _this.getElementFromPosition(e.helper, e.event);
@@ -154,3 +157,3 @@ gObj.element.classList.remove('e-rowdrag');
             }
-            srcControl.notify(events.rowsRemoved, { indexes: this.selectedRows });
+            srcControl.notify(events.rowsRemoved, { indexes: this.selectedRows, records: records });
             srcControl.notify(events.modelChanged, {
@@ -157,0 +160,0 @@ type: events.actionBegin, requestType: 'rowdraganddrop'

dist/es6/grid/actions/scroll.js

@@ -21,3 +21,4 @@ import { Browser, EventHandler } from '@syncfusion/ej2-base';
         this.parent.element.style.width = formatUnit(this.parent.width);
-        if (this.parent.toolbarModule && this.parent.toolbarModule.toolbar.element) {
+        if (this.parent.toolbarModule && this.parent.toolbarModule.toolbar &&
+            this.parent.toolbarModule.toolbar.element) {
             this.parent.toolbarModule.toolbar.refreshOverflow();
@@ -27,4 +28,12 @@ }
     Scroll.prototype.setHeight = function () {
+        var mHdrHeight = 0;
         var content = this.parent.getContent().firstChild;
-        content.style.height = formatUnit(this.parent.height);
+        if (this.parent.frozenRows) {
+            mHdrHeight =
+                this.parent.getHeaderContent().querySelector('tbody').offsetHeight;
+            content.style.height = formatUnit(this.parent.height - mHdrHeight);
+        }
+        else {
+            content.style.height = formatUnit(this.parent.height);
+        }
         this.ensureOverflow(content);
@@ -98,2 +107,68 @@ };
     };
+    Scroll.prototype.onFreezeContentScroll = function (scrollTarget) {
+        var _this = this;
+        var element = scrollTarget;
+        return function (e) {
+            if (_this.content.querySelector('tbody') === null) {
+                return;
+            }
+            var target = e.target;
+            var top = target.scrollTop;
+            if (_this.previousValues.top === top) {
+                return;
+            }
+            element.scrollTop = top;
+            _this.previousValues.top = top;
+            if (_this.parent.isDestroyed) {
+                return;
+            }
+        };
+    };
+    Scroll.prototype.onWheelScroll = function (scrollTarget) {
+        var _this = this;
+        var element = scrollTarget;
+        return function (e) {
+            if (_this.content.querySelector('tbody') === null) {
+                return;
+            }
+            var top = element.scrollTop + e.deltaY;
+            if (_this.previousValues.top === top) {
+                return;
+            }
+            e.preventDefault();
+            _this.parent.getContent().querySelector('.e-frozencontent').scrollTop = top;
+            element.scrollTop = top;
+            _this.previousValues.top = top;
+        };
+    };
+    Scroll.prototype.onTouchScroll = function (scrollTarget) {
+        var _this = this;
+        var element = scrollTarget;
+        return function (e) {
+            var pageY = _this.getPointY(e);
+            var top = element.scrollTop + (_this.pageY - pageY);
+            if (_this.previousValues.top === top) {
+                return;
+            }
+            e.preventDefault();
+            _this.parent.getContent().querySelector('.e-frozencontent').scrollTop = top;
+            element.scrollTop = top;
+            _this.pageY = pageY;
+            _this.previousValues.top = top;
+        };
+    };
+    Scroll.prototype.setPageY = function () {
+        var _this = this;
+        return function (e) {
+            _this.pageY = _this.getPointY(e);
+        };
+    };
+    Scroll.prototype.getPointY = function (e) {
+        if (e.touches && e.touches.length) {
+            return e.touches[0].pageY;
+        }
+        else {
+            return e.pageY;
+        }
+    };
     Scroll.prototype.wireEvents = function () {
@@ -103,4 +178,18 @@ if (this.oneTimeReady) {
             this.header = this.parent.getHeaderContent().firstChild;
-            EventHandler.add(this.content, 'scroll', this.onContentScroll(this.header), this);
-            EventHandler.add(this.header, 'scroll', this.onContentScroll(this.content), this);
+            var mCont = this.content.querySelector('.e-movablecontent');
+            var fCont = this.content.querySelector('.e-frozencontent');
+            var mHdr = this.header.querySelector('.e-movableheader');
+            if (this.parent.frozenColumns) {
+                EventHandler.add(mCont, 'scroll', this.onContentScroll(mHdr), this);
+                EventHandler.add(mCont, 'scroll', this.onFreezeContentScroll(fCont), this);
+                EventHandler.add(fCont, 'scroll', this.onFreezeContentScroll(mCont), this);
+                EventHandler.add(mHdr, 'scroll', this.onContentScroll(mCont), this);
+                EventHandler.add(fCont, 'wheel', this.onWheelScroll(mCont), this);
+                EventHandler.add(fCont, 'touchstart', this.setPageY(), this);
+                EventHandler.add(fCont, 'touchmove', this.onTouchScroll(mCont), this);
+            }
+            else {
+                EventHandler.add(this.content, 'scroll', this.onContentScroll(this.header), this);
+                EventHandler.add(this.header, 'scroll', this.onContentScroll(this.content), this);
+            }
             if (this.parent.aggregates.length) {
@@ -132,3 +221,8 @@ EventHandler.add(this.parent.getFooterContent().firstChild, 'scroll', this.onContentScroll(this.content), this);
     Scroll.prototype.ensureOverflow = function (content) {
-        content.style.overflowY = this.parent.height === 'auto' ? 'auto' : 'scroll';
+        if (this.parent.frozenColumns) {
+            content.querySelector('.e-movablecontent').style.overflowY = this.parent.height === 'auto' ? 'auto' : 'scroll';
+        }
+        else {
+            content.style.overflowY = this.parent.height === 'auto' ? 'auto' : 'scroll';
+        }
     };
@@ -135,0 +229,0 @@ Scroll.prototype.onPropertyChanged = function (e) {

dist/es6/grid/actions/selection.js

 import { Browser, EventHandler } from '@syncfusion/ej2-base';
 import { isNullOrUndefined, isUndefined } from '@syncfusion/ej2-base';
-import { remove, createElement, closest, classList } from '@syncfusion/ej2-base';
-import { setCssInGridPopUp, getPosition, parentsUntil } from '../base/util';
+import { remove, createElement, closest } from '@syncfusion/ej2-base';
+import { Query } from '@syncfusion/ej2-data';
+import { setCssInGridPopUp, getPosition, parentsUntil, addRemoveActiveClasses } from '../base/util';
 import * as events from '../base/constant';
@@ -12,8 +13,21 @@ import { RenderType } from '../base/enum';
         this.selectedRecords = [];
+        this.preventFocus = false;
         this.isMultiShiftRequest = false;
         this.isMultiCtrlRequest = false;
         this.enableSelectMultiTouch = false;
+        this.persistSelection = false;
+        this.selectedRowState = {};
+        this.isBatchEdit = false;
+        this.prevKey = 0;
+        this.totalRecordsCount = 0;
+        this.isChkAll = false;
+        this.isUnChkAll = false;
+        this.chkAllCollec = [];
+        this.isCheckedOnAdd = false;
+        this.persistSelectedData = [];
+        this.selectionRequest = false;
         this.parent = parent;
         this.selectionSettings = selectionSettings;
         this.factory = locator.getService('rendererFactory');
+        this.focus = locator.getService('focus');
         this.addEventListener();
@@ -40,3 +54,3 @@ }
     Selection.prototype.isEditing = function () {
-        return this.parent.editSettings.mode !== 'batch' && this.parent.isEdit;
+        return this.parent.editSettings.mode !== 'batch' && this.parent.isEdit && !this.persistSelection;
     };
@@ -160,2 +174,36 @@ Selection.prototype.selectRow = function (index, isToggle) {
     };
+    Selection.prototype.updatePersistCollection = function (selectedRow, chkState) {
+        if (this.persistSelection && !isNullOrUndefined(selectedRow)) {
+            var rowObj = this.parent.getRowObjectFromUID(selectedRow.getAttribute('data-uid'));
+            var pKey = rowObj ? rowObj.data[this.primaryKey] : null;
+            if (pKey === null) {
+                return;
+            }
+            rowObj.isSelected = chkState;
+            if (chkState) {
+                this.selectedRowState[pKey] = chkState;
+                if (this.selectionRequest && this.persistSelectedData.indexOf(rowObj.data) < 0) {
+                    this.persistSelectedData.push(rowObj.data);
+                }
+            }
+            else {
+                delete (this.selectedRowState[pKey]);
+                if (this.selectionRequest && this.persistSelectedData.indexOf(rowObj.data) >= 0) {
+                    this.persistSelectedData.splice(this.persistSelectedData.indexOf(rowObj.data), 1);
+                }
+            }
+        }
+    };
+    Selection.prototype.updateCheckBoxes = function (row, chkState) {
+        if (!isNullOrUndefined(row)) {
+            var chkBox = row.querySelector('.e-checkselect');
+            if (!isNullOrUndefined(chkBox) && this.checkedTarget !== chkBox) {
+                chkBox.ej2_instances[0].setProperties({ checked: chkState });
+                if (isNullOrUndefined(this.checkedTarget) || (!isNullOrUndefined(this.checkedTarget)
+                    && !this.checkedTarget.classList.contains('e-checkselectall'))) {
+                    this.setCheckAllState();
+                }
+            }
+        }
+    };
     Selection.prototype.updateRowSelection = function (selectedRow, startIndex) {
@@ -168,12 +216,26 @@ if (!selectedRow) {
         selectedRow.setAttribute('aria-selected', 'true');
+        this.updatePersistCollection(selectedRow, true);
+        this.updateCheckBoxes(selectedRow, true);
         this.addRemoveClassesForRow(selectedRow, true, null, 'e-selectionbackground', 'e-active');
+        if (!this.preventFocus) {
+            var target = this.focus.getPrevIndexes().cellIndex ?
+                selectedRow.cells[this.focus.getPrevIndexes().cellIndex] :
+                selectedRow.querySelector('.e-selectionbackground:not(.e-hide)');
+            if (!target) {
+                return;
+            }
+            this.focus.onClick({ target: target }, true);
+        }
     };
     Selection.prototype.clearSelection = function () {
-        var span = this.parent.element.querySelector('.e-gridpopup').querySelector('span');
-        if (span.classList.contains('e-rowselect')) {
-            span.classList.remove('e-spanclicked');
+        if (!this.persistSelection || (this.persistSelection && !this.parent.isEdit) ||
+            (!isNullOrUndefined(this.checkedTarget) && this.checkedTarget.classList.contains('e-checkselectall'))) {
+            var span = this.parent.element.querySelector('.e-gridpopup').querySelector('span');
+            if (span.classList.contains('e-rowselect')) {
+                span.classList.remove('e-spanclicked');
+            }
+            this.clearRowSelection();
+            this.clearCellSelection();
+            this.enableSelectMultiTouch = false;
         }
-        this.clearRowSelection();
-        this.clearCellSelection();
-        this.enableSelectMultiTouch = false;
     };
@@ -199,2 +261,4 @@ Selection.prototype.clearRowSelection = function () {
                 this.addRemoveClassesForRow(row_1, false, true, 'e-selectionbackground', 'e-active');
+                this.updatePersistCollection(row_1, false);
+                this.updateCheckBoxes(row_1);
             }
@@ -209,5 +273,7 @@ this.selectedRowIndexes = [];
     Selection.prototype.rowDeselect = function (type, rowIndex, data, row) {
+        this.updatePersistCollection(row[0], false);
         this.parent.trigger(type, {
             rowIndex: rowIndex, data: data, row: row
         });
+        this.updateCheckBoxes(row[0]);
     };
@@ -219,3 +285,3 @@ Selection.prototype.selectCell = function (cellIndex, isToggle) {
         var gObj = this.parent;
-        var selectedCell = gObj.getCellFromIndex(cellIndex.rowIndex, cellIndex.cellIndex);
+        var selectedCell = gObj.getCellFromIndex(cellIndex.rowIndex, this.getColIndex(cellIndex.rowIndex, cellIndex.cellIndex));
         this.currentIndex = cellIndex.rowIndex;
@@ -282,3 +348,3 @@ var selectedData = gObj.getCurrentViewRecords()[this.currentIndex];
                 min = i === startIndex.rowIndex ? (startIndex.cellIndex) : 0;
-                max = i === endIndex.rowIndex ? (endIndex.cellIndex) : gObj.getColumns().length - 1;
+                max = i === endIndex.rowIndex ? (endIndex.cellIndex) : this.getLastColIndex(i);
             }
@@ -349,3 +415,3 @@ else {
         var gObj = this.parent;
-        var selectedCell = gObj.getCellFromIndex(cellIndexes[0].rowIndex, cellIndexes[0].cellIndex);
+        var selectedCell = gObj.getCellFromIndex(cellIndexes[0].rowIndex, this.getColIndex(cellIndexes[0].rowIndex, cellIndexes[0].cellIndex));
         var index;
@@ -404,2 +470,16 @@ this.currentIndex = cellIndexes[0].rowIndex;
     };
+    Selection.prototype.getColIndex = function (rowIndex, index) {
+        var cells = this.parent.getDataRows()[rowIndex].querySelectorAll('td.e-rowcell');
+        for (var m = 0; m < cells.length; m++) {
+            var colIndex = parseInt(cells[m].getAttribute('aria-colindex'), 10);
+            if (colIndex === index) {
+                return m;
+            }
+        }
+        return -1;
+    };
+    Selection.prototype.getLastColIndex = function (rowIndex) {
+        var cells = this.parent.getDataRows()[rowIndex].querySelectorAll('td.e-rowcell');
+        return parseInt(cells[cells.length - 1].getAttribute('aria-colindex'), 10);
+    };
     Selection.prototype.clearCell = function () {
@@ -409,2 +489,5 @@ this.clearCellSelection();
     Selection.prototype.cellDeselect = function (type, cellIndexes, data, cells) {
+        if (cells[0] && cells[0].classList.contains('e-gridchkbox')) {
+            this.updateCheckBoxes(closest(cells[0], 'tr'));
+        }
         this.parent.trigger(type, {
@@ -419,2 +502,5 @@ cells: cells, data: data, cellIndexes: cellIndexes
         selectedCell.classList.add('e-cellselectionbackground');
+        if (selectedCell.classList.contains('e-gridchkbox')) {
+            this.updateCheckBoxes(closest(selectedCell, 'tr'), true);
+        }
         this.addAttribute(selectedCell);
@@ -425,3 +511,5 @@ };
         cell.setAttribute('aria-selected', 'true');
-        cell.focus();
+        if (!this.preventFocus) {
+            this.focus.onClick({ target: cell }, true);
+        }
     };
@@ -552,3 +640,3 @@ Selection.prototype.updateCellProps = function (startIndex, endIndex) {
     Selection.prototype.clearSelAfterRefresh = function (e) {
-        if (e.requestType !== 'virtualscroll') {
+        if (e.requestType !== 'virtualscroll' && !this.persistSelection) {
             this.clearSelection();
@@ -566,3 +654,3 @@ }
         this.parent.on(events.click, this.clickHandler, this);
-        this.parent.on(events.keyPressed, this.keyPressHandler, this);
+        this.parent.on(events.cellFocused, this.onCellFocused, this);
         this.parent.on(events.dataReady, this.dataReady, this);
@@ -572,2 +660,5 @@ this.parent.on(events.dataReady, this.clearSelAfterRefresh, this);
         this.parent.on(events.contentReady, this.initialEnd, this);
+        this.parent.addEventListener(events.dataBound, this.onDataBound.bind(this));
+        this.parent.addEventListener(events.actionBegin, this.actionBegin.bind(this));
+        this.parent.addEventListener(events.actionComplete, this.actionComplete.bind(this));
     };
@@ -583,9 +674,12 @@ Selection.prototype.removeEventListener = function () {
         this.parent.off(events.click, this.clickHandler);
-        this.parent.off(events.keyPressed, this.keyPressHandler);
+        this.parent.off(events.cellFocused, this.onCellFocused);
         this.parent.off(events.dataReady, this.dataReady);
         this.parent.off(events.dataReady, this.clearSelAfterRefresh);
         this.parent.off(events.columnPositionChanged, this.clearSelection);
+        this.parent.removeEventListener(events.dataBound, this.onDataBound);
+        this.parent.removeEventListener(events.actionBegin, this.actionBegin);
+        this.parent.removeEventListener(events.actionComplete, this.actionComplete);
     };
     Selection.prototype.dataReady = function (e) {
-        if (e.requestType !== 'virtualscroll') {
+        if (e.requestType !== 'virtualscroll' && !this.persistSelection) {
             this.clearSelection();
@@ -614,2 +708,3 @@ }
         }
+        this.checkBoxSelectionChanged();
     };
@@ -624,3 +719,232 @@ Selection.prototype.hidePopUp = function () {
         this.selectRow(this.parent.selectedRowIndex);
+        this.checkBoxSelectionChanged();
     };
+    Selection.prototype.checkBoxSelectionChanged = function () {
+        var isCheckColumn = false;
+        for (var _i = 0, _a = this.parent.columns; _i < _a.length; _i++) {
+            var col = _a[_i];
+            if (col.type === 'checkbox') {
+                this.isChkSelection = true;
+                this.parent.selectionSettings.type = 'multiple';
+                this.chkField = col.field;
+                this.totalRecordsCount = this.parent.pageSettings.totalRecordsCount;
+                if (isNullOrUndefined(this.totalRecordsCount)) {
+                    this.totalRecordsCount = this.parent.getCurrentViewRecords().length;
+                }
+                this.chkAllBox = this.parent.element.querySelector('.e-checkselectall');
+                this.chkAllObj = this.chkAllBox;
+                isCheckColumn = true;
+                this.parent.element.classList.add('e-checkboxselection');
+                break;
+            }
+        }
+        if (!isCheckColumn) {
+            this.isChkSelection = false;
+            this.chkField = '';
+            this.chkAllBox = this.chkAllObj = null;
+            this.parent.element.classList.remove('e-checkboxselection');
+        }
+        if (this.parent.selectionSettings.persistSelection && this.parent.getPrimaryKeyFieldNames().length > 0) {
+            this.persistSelection = true;
+            this.parent.element.classList.add('e-persistselection');
+            this.primaryKey = this.parent.getPrimaryKeyFieldNames()[0];
+            if (!this.parent.enableVirtualization && this.chkField && Object.keys(this.selectedRowState).length === 0) {
+                var data = this.parent.getDataModule();
+                var query = new Query().where(this.chkField, 'equal', true);
+                var dataManager = data.getData({}, query);
+                var proxy_1 = this;
+                this.parent.showSpinner();
+                dataManager.then(function (e) {
+                    proxy_1.dataSuccess(e.result);
+                    proxy_1.refreshPersistSelection();
+                    proxy_1.parent.hideSpinner();
+                });
+            }
+        }
+        else {
+            this.persistSelection = false;
+            this.parent.element.classList.remove('e-persistselection');
+            this.selectedRowState = {};
+        }
+    };
+    Selection.prototype.dataSuccess = function (res) {
+        for (var i = 0; i < res.length; i++) {
+            if (isNullOrUndefined(this.selectedRowState[res[i][this.primaryKey]]) && res[i][this.chkField]) {
+                this.selectedRowState[res[i][this.primaryKey]] = res[i][this.chkField];
+            }
+        }
+        this.persistSelectedData = res;
+    };
+    Selection.prototype.refreshPersistSelection = function () {
+        this.chkAllBox = this.parent.element.querySelector('.e-checkselectall');
+        this.chkAllObj = this.chkAllBox;
+        var rows = this.parent.getRows();
+        if (rows.length > 0 && (this.persistSelection || this.chkField)) {
+            var indexes = [];
+            for (var j = 0; j < rows.length; j++) {
+                var rowObj = this.parent.getRowObjectFromUID(rows[j].getAttribute('data-uid'));
+                var pKey = rowObj ? rowObj.data[this.primaryKey] : null;
+                if (pKey === null) {
+                    return;
+                }
+                var checkState = void 0;
+                if (this.selectedRowState[pKey] || (this.isChkAll && this.chkAllCollec.indexOf(pKey) < 0)
+                    || (this.isUnChkAll && this.chkAllCollec.indexOf(pKey) > 0) || (this.chkField && rowObj.data[this.chkField])) {
+                    indexes.push(parseInt(rows[j].getAttribute('aria-rowindex'), 10));
+                    checkState = true;
+                }
+                else {
+                    var chkBox = rows[j].querySelector('.e-checkselect');
+                    checkState = false;
+                    if (this.checkedTarget !== chkBox && this.isChkSelection) {
+                        chkBox.ej2_instances[0].setProperties({ checked: checkState });
+                    }
+                }
+                this.updatePersistCollection(rows[j], checkState);
+            }
+            if (this.selectionSettings.type === 'multiple') {
+                this.selectRows(indexes);
+            }
+            else {
+                this.clearSelection();
+                if (indexes.length > 0) {
+                    this.selectRow(indexes[0], true);
+                }
+            }
+        }
+        if (this.isChkSelection) {
+            this.setCheckAllState();
+        }
+    };
+    Selection.prototype.actionBegin = function (e) {
+        if (e.requestType === 'save' && this.persistSelection) {
+            var editChkBox = this.parent.element.querySelector('.e-edit-checkselect');
+            if (!isNullOrUndefined(editChkBox)) {
+                var row = closest(editChkBox, '.e-editedrow');
+                if (row) {
+                    if (this.parent.editSettings.mode === 'dialog') {
+                        row = this.parent.element.querySelector('.e-dlgeditrow');
+                    }
+                    var rowObj = this.parent.getRowObjectFromUID(row.getAttribute('data-uid'));
+                    if (!rowObj) {
+                        return;
+                    }
+                    this.selectedRowState[rowObj.data[this.primaryKey]] = rowObj.isSelected = editChkBox.checked;
+                }
+                else {
+                    this.isCheckedOnAdd = editChkBox.checked;
+                }
+            }
+        }
+    };
+    Selection.prototype.actionComplete = function (e) {
+        if (e.requestType === 'save' && this.persistSelection) {
+            if (e.action === 'add' && this.isCheckedOnAdd) {
+                var rowObj = this.parent.getRowObjectFromUID(this.parent.getRows()[e.selectedRow].getAttribute('data-uid'));
+                this.selectedRowState[rowObj.data[this.primaryKey]] = rowObj.isSelected = this.isCheckedOnAdd;
+            }
+            this.refreshPersistSelection();
+        }
+    };
+    Selection.prototype.onDataBound = function () {
+        if (this.persistSelection || this.chkField) {
+            if (this.parent.enableVirtualization) {
+                var records = this.parent.getCurrentViewRecords();
+                this.dataSuccess(records);
+            }
+            this.refreshPersistSelection();
+        }
+    };
+    Selection.prototype.checkSelectAllAction = function (checkState) {
+        var editForm = this.parent.element.querySelector('.e-gridform');
+        this.checkedTarget = this.chkAllBox;
+        if (checkState) {
+            this.selectRowsByRange(0, this.parent.getCurrentViewRecords().length);
+            this.isChkAll = true;
+            this.isUnChkAll = false;
+        }
+        else {
+            this.clearSelection();
+            this.isUnChkAll = true;
+            this.isChkAll = false;
+        }
+        this.chkAllCollec = [];
+        if (this.persistSelection) {
+            var rows = this.parent.getRows();
+            for (var i = 0; i < rows.length; i++) {
+                this.updatePersistCollection(rows[i], checkState);
+            }
+            if (this.isUnChkAll) {
+                this.selectedRowState = {};
+                this.persistSelectedData = [];
+            }
+        }
+        if (!isNullOrUndefined(editForm)) {
+            var editChkBox = editForm.querySelector('.e-edit-checkselect');
+            editChkBox.ej2_instances[0].setProperties({ checked: checkState });
+        }
+    };
+    Selection.prototype.checkSelectAll = function (checkBox) {
+        var checkObj = checkBox;
+        this.checkSelectAllAction(checkBox.checked);
+        this.target = null;
+        this.triggerChkChangeEvent(checkBox, checkBox.checked);
+    };
+    Selection.prototype.checkSelect = function (checkBox) {
+        var target = closest(this.checkedTarget, '.e-rowcell');
+        var checkObj = checkBox;
+        this.isMultiCtrlRequest = true;
+        var rIndex = parseInt(target.parentElement.getAttribute('aria-rowindex'), 10);
+        if (this.persistSelection && this.parent.element.querySelectorAll('.e-addedrow').length > 0) {
+            ++rIndex;
+        }
+        this.rowCellSelectionHandler(rIndex, parseInt(target.getAttribute('aria-colindex'), 10));
+        this.moveIntoUncheckCollection(closest(target, '.e-row'));
+        this.setCheckAllState();
+        this.isMultiCtrlRequest = false;
+        this.triggerChkChangeEvent(checkBox, checkBox.checked);
+    };
+    Selection.prototype.moveIntoUncheckCollection = function (row) {
+        if (this.isChkAll || this.isUnChkAll) {
+            var rowObj = this.parent.getRowObjectFromUID(row.getAttribute('data-uid'));
+            var pKey = rowObj ? rowObj.data[this.primaryKey] : null;
+            if (!pKey) {
+                return;
+            }
+            if (this.chkAllCollec.indexOf(pKey) < 0) {
+                this.chkAllCollec.push(pKey);
+            }
+            else {
+                this.chkAllCollec.splice(this.chkAllCollec.indexOf(pKey), 1);
+            }
+        }
+    };
+    Selection.prototype.triggerChkChangeEvent = function (checkBox, checkState) {
+        this.parent.trigger(events.checkBoxChange, {
+            checked: checkState, selectedRowIndexes: this.parent.getSelectedRowIndexes(),
+            target: checkBox
+        });
+        if (!this.parent.isEdit) {
+            this.checkedTarget = null;
+        }
+    };
+    Selection.prototype.setCheckAllState = function () {
+        if (this.isChkSelection) {
+            var checkedLen = Object.keys(this.selectedRowState).length;
+            if (!this.persistSelection) {
+                checkedLen = this.selectedRecords.length;
+                this.totalRecordsCount = this.parent.getCurrentViewRecords().length;
+            }
+            if (checkedLen === this.totalRecordsCount || (this.persistSelection && this.parent.allowPaging
+                && this.isChkAll && this.chkAllCollec.length === 0)) {
+                this.chkAllObj.ej2_instances[0].setProperties({ checked: true });
+            }
+            else if (checkedLen === 0 || this.parent.getCurrentViewRecords().length === 0) {
+                this.chkAllObj.ej2_instances[0].setProperties({ indeterminate: false, checked: false });
+            }
+            else {
+                this.chkAllObj.ej2_instances[0].setProperties({ indeterminate: true });
+            }
+        }
+    };
     Selection.prototype.clickHandler = function (e) {
@@ -631,6 +955,37 @@ var target = e.target;
         this.popUpClickHandler(e);
-        if (target.classList.contains('e-rowcell')) {
+        var chkSelect = false;
+        this.preventFocus = true;
+        var checkBox;
+        this.selectionRequest = true;
+        if (target.classList.contains('e-checkselect') || target.classList.contains('e-checkselectall')) {
+            checkBox = target;
+            chkSelect = true;
+        }
+        if (target && (target.classList.contains('e-rowcell') && !this.parent.selectionSettings.checkboxOnly) || chkSelect) {
+            if (this.isChkSelection) {
+                this.isMultiCtrlRequest = true;
+            }
             this.target = target;
-            this.rowCellSelectionHandler(parseInt(target.parentElement.getAttribute('aria-rowindex'), 10), parseInt(target.getAttribute('aria-colindex'), 10));
-            if (Browser.isDevice && this.parent.selectionSettings.type === 'multiple') {
+            if (!isNullOrUndefined(checkBox)) {
+                this.checkedTarget = checkBox;
+                if (checkBox.classList.contains('e-checkselectall')) {
+                    this.checkSelectAll(checkBox);
+                }
+                else {
+                    this.checkSelect(checkBox);
+                    this.target = closest(target, '.e-rowcell');
+                }
+            }
+            else {
+                var rIndex = parseInt(target.parentElement.getAttribute('aria-rowindex'), 10);
+                if (this.persistSelection && this.parent.element.querySelectorAll('.e-addedrow').length > 0) {
+                    ++rIndex;
+                }
+                this.rowCellSelectionHandler(rIndex, parseInt(target.getAttribute('aria-colindex'), 10));
+                if (this.isChkSelection) {
+                    this.moveIntoUncheckCollection(closest(target, '.e-row'));
+                    this.setCheckAllState();
+                }
+            }
+            if (!this.isChkSelection && Browser.isDevice && this.parent.selectionSettings.type === 'multiple') {
                 this.showPopup(e);
@@ -641,2 +996,4 @@ }
         this.isMultiShiftRequest = false;
+        this.selectionRequest = false;
+        this.preventFocus = false;
     };
@@ -685,86 +1042,70 @@ Selection.prototype.popUpClickHandler = function (e) {
     };
-    Selection.prototype.keyPressHandler = function (e) {
-        var checkScroll;
-        var preventDefault;
-        switch (e.action) {
+    Selection.prototype.onCellFocused = function (e) {
+        var clear = ((e.container.isHeader && e.isJump) || (e.container.isContent && !e.container.isSelectable)) &&
+            !(e.byKey && e.keyArgs.action === 'space');
+        var headerAction = e.container.isHeader && !(e.byKey && e.keyArgs.action === 'space');
+        if (!e.byKey || clear) {
+            if (clear) {
+                this.clearSelection();
+            }
+            return;
+        }
+        var _a = e.container.isContent ? e.container.indexes : e.indexes, rowIndex = _a[0], cellIndex = _a[1];
+        var prev = this.focus.getPrevIndexes();
+        if (headerAction || (['ctrlPlusA', 'escape'].indexOf(e.keyArgs.action) === -1 && e.keyArgs.action !== 'space' &&
+            rowIndex === prev.rowIndex && cellIndex === prev.cellIndex)) {
+            return;
+        }
+        this.preventFocus = true;
+        switch (e.keyArgs.action) {
             case 'downArrow':
-                checkScroll = true;
-                this.downArrowKey();
-                break;
             case 'upArrow':
-                checkScroll = true;
-                this.upArrowKey();
+            case 'enter':
+            case 'shiftEnter':
+                this.applyDownUpKey(rowIndex, cellIndex);
                 break;
             case 'rightArrow':
-                preventDefault = true;
-                this.rightArrowKey();
-                break;
             case 'leftArrow':
-                preventDefault = true;
-                this.leftArrowKey();
+                this.applyRightLeftKey(rowIndex, cellIndex);
                 break;
+            case 'shiftDown':
+            case 'shiftUp':
+                this.shiftDownKey(rowIndex, cellIndex);
+                break;
+            case 'shiftLeft':
+            case 'shiftRight':
+                this.applyShiftLeftRightKey(rowIndex, cellIndex);
+                break;
             case 'home':
-                preventDefault = true;
-                this.homeKey();
-                break;
             case 'end':
-                preventDefault = true;
-                this.endKey();
+                this.applyHomeEndKey(rowIndex, cellIndex);
                 break;
             case 'ctrlHome':
-                preventDefault = true;
-                this.ctrlHomeKey();
-                break;
             case 'ctrlEnd':
-                preventDefault = true;
-                this.ctrlEndKey();
+                this.applyCtrlHomeEndKey(rowIndex, cellIndex);
                 break;
-            case 'shiftDown':
-                this.shiftDownKey();
-                break;
-            case 'shiftUp':
-                this.shiftUpKey();
-                break;
-            case 'shiftRight':
-                this.shiftRightKey();
-                break;
-            case 'shiftLeft':
-                this.shiftLeftKey();
-                break;
             case 'escape':
-                preventDefault = true;
                 this.clearSelection();
                 break;
             case 'ctrlPlusA':
-                preventDefault = true;
                 this.ctrlPlusA();
                 break;
-        }
-        if (checkScroll) {
-            var scrollElem = this.parent.getContent().firstElementChild;
-            if (this.selectedRecords.length || this.selectedRowCellIndexes.length) {
-                var row = this.selectedRecords.length ? this.selectedRecords[0] :
-                    this.parent.getRowByIndex(this.selectedRowCellIndexes[0].rowIndex);
-                var height = row.offsetHeight;
-                var rowIndex = row.rowIndex;
-                scrollElem.scrollTop = scrollElem.scrollTop + (e.action === 'downArrow' ? height : height * -1);
-                if (this.checkVisible(row) &&
-                    rowIndex !== 0 && this.parent.getContentTable().querySelector('tbody').children.length !== rowIndex + 1) {
-                    e.preventDefault();
+            case 'space':
+                this.selectionRequest = true;
+                var target = e.element;
+                if (target.classList.contains('e-checkselectall')) {
+                    this.checkedTarget = target;
+                    this.checkSelectAll(this.checkedTarget);
                 }
-            }
+                else {
+                    if (target.classList.contains('e-checkselect')) {
+                        this.checkedTarget = target;
+                        this.checkSelect(this.checkedTarget);
+                    }
+                }
+                this.selectionRequest = false;
+                break;
         }
-        if (preventDefault) {
-            e.preventDefault();
-        }
+        this.preventFocus = false;
     };
-    Selection.prototype.checkVisible = function (element) {
-        var st = window.scrollY;
-        var y = element.getBoundingClientRect().top + st;
-        return y + 36 < (window.innerHeight + st) - this.getRowHeight(element) && y > (st - element.offsetHeight) +
-            this.getRowHeight(element);
-    };
-    Selection.prototype.getRowHeight = function (element) {
-        return element.getBoundingClientRect().height;
-    };
     Selection.prototype.ctrlPlusA = function () {
@@ -778,20 +1119,23 @@ if (this.isRowType() && !this.isSingleSel()) {
     };
-    Selection.prototype.downArrowKey = function () {
-        this.applyDownUpKey(1, !isUndefined(this.parent.selectedRowIndex) && this.parent.selectedRowIndex + 1 < this.parent.getRows().length, !isUndefined(this.prevECIdxs) &&
-            this.prevECIdxs.rowIndex + 1 < this.parent.getRows().length);
-    };
-    Selection.prototype.upArrowKey = function () {
-        this.applyDownUpKey(-1, !isUndefined(this.parent.selectedRowIndex) && this.parent.selectedRowIndex - 1 > -1, !isUndefined(this.prevECIdxs) && this.prevECIdxs.rowIndex - 1 > -1);
-    };
-    Selection.prototype.applyDownUpKey = function (key, cond1, cond2) {
+    Selection.prototype.applyDownUpKey = function (rowIndex, cellIndex) {
         var gObj = this.parent;
-        if (this.isRowType() && cond1) {
-            this.selectRow(gObj.selectedRowIndex + key, true);
+        if (this.isChkSelection && this.isChkAll) {
+            this.checkSelectAllAction(false);
+            this.checkedTarget = null;
+        }
+        if (this.isRowType()) {
+            this.selectRow(rowIndex, true);
             this.applyUpDown(gObj.selectedRowIndex);
         }
-        if (this.isCellType() && cond2) {
-            this.selectCell({ rowIndex: this.prevECIdxs.rowIndex + key, cellIndex: this.prevECIdxs.cellIndex }, true);
+        if (this.isCellType()) {
+            this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, true);
         }
     };
     Selection.prototype.applyUpDown = function (rowIndex) {
+        if (rowIndex < 0) {
+            return;
+        }
+        if (!this.target) {
+            this.target = this.parent.getRows()[0].children[this.parent.groupSettings.columns.length || 0];
+        }
         var cIndex = parseInt(this.target.getAttribute('aria-colindex'), 10);
@@ -801,84 +1145,18 @@ this.target = this.contentRenderer.getRowByIndex(rowIndex).querySelectorAll('.e-rowcell')[cIndex];
     };
-    Selection.prototype.rightArrowKey = function () {
-        this.preSelectedCellIndex = this.prevECIdxs;
-        this.applyRightLeftKey(1, 0, !isUndefined(this.prevECIdxs) && this.prevECIdxs.cellIndex + 1 < this.parent.getColumns().length);
-    };
-    Selection.prototype.leftArrowKey = function () {
-        this.preSelectedCellIndex = this.prevECIdxs;
-        this.applyRightLeftKey(-1, this.parent.getColumns().length - 1, !isUndefined(this.prevECIdxs) && this.prevECIdxs.cellIndex - 1 > -1);
-    };
-    Selection.prototype.applyRightLeftKey = function (key1, key2, cond) {
+    Selection.prototype.applyRightLeftKey = function (rowIndex, cellIndex) {
         var gObj = this.parent;
-        var cellIndex;
-        var rowIndex;
-        if (!isNullOrUndefined(this.prevECIdxs)) {
-            cellIndex = this.prevECIdxs.cellIndex;
-            rowIndex = this.prevECIdxs.rowIndex;
-        }
         if (this.isCellType()) {
-            if (cond && this.prevECIdxs.cellIndex + key1 > -1 &&
-                this.prevECIdxs.cellIndex + key1 < this.parent.getColumns().length) {
-                cellIndex = this.prevECIdxs.cellIndex + key1;
-                rowIndex = this.prevECIdxs.rowIndex;
-                this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, true);
-            }
-            else if (this.prevECIdxs.rowIndex + key1 > -1 &&
-                this.prevECIdxs.rowIndex + key1 < this.parent.getRows().length) {
-                cellIndex = key2;
-                rowIndex = this.prevECIdxs.rowIndex + key1;
-                this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, true);
-            }
-            if (this.isCellHide({ rowIndex: rowIndex, cellIndex: cellIndex })) {
-                if (!((cellIndex === 0 && rowIndex === 0) ||
-                    (cellIndex === gObj.getColumns().length - 1 && rowIndex === gObj.getRows().length - 1))) {
-                    this.applyRightLeftKey(key1, key2, cond);
-                }
-                else {
-                    this.selectCell(this.preSelectedCellIndex, true);
-                }
-            }
+            this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, true);
+            this.addAttribute(this.target);
         }
-        else if (this.isRowType()) {
-            var cellIndex_1 = parseInt(this.target.getAttribute('aria-colindex'), 10);
-            var rowElement = closest(this.target, 'tr');
-            if (cellIndex_1 + key1 > -1 && cellIndex_1 + key1 < this.parent.getColumns().length) {
-                var cell = rowElement.querySelectorAll('.e-rowcell')[cellIndex_1 + key1];
-                if (cell) {
-                    if (!cell.classList.contains('e-hide')) {
-                        this.addAttribute(cell);
-                    }
-                    else {
-                        key1 += key1;
-                        this.applyRightLeftKey(key1, key2, cond);
-                    }
-                }
-            }
-            else {
-                this.addAttribute(this.target);
-            }
-        }
     };
-    Selection.prototype.homeKey = function () {
-        this.applyHomeEndKey({ rowIndex: this.currentIndex || 0, cellIndex: 0 });
-    };
-    Selection.prototype.endKey = function () {
-        this.applyHomeEndKey({ rowIndex: this.currentIndex || 0, cellIndex: this.parent.getColumns().length - 1 });
-    };
-    Selection.prototype.applyHomeEndKey = function (key) {
+    Selection.prototype.applyHomeEndKey = function (rowIndex, cellIndex) {
         if (this.isCellType()) {
-            this.selectCell(key, true);
-            if (this.isCellHide(key)) {
-                if (key.cellIndex > 0) {
-                    this.applyRightLeftKey(-1, this.parent.getColumns().length - 1, true);
-                }
-                else {
-                    this.applyRightLeftKey(1, 0, true);
-                }
-            }
+            this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, true);
         }
         else {
-            this.addAttribute(this.parent.getCellFromIndex(key.rowIndex, key.cellIndex));
+            this.addAttribute(this.parent.getCellFromIndex(rowIndex, cellIndex));
         }
     };
-    Selection.prototype.shiftDownKey = function () {
+    Selection.prototype.shiftDownKey = function (rowIndex, cellIndex) {
         var gObj = this.parent;
@@ -888,9 +1166,4 @@ this.isMultiShiftRequest = true;
             if (!isUndefined(this.prevRowIndex)) {
-                var endIndex = isUndefined(gObj.selectedRowIndex) ? this.prevRowIndex + 1 :
-                    (gObj.selectedRowIndex + 1 < this.parent.getRows().length ?
-                        gObj.selectedRowIndex + 1 : gObj.selectedRowIndex);
-                if (endIndex < this.parent.getRows().length) {
-                    this.selectRowsByRange(this.prevRowIndex, endIndex);
-                    this.applyUpDown(endIndex);
-                }
+                this.selectRowsByRange(this.prevRowIndex, rowIndex);
+                this.applyUpDown(rowIndex);
             }
@@ -902,81 +1175,19 @@ else {
         if (this.isCellType() && !this.isSingleSel()) {
-            if (!isUndefined(this.prevCIdxs)) {
-                if (this.prevECIdxs.rowIndex + 1 < this.parent.getRows().length) {
-                    this.selectCellsByRange(this.prevCIdxs, { rowIndex: this.prevECIdxs.rowIndex + 1, cellIndex: this.prevECIdxs.cellIndex });
-                }
-            }
-            else {
-                this.selectCellsByRange({ rowIndex: 0, cellIndex: 0 }, { rowIndex: 1, cellIndex: 0 });
-            }
+            this.selectCellsByRange(this.prevCIdxs || { rowIndex: 0, cellIndex: 0 }, { rowIndex: rowIndex, cellIndex: cellIndex });
         }
         this.isMultiShiftRequest = false;
     };
-    Selection.prototype.shiftUpKey = function () {
+    Selection.prototype.applyShiftLeftRightKey = function (rowIndex, cellIndex) {
         var gObj = this.parent;
         this.isMultiShiftRequest = true;
-        if (this.isRowType() && !isUndefined(this.prevRowIndex) && !this.isSingleSel()) {
-            var endIndex = isUndefined(gObj.selectedRowIndex) ? (this.prevRowIndex - 1 > -1 ? (this.prevRowIndex - 1) : 0) :
-                ((gObj.selectedRowIndex - 1) > -1 ? gObj.selectedRowIndex - 1 : gObj.selectedRowIndex);
-            this.selectRowsByRange(this.prevRowIndex, endIndex);
-            this.applyUpDown(endIndex);
-        }
-        if (this.isCellType() && !isUndefined(this.prevECIdxs) && (this.prevECIdxs.rowIndex - 1) > -1 && !this.isSingleSel()) {
-            this.selectCellsByRange(this.prevCIdxs, { rowIndex: this.prevECIdxs.rowIndex - 1, cellIndex: this.prevECIdxs.cellIndex });
-        }
+        this.selectCellsByRange(this.prevCIdxs, { rowIndex: rowIndex, cellIndex: cellIndex });
         this.isMultiShiftRequest = false;
     };
-    Selection.prototype.shiftLeftKey = function () {
-        this.applyShiftLeftRightKey(-1, !isUndefined(this.prevCIdxs) && this.prevECIdxs.cellIndex - 1 > -1);
-    };
-    Selection.prototype.shiftRightKey = function () {
-        this.applyShiftLeftRightKey(1, !isUndefined(this.prevCIdxs) && this.prevECIdxs.cellIndex + 1 < this.parent.getColumns().length);
-    };
-    Selection.prototype.applyShiftLeftRightKey = function (key, cond) {
-        var gObj = this.parent;
-        var cellIndex;
-        this.isMultiShiftRequest = true;
-        if (this.isCellType() && !this.isSingleSel()) {
-            if (cond) {
-                cellIndex = { rowIndex: this.prevECIdxs.rowIndex, cellIndex: this.prevECIdxs.cellIndex + key };
-                this.selectCellsByRange(this.prevCIdxs, {
-                    rowIndex: this.prevECIdxs.rowIndex, cellIndex: this.prevECIdxs.cellIndex + key
-                });
-            }
-            else if (!this.isSingleSel()) {
-                if (this.selectionSettings.cellSelectionMode === 'flow' &&
-                    (key > 0 ? this.prevECIdxs.rowIndex + 1 < this.parent.pageSettings.pageSize : this.prevECIdxs.rowIndex - 1 > -1)) {
-                    cellIndex = { rowIndex: this.prevECIdxs.rowIndex + key, cellIndex: key > 0 ? 0 : gObj.getColumns().length - 1 };
-                    this.selectCellsByRange(this.prevCIdxs, {
-                        rowIndex: this.prevECIdxs.rowIndex + key, cellIndex: key > 0 ? 0 : gObj.getColumns().length - 1
-                    });
-                }
-            }
-            if (!isNullOrUndefined(cellIndex) && this.isCellHide(cellIndex) && !((cellIndex.rowIndex === 0 && cellIndex.cellIndex === 0) ||
-                (cellIndex.rowIndex === gObj.getRows().length - 1 && cellIndex.cellIndex === gObj.getColumns().length))) {
-                this.applyShiftLeftRightKey(key, cellIndex.cellIndex > 0);
-            }
-        }
-        this.isMultiShiftRequest = false;
-    };
-    Selection.prototype.ctrlHomeKey = function () {
-        this.applyCtrlHomeEndKey(0, 0);
-    };
-    Selection.prototype.ctrlEndKey = function () {
-        this.applyCtrlHomeEndKey(this.parent.getRows().length - 1, this.parent.getColumns().length - 1);
-    };
-    Selection.prototype.applyCtrlHomeEndKey = function (rowIndex, colIndex) {
+    Selection.prototype.applyCtrlHomeEndKey = function (rowIndex, cellIndex) {
         if (this.isRowType()) {
             this.selectRow(rowIndex, true);
-            this.addAttribute(this.parent.getCellFromIndex(rowIndex, colIndex));
+            this.addAttribute(this.parent.getCellFromIndex(rowIndex, cellIndex));
         }
         if (this.isCellType()) {
-            this.selectCell({ rowIndex: rowIndex, cellIndex: colIndex }, true);
-            if (this.isCellHide({ rowIndex: rowIndex, cellIndex: colIndex })) {
-                if (colIndex > 0) {
-                    this.applyRightLeftKey(-1, this.parent.getColumns().length - 1, true);
-                }
-                else {
-                    this.applyRightLeftKey(1, 0, true);
-                }
-            }
+            this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, true);
         }
@@ -995,12 +1206,3 @@ };
             }
-            for (var i = 0, len = cells.length; i < len; i++) {
-                if (isAdd) {
-                    classList(cells[i], args.slice(), []);
-                    cells[i].setAttribute('aria-selected', 'true');
-                }
-                else {
-                    classList(cells[i], [], args.slice());
-                    cells[i].removeAttribute('aria-selected');
-                }
-            }
+            addRemoveActiveClasses.apply(void 0, [cells, isAdd].concat(args));
         }
@@ -1018,5 +1220,2 @@ this.getRenderer().setSelection(row ? row.getAttribute('data-uid') : null, isAdd, clearAll);
     };
-    Selection.prototype.isCellHide = function (cellIndex) {
-        return !this.parent.getColumns()[cellIndex.cellIndex].visible;
-    };
     Selection.prototype.getRenderer = function () {
@@ -1028,4 +1227,15 @@ if (isNullOrUndefined(this.contentRenderer)) {
     };
+    Selection.prototype.getSelectedRecords = function () {
+        var selectedData = [];
+        if (!this.selectionSettings.persistSelection) {
+            selectedData = this.parent.getRowsObject().filter(function (row) { return row.isSelected; })
+                .map(function (m) { return m.data; });
+        }
+        else {
+            selectedData = this.persistSelectedData;
+        }
+        return selectedData;
+    };
     return Selection;
 }());
 export { Selection };

dist/es6/grid/actions/sort.js

@@ -8,3 +8,3 @@ import { Browser } from '@syncfusion/ej2-base';
 var Sort = (function () {
-    function Sort(parent, sortSettings, sortedColumns) {
+    function Sort(parent, sortSettings, sortedColumns, locator) {
         this.contentRefresh = true;
@@ -16,2 +16,3 @@ this.isModelChanged = true;
         this.sortedColumns = sortedColumns;
+        this.focus = locator.getService('focus');
         this.addEventListener();
@@ -68,7 +69,11 @@ }
     Sort.prototype.sortColumn = function (columnName, direction, isMultiSort) {
-        if (this.parent.getColumnByField(columnName).allowSorting === false) {
+        var gObj = this.parent;
+        if (this.parent.getColumnByField(columnName).allowSorting === false || this.parent.isContextMenuOpen()) {
             return;
         }
+        if (!gObj.allowMultiSorting) {
+            isMultiSort = gObj.allowMultiSorting;
+        }
         if (this.isActionPrevent()) {
-            this.parent.notify(events.preventBatch, {
+            gObj.notify(events.preventBatch, {
                 instance: this, handler: this.sortColumn,
@@ -83,3 +88,3 @@ arg1: columnName, arg2: direction, arg3: isMultiSort
         this.removeSortIcons();
-        var column = this.parent.getColumnHeaderByField(columnName);
+        var column = gObj.getColumnHeaderByField(columnName);
         this.updateSortedCols(columnName, isMultiSort);
@@ -196,2 +201,3 @@ this.updateModel();
         this.parent.on(events.headerRefreshed, this.refreshSortIcons, this);
+        this.parent.on(events.keyPressed, this.keyPressed, this);
     };
@@ -206,2 +212,3 @@ Sort.prototype.removeEventListener = function () {
         this.parent.off(events.headerRefreshed, this.refreshSortIcons);
+        this.parent.off(events.keyPressed, this.keyPressed);
     };
@@ -223,21 +230,43 @@ Sort.prototype.destroy = function () {
             !e.target.classList.contains('e-stackedheadercelldiv') &&
-            !e.target.classList.contains('e-rhandler')) {
+            !e.target.classList.contains('e-rhandler') &&
+            !e.target.classList.contains('e-columnmenu') &&
+            !e.target.classList.contains('e-filtermenudiv')) {
             var gObj = this.parent;
-            var field = gObj.getColumnByUid(target.querySelector('.e-headercelldiv').getAttribute('e-mappinguid')).field;
+            var colObj = gObj.getColumnByUid(target.querySelector('.e-headercelldiv').getAttribute('e-mappinguid'));
             var direction = !target.querySelectorAll('.e-ascending').length ? 'ascending' :
                 'descending';
-            if (!e.shiftKey) {
-                this.sortColumn(field, direction, e.ctrlKey || this.enableSortMultiTouch);
+            if (colObj.type !== 'checkbox') {
+                this.initiateSort(target, e, colObj);
+                if (Browser.isDevice) {
+                    this.showPopUp(e);
+                }
             }
-            else {
-                this.removeSortColumn(field);
+        }
+    };
+    Sort.prototype.keyPressed = function (e) {
+        if (!this.parent.isEdit && (e.action === 'enter' || e.action === 'ctrlEnter' || e.action === 'shiftEnter')) {
+            var target = this.focus.getFocusedElement();
+            if (!target || !target.classList.contains('e-headercell') || (this.parent.frozenColumns || this.parent.frozenRows)) {
+                return;
             }
-            if (Browser.isDevice) {
-                this.showPopUp(e);
-            }
+            var col = this.parent.getColumnByUid(target.querySelector('.e-headercelldiv').getAttribute('e-mappinguid'));
+            this.initiateSort(target, e, col);
         }
     };
+    Sort.prototype.initiateSort = function (target, e, column) {
+        var gObj = this.parent;
+        var field = column.field;
+        var direction = !target.querySelectorAll('.e-ascending').length ? 'ascending' :
+            'descending';
+        if (e.shiftKey || (this.sortSettings.allowUnsort && target.querySelectorAll('.e-descending').length)
+            && !(gObj.groupSettings.columns.indexOf(field) > -1)) {
+            this.removeSortColumn(field);
+        }
+        else {
+            this.sortColumn(field, direction, e.ctrlKey || this.enableSortMultiTouch);
+        }
+    };
     Sort.prototype.showPopUp = function (e) {
         var target = closest(e.target, '.e-headercell');
-        if (!isNullOrUndefined(target)) {
+        if (!isNullOrUndefined(target) || this.parent.isContextMenuOpen()) {
             setCssInGridPopUp(this.parent.element.querySelector('.e-gridpopup'), e, 'e-sortdirect e-icons e-icon-sortdirect' + (this.sortedColumns.length > 1 ? ' e-spanclicked' : ''));
@@ -244,0 +273,0 @@ }

dist/es6/grid/actions/toolbar.js

@@ -131,9 +131,3 @@ import { EventHandler, extend } from '@syncfusion/ej2-base';
         var item = this.predefinedItems[itemObject.text];
-        if (item) {
-            extend(item, item, itemObject);
-        }
-        else {
-            item = itemObject;
-        }
-        return item;
+        return item ? extend(item, item, itemObject) : itemObject;
     };
@@ -140,0 +134,0 @@ Toolbar.prototype.getItemObject = function (itemName) {

dist/es6/grid/base/constant.js

@@ -46,2 +46,7 @@ export var created = 'create';
 export var resizeStop = 'resizeStop';
+export var checkBoxChange = 'checkBoxChange';
+export var beforeCopy = 'beforeCopy';
+export var filterChoiceRequest = 'filterchoicerequest';
+export var filterAfterOpen = 'filterafteropen';
+export var filterBeforeOpen = 'filterbeforeopen';
 export var initialLoad = 'initial-load';
@@ -52,2 +57,3 @@ export var initialEnd = 'initial-end';
 export var uiUpdate = 'ui-update';
+export var onEmpty = 'on-empty';
 export var inBoundModelChanged = 'inbound-model-changed';
@@ -79,2 +85,4 @@ export var modelChanged = 'model-changed';
 export var cellSelectionComplete = 'cellselected';
+export var beforeCellFocused = 'beforecellfocused';
+export var cellFocused = 'cellfocused';
 export var keyPressed = 'key-pressed';
@@ -120,1 +128,10 @@ export var click = 'click';
 export var pdfQueryCellInfo = 'pdfQueryCellInfo';
+export var accessPredicate = 'access-predicate';
+export var contextMenuClick = 'contextMenuClick';
+export var freezeRefresh = 'freezerefresh';
+export var contextMenuOpen = 'contextMenuOpen';
+export var columnMenuClick = 'contextMenuClick';
+export var columnMenuOpen = 'columnMenuOpen';
+export var filterOpen = 'filterOpen';
+export var filterDialogCreated = 'filterDialogCreated';
+export var filterMenuClose = 'filter-menu-close';

dist/es6/grid/base/enum.js

@@ -17,2 +17,3 @@ export var CellType;
     CellType[CellType["DetailExpand"] = 13] = "DetailExpand";
+    CellType[CellType["CommandColumn"] = 14] = "CommandColumn";
 })(CellType || (CellType = {}));
@@ -19,0 +20,0 @@ export var RenderType;

dist/es6/grid/base/util.js

@@ -1,2 +0,2 @@
-import { ChildProperty, compile as baseTemplateComplier } from '@syncfusion/ej2-base';
+import { ChildProperty, compile as baseTemplateComplier, classList } from '@syncfusion/ej2-base';
 import { extend as baseExtend, isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
@@ -6,2 +6,3 @@ import { setStyleAttribute, addClass, attributes, createElement, remove } from '@syncfusion/ej2-base';
 import { Column } from '../models/column';
+import { calculateRelativeBasedPosition } from '@syncfusion/ej2-popups';
 export function doesImplementInterface(target, checkFor) {
@@ -289,1 +290,74 @@ return target.prototype && checkFor in target.prototype;
 }
+export function setFormatter(serviceLocator, column) {
+    var fmtr = serviceLocator.getService('valueFormatter');
+    switch (column.type) {
+        case 'date':
+            column.setFormatter(fmtr.getFormatFunction({ type: 'date', skeleton: column.format }));
+            column.setParser(fmtr.getParserFunction({ type: 'date', skeleton: column.format }));
+            break;
+        case 'datetime':
+            column.setFormatter(fmtr.getFormatFunction({ type: 'dateTime', skeleton: column.format }));
+            column.setParser(fmtr.getParserFunction({ type: 'dateTime', skeleton: column.format }));
+            break;
+        case 'number':
+            column.setFormatter(fmtr.getFormatFunction({ format: column.format }));
+            column.setParser(fmtr.getParserFunction({ format: column.format }));
+            break;
+    }
+}
+export function addRemoveActiveClasses(cells, add) {
+    var args = [];
+    for (var _i = 2; _i < arguments.length; _i++) {
+        args[_i - 2] = arguments[_i];
+    }
+    for (var i = 0, len = cells.length; i < len; i++) {
+        if (add) {
+            classList(cells[i], args.slice(), []);
+            cells[i].setAttribute('aria-selected', 'true');
+        }
+        else {
+            classList(cells[i], [], args.slice());
+            cells[i].removeAttribute('aria-selected');
+        }
+    }
+}
+export function distinctStringValues(result) {
+    var temp = {};
+    var res = [];
+    for (var i = 0; i < result.length; i++) {
+        if (!(result[i] in temp)) {
+            res.push(result[i].toString());
+            temp[result[i]] = 1;
+        }
+    }
+    return res;
+}
+export function getFilterMenuPostion(target, dialogObj) {
+    var elementVisible = dialogObj.element.style.display;
+    dialogObj.element.style.display = 'block';
+    var dlgWidth = dialogObj.width;
+    var newpos = calculateRelativeBasedPosition(target, dialogObj.element);
+    dialogObj.element.style.display = elementVisible;
+    dialogObj.element.style.top = (newpos.top + target.getBoundingClientRect().height) - 5 + 'px';
+    var leftPos = ((newpos.left - dlgWidth) + target.clientWidth);
+    if (leftPos < 1) {
+        dialogObj.element.style.left = (dlgWidth + leftPos) - 16 + 'px';
+    }
+    else {
+        dialogObj.element.style.left = leftPos + -4 + 'px';
+    }
+}
+export function getZIndexCalcualtion(args, dialogObj) {
+    args.popup.element.style.zIndex = (dialogObj.zIndex + 1).toString();
+}
+export function toogleCheckbox(elem) {
+    var span = elem.querySelector('.e-frame');
+    span.classList.contains('e-check') ? classList(span, ['e-uncheck'], ['e-check']) :
+        classList(span, ['e-check'], ['e-uncheck']);
+}
+export function createCboxWithWrap(uid, elem, className) {
+    var div = createElement('div', { className: className });
+    div.appendChild(elem);
+    div.setAttribute('uid', uid);
+    return div;
+}

dist/es6/grid/models/cell.js

 import { merge } from '@syncfusion/ej2-base';
 var Cell = (function () {
     function Cell(options) {
+        this.isSpanned = false;
         merge(this, options);
@@ -5,0 +6,0 @@ }

dist/es6/grid/models/column.js

@@ -10,3 +10,6 @@ import { merge } from '@syncfusion/ej2-base';
         this.allowGrouping = true;
+        this.showColumnMenu = true;
+        this.enableGroupByFormat = false;
         this.allowEditing = true;
+        this.filter = {};
         this.showInColumnChooser = true;
@@ -25,5 +28,11 @@ merge(this, options);
         }
-        if (this.template) {
-            this.templateFn = templateCompiler(this.template);
+        if (this.commands && !this.textAlign) {
+            this.textAlign = 'right';
         }
+        if (this.template || this.commandsTemplate) {
+            this.templateFn = templateCompiler(this.template || this.commandsTemplate);
+        }
+        if (this.filter.itemTemplate) {
+            this.fltrTemplateFn = templateCompiler(this.filter.itemTemplate);
+        }
     }
@@ -45,2 +54,5 @@ Column.prototype.getFormatter = function () {
     };
+    Column.prototype.getFilterItemTemplate = function () {
+        return this.fltrTemplateFn;
+    };
     Column.prototype.getDomSetter = function () {
@@ -47,0 +59,0 @@ return this.disableHtmlEncode ? 'textContent' : 'innerHTML';

dist/es6/grid/renderer.js

@@ -20,1 +20,4 @@ export * from './renderer/header-renderer';
 export * from './renderer/numeric-edit-cell';
+export * from './renderer/datepicker-edit-cell';
+export * from './renderer/command-column-renderer';
+export * from './renderer/freeze-renderer';

dist/es6/grid/renderer/boolean-edit-cell.js

@@ -1,5 +0,8 @@
-import { createElement } from '@syncfusion/ej2-base';
-import { isEditable } from '../base/util';
+import { createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { CheckBox } from '@syncfusion/ej2-buttons';
+import { extend } from '@syncfusion/ej2-base';
+import { isEditable, addRemoveActiveClasses } from '../base/util';
 var BooleanEditCell = (function () {
     function BooleanEditCell(parent) {
+        this.activeClasses = ['e-selectionbackground', 'e-active'];
         this.parent = parent;
@@ -9,4 +12,8 @@ }
         var col = args.column;
-        var input = createElement('input', {
-            className: 'e-field e-boolcell', attrs: {
+        var classNames = 'e-field e-boolcell';
+        if (col.type === 'checkbox') {
+            classNames = 'e-field e-boolcell e-edit-checkselect';
+        }
+        return createElement('input', {
+            className: classNames, attrs: {
                 type: 'checkbox', value: args.value, 'e-mappinguid': col.uid,
@@ -16,9 +23,2 @@ id: this.parent.element.id + col.field, name: col.field
         });
-        if (!isEditable(args.column, args.requestType, args.element)) {
-            input.setAttribute('disabled', 'true');
-        }
-        if (args.value) {
-            input.checked = true;
-        }
-        return input;
     };
@@ -29,5 +29,44 @@ BooleanEditCell.prototype.read = function (element) {
     BooleanEditCell.prototype.write = function (args) {
-        args.element.style.width = 'auto';
+        var selectChkBox;
+        var chkState;
+        if (!isNullOrUndefined(args.row)) {
+            selectChkBox = args.row.querySelector('.e-edit-checkselect');
+        }
+        if (args.rowData[args.column.field]) {
+            chkState = JSON.parse(args.rowData[args.column.field].toString().toLowerCase());
+        }
+        if (!isNullOrUndefined(selectChkBox)) {
+            this.editType = this.parent.editSettings.mode;
+            this.editRow = args.row;
+            if (args.requestType !== 'add') {
+                var row = this.parent.getRowObjectFromUID(args.row.getAttribute('data-uid'));
+                chkState = row ? row.isSelected : false;
+            }
+            addRemoveActiveClasses.apply(void 0, [[].slice.call(args.row.querySelectorAll('.e-rowcell')), chkState].concat(this.activeClasses));
+        }
+        this.obj = new CheckBox(extend({
+            label: this.parent.editSettings.mode !== 'dialog' ? '' : args.column.headerText,
+            checked: chkState,
+            disabled: !isEditable(args.column, args.requestType, args.element), enableRtl: this.parent.enableRtl,
+            change: this.checkBoxChange.bind(this)
+        }, args.column.edit.params));
+        this.obj.appendTo(args.element);
     };
+    BooleanEditCell.prototype.checkBoxChange = function (args) {
+        if (this.editRow && this.editType !== 'dialog') {
+            var add = false;
+            if (!args.checked) {
+                this.editRow.removeAttribute('aria-selected');
+            }
+            else {
+                add = true;
+                this.editRow.setAttribute('aria-selected', add.toString());
+            }
+            addRemoveActiveClasses.apply(void 0, [[].slice.call(this.editRow.querySelectorAll('.e-rowcell')), add].concat(this.activeClasses));
+        }
+    };
     BooleanEditCell.prototype.destroy = function () {
+        if (this.obj) {
+            this.obj.destroy();
+        }
     };
@@ -34,0 +73,0 @@ return BooleanEditCell;

dist/es6/grid/renderer/caption-cell-renderer.js

@@ -11,4 +11,5 @@ var __extends = (this && this.__extends) || (function () {
 })();
-import { createElement } from '@syncfusion/ej2-base';
+import { createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { CellRenderer } from './cell-renderer';
+import { appendChildren, templateCompiler } from '../base/util';
 var GroupCaptionCellRenderer = (function (_super) {
@@ -23,5 +24,20 @@ __extends(GroupCaptionCellRenderer, _super);
         var node = this.element.cloneNode();
-        var value = this.format(cell.column, cell.column.valueAccessor('key', data, cell.column));
-        node.innerHTML = cell.column.headerText + ': ' + value + ' - ' + data.count + ' ' +
-            (data.count < 2 ? this.localizer.getConstant('Item') : this.localizer.getConstant('Items'));
+        var gObj = this.parent;
+        var result;
+        var helper = {};
+        var value = cell.column.enableGroupByFormat ? data.key :
+            this.format(cell.column, cell.column.valueAccessor('key', data, cell.column));
+        if (!isNullOrUndefined(gObj.groupSettings.captionTemplate)) {
+            if (gObj.groupSettings.captionTemplate.indexOf('#') !== -1) {
+                result = templateCompiler(document.querySelector(gObj.groupSettings.captionTemplate).innerHTML.trim())(data);
+            }
+            else {
+                result = templateCompiler(gObj.groupSettings.captionTemplate)(data);
+            }
+            appendChildren(node, result);
+        }
+        else {
+            node.innerHTML = cell.column.headerText + ': ' + value + ' - ' + data.count + ' ' +
+                (data.count < 2 ? this.localizer.getConstant('Item') : this.localizer.getConstant('Items'));
+        }
         node.setAttribute('colspan', cell.colSpan.toString());
@@ -28,0 +44,0 @@ node.setAttribute('aria-label', node.innerHTML + ' is groupcaption cell');

dist/es6/grid/renderer/cell-renderer.js

 import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';
 import { createElement } from '@syncfusion/ej2-base';
 import { doesImplementInterface, setStyleAndAttributes, appendChildren } from '../base/util';
+import { CheckBox } from '@syncfusion/ej2-buttons';
 var CellRenderer = (function () {
     function CellRenderer(parent, locator) {
         this.element = createElement('TD', { className: 'e-rowcell', attrs: { role: 'gridcell', tabindex: '-1' } });
+        this.rowChkBox = createElement('input', { className: 'e-checkselect', attrs: { 'type': 'checkbox' } });
         this.localizer = locator.getService('localization');
@@ -73,3 +75,3 @@ this.formatter = locator.getService('valueFormatter');
                 node.classList.add('e-checkbox');
-                innerHtml = isNull ? null : '<input type="checkbox" disabled ' + (value === 'true' ? 'checked' : '') + '/>';
+                innerHtml = isNull ? null : '<input type="checkbox" disabled ' + '/>';
             }
@@ -84,6 +86,24 @@ else {
         node.setAttribute('aria-label', innerHtml + ' column header ' + cell.column.headerText);
-        if (this.evaluate(node, cell, data, attributes)) {
+        if (this.evaluate(node, cell, data, attributes) && column.type !== 'checkbox') {
             this.appendHtml(node, innerHtml, column.getDomSetter ? column.getDomSetter() : 'innerHTML');
         }
+        else if (column.type === 'checkbox') {
+            node.classList.add('e-gridchkbox');
+            node.setAttribute('aria-label', 'column header ' + cell.column.headerText);
+            var checkBox = this.rowChkBox.cloneNode();
+            checkBox.id = 'checkselect_' + cell.rowID.split('grid-row')[1];
+            node.appendChild(checkBox);
+            if (this.parent.selectionSettings.persistSelection) {
+                value = value === 'true';
+            }
+            else {
+                value = false;
+            }
+            new CheckBox({ checked: value }).appendTo(checkBox);
+        }
         this.setAttributes(node, cell, attributes);
+        if (column.type === 'boolean') {
+            var obj = new CheckBox({ disabled: true, checked: value === 'true' });
+            obj.appendTo(node.firstElementChild);
+        }
         return node;
@@ -90,0 +110,0 @@ };

dist/es6/grid/renderer/content-renderer.js

@@ -7,2 +7,3 @@ import { Droppable, Browser } from '@syncfusion/ej2-base';
 import { RowRenderer } from './row-renderer';
+import { CellMergeRender } from './cell-merge-renderer';
 import { RowModelGenerator } from '../services/row-model-generator';
@@ -14,2 +15,3 @@ import { GroupModelGenerator } from '../services/group-model-generator';
         this.rows = [];
+        this.isLoaded = true;
         this.drop = function (e) {
@@ -19,15 +21,17 @@ _this.parent.notify(events.columnDrop, { target: e.target, droppedElement: e.droppedElement });
         };
-        this.rafCallback = function () {
-            _this.ariaService.setBusy(_this.getPanel().firstChild, false);
-            if (_this.parent.isDestroyed) {
-                return;
+        this.rafCallback = function (args) { return function () {
+            if (_this.isLoaded) {
+                _this.ariaService.setBusy(_this.getPanel().firstChild, false);
+                if (_this.parent.isDestroyed) {
+                    return;
+                }
+                _this.parent.notify(events.contentReady, { rows: _this.rows, args: args });
+                _this.parent.trigger(events.dataBound, {});
+                if (args) {
+                    var action = (args.requestType || '').toLowerCase() + '-complete';
+                    _this.parent.notify(action, args);
+                }
+                _this.parent.hideSpinner();
             }
-            _this.parent.notify(events.contentReady, {});
-            _this.parent.trigger(events.dataBound, {});
-            if (_this.args) {
-                var action = (_this.args.requestType || '').toLowerCase() + '-complete';
-                _this.parent.notify(action, _this.args);
-            }
-            _this.parent.hideSpinner();
-        };
+        }; };
         this.parent = parent;
@@ -86,8 +90,24 @@ this.serviceLocator = serviceLocator;
         var frag = document.createDocumentFragment();
+        var hdrfrag = document.createDocumentFragment();
         var columns = gObj.getColumns();
         var tr;
+        var tbody;
         var row = new RowRenderer(this.serviceLocator, null, this.parent);
         this.rowElements = [];
+        this.rows = [];
         var modelData = this.generator.generateRows(dataSource, args);
-        var tbody = this.getTable().querySelector('tbody');
+        var idx = modelData[0].cells[0].index;
+        var fCont = this.getPanel().querySelector('.e-frozencontent');
+        var mCont = this.getPanel().querySelector('.e-movablecontent');
+        var cont = this.getPanel().querySelector('.e-content');
+        if (this.parent.enableColumnVirtualization) {
+            var cellMerge = new CellMergeRender(this.serviceLocator, this.parent);
+            cellMerge.updateVirtualCells(modelData);
+        }
+        if (this.parent.frozenColumns && idx >= this.parent.frozenColumns) {
+            tbody = mCont.querySelector('tbody');
+        }
+        else {
+            tbody = this.getTable().querySelector('tbody');
+        }
         for (var i = 0, len = modelData.length; i < len; i++) {
@@ -106,3 +126,8 @@ if (!gObj.rowTemplate) {
             }
-            frag.appendChild(tr);
+            if (gObj.frozenRows && i < gObj.frozenRows) {
+                hdrfrag.appendChild(tr);
+            }
+            else {
+                frag.appendChild(tr);
+            }
             this.rows.push(modelData[i]);
@@ -120,6 +145,43 @@ if (modelData[i].isDataRow) {
         getUpdateUsingRaf(function () {
+            var hdrTbody;
             remove(tbody);
             tbody = createElement('tbody');
-            _this.appendContent(tbody, frag, args);
-        }, this.rafCallback);
+            if (gObj.frozenColumns) {
+                tbody.appendChild(frag);
+                if (idx === 0) {
+                    _this.isLoaded = false;
+                    fCont.querySelector('table').appendChild(tbody);
+                    _this.getPanel().firstChild.style.overflowY = 'hidden';
+                }
+                else {
+                    _this.isLoaded = true;
+                    mCont.querySelector('table').appendChild(tbody);
+                }
+                if (gObj.frozenRows) {
+                    hdrTbody = gObj.getHeaderContent().querySelector(idx === 0 ? '.e-frozenheader'
+                        : '.e-movableheader').querySelector('tbody');
+                    hdrTbody.innerHTML = '';
+                    hdrTbody.appendChild(hdrfrag);
+                }
+                fCont.style.height
+                    = ((mCont.offsetHeight) - 17) + 'px';
+                mCont.style.overflow = 'scroll';
+            }
+            else {
+                _this.appendContent(tbody, frag, args);
+            }
+            if (gObj.frozenRows && !gObj.frozenColumns) {
+                hdrTbody = gObj.getHeaderTable().querySelector('tbody');
+                hdrTbody.innerHTML = '';
+                hdrTbody.appendChild(hdrfrag);
+            }
+            if (gObj.frozenRows && idx === 0 && cont.offsetHeight === gObj.height) {
+                cont.style.height =
+                    (cont.offsetHeight -
+                        gObj.getHeaderContent().querySelector('tbody').offsetHeight) + 'px';
+            }
+            if (gObj.frozenColumns && idx === 0) {
+                _this.refreshContentRows(args);
+            }
+        }, this.rafCallback(args));
     };
@@ -126,0 +188,0 @@ ContentRender.prototype.appendContent = function (tbody, frag, args) {

dist/es6/grid/renderer/dialog-edit-renderer.js

 import { Dialog } from '@syncfusion/ej2-popups';
-import { remove, createElement, Browser } from '@syncfusion/ej2-base';
+import { remove, createElement } from '@syncfusion/ej2-base';
 import * as events from '../base/constant';
@@ -9,2 +9,5 @@ import { changeButtonType } from '../base/util';
         this.serviceLocator = serviceLocator;
+        if (this.parent.isDestroyed) {
+            return;
+        }
         this.parent.on(events.dialogDestroy, this.destroy, this);
@@ -31,3 +34,3 @@ this.parent.on(events.destroy, this.destroy, this);
             header: this.isEdit ? this.l10n.getConstant('EditFormTitle') + args.primaryKeyValue[0] :
-                this.l10n.getConstant('AddFormTitle'), isModal: true, visible: true,
+                this.l10n.getConstant('AddFormTitle'), isModal: true, visible: true, cssClass: 'e-edit-dialog',
             content: this.getEditElement(elements), showCloseIcon: true, allowDragging: true, close: this.destroy.bind(this),
@@ -70,3 +73,3 @@ closeOnEscape: true, width: '330px', target: gObj.element, animationSettings: { effect: 'None' },
         for (var i = 0; i < cols.length; i++) {
-            if (!cols[i].visible) {
+            if (!cols[i].visible || cols[i].commands || cols[i].commandsTemplate) {
                 continue;
@@ -78,12 +81,3 @@ }
             elements[cols[i].uid].classList.remove('e-input');
-            if (cols[i].editType === 'booleanedit') {
-                var elem = dataCell.appendChild(elements[cols[i].uid]);
-                var lbl = createElement('label', { className: 'e-noselect', attrs: { for: elem.id, style: Browser.isDevice ? '' : 'vertical-align: top;' } });
-                lbl.innerHTML = cols[i].headerText;
-                dataCell.appendChild(elem);
-                dataCell.appendChild(lbl);
-            }
-            else {
-                dataCell.appendChild(elements[cols[i].uid]);
-            }
+            dataCell.appendChild(elements[cols[i].uid]);
             tr.appendChild(dataCell);
@@ -90,0 +84,0 @@ tbody.appendChild(tr);

dist/es6/grid/renderer/dropdown-edit-cell.js

@@ -1,2 +0,2 @@
-import { extend } from '@syncfusion/ej2-base';
+import { extend, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { createElement } from '@syncfusion/ej2-base';
@@ -6,2 +6,3 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
 import { isEditable } from '../base/util';
+import { parentsUntil } from '../base/util';
 var DropDownEditCell = (function () {
@@ -28,3 +29,3 @@ function DropDownEditCell(parent) {
             placeholder: isInline ? '' : args.column.headerText, popupHeight: '200px',
-            floatLabelType: isInline ? 'Never' : 'Always',
+            floatLabelType: isInline ? 'Never' : 'Always', open: this.dropDownOpen.bind(this),
         }, args.column.edit.params));
@@ -41,2 +42,9 @@ this.obj.appendTo(args.element);
     };
+    DropDownEditCell.prototype.dropDownOpen = function (args) {
+        var dlgElement = parentsUntil(this.obj.element, 'e-dialog');
+        if (!isNullOrUndefined(dlgElement)) {
+            var dlgObj = this.parent.element.querySelector('#' + dlgElement.id).ej2_instances[0];
+            args.popup.element.style.zIndex = (dlgObj.zIndex + 1).toString();
+        }
+    };
     DropDownEditCell.prototype.destroy = function () {
@@ -43,0 +51,0 @@ if (this.obj) {

dist/es6/grid/renderer/edit-renderer.js

@@ -1,2 +0,2 @@
-import { getValue } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, closest } from '@syncfusion/ej2-base';
 import { InlineEditRender } from './inline-edit-renderer';
@@ -6,2 +6,4 @@ import { BatchEditRender } from './batch-edit-renderer';
 import { createElement, attributes, classList } from '@syncfusion/ej2-base';
+import { CellType } from '../base/enum';
+import { RowModelGenerator } from '../services/row-model-generator';
 var EditRender = (function () {
@@ -16,2 +18,3 @@ function EditRender(parent, serviceLocator) {
         this.renderer = new this.editType[this.parent.editSettings.mode](parent, serviceLocator);
+        this.focus = serviceLocator.getService('focus');
     }
@@ -35,3 +38,3 @@ EditRender.prototype.addNew = function (args) {
             var col = cols_1[_i];
-            if (!col.visible) {
+            if (!col.visible || col.commands) {
                 continue;
@@ -42,8 +45,7 @@ }
             var temp = col.edit.write;
-            if (typeof temp === 'string') {
-                temp = getValue(temp, window);
-            }
-            col.edit.write({ rowData: args.rowData, element: cell, column: col, requestType: args.requestType });
+            col.edit.write({
+                rowData: args.rowData, element: cell, column: col, requestType: args.requestType, row: args.row
+            });
             if (!isFocused && !cell.getAttribute('disabled')) {
-                this.focusElement(cell);
+                this.focusElement(cell, args.type);
                 isFocused = true;
@@ -53,4 +55,13 @@ }
     };
-    EditRender.prototype.focusElement = function (elem) {
-        elem.focus();
+    EditRender.prototype.focusElement = function (elem, type) {
+        var chkBox = this.parent.element.querySelector('.e-edit-checkselect');
+        if (!isNullOrUndefined(chkBox)) {
+            chkBox.nextElementSibling.classList.add('e-focus');
+        }
+        if (this.parent.editSettings.mode === 'batch') {
+            this.focus.onClick({ target: closest(elem, 'td') }, true);
+        }
+        else {
+            elem.focus();
+        }
         if (elem.classList.contains('e-defaultcell')) {
@@ -64,9 +75,20 @@ elem.setSelectionRange(elem.value.length, elem.value.length);
         var cols = gObj.editSettings.mode !== 'batch' ? gObj.columns : [gObj.getColumnByField(args.columnName)];
-        for (var _i = 0, cols_2 = cols; _i < cols_2.length; _i++) {
-            var col = cols_2[_i];
+        for (var i = 0, len = cols.length; i < len; i++) {
+            var col = cols[i];
             if (!col.visible) {
                 continue;
             }
+            if (col.commands || col.commandsTemplate) {
+                var cellRendererFact = this.serviceLocator.getService('cellRendererFactory');
+                var model = new RowModelGenerator(this.parent);
+                var cellRenderer = cellRendererFact.getCellRenderer(CellType.CommandColumn);
+                var cells = model.generateRows(args.rowData)[0].cells;
+                var td = cellRenderer.render(cells[i], args.rowData, { 'index': args.row ? args.row.getAttribute('aria-rowindex') : 0 });
+                var div = td.firstElementChild;
+                div.setAttribute('textAlign', td.getAttribute('textAlign'));
+                elements[col.uid] = div;
+                continue;
+            }
             var value = col.valueAccessor(col.field, args.rowData, col);
-            var tArgs = { column: col, value: value, type: args.requestType };
+            var tArgs = { column: col, value: value, type: args.requestType, data: args.rowData };
             var temp = col.edit.create;
@@ -73,0 +95,0 @@ var input = void 0;

dist/es6/grid/renderer/filter-cell-renderer.js

@@ -29,71 +29,73 @@ var __extends = (this && this.__extends) || (function () {
         var column = cell.column;
-        if ((isNullOrUndefined(column.allowFiltering) || column.allowFiltering) && !isNullOrUndefined(column.filterBarTemplate)) {
-            node.classList.add('e-fltrtemp');
-            attributes(innerDIV, {
-                'class': 'e-fltrtempdiv'
-            });
-            if (isNullOrUndefined(column.filterBarTemplate.create)) {
-                input = createElement('input', {
-                    id: column.field + '_filterBarcell', className: 'e-filterUi_input e-filtertext e-fltrTemp',
-                    attrs: { type: 'search', title: column.headerText }
+        if (column.type !== 'checkbox') {
+            if ((isNullOrUndefined(column.allowFiltering) || column.allowFiltering) && !isNullOrUndefined(column.filterBarTemplate)) {
+                node.classList.add('e-fltrtemp');
+                attributes(innerDIV, {
+                    'class': 'e-fltrtempdiv'
                 });
-                innerDIV.appendChild(input);
+                if (isNullOrUndefined(column.filterBarTemplate.create)) {
+                    input = createElement('input', {
+                        id: column.field + '_filterBarcell', className: 'e-filterUi_input e-filtertext e-fltrTemp',
+                        attrs: { type: 'search', title: column.headerText }
+                    });
+                    innerDIV.appendChild(input);
+                }
+                else {
+                    var args = { column: column };
+                    var temp = column.filterBarTemplate.create;
+                    if (typeof temp === 'string') {
+                        temp = getValue(temp, window);
+                    }
+                    input = temp(args);
+                    if (typeof input === 'string') {
+                        var div = createElement('div');
+                        div.innerHTML = input;
+                        input = div.firstChild;
+                    }
+                    attributes(innerDIV, {
+                        class: 'e-filterUi_input e-filtertext e-fltrTemp',
+                        title: column.headerText,
+                        id: column.field + '_filterBarcell',
+                    });
+                    innerDIV.appendChild(input);
+                }
             }
             else {
-                var args = { column: column };
-                var temp = column.filterBarTemplate.create;
-                if (typeof temp === 'string') {
-                    temp = getValue(temp, window);
-                }
-                input = temp(args);
-                if (typeof input === 'string') {
-                    var div = createElement('div');
-                    div.innerHTML = input;
-                    input = div.firstChild;
-                }
                 attributes(innerDIV, {
-                    class: 'e-filterUi_input e-filtertext e-fltrTemp',
-                    title: column.headerText,
-                    id: column.field + '_filterBarcell',
+                    'class': 'e-filterdiv e-fltrinputdiv'
                 });
+                input = createElement('input', {
+                    id: column.field + '_filterBarcell', className: 'e-filtertext',
+                    attrs: {
+                        type: 'search', title: column.headerText + cell.attributes.title,
+                        value: data[cell.column.field] ? data[cell.column.field] : '', role: 'search'
+                    }
+                });
                 innerDIV.appendChild(input);
+                innerDIV.appendChild(createElement('span', {
+                    className: 'e-cancel e-hide e-icons e-icon-hide',
+                    attrs: { 'aria-label': 'clear filter cell', tabindex: '-1' }
+                }));
             }
-        }
-        else {
-            attributes(innerDIV, {
-                'class': 'e-filterdiv e-fltrinputdiv'
-            });
-            input = createElement('input', {
-                id: column.field + '_filterBarcell', className: 'e-filtertext',
-                attrs: {
-                    type: 'search', title: column.headerText + cell.attributes.title,
-                    value: data[cell.column.field] ? data[cell.column.field] : '', role: 'search'
+            if (column.allowFiltering === false || column.field === '' || isNullOrUndefined(column.field)) {
+                input.setAttribute('disabled', 'true');
+                input.classList.add('e-disable');
+            }
+            if (!column.visible) {
+                node.classList.add('e-hide');
+            }
+            if ((isNullOrUndefined(column.allowFiltering) || column.allowFiltering) && !isNullOrUndefined(column.filterBarTemplate)) {
+                var templateRead = column.filterBarTemplate.read;
+                var templateWrite = column.filterBarTemplate.write;
+                var args = { element: input, column: column };
+                if (typeof templateRead === 'string') {
+                    templateRead = args.column = getValue(templateRead, window);
                 }
-            });
-            innerDIV.appendChild(input);
-            innerDIV.appendChild(createElement('span', {
-                className: 'e-cancel e-hide e-icons e-icon-hide',
-                attrs: { 'aria-label': 'clear filter cell', tabindex: '-1' }
-            }));
-        }
-        if (column.allowFiltering === false || column.field === '' || isNullOrUndefined(column.field)) {
-            input.setAttribute('disabled', 'true');
-            input.classList.add('e-disable');
-        }
-        if (!column.visible) {
-            node.classList.add('e-hide');
-        }
-        if ((isNullOrUndefined(column.allowFiltering) || column.allowFiltering) && !isNullOrUndefined(column.filterBarTemplate)) {
-            var templateRead = column.filterBarTemplate.read;
-            var templateWrite = column.filterBarTemplate.write;
-            var args = { element: input, column: column };
-            if (typeof templateRead === 'string') {
-                templateRead = args.column = getValue(templateRead, window);
+                if (typeof templateWrite === 'string') {
+                    templateWrite = getValue(templateWrite, window);
+                }
+                templateWrite.call(this, args);
             }
-            if (typeof templateWrite === 'string') {
-                templateWrite = getValue(templateWrite, window);
-            }
-            templateWrite.call(this, args);
+            this.appendHtml(node, innerDIV);
         }
-        this.appendHtml(node, innerDIV);
         return node;
@@ -100,0 +102,0 @@ };

dist/es6/grid/renderer/footer-renderer.js

@@ -58,3 +58,3 @@ var __extends = (this && this.__extends) || (function () {
         var fragment = document.createDocumentFragment();
-        var rowrenderer = new RowRenderer(this.locator);
+        var rowrenderer = new RowRenderer(this.locator, null, this.parent);
         rowrenderer.element = createElement('TR', { className: 'e-summaryrow' });
@@ -61,0 +61,0 @@ for (var srow = 0, len = summaries.length; srow < len; srow++) {

dist/es6/grid/renderer/header-cell-renderer.js

@@ -16,2 +16,3 @@ var __extends = (this && this.__extends) || (function () {
 import { AriaService } from '../services/aria-service';
+import { CheckBox } from '@syncfusion/ej2-buttons';
 var HeaderCellRenderer = (function (_super) {
@@ -26,2 +27,3 @@ __extends(HeaderCellRenderer, _super);
         _this.gui = createElement('div');
+        _this.chkAllBox = createElement('input', { className: 'e-checkselectall', attrs: { 'type': 'checkbox' } });
         return _this;
@@ -34,7 +36,9 @@ }
         var node = this.element.cloneNode();
-        return this.prepareHeader(cell, node);
+        var fltrMenuEle = createElement('div', { className: 'e-filtermenudiv e-icons e-icon-filter' });
+        return this.prepareHeader(cell, node, fltrMenuEle);
     };
     HeaderCellRenderer.prototype.refresh = function (cell, node) {
         this.clean(node);
-        return this.prepareHeader(cell, node);
+        var fltrMenuEle = createElement('div', { className: 'e-filtermenudiv e-icons e-icon-filter' });
+        return this.prepareHeader(cell, node, fltrMenuEle);
     };
@@ -44,10 +48,6 @@ HeaderCellRenderer.prototype.clean = function (node) {
     };
-    HeaderCellRenderer.prototype.prepareHeader = function (cell, node) {
+    HeaderCellRenderer.prototype.prepareHeader = function (cell, node, fltrMenuEle) {
         var column = cell.column;
         var ariaAttr = {};
         var innerDIV = this.getGui();
-        var value = column.headerText;
-        var headerText = this.hTxtEle.cloneNode();
-        headerText[column.getDomSetter()] = value;
-        innerDIV.appendChild(headerText);
         attributes(innerDIV, {
@@ -57,5 +57,40 @@ 'e-mappinguid': column.uid,
         });
+        if (column.type !== 'checkbox') {
+            var value = column.headerText;
+            var headerText = this.hTxtEle.cloneNode();
+            headerText[column.getDomSetter()] = value;
+            innerDIV.appendChild(headerText);
+        }
+        else {
+            column.editType = 'booleanedit';
+            var checkAllBox = this.chkAllBox.cloneNode();
+            innerDIV.appendChild(checkAllBox);
+            var checkAllBoxObj = new CheckBox();
+            checkAllBoxObj.appendTo(checkAllBox);
+            innerDIV.classList.add('e-headerchkcelldiv');
+        }
         this.buildAttributeFromCell(node, cell);
         this.appendHtml(node, innerDIV);
         node.appendChild(this.sortEle.cloneNode());
+        if ((this.parent.allowFiltering && this.parent.filterSettings.type !== 'filterbar') &&
+            (column.allowFiltering && isNullOrUndefined(column.template)) &&
+            !(this.parent.showColumnMenu && column.showColumnMenu)) {
+            attributes(fltrMenuEle, {
+                'e-mappinguid': 'e-flmenu-' + column.uid,
+            });
+            node.classList.add('e-fltr-icon');
+            var matchFlColumns = [];
+            if (this.parent.filterSettings.columns.length && this.parent.filterSettings.columns.length !== matchFlColumns.length) {
+                for (var index = 0; index < this.parent.columns.length; index++) {
+                    for (var count = 0; count < this.parent.filterSettings.columns.length; count++) {
+                        if (this.parent.filterSettings.columns[count].field === column.field) {
+                            fltrMenuEle.classList.add('e-filtered');
+                            matchFlColumns.push(column.field);
+                            break;
+                        }
+                    }
+                }
+            }
+            node.appendChild(fltrMenuEle.cloneNode());
+        }
         if (cell.className) {
@@ -73,6 +108,10 @@ node.classList.add(cell.className);
         }
-        if (this.parent.allowResizing) {
-            var handler = createElement('div');
-            handler.className = column.allowResizing ? 'e-rhandler e-rcursor' : 'e-rsuppress';
-            node.appendChild(handler);
+        node = this.extendPrepareHeader(column, node);
+        if (!isNullOrUndefined(column.headerTemplate)) {
+            if (column.headerTemplate.indexOf('#') !== -1) {
+                innerDIV.innerHTML = document.querySelector(column.headerTemplate).innerHTML.trim();
+            }
+            else {
+                innerDIV.innerHTML = column.headerTemplate;
+            }
         }
@@ -97,2 +136,27 @@ this.ariaService.setOptions(node, ariaAttr);
     };
+    HeaderCellRenderer.prototype.extendPrepareHeader = function (column, node) {
+        if (this.parent.showColumnMenu && column.showColumnMenu) {
+            var element = (createElement('div', { className: 'e-icons e-columnmenu' }));
+            var matchFilteredColumns = [];
+            if (this.parent.filterSettings.columns.length && this.parent.filterSettings.columns.length !== matchFilteredColumns.length) {
+                for (var i = 0; i < this.parent.columns.length; i++) {
+                    for (var j = 0; j < this.parent.filterSettings.columns.length; j++) {
+                        if (this.parent.filterSettings.columns[j].field === column.field) {
+                            element.classList.add('e-filtered');
+                            matchFilteredColumns.push(column.field);
+                            break;
+                        }
+                    }
+                }
+            }
+            node.classList.add('e-fltr-icon');
+            node.appendChild(element);
+        }
+        if (this.parent.allowResizing) {
+            var handler = createElement('div');
+            handler.className = column.allowResizing ? 'e-rhandler e-rcursor' : 'e-rsuppress';
+            node.appendChild(handler);
+        }
+        return node;
+    };
     HeaderCellRenderer.prototype.appendHtml = function (node, innerHtml) {
@@ -99,0 +163,0 @@ node.appendChild(innerHtml);

dist/es6/grid/renderer/header-renderer.js

@@ -28,4 +28,15 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
             var headercelldiv = element.querySelector('.e-headercelldiv');
-            visualElement.textContent = headercelldiv ?
-                gObj.getColumnByUid(headercelldiv.getAttribute('e-mappinguid')).headerText : element.innerHTML;
+            var col = gObj.getColumnByUid(headercelldiv.getAttribute('e-mappinguid'));
+            if (!isNullOrUndefined(col.headerTemplate)) {
+                if (col.headerTemplate.indexOf('#') !== -1) {
+                    visualElement.innerHTML = document.querySelector(col.headerTemplate).innerHTML.trim();
+                }
+                else {
+                    visualElement.innerHTML = col.headerTemplate;
+                }
+            }
+            else {
+                visualElement.textContent = headercelldiv ?
+                    gObj.getColumnByUid(headercelldiv.getAttribute('e-mappinguid')).headerText : element.firstElementChild.innerHTML;
+            }
             visualElement.style.width = element.offsetWidth + 'px';
@@ -109,3 +120,3 @@ visualElement.style.height = element.offsetHeight + 'px';
         this.initializeHeaderDrop();
-        this.parent.notify(events.headerRefreshed, {});
+        this.parent.notify(events.headerRefreshed, { rows: this.rows });
     };
@@ -151,3 +162,4 @@ HeaderRender.prototype.getPanel = function () {
         var bodyCell;
-        var rows = findHeaderRow.rows;
+        var rows = this.rows = findHeaderRow.rows;
+        var rowRenderer = new RowRenderer(this.serviceLocator, CellType.Header);
         for (var i = 0, len = rows.length; i < len; i++) {
@@ -176,3 +188,3 @@ for (var j = 0, len_1 = rows[i].cells.length; j < len_1; j++) {
         var colHeader = createElement('tr', { className: 'e-columnheader' });
-        var rowRenderer = new RowRenderer(this.serviceLocator, CellType.Header);
+        var rowRenderer = new RowRenderer(this.serviceLocator, CellType.Header, gObj);
         rowRenderer.element = colHeader;
@@ -243,3 +255,13 @@ var rows = [];
     HeaderRender.prototype.getHeaderCells = function (rows) {
-        var cols = this.parent.enableColumnVirtualization ? this.parent.getColumns() : this.parent.columns;
+        var column;
+        if (this.parent.frozenColumns) {
+            if (this.parent.getHeaderTable() && this.parent.getHeaderTable().querySelector('thead')) {
+                column = this.parent.columns.slice(this.parent.frozenColumns, this.parent.columns.length);
+            }
+            else {
+                column = this.parent.columns.slice(0, this.parent.frozenColumns);
+            }
+        }
+        var cols = this.parent.enableColumnVirtualization ? this.parent.getColumns()
+            : (this.parent.frozenColumns ? column : this.parent.columns);
         for (var i = 0, len = cols.length; i < len; i++) {
@@ -313,2 +335,3 @@ rows = this.appendCells(cols[i], rows, 0, i === 0, false, i === (len - 1));
         var findHeaderRow = this.createHeaderContent();
+        this.rows = findHeaderRow.rows;
         table.insertBefore(findHeaderRow.thead, table.firstChild);
@@ -322,4 +345,11 @@ this.updateColGroup(colGroup);
         this.initializeHeaderDrag();
-        this.parent.notify(events.headerRefreshed, {});
         var rows = [].slice.call(headerDiv.querySelectorAll('tr.e-columnheader'));
+        for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {
+            var row = rows_1[_i];
+            var gCells = [].slice.call(row.querySelectorAll('.e-grouptopleftcell'));
+            if (gCells.length) {
+                gCells[gCells.length - 1].classList.add('e-lastgrouptopleftcell');
+            }
+        }
+        this.parent.notify(events.headerRefreshed, { rows: this.rows });
         if (this.parent.allowTextWrap && this.parent.textWrapSettings.wrapMode === 'header') {
@@ -326,0 +356,0 @@ wrap(rows, true);

dist/es6/grid/renderer/inline-edit-renderer.js

@@ -1,2 +0,2 @@
-import { createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { createElement, isNullOrUndefined, addClass } from '@syncfusion/ej2-base';
 var InlineEditRender = (function () {
@@ -13,7 +13,8 @@ function InlineEditRender(parent) {
     InlineEditRender.prototype.update = function (elements, args) {
+        var tdElement = [].slice.call(args.row.querySelectorAll('td.e-rowcell'));
         args.row.innerHTML = '';
-        args.row.appendChild(this.getEditElement(elements, true));
+        args.row.appendChild(this.getEditElement(elements, true, tdElement));
         args.row.classList.add('e-editedrow');
     };
-    InlineEditRender.prototype.getEditElement = function (elements, isEdit) {
+    InlineEditRender.prototype.getEditElement = function (elements, isEdit, tdElement) {
         var gObj = this.parent;
@@ -42,15 +43,22 @@ var gLen = 0;
         }
-        for (var _i = 0, _a = gObj.columns; _i < _a.length; _i++) {
-            var col = _a[_i];
-            if (!col.visible) {
-                continue;
+        var m = 0;
+        i = 0;
+        while ((isEdit && m < tdElement.length && i < gObj.columns.length) || i < gObj.columns.length) {
+            var span = isEdit ? tdElement[m].getAttribute('colspan') : null;
+            var col = gObj.columns[i];
+            if (col.visible) {
+                var td_1 = createElement('td', {
+                    className: 'e-rowcell', attrs: { style: 'text-align:' + (col.textAlign ? col.textAlign : ''), 'colspan': span ? span : '' }
+                });
+                td_1.appendChild(elements[col.uid]);
+                if (col.editType === 'booleanedit') {
+                    td_1.classList.add('e-boolcell');
+                }
+                else if (col.commands || col.commandsTemplate) {
+                    addClass([td_1], 'e-unboundcell');
+                }
+                tr.appendChild(td_1);
             }
-            var td_1 = createElement('td', {
-                className: 'e-rowcell', attrs: { style: 'text-align:' + (col.textAlign ? col.textAlign : '') }
-            });
-            td_1.appendChild(elements[col.uid]);
-            if (col.editType === 'booleanedit') {
-                td_1.classList.add('e-boolcell');
-            }
-            tr.appendChild(td_1);
+            i = span ? i + parseInt(span, 10) : i + 1;
+            m++;
         }
@@ -57,0 +65,0 @@ tbody.appendChild(tr);

dist/es6/grid/renderer/render.js

@@ -6,4 +6,6 @@ import { createElement, remove } from '@syncfusion/ej2-base';
 import { Data } from '../actions/data';
+import { Row } from '../models/row';
+import { Cell } from '../models/cell';
 import * as events from '../base/constant';
-import { prepareColumns, calculateAggregate } from '../base/util';
+import { prepareColumns, calculateAggregate, setFormatter } from '../base/util';
 import { ContentRender } from '../renderer/content-renderer';
@@ -24,3 +26,3 @@ import { HeaderRender } from '../renderer/header-renderer';
         this.locator = locator;
-        this.data = new Data(parent);
+        this.data = new Data(parent, locator);
         this.l10n = locator.getService('localization');
@@ -51,2 +53,5 @@ this.ariaService = this.locator.getService('ariaService');
         }
+        if (e.requestType === 'save' && e.action === 'add') {
+            this.parent.isEdit = false;
+        }
         this.refreshDataManager(e);
@@ -110,2 +115,3 @@ };
             this.parent.trigger(events.dataBound, {});
+            this.parent.notify(events.onEmpty, { rows: [new Row({ isDataRow: true, cells: [new Cell({ isDataCell: true, visible: true })] })] });
         }
@@ -127,16 +133,3 @@ };
                 if (typeof (columns[i].format) === 'string') {
-                    switch (columns[i].type) {
-                        case 'date':
-                            columns[i].setFormatter(fmtr.getFormatFunction({ type: 'date', skeleton: columns[i].format }));
-                            columns[i].setParser(fmtr.getParserFunction({ type: 'date', skeleton: columns[i].format }));
-                            break;
-                        case 'datetime':
-                            columns[i].setFormatter(fmtr.getFormatFunction({ type: 'dateTime', skeleton: columns[i].format }));
-                            columns[i].setParser(fmtr.getParserFunction({ type: 'dateTime', skeleton: columns[i].format }));
-                            break;
-                        case 'number':
-                            columns[i].setFormatter(fmtr.getFormatFunction({ format: columns[i].format }));
-                            columns[i].setParser(fmtr.getParserFunction({ format: columns[i].format }));
-                            break;
-                    }
+                    setFormatter(this.locator, columns[i]);
                 }
@@ -278,3 +271,3 @@ else if (!columns[i].format && columns[i].type === 'number') {
             deferred.resolve(e);
-        });
+        }).catch(function (e) { return deferred.reject(e); });
         return deferred.promise;
@@ -281,0 +274,0 @@ };

dist/es6/grid/renderer/row-renderer.js

@@ -6,2 +6,3 @@ import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';
 import { CellType } from '../base/enum';
+import { CellMergeRender } from './cell-merge-renderer';
 var RowRenderer = (function () {
@@ -20,4 +21,5 @@ function RowRenderer(serviceLocator, cellType, parent) {
             row.data = extend({}, row.changes);
+            this.refreshMergeCells(row);
         }
-        var node = this.parent.getContent().querySelector('[data-uid=' + row.uid + ']');
+        var node = this.parent.element.querySelector('[data-uid=' + row.uid + ']');
         var tr = this.refreshRow(row, columns, attributes, rowTemplate);
@@ -48,6 +50,12 @@ var cells = [].slice.call(tr.cells);
             var td = cellRenderer.render(row.cells[i], row.data, { 'index': !isNullOrUndefined(row.index) ? row.index.toString() : '' });
-            tr.appendChild(td);
             if (row.cells[i].cellType === CellType.Data) {
-                this.parent.trigger(queryCellInfo, extend(cellArgs, { cell: td, column: cell.column }));
+                this.parent.trigger(queryCellInfo, extend(cellArgs, { cell: td, column: cell.column, colSpan: 1 }));
+                if (cellArgs.colSpan > 1 || row.cells[i].cellSpan > 1) {
+                    var cellMerge = new CellMergeRender(this.serviceLocator, this.parent);
+                    td = cellMerge.render(cellArgs, row, i, td);
+                }
             }
+            if (!row.cells[i].isSpanned) {
+                tr.appendChild(td);
+            }
         }
@@ -62,2 +70,9 @@ if (row.isDataRow) {
     };
+    RowRenderer.prototype.refreshMergeCells = function (row) {
+        for (var _i = 0, _a = row.cells; _i < _a.length; _i++) {
+            var cell = _a[_i];
+            cell.isSpanned = false;
+        }
+        return row;
+    };
     RowRenderer.prototype.buildAttributeFromRow = function (tr, row) {
@@ -64,0 +79,0 @@ var attr = {};

dist/es6/grid/services.js

@@ -5,1 +5,2 @@ export * from './services/cell-render-factory';
 export * from './services/group-model-generator';
+export * from './services/freeze-row-model-generator';

dist/es6/grid/services/group-model-generator.js

@@ -85,4 +85,11 @@ var __extends = (this && this.__extends) || (function () {
             extend(data, captionCells.data);
-            visibles = captionCells.cells.filter(function (cell) { return cell.visible; });
-            visibles = visibles.slice(groupedLen + 1, visibles.length);
+            var cIndex_1 = 0;
+            captionCells.cells.some(function (cell, index) { cIndex_1 = index; return cell.visible && cell.isDataCell; });
+            visibles = captionCells.cells.slice(cIndex_1).filter(function (cell) { return cell.visible; });
+            if (captionCells.visible && visibles[0].column.field === this.parent.getVisibleColumns()[0].field) {
+                visibles = visibles.slice(1);
+            }
+            if (this.parent.getVisibleColumns().length === 1) {
+                visibles = [];
+            }
             indent = indent - visibles.length;
@@ -89,0 +96,0 @@ }

dist/es6/grid/services/row-model-generator.js

@@ -46,3 +46,3 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
         dummies.forEach(function (dummy, index) {
-            return tmp.push(_this.generateCell(dummy, options.uid, undefined, null, index));
+            return tmp.push(_this.generateCell(dummy, options.uid, isNullOrUndefined(dummy.commands) ? undefined : CellType.CommandColumn, null, index));
         });
@@ -59,5 +59,6 @@ return tmp;
             'cellType': !isNullOrUndefined(cellType) ? cellType : CellType.Data,
-            'colSpan': colSpan
+            'colSpan': colSpan,
+            'commands': column.commands
         };
-        if (opt.isDataCell) {
+        if (opt.isDataCell || opt.column.type === 'checkbox') {
             opt.index = this.parent.getColumnIndexByField(column.field);
@@ -64,0 +65,0 @@ }

dist/es6/grid/services/summary-model-generator.js

@@ -119,3 +119,3 @@ var __extends = (this && this.__extends) || (function () {
             var disp = column.columnName;
-            var val = group.aggregates && group.aggregates[key] ? group.aggregates[key] :
+            var val = group.aggregates && !isNullOrUndefined(group.aggregates[key]) ? group.aggregates[key] :
                 calculateAggregate(type, group.aggregates ? group.result : data, column, _this.parent);
@@ -122,0 +122,0 @@ single[disp] = single[disp] || {};

dist/es6/grid/services/virtual-row-model-generator.js

@@ -134,3 +134,3 @@ import { Browser } from '@syncfusion/ej2-base';
         });
-        if (currentFirst.isDataRow || block % 2 === 0) {
+        if ((currentFirst && currentFirst.isDataRow) || block % 2 === 0) {
             return current;
@@ -143,3 +143,3 @@ }
         var offset = 0;
-        if (currentFirst.isDataRow) {
+        if (currentFirst && currentFirst.isDataRow) {
             return current;
@@ -146,0 +146,0 @@ }

dist/es6/grid/services/width-controller.js

@@ -1,2 +0,2 @@
-import { isNullOrUndefined } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, select } from '@syncfusion/ej2-base';
 import { formatUnit } from '@syncfusion/ej2-base';
@@ -45,7 +45,24 @@ import { columnWidthChanged } from '../base/constant';
         var fWidth = formatUnit(width);
-        var headerCol = header.querySelector('colgroup').children[index];
+        var headerCol;
+        var mHdr = this.parent.getHeaderContent().querySelector('.e-movableheader');
+        if (this.parent.frozenColumns && index >= this.parent.frozenColumns && mHdr && mHdr.querySelector('colgroup')) {
+            headerCol = mHdr.querySelector('colgroup').children[index - this.parent.frozenColumns];
+        }
+        else {
+            headerCol = header.querySelector('colgroup').children[index];
+        }
         if (headerCol) {
             headerCol.style.width = fWidth;
-            content.querySelector('colgroup').children[index].style.width = fWidth;
         }
+        var contentCol;
+        if (this.parent.frozenColumns && index >= this.parent.frozenColumns) {
+            contentCol = this.parent.getContent().querySelector('.e-movablecontent')
+                .querySelector('colgroup').children[index - this.parent.frozenColumns];
+        }
+        else {
+            contentCol = content.querySelector('colgroup').children[index];
+        }
+        if (contentCol) {
+            contentCol.style.width = fWidth;
+        }
         var edit = content.querySelector('.e-table.e-inline-edit');
@@ -100,5 +117,26 @@ if (edit) {
     ColumnWidthService.prototype.setWidthToTable = function () {
-        var tWidth = formatUnit(this.getTableWidth(this.parent.getColumns()));
-        this.parent.getHeaderTable().style.width = tWidth;
-        this.parent.getContentTable().style.width = tWidth;
+        var tWidth = null;
+        if (this.parent.frozenColumns) {
+            var freezeWidth = 0;
+            var colGrp = this.parent.getContentTable().querySelector('colgroup');
+            var mColGrp = select('.e-movablecontent');
+            for (var i = 0; i < this.parent.getHeaderTable().querySelector('.e-columnheader').children.length; i++) {
+                freezeWidth += parseInt(colGrp.children[i].style.width, 10);
+            }
+            tWidth = formatUnit(freezeWidth);
+            this.parent.getHeaderTable().style.width = tWidth;
+            this.parent.getContentTable().style.width = tWidth;
+            freezeWidth = 0;
+            for (var i = 0; i < select('.e-movableheader').querySelector('.e-columnheader').children.length; i++) {
+                freezeWidth += parseInt(mColGrp.children[0].querySelector('colgroup').children[i].style.width, 10);
+            }
+            tWidth = formatUnit(freezeWidth);
+            select('.e-movableheader').firstElementChild.style.width = tWidth;
+            select('.e-movablecontent').firstElementChild.style.width = tWidth;
+        }
+        else {
+            tWidth = formatUnit(this.getTableWidth(this.parent.getColumns()));
+            this.parent.getHeaderTable().style.width = tWidth;
+            this.parent.getContentTable().style.width = tWidth;
+        }
         var edit = this.parent.element.querySelector('.e-table.e-inline-edit');
@@ -105,0 +143,0 @@ if (edit) {

package.json

 {
   "name": "@syncfusion/ej2-grids",
-  "version": "1.0.25",
+  "version": "15.4.17",
   "description": "Essential JS 2 Grid Component",
@@ -9,15 +9,15 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "^1.0.25",
-    "@syncfusion/ej2-data": "^1.0.19",
-    "@syncfusion/ej2-navigations": "^1.0.25",
-    "@syncfusion/ej2-inputs": "^1.0.22",
-    "@syncfusion/ej2-calendars": "^1.0.22",
-    "@syncfusion/ej2-dropdowns": "^1.0.22",
-    "@syncfusion/ej2-popups": "^1.0.22",
-    "@syncfusion/ej2-buttons": "^1.0.25",
-    "@syncfusion/ej2-lists": "^1.0.19",
-    "@syncfusion/ej2-excel-export": "^1.0.24",
-    "@syncfusion/ej2-pdf-export": "^1.0.23",
-    "@syncfusion/ej2-file-utils": "^1.0.21",
-    "@syncfusion/ej2-compression": "^1.0.21"
+    "@syncfusion/ej2-base": "^15.4.17",
+    "@syncfusion/ej2-data": "^15.4.17",
+    "@syncfusion/ej2-navigations": "^15.4.17",
+    "@syncfusion/ej2-inputs": "^15.4.17",
+    "@syncfusion/ej2-calendars": "^15.4.17",
+    "@syncfusion/ej2-dropdowns": "^15.4.17",
+    "@syncfusion/ej2-popups": "^15.4.17",
+    "@syncfusion/ej2-buttons": "^15.4.17",
+    "@syncfusion/ej2-lists": "^15.4.17",
+    "@syncfusion/ej2-excel-export": "^15.4.17",
+    "@syncfusion/ej2-pdf-export": "^15.4.17",
+    "@syncfusion/ej2-file-utils": "^15.4.17",
+    "@syncfusion/ej2-compression": "^15.4.17"
   },
@@ -24,0 +24,0 @@ "devDependencies": {

src/grid/actions.d.ts

@@ -29,1 +29,8 @@ /**
 export * from './actions/export-helper';
+export * from './actions/clipboard';
+export * from './actions/command-column';
+export * from './actions/checkbox-filter';
+export * from './actions/context-menu';
+export * from './actions/freeze';
+export * from './actions/column-menu';
+export * from './actions/excel-filter';

src/grid/actions.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "./actions/data", "./actions/sort", "./actions/page", "./actions/selection", "./actions/filter", "./actions/search", "./actions/scroll", "./actions/resize", "./actions/reorder", "./actions/row-reorder", "./actions/group", "./actions/print", "./actions/detail-row", "./actions/toolbar", "./actions/aggregate", "./actions/virtual-scroll", "./actions/edit", "./actions/batch-edit", "./actions/inline-edit", "./actions/normal-edit", "./actions/dialog-edit", "./actions/column-chooser", "./actions/excel-export", "./actions/pdf-export", "./actions/export-helper"], function (require, exports, data_1, sort_1, page_1, selection_1, filter_1, search_1, scroll_1, resize_1, reorder_1, row_reorder_1, group_1, print_1, detail_row_1, toolbar_1, aggregate_1, virtual_scroll_1, edit_1, batch_edit_1, inline_edit_1, normal_edit_1, dialog_edit_1, column_chooser_1, excel_export_1, pdf_export_1, export_helper_1) {
+define(["require", "exports", "./actions/data", "./actions/sort", "./actions/page", "./actions/selection", "./actions/filter", "./actions/search", "./actions/scroll", "./actions/resize", "./actions/reorder", "./actions/row-reorder", "./actions/group", "./actions/print", "./actions/detail-row", "./actions/toolbar", "./actions/aggregate", "./actions/virtual-scroll", "./actions/edit", "./actions/batch-edit", "./actions/inline-edit", "./actions/normal-edit", "./actions/dialog-edit", "./actions/column-chooser", "./actions/excel-export", "./actions/pdf-export", "./actions/export-helper", "./actions/clipboard", "./actions/command-column", "./actions/checkbox-filter", "./actions/context-menu", "./actions/freeze", "./actions/column-menu", "./actions/excel-filter"], function (require, exports, data_1, sort_1, page_1, selection_1, filter_1, search_1, scroll_1, resize_1, reorder_1, row_reorder_1, group_1, print_1, detail_row_1, toolbar_1, aggregate_1, virtual_scroll_1, edit_1, batch_edit_1, inline_edit_1, normal_edit_1, dialog_edit_1, column_chooser_1, excel_export_1, pdf_export_1, export_helper_1, clipboard_1, command_column_1, checkbox_filter_1, context_menu_1, freeze_1, column_menu_1, excel_filter_1) {
     "use strict";
@@ -32,2 +32,9 @@ function __export(m) {
     __export(export_helper_1);
+    __export(clipboard_1);
+    __export(command_column_1);
+    __export(checkbox_filter_1);
+    __export(context_menu_1);
+    __export(freeze_1);
+    __export(column_menu_1);
+    __export(excel_filter_1);
 });

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

@@ -17,2 +17,4 @@ import { FormValidator } from '@syncfusion/ej2-inputs';
     private renderer;
+    private focus;
+    private dataBoundFunction;
     private cellDetails;
@@ -36,7 +38,5 @@ private isColored;
     protected dblClickHandler(e: MouseEvent): void;
-    private keyPressHandler(e);
-    private reFocusOnError(e);
+    private onBeforeCellFocused(e);
+    private onCellFocused(e);
     private isAddRow(index);
-    private editNextCell();
-    private editPrevCell();
     private editCellFromIndex(rowIdx, cellIdx);
@@ -63,3 +63,2 @@ closeEdit(): void;
     private findNextEditableCell(columnIndex, isAdd);
-    private findPrevEditableCell(columnIndex, isAdd);
     private checkNPCell(col);
@@ -74,6 +73,5 @@ private getDefaultData();
     private refreshTD(td, column, rowObj, value);
+    private getColIndex(cells, index);
     saveCell(isForceSave?: boolean): void;
     protected getDataByIndex(index: number): Object;
-    private valComplete(args);
-    private customPlacement(inputElement, error);
 }

src/grid/actions/batch-edit.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/util", "../base/constant", "../renderer/row-renderer", "../renderer/cell-renderer", "../services/row-model-generator"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, util_1, events, row_renderer_1, cell_renderer_1, row_model_generator_1) {
+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) {
     "use strict";
@@ -10,2 +10,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
             this.renderer = renderer;
+            this.focus = serviceLocator.getService('focus');
             this.addEventListener();
@@ -19,4 +20,6 @@ }
             this.parent.on(events.dblclick, this.dblClickHandler, this);
-            this.parent.on(events.keyPressed, this.keyPressHandler, this);
-            this.parent.addEventListener(events.dataBound, this.dataBound.bind(this));
+            this.parent.on(events.beforeCellFocused, this.onBeforeCellFocused, this);
+            this.parent.on(events.cellFocused, this.onCellFocused, this);
+            this.dataBoundFunction = this.dataBound.bind(this);
+            this.parent.addEventListener(events.dataBound, this.dataBoundFunction);
             this.parent.on(events.doubleTap, this.dblClickHandler, this);
@@ -30,4 +33,5 @@ };
             this.parent.off(events.dblclick, this.dblClickHandler);
-            this.parent.off(events.keyPressed, this.keyPressHandler);
-            this.parent.removeEventListener(events.dataBound, this.dataBound);
+            this.parent.off(events.beforeCellFocused, this.onBeforeCellFocused);
+            this.parent.on(events.cellFocused, this.onCellFocused);
+            this.parent.removeEventListener(events.dataBound, this.dataBoundFunction);
             this.parent.off(events.doubleTap, this.dblClickHandler);
@@ -50,79 +54,53 @@ };
         BatchEdit.prototype.dblClickHandler = function (e) {
-            var target = e.target;
+            var target = util_1.parentsUntil(e.target, 'e-rowcell');
             var tr = util_1.parentsUntil(e.target, 'e-row');
-            if ((util_1.parentsUntil(target, 'e-rowcell')) && tr) {
-                this.editCell(parseInt(tr.getAttribute('aria-rowindex'), 10), this.parent.columns[parseInt(util_1.parentsUntil(target, 'e-rowcell').getAttribute('aria-colindex'), 10)].field);
+            if (target && tr && !isNaN(parseInt(target.getAttribute('aria-colindex'), 10))) {
+                this.editCell(parseInt(tr.getAttribute('aria-rowindex'), 10), this.parent.columns[parseInt(target.getAttribute('aria-colindex'), 10)].field);
             }
         };
-        BatchEdit.prototype.keyPressHandler = function (e) {
+        BatchEdit.prototype.onBeforeCellFocused = function (e) {
+            if (this.parent.isEdit && this.validateFormObj() &&
+                (e.byClick || (['tab', 'shiftTab', 'enter', 'shiftEnter'].indexOf(e.keyArgs.action) > -1))) {
+                e.cancel = true;
+                if (e.byClick) {
+                    e.clickArgs.preventDefault();
+                }
+                else {
+                    e.keyArgs.preventDefault();
+                }
+            }
+        };
+        BatchEdit.prototype.onCellFocused = function (e) {
+            var clear = !e.container.isContent || !e.container.isDataCell;
+            if (!e.byKey || clear) {
+                return;
+            }
+            var _a = e.container.indexes, rowIndex = _a[0], cellIndex = _a[1];
             var isEdit = this.parent.isEdit;
             if (!document.querySelectorAll('.e-popup-open').length) {
-                this.saveCell();
                 isEdit = isEdit && !this.validateFormObj();
-                switch (e.action) {
+                switch (e.keyArgs.action) {
                     case 'tab':
-                        if (isEdit) {
-                            this.editNextCell();
-                        }
-                        break;
                     case 'shiftTab':
                         if (isEdit) {
-                            this.editPrevCell();
+                            this.editCellFromIndex(rowIndex, cellIndex);
                         }
                         break;
                     case 'enter':
-                        e.preventDefault();
-                        if (isEdit && this.cellDetails.rowIndex + 1 < this.parent.getDataRows().length) {
-                            this.editCell(this.cellDetails.rowIndex + 1, this.cellDetails.column.field);
+                    case 'shiftEnter':
+                        e.keyArgs.preventDefault();
+                        if (isEdit) {
+                            this.editCell(rowIndex, this.cellDetails.column.field);
                         }
                         break;
                     case 'f2':
-                        this.editCellFromIndex(this.cellDetails.rowIndex, this.cellDetails.cellIndex);
+                        this.editCellFromIndex(rowIndex, cellIndex);
+                        this.focus.focus();
                         break;
                 }
-                if (this.parent.isEdit || !(this.cellDetails.cellIndex === 0 && this.cellDetails.rowIndex === 0) ||
-                    !(this.cellDetails.rowIndex === this.parent.getDataRows().length &&
-                        this.cellDetails.cellIndex === this.parent.columns.length - 1)) {
-                    e.preventDefault();
-                }
             }
-            this.reFocusOnError(e);
         };
-        BatchEdit.prototype.reFocusOnError = function (e) {
-            if (this.validateFormObj() && (e.action === 'tab' || e.action === 'shiftTab')) {
-                e.target.focus();
-                e.preventDefault();
-            }
-        };
         BatchEdit.prototype.isAddRow = function (index) {
             return this.parent.getDataRows()[index].classList.contains('e-insertedrow');
         };
-        BatchEdit.prototype.editNextCell = function () {
-            var oldIdx = this.cellDetails.cellIndex;
-            var cellIdx = this.findNextEditableCell(this.cellDetails.cellIndex + 1, this.isAddRow(this.cellDetails.rowIndex));
-            if (cellIdx > -1) {
-                this.cellDetails.cellIndex = cellIdx;
-            }
-            else if (this.cellDetails.rowIndex + 1 < this.parent.getDataRows().length) {
-                this.cellDetails.rowIndex++;
-                this.cellDetails.cellIndex = this.findNextEditableCell(0, this.isAddRow(this.cellDetails.rowIndex));
-            }
-            if (oldIdx !== this.cellDetails.cellIndex) {
-                this.editCellFromIndex(this.cellDetails.rowIndex, this.cellDetails.cellIndex);
-            }
-        };
-        BatchEdit.prototype.editPrevCell = function () {
-            var oldIdx = this.cellDetails.cellIndex;
-            var cellIdx = this.findPrevEditableCell(this.cellDetails.cellIndex - 1, this.isAddRow(this.cellDetails.rowIndex));
-            if (cellIdx > -1) {
-                this.cellDetails.cellIndex = cellIdx;
-            }
-            else if (this.cellDetails.rowIndex - 1 > -1) {
-                this.cellDetails.rowIndex--;
-                this.cellDetails.cellIndex = this.findPrevEditableCell(this.parent.columns.length - 1, this.isAddRow(this.cellDetails.rowIndex));
-            }
-            if (oldIdx !== this.cellDetails.cellIndex) {
-                this.editCellFromIndex(this.cellDetails.rowIndex, this.cellDetails.cellIndex);
-            }
-        };
         BatchEdit.prototype.editCellFromIndex = function (rowIdx, cellIdx) {
@@ -135,3 +113,3 @@ this.cellDetails.rowIndex = rowIdx;
             var gObj = this.parent;
-            var rows = gObj.contentModule.getRows();
+            var rows = this.parent.getRowsObject();
             var rowRenderer = new row_renderer_1.RowRenderer(this.serviceLocator, null, this.parent);
@@ -203,3 +181,3 @@ var tr;
             };
-            var rows = this.parent.contentModule.getRows();
+            var rows = this.parent.getRowsObject();
             for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {
@@ -223,3 +201,3 @@ var row = rows_1[_i];
         BatchEdit.prototype.removeRowObjectFromUID = function (uid) {
-            var rows = this.parent.contentModule.getRows();
+            var rows = this.parent.getRowsObject();
             var i = 0;
@@ -234,3 +212,3 @@ for (var len = rows.length; i < len; i++) {
         BatchEdit.prototype.addRowObject = function (row) {
-            this.parent.contentModule.getRows().unshift(row);
+            this.parent.getRowsObject().unshift(row);
         };
@@ -269,4 +247,4 @@ BatchEdit.prototype.bulkDelete = function (fieldname, data) {
             gObj.trigger(events.batchDelete, args);
+            gObj.notify(events.batchDelete, { rows: this.parent.getRowsObject() });
             gObj.notify(events.toolbarRefresh, {});
-            gObj.element.focus();
         };
@@ -319,2 +297,3 @@ BatchEdit.prototype.refreshRowIdx = function () {
                 tr.insertBefore(ej2_base_2.createElement('td', { className: 'e-indentcell' }), tr.firstChild);
+                modelData[0].cells.unshift(new cell_1.Cell({ cellType: enum_1.CellType.Indent }));
             }
@@ -330,2 +309,3 @@ var tbody = gObj.getContentTable().querySelector('tbody');
             this.refreshRowIdx();
+            this.focus.forgetPrevious();
             gObj.selectRow(0);
@@ -342,2 +322,3 @@ if (!data) {
             gObj.trigger(events.batchAdd, args1);
+            gObj.notify(events.batchAdd, { rows: this.parent.getRowsObject() });
         };
@@ -357,14 +338,2 @@ BatchEdit.prototype.findNextEditableCell = function (columnIndex, isAdd) {
         };
-        BatchEdit.prototype.findPrevEditableCell = function (columnIndex, isAdd) {
-            var cols = this.parent.columns;
-            for (var i = columnIndex; i > -1; i--) {
-                if (!isAdd && this.checkNPCell(cols[i])) {
-                    return i;
-                }
-                else if (isAdd && !cols[i].template && cols[i].visible && cols[i].allowEditing) {
-                    return i;
-                }
-            }
-            return -1;
-        };
         BatchEdit.prototype.checkNPCell = function (col) {
@@ -407,4 +376,5 @@ return !col.template && col.visible && !col.isPrimaryKey && !col.isIdentity && col.allowEditing;
                 var rowData = ej2_base_1.extend({}, this.getDataByIndex(index));
+                var cells = [].slice.apply(row.cells);
                 var args = {
-                    cell: row.cells[this.getCellIdx(col.uid)], row: row,
+                    cell: cells[this.getColIndex(cells, this.getCellIdx(col.uid))], row: row,
                     columnName: col.field, columnObject: col, isForeignKey: !ej2_base_3.isNullOrUndefined(col.foreignKeyValue),
@@ -415,2 +385,5 @@ primaryKey: keys, rowData: rowData,
                 };
+                if (!args.cell) {
+                    return;
+                }
                 gObj.trigger(events.cellEdit, args);
@@ -421,5 +394,5 @@ if (args.cancel) {
                 this.cellDetails = {
-                    rowData: rowData, column: col, value: args.value, isForeignKey: args.isForeignKey,
+                    rowData: rowData, column: col, value: args.value, isForeignKey: args.isForeignKey, rowIndex: index,
+                    cellIndex: parseInt(args.cell.getAttribute('aria-colindex'), 10)
                 };
-                this.setCellIdx(args.cell);
                 if (args.cell.classList.contains('e-updatedtd')) {
@@ -429,5 +402,7 @@ this.isColored = true;
                 }
+                gObj.isEdit = true;
                 gObj.clearSelection();
-                gObj.selectRow(this.cellDetails.rowIndex);
-                gObj.isEdit = true;
+                if (!gObj.element.classList.contains('e-checkboxselection') || !gObj.element.classList.contains('e-persistselection')) {
+                    gObj.selectRow(this.cellDetails.rowIndex, true);
+                }
                 this.renderer.update(args);
@@ -478,2 +453,11 @@ this.form = gObj.element.querySelector('#' + gObj.element.id + 'EditForm');
         };
+        BatchEdit.prototype.getColIndex = function (cells, index) {
+            for (var m = 0; m < cells.length; m++) {
+                var colIndex = parseInt(cells[m].getAttribute('aria-colindex'), 10);
+                if (colIndex === index) {
+                    return m;
+                }
+            }
+            return -1;
+        };
         BatchEdit.prototype.saveCell = function (isForceSave) {
@@ -507,4 +491,4 @@ var gObj = this.parent;
             this.refreshTD(args.cell, column, gObj.getRowObjectFromUID(tr.getAttribute('data-uid')), args.value);
-            ej2_base_2.classList(tr, [], ['e-editedrow', 'e-batchrow']);
-            args.cell.classList.remove('e-editedbatchcell');
+            ej2_base_1.removeClass([tr], ['e-editedrow', 'e-batchrow']);
+            ej2_base_1.removeClass([args.cell], ['e-editedbatchcell', 'e-boolcell']);
             gObj.isEdit = false;
@@ -522,10 +506,2 @@ if (!ej2_base_3.isNullOrUndefined(args.value) && args.value.toString() ===
         };
-        BatchEdit.prototype.valComplete = function (args) {
-            var edit = this.parent.editModule;
-            edit.validationComplete(args);
-        };
-        BatchEdit.prototype.customPlacement = function (inputElement, error) {
-            var edit = this.parent.editModule;
-            edit.valErrorPlacement(inputElement, error);
-        };
         return BatchEdit;
@@ -532,0 +508,0 @@ }());

src/grid/actions/column-chooser.d.ts

@@ -30,2 +30,5 @@ import { ServiceLocator } from '../services/service-locator';
     private isInitialOpen;
+    private isCustomizeOpenCC;
+    private cBoxTrue;
+    private cBoxFalse;
     /**
@@ -61,13 +64,19 @@ * Constructor for the Grid ColumnChooser module
     openColumnChooser(X?: number, Y?: number): void;
+    private customDialogOpen();
+    private customDialogClose();
     private renderDlgContent();
     private renderChooserList();
+    private searchFocus(targt);
+    private searchBlur(targt);
     private confirmDlgBtnClick(args);
     private columnStateChange(stateColumns, state);
     private clearActions();
-    private checkstatecolumn(e);
+    private checkstatecolumn(isChecked, coluid);
     private columnChooserSearch(searchVal);
     private wireEvents();
     private unWireEvents();
+    private checkBoxClickHandler(e);
     private refreshCheckboxList(gdCol, searchVal?);
     private refreshCheckboxState();
+    private createCheckBox(label, checked, uid);
     private renderCheckbox(column);
@@ -74,0 +83,0 @@ private columnChooserManualSearch(e);

src/grid/actions/column-chooser.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "@syncfusion/ej2-base", "@syncfusion/ej2-buttons", "../base/constant", "@syncfusion/ej2-popups", "../base/util"], function (require, exports, ej2_base_1, ej2_data_1, ej2_base_2, ej2_buttons_1, events, ej2_popups_1, util_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "@syncfusion/ej2-base", "../base/constant", "@syncfusion/ej2-popups", "../base/util", "@syncfusion/ej2-buttons"], function (require, exports, ej2_base_1, ej2_data_1, ej2_base_2, events, ej2_popups_1, util_1, ej2_buttons_1) {
     "use strict";
@@ -13,5 +13,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
             this.isInitialOpen = false;
+            this.isCustomizeOpenCC = false;
+            this.cBoxTrue = ej2_buttons_1.createCheckBox(true, { checked: true, label: ' ' });
+            this.cBoxFalse = ej2_buttons_1.createCheckBox(true, { checked: false, label: ' ' });
             this.parent = parent;
             this.serviceLocator = serviceLocator;
             this.addEventListener();
+            this.cBoxTrue.insertBefore(ej2_base_1.createElement('input', {
+                className: 'e-chk-hidden e-cc e-cc-chbox', attrs: { type: 'checkbox' }
+            }), this.cBoxTrue.firstChild);
+            this.cBoxFalse.insertBefore(ej2_base_1.createElement('input', {
+                className: 'e-chk-hidden e-cc e-cc-chbox', attrs: { 'type': 'checkbox' }
+            }), this.cBoxFalse.firstChild);
+            this.cBoxFalse.querySelector('.e-frame').classList.add('e-uncheck');
+            if (this.parent.enableRtl) {
+                ej2_base_1.addClass([this.cBoxTrue, this.cBoxFalse], ['e-rtl']);
+            }
         }
@@ -21,2 +34,5 @@ ColumnChooser.prototype.destroy = function () {
             this.unWireEvents();
+            if (!ej2_base_1.isNullOrUndefined(this.dlgObj) && this.dlgObj.element) {
+                this.dlgObj.destroy();
+            }
         };
@@ -30,2 +46,3 @@ ColumnChooser.prototype.addEventListener = function () {
             this.parent.addEventListener(events.dataBound, this.hideDialog.bind(this));
+            this.parent.on(events.destroy, this.destroy, this);
         };
@@ -38,2 +55,3 @@ ColumnChooser.prototype.removeEventListener = function () {
             this.parent.off(events.initialEnd, this.render);
+            this.parent.off(events.destroy, this.destroy);
         };
@@ -47,21 +65,23 @@ ColumnChooser.prototype.render = function () {
             var targetElement = e.target;
-            if (!ej2_base_1.isNullOrUndefined(ej2_base_2.closest(targetElement, '.e-cc')) || !ej2_base_1.isNullOrUndefined(ej2_base_2.closest(targetElement, '.e-cc-toolbar'))) {
-                if (targetElement.classList.contains('e-columnchooser-btn') || targetElement.classList.contains('e-cc-toolbar')) {
-                    if ((this.initialOpenDlg && this.dlgObj.visible) || !this.isDlgOpen) {
-                        this.isDlgOpen = true;
-                        return;
+            if (!this.isCustomizeOpenCC) {
+                if (!ej2_base_1.isNullOrUndefined(ej2_base_2.closest(targetElement, '.e-cc')) || !ej2_base_1.isNullOrUndefined(ej2_base_2.closest(targetElement, '.e-cc-toolbar'))) {
+                    if (targetElement.classList.contains('e-columnchooser-btn') || targetElement.classList.contains('e-cc-toolbar')) {
+                        if ((this.initialOpenDlg && this.dlgObj.visible) || !this.isDlgOpen) {
+                            this.isDlgOpen = true;
+                            return;
+                        }
                     }
+                    else if (targetElement.classList.contains('e-cc-cancel')) {
+                        targetElement.parentElement.querySelector('.e-ccsearch').value = '';
+                        this.columnChooserSearch('');
+                        this.removeCancelIcon();
+                    }
                 }
-                else if (targetElement.classList.contains('e-cc-cancel')) {
-                    targetElement.parentElement.querySelector('.e-ccsearch').value = '';
-                    this.columnChooserSearch('');
-                    this.removeCancelIcon();
+                else {
+                    if (!ej2_base_1.isNullOrUndefined(this.dlgObj) && this.dlgObj.visible && !targetElement.classList.contains('e-toolbar-items')) {
+                        this.dlgObj.hide();
+                        this.isDlgOpen = false;
+                    }
                 }
             }
-            else {
-                if (!ej2_base_1.isNullOrUndefined(this.dlgObj) && this.dlgObj.visible) {
-                    this.dlgObj.hide();
-                    this.isDlgOpen = false;
-                }
-            }
         };
@@ -94,3 +114,3 @@ ColumnChooser.prototype.hideDialog = function () {
                 }
-                if (this.parent.element.classList.contains('e-device')) {
+                if (ej2_base_1.Browser.isDevice) {
                     this.dlgObj.target = document.body;
@@ -111,6 +131,4 @@ this.dlgObj.position = { X: 'center', Y: 'center' };
                 this.dlgObj.show();
-                this.wireEvents();
             }
             else {
-                this.unWireEvents();
                 this.hideDialog();
@@ -121,2 +139,3 @@ this.addcancelIcon();
         ColumnChooser.prototype.openColumnChooser = function (X, Y) {
+            this.isCustomizeOpenCC = true;
             if (this.dlgObj.visible) {
@@ -144,6 +163,15 @@ this.hideDialog();
             }
+            this.dlgObj.beforeOpen = this.customDialogOpen.bind(this);
             this.dlgObj.show();
             this.isInitialOpen = true;
-            this.wireEvents();
+            this.dlgObj.beforeClose = this.customDialogClose.bind(this);
         };
+        ColumnChooser.prototype.customDialogOpen = function () {
+            var searchElement = this.dlgObj.content.querySelector('input.e-ccsearch');
+            ej2_base_2.EventHandler.add(searchElement, 'keyup', this.columnChooserManualSearch, this);
+        };
+        ColumnChooser.prototype.customDialogClose = function () {
+            var searchElement = this.dlgObj.content.querySelector('input.e-ccsearch');
+            ej2_base_2.EventHandler.remove(searchElement, 'keyup', this.columnChooserManualSearch);
+        };
         ColumnChooser.prototype.renderDlgContent = function () {
@@ -186,2 +214,3 @@ var y;
             util_1.changeButtonType(this.dlgObj.element);
+            this.wireEvents();
         };
@@ -200,8 +229,4 @@ ColumnChooser.prototype.renderChooserList = function () {
             searchDiv.appendChild(ccsearchicon);
-            ccsearchele.addEventListener('focus', function () {
-                ccsearchele.parentElement.classList.add('e-input-focus');
-            });
-            ccsearchele.addEventListener('blur', function () {
-                ccsearchele.parentElement.classList.remove('e-input-focus');
-            });
+            ccsearchele.addEventListener('focus', this.searchFocus.bind(this, ccsearchele));
+            ccsearchele.addEventListener('blur', this.searchBlur.bind(this, ccsearchele));
             var innerDivContent = this.refreshCheckboxList(this.parent.getColumns());
@@ -214,2 +239,8 @@ this.innerDiv.appendChild(innerDivContent);
         };
+        ColumnChooser.prototype.searchFocus = function (targt) {
+            targt.parentElement.classList.add('e-input-focus');
+        };
+        ColumnChooser.prototype.searchBlur = function (targt) {
+            targt.parentElement.classList.remove('e-input-focus');
+        };
         ColumnChooser.prototype.confirmDlgBtnClick = function (args) {
@@ -235,3 +266,3 @@ this.stateChangeColumns = [];
             for (var index = 0; index < stateColumns.length; index++) {
-                var colUid = stateColumns[index].replace('e-cc', '');
+                var colUid = stateColumns[index];
                 var currentCol = this.parent.getColumnByUid(colUid);
@@ -245,23 +276,20 @@ currentCol.visible = state;
             this.showColumn = [];
-            this.unWireEvents();
             this.hideDialog();
             this.addcancelIcon();
         };
-        ColumnChooser.prototype.checkstatecolumn = function (e) {
-            var targetEle = e.event.target;
-            var uncheckColumn = targetEle.id;
-            if (e.checked) {
-                if (this.hideColumn.indexOf(uncheckColumn) !== -1) {
-                    this.hideColumn.splice(this.hideColumn.indexOf(uncheckColumn), 1);
+        ColumnChooser.prototype.checkstatecolumn = function (isChecked, coluid) {
+            if (isChecked) {
+                if (this.hideColumn.indexOf(coluid) !== -1) {
+                    this.hideColumn.splice(this.hideColumn.indexOf(coluid), 1);
                 }
-                if (this.showColumn.indexOf(uncheckColumn) === -1) {
-                    this.showColumn.push(uncheckColumn);
+                if (this.showColumn.indexOf(coluid) === -1) {
+                    this.showColumn.push(coluid);
                 }
             }
             else {
-                if (this.showColumn.indexOf(uncheckColumn) !== -1) {
-                    this.showColumn.splice(this.showColumn.indexOf(uncheckColumn), 1);
+                if (this.showColumn.indexOf(coluid) !== -1) {
+                    this.showColumn.splice(this.showColumn.indexOf(coluid), 1);
                 }
-                if (this.hideColumn.indexOf(uncheckColumn) === -1) {
-                    this.hideColumn.push(uncheckColumn);
+                if (this.hideColumn.indexOf(coluid) === -1) {
+                    this.hideColumn.push(coluid);
                 }
@@ -301,2 +329,3 @@ }
         ColumnChooser.prototype.wireEvents = function () {
+            ej2_base_2.EventHandler.add(this.dlgObj.element, 'click', this.checkBoxClickHandler, this);
             var searchElement = this.dlgObj.content.querySelector('input.e-ccsearch');
@@ -306,5 +335,27 @@ ej2_base_2.EventHandler.add(searchElement, 'keyup', this.columnChooserManualSearch, this);
         ColumnChooser.prototype.unWireEvents = function () {
+            if (this.dlgObj.element) {
+                ej2_base_2.EventHandler.remove(this.dlgObj.element, 'click', this.checkBoxClickHandler);
+            }
             var searchElement = this.dlgObj.content.querySelector('input.e-ccsearch');
             ej2_base_2.EventHandler.remove(searchElement, 'keyup', this.columnChooserManualSearch);
         };
+        ColumnChooser.prototype.checkBoxClickHandler = function (e) {
+            var checkstate;
+            var elem = util_1.parentsUntil(e.target, 'e-checkbox-wrapper');
+            if (elem) {
+                util_1.toogleCheckbox(elem.parentElement);
+                elem.querySelector('.e-chk-hidden').focus();
+                if (elem.querySelector('.e-check')) {
+                    checkstate = true;
+                }
+                else if (elem.querySelector('.e-uncheck')) {
+                    checkstate = false;
+                }
+                else {
+                    return;
+                }
+                var columnUid = util_1.parentsUntil(elem, 'e-ccheck').getAttribute('uid');
+                this.checkstatecolumn(checkstate, columnUid);
+            }
+        };
         ColumnChooser.prototype.refreshCheckboxList = function (gdCol, searchVal) {
@@ -323,3 +374,4 @@ this.ulElement = ej2_base_1.createElement('ul', { className: 'e-ccul-ele e-cc' });
                 var element = this.parent.element.querySelectorAll('.e-cc-chbox')[i];
-                var column = this.parent.getColumnByUid(element.id.replace('e-cc', ''));
+                var columnUID = util_1.parentsUntil(element, 'e-ccheck').getAttribute('uid');
+                var column = this.parent.getColumnByUid(columnUID);
                 if (column.visible) {
@@ -333,2 +385,7 @@ element.checked = true;
         };
+        ColumnChooser.prototype.createCheckBox = function (label, checked, uid) {
+            var cbox = checked ? this.cBoxTrue.cloneNode(true) : this.cBoxFalse.cloneNode(true);
+            cbox.querySelector('.e-label').innerHTML = label;
+            return util_1.createCboxWithWrap(uid, cbox, 'e-ccheck');
+        };
         ColumnChooser.prototype.renderCheckbox = function (column) {
@@ -341,19 +398,6 @@ var cclist;
                 cclist = ej2_base_1.createElement('li', { className: 'e-cclist e-cc', styles: 'list-style:None', id: 'e-ccli_' + column.uid });
-                var cclabe = ej2_base_1.createElement('label', { className: 'e-cc' });
-                var cccheckboxlist = ej2_base_1.createElement('input', {
-                    className: 'e-cc e-cc-chbox ',
-                    id: 'e-cc' + column.uid, attrs: { type: 'checkbox' }
-                });
-                cclabe.appendChild(cccheckboxlist);
-                hideColState = this.hideColumn.indexOf('e-cc' + column.uid) === -1 ? false : true;
-                showColState = this.showColumn.indexOf('e-cc' + column.uid) === -1 ? false : true;
-                checkBoxObj = new ej2_buttons_1.CheckBox({ label: column.headerText, checked: true, change: this.checkstatecolumn.bind(this) });
-                if ((column.visible && !hideColState) || showColState) {
-                    checkBoxObj.checked = true;
-                }
-                else {
-                    checkBoxObj.checked = false;
-                }
-                checkBoxObj.appendTo(cccheckboxlist);
-                cclist.appendChild(cclabe);
+                hideColState = this.hideColumn.indexOf(column.uid) === -1 ? false : true;
+                showColState = this.showColumn.indexOf(column.uid) === -1 ? false : true;
+                var cccheckboxlist = this.createCheckBox(column.headerText, (column.visible && !hideColState) || showColState, column.uid);
+                cclist.appendChild(cccheckboxlist);
                 this.ulElement.appendChild(cclist);
@@ -384,5 +428,6 @@ }
         ColumnChooser.prototype.mOpenDlg = function () {
-            this.dlgObj.element.querySelector('.e-cc-searchdiv').classList.remove('e-input-focus');
-            var chele = this.dlgObj.element.querySelectorAll('.e-cc-chbox')[0];
-            chele.focus();
+            if (ej2_base_1.Browser.isDevice) {
+                this.dlgObj.element.querySelector('.e-cc-searchdiv').classList.remove('e-input-focus');
+                this.dlgObj.element.querySelectorAll('.e-cc-chbox')[0].focus();
+            }
         };
@@ -389,0 +434,0 @@ ColumnChooser.prototype.getModuleName = function () {

src/grid/actions/data.d.ts

 import { Query, DataManager, Predicate } from '@syncfusion/ej2-data';
 import { IDataProcessor, IGrid } from '../base/interface';
 import { PredicateModel } from '../base/grid-model';
+import { ServiceLocator } from '../services/service-locator';
 /**
@@ -11,2 +12,3 @@ * Grid data module is used to generate query and data source.
     private parent;
+    private serviceLocator;
     /**
@@ -16,3 +18,3 @@ * Constructor for data module.
      */
-    constructor(parent?: IGrid);
+    constructor(parent?: IGrid, serviceLocator?: ServiceLocator);
     /**
@@ -40,2 +42,3 @@ * The function used to initialize dataManager and external query
     }, query?: Query): Promise<Object>;
+    private formatGroupColumn(value, field);
     private crudActions(args);
@@ -42,0 +45,0 @@ /** @hidden */

src/grid/actions/data.js

@@ -1,7 +0,8 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "../base/util", "../base/constant"], function (require, exports, ej2_base_1, ej2_data_1, util_1, events) {
+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) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     var Data = (function () {
-        function Data(parent) {
+        function Data(parent, serviceLocator) {
             this.parent = parent;
+            this.serviceLocator = serviceLocator;
             this.initDataManager();
@@ -29,10 +30,25 @@ if (this.parent.isDestroyed) {
                 var columns = gObj.filterSettings.columns;
-                for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {
-                    var col = columns_1[_i];
-                    var sType = gObj.getColumnByField(col.field).type;
-                    if (sType !== 'date' && sType !== 'datetime') {
-                        query.where(col.field, col.operator, col.value, !col.matchCase);
+                var predicate = void 0;
+                if (gObj.filterSettings.type === 'checkbox') {
+                    var predicates = checkbox_filter_1.CheckBoxFilter.getPredicate(gObj.filterSettings.columns);
+                    for (var _i = 0, _a = Object.keys(predicates); _i < _a.length; _i++) {
+                        var prop = _a[_i];
+                        var and = 'and';
+                        var obj = predicates[prop];
+                        predicate = !ej2_base_1.isNullOrUndefined(predicate) ?
+                            predicate[and](obj) :
+                            obj;
                     }
-                    else {
-                        query.where(this.getDatePredicate(col));
+                    query.where(predicate);
+                }
+                else {
+                    for (var _b = 0, columns_1 = columns; _b < columns_1.length; _b++) {
+                        var col = columns_1[_b];
+                        var sType = gObj.getColumnByField(col.field).type;
+                        if (sType !== 'date' && sType !== 'datetime') {
+                            query.where(col.field, col.operator, col.value, !col.matchCase);
+                        }
+                        else {
+                            query.where(this.getDatePredicate(col));
+                        }
                     }
@@ -73,3 +89,10 @@ }
                 for (var i = 0, len = columns.length; i < len; i++) {
-                    query.group(columns[i]);
+                    var isGrpFmt = gObj.getColumnByField(columns[i]).enableGroupByFormat;
+                    var format = gObj.getColumnByField(columns[i]).format;
+                    if (isGrpFmt) {
+                        query.group(columns[i], this.formatGroupColumn.bind(this), format);
+                    }
+                    else {
+                        query.group(columns[i], null);
+                    }
                 }
@@ -106,2 +129,17 @@ }
         };
+        Data.prototype.formatGroupColumn = function (value, field) {
+            var gObj = this.parent;
+            var serviceLocator = this.serviceLocator;
+            var column = gObj.getColumnByField(field);
+            var date = value;
+            if (!column.type) {
+                column.type = date.getDay ? (date.getHours() > 0 || date.getMinutes() > 0 ||
+                    date.getSeconds() > 0 || date.getMilliseconds() > 0 ? 'datetime' : 'date') : typeof (value);
+            }
+            if (ej2_base_1.isNullOrUndefined(column.getFormatter())) {
+                util_1.setFormatter(serviceLocator, column);
+            }
+            var formatVal = value_formatter_1.ValueFormatter.prototype.toView(value, column.getFormatter());
+            return formatVal;
+        };
         Data.prototype.crudActions = function (args) {
@@ -136,2 +174,3 @@ this.generateQuery();
         Data.prototype.getDatePredicate = function (filterObject) {
+            var datePredicate;
             var prevDate;
@@ -142,17 +181,24 @@ var nextDate;
             var value = new Date(filterObject.value);
-            prevDate = new Date(value.setDate(value.getDate() - 1));
-            nextDate = new Date(value.setDate(value.getDate() + 2));
-            prevObj.value = prevDate;
-            nextObj.value = nextDate;
-            if (filterObject.operator === 'equal') {
-                prevObj.operator = 'greaterthan';
-                nextObj.operator = 'lessthan';
+            if (filterObject.operator === 'equal' || filterObject.operator === 'notequal') {
+                prevDate = new Date(value.setDate(value.getDate() - 1));
+                nextDate = new Date(value.setDate(value.getDate() + 2));
+                prevObj.value = prevDate;
+                nextObj.value = nextDate;
+                if (filterObject.operator === 'equal') {
+                    prevObj.operator = 'greaterthan';
+                    nextObj.operator = 'lessthan';
+                }
+                else if (filterObject.operator === 'notequal') {
+                    prevObj.operator = 'lessthanorequal';
+                    nextObj.operator = 'greaterthanorequal';
+                }
+                var predicateSt = new ej2_data_1.Predicate(prevObj.field, prevObj.operator, prevObj.value, false);
+                var predicateEnd = new ej2_data_1.Predicate(nextObj.field, nextObj.operator, nextObj.value, false);
+                datePredicate = filterObject.operator === 'equal' ? predicateSt.and(predicateEnd) : predicateSt.or(predicateEnd);
             }
             else {
-                prevObj.operator = 'lessthanorequal';
-                nextObj.operator = 'greaterthanorequal';
+                var predicates = new ej2_data_1.Predicate(prevObj.field, prevObj.operator, prevObj.value, false);
+                datePredicate = predicates;
             }
-            var predicateSt = new ej2_data_1.Predicate(prevObj.field, prevObj.operator, prevObj.value, false);
-            var predicateEnd = new ej2_data_1.Predicate(nextObj.field, nextObj.operator, nextObj.value, false);
-            return filterObject.operator === 'equal' ? predicateSt.and(predicateEnd) : predicateSt.or(predicateEnd);
+            return datePredicate;
         };
@@ -166,3 +212,3 @@ Data.prototype.addRows = function (e) {
             var json = this.dataManager.dataSource.json;
-            this.dataManager.dataSource.json = json.filter(function (value, index) { return e.indexes.indexOf(index) === -1; });
+            this.dataManager.dataSource.json = json.filter(function (value, index) { return e.records.indexOf(value) === -1; });
         };
@@ -169,0 +215,0 @@ Data.prototype.destroy = function () {

src/grid/actions/detail-row.d.ts

 import { IGrid } from '../base/interface';
+import { ServiceLocator } from '../services/service-locator';
 /**
@@ -8,2 +9,3 @@ * `DetailRow` module is used to handle Detail Template and Hierarchy Grid operations.
     private parent;
+    private focus;
     /**
@@ -13,3 +15,3 @@ * Constructor for the Grid detail template module
      */
-    constructor(parent?: IGrid);
+    constructor(parent?: IGrid, locator?: ServiceLocator);
     private clickHandler(e);
@@ -16,0 +18,0 @@ private toogleExpandcollapse(target);

src/grid/actions/detail-row.js

@@ -1,6 +0,6 @@
-define(["require", "exports", "@syncfusion/ej2-base", "../base/grid", "../base/util", "../base/constant", "../services/aria-service"], function (require, exports, ej2_base_1, grid_1, util_1, events, aria_service_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "../base/grid", "../base/util", "../base/constant", "../services/aria-service", "../models/row", "../models/cell", "../base/enum"], function (require, exports, ej2_base_1, grid_1, util_1, events, aria_service_1, row_1, cell_1, enum_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     var DetailRow = (function () {
-        function DetailRow(parent) {
+        function DetailRow(parent, locator) {
             this.aria = new aria_service_1.AriaService();
@@ -11,2 +11,3 @@ this.parent = parent;
             }
+            this.focus = locator.getService('focus');
             this.parent.on(events.click, this.clickHandler, this);
@@ -24,2 +25,3 @@ this.parent.on(events.destroy, this.destroy, this);
                 var tr = target.parentElement;
+                var uid_1 = tr.getAttribute('data-uid');
                 var nextRow = this.parent.getContentTable().querySelector('tbody').children[tr.rowIndex + 1];
@@ -38,4 +40,9 @@ if (target.classList.contains('e-detailrowcollapse')) {
                         detailCell.setAttribute('colspan', this.parent.getVisibleColumns().length.toString());
+                        var row = new row_1.Row({
+                            isDataRow: true,
+                            cells: [new cell_1.Cell({ cellType: enum_1.CellType.Indent }), new cell_1.Cell({ isDataCell: true, visible: true })]
+                        });
                         for (var i = 0, len = gObj.groupSettings.columns.length; i < len; i++) {
                             detailRow.appendChild(ej2_base_1.createElement('td', { className: 'e-indentcell' }));
+                            row.cells.unshift(new cell_1.Cell({ cellType: enum_1.CellType.Indent }));
                         }
@@ -69,4 +76,10 @@ detailRow.appendChild(ej2_base_1.createElement('td', { className: 'e-detailindentcell' }));
                         }
+                        detailRow.appendChild(detailCell);
+                        tr.parentNode.insertBefore(detailRow, tr.nextSibling);
+                        var idx_1;
+                        this.parent.getRowsObject().some(function (r, rIndex) { idx_1 = rIndex; return r.uid === uid_1; });
                         gObj.getRows().splice(tr.rowIndex + 1, 0, detailRow);
+                        this.parent.getRowsObject().splice(idx_1 + 1, 0, row);
                         gObj.trigger(events.detailDataBound, { detailElement: detailCell, data: data });
+                        gObj.notify(events.detailDataBound, { rows: this.parent.getRowsObject() });
                     }
@@ -153,2 +166,12 @@ ej2_base_1.classList(target, ['e-detailrowexpand'], ['e-detailrowcollapse']);
                     break;
+                case 'enter':
+                    if (this.parent.isEdit) {
+                        return;
+                    }
+                    var element = this.focus.getFocusedElement();
+                    if (!element.classList.contains('e-detailrowcollapse') && !element.classList.contains('e-detailrowexpand')) {
+                        break;
+                    }
+                    this.toogleExpandcollapse(element);
+                    break;
             }
@@ -155,0 +178,0 @@ };

src/grid/actions/edit.d.ts

@@ -24,2 +24,4 @@ import { L10n } from '@syncfusion/ej2-base';
     private tapped;
+    private actionBeginFunction;
+    private actionCompleteFunction;
     private preventObj;
@@ -120,3 +122,3 @@ /**
      */
-    getCurrentEditCellData(): void;
+    getCurrentEditCellData(): string;
     /**
@@ -176,2 +178,3 @@ * To save current edited cell in batch. It does not save value to data source.
     private validationComplete(args);
+    private createTooltip(element, error, name, display);
 }

src/grid/actions/edit.js

@@ -1,2 +0,2 @@
-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-popups", "@syncfusion/ej2-inputs"], 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_popups_2, ej2_inputs_1) {
+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"], 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) {
     "use strict";
@@ -7,4 +7,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
             this.editCellType = {
-                'dropdownedit': dropdown_edit_cell_1.DropDownEditCell,
-                'numericedit': numeric_edit_cell_1.NumericEditCell, 'booleanedit': boolean_edit_cell_1.BooleanEditCell, 'default': default_edit_cell_1.DefaultEditCell
+                'dropdownedit': dropdown_edit_cell_1.DropDownEditCell, 'numericedit': numeric_edit_cell_1.NumericEditCell,
+                'datepickeredit': datepicker_edit_cell_1.DatePickerEditCell, 'booleanedit': boolean_edit_cell_1.BooleanEditCell, 'defaultedit': default_edit_cell_1.DefaultEditCell
             };
@@ -15,4 +15,7 @@ this.editType = { 'inline': inline_edit_1.InlineEdit, 'normal': inline_edit_1.InlineEdit, 'batch': batch_edit_1.BatchEdit, 'dialog': dialog_edit_1.DialogEdit };
             this.serviceLocator = serviceLocator;
+            this.l10n = this.serviceLocator.getService('localization');
             this.addEventListener();
             this.updateEditObj();
+            this.createAlertDlg();
+            this.createConfirmDlg();
         }
@@ -23,3 +26,3 @@ Edit.prototype.updateColTypeObj = function () {
                 col.edit = ej2_base_2.extend(new this.editCellType[col.editType && this.editCellType[col.editType] ?
-                    col.editType : 'default'](this.parent, this.serviceLocator), col.edit || {});
+                    col.editType : 'defaultedit'](this.parent, this.serviceLocator), col.edit || {});
             }
@@ -63,5 +66,2 @@ };
             this.updateColTypeObj();
-            this.l10n = this.serviceLocator.getService('localization');
-            this.createAlertDlg();
-            this.createConfirmDlg();
         };
@@ -113,2 +113,3 @@ Edit.prototype.wireEvents = function () {
             gObj.element.querySelector('.e-gridpopup').style.display = 'none';
+            this.parent.notify('start-edit', {});
         };
@@ -123,2 +124,3 @@ Edit.prototype.closeEdit = function () {
             this.refreshToolbar();
+            this.parent.notify('close-edit', {});
         };
@@ -134,2 +136,3 @@ Edit.prototype.refreshToolbar = function () {
             this.refreshToolbar();
+            this.parent.notify('start-add', {});
         };
@@ -200,2 +203,3 @@ Edit.prototype.deleteRecord = function (fieldname, data) {
             obj.content = '<div>' + this.l10n.getConstant(content) + '</div>';
+            obj.dataBind();
             obj.show();
@@ -207,3 +211,3 @@ };
                 case 'number':
-                    val = !ej2_base_4.isNullOrUndefined(parseFloat(value)) ? parseFloat(value) : null;
+                    val = !isNaN(parseFloat(value)) ? parseFloat(value) : null;
                     break;
@@ -224,6 +228,6 @@ case 'boolean':
         Edit.prototype.destroyToolTip = function () {
-            var elements = [].slice.call(this.parent.element.querySelectorAll('td.e-tooltip'));
+            var elements = [].slice.call(this.parent.getContentTable().querySelectorAll('.e-griderror'));
             for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
                 var elem = elements_1[_i];
-                elem.ej2_instances[0].destroy();
+                ej2_base_3.remove(elem);
             }
@@ -302,4 +306,6 @@ };
             this.parent.on(events.destroyForm, this.destroyForm, this);
-            this.parent.addEventListener(events.actionBegin, this.onActionBegin.bind(this));
-            this.parent.addEventListener(events.actionComplete, this.actionComplete.bind(this));
+            this.actionBeginFunction = this.onActionBegin.bind(this);
+            this.actionCompleteFunction = this.actionComplete.bind(this);
+            this.parent.addEventListener(events.actionBegin, this.actionBeginFunction);
+            this.parent.addEventListener(events.actionComplete, this.actionCompleteFunction);
             this.parent.on(events.initialEnd, this.wireEvents, this);
@@ -318,8 +324,9 @@ };
             this.parent.off(events.destroyForm, this.destroyForm);
-            this.parent.removeEventListener(events.actionComplete, this.actionComplete);
-            this.parent.removeEventListener(events.actionBegin, this.onActionBegin);
+            this.parent.removeEventListener(events.actionComplete, this.actionCompleteFunction);
+            this.parent.removeEventListener(events.actionBegin, this.actionBeginFunction);
             this.parent.off(events.initialEnd, this.unwireEvents);
         };
         Edit.prototype.actionComplete = function (e) {
-            if (e.requestType !== 'add' && e.requestType !== 'beginEdit' && e.requestType !== 'delete') {
+            var actions = ['add', 'beginEdit', 'save', 'delete', 'cancel'];
+            if (actions.indexOf(e.requestType) < 0) {
                 this.parent.isEdit = false;
@@ -335,3 +342,3 @@ }
                 var value = void 0;
-                if (col) {
+                if (col && col.field) {
                     var temp = col.edit.read;
@@ -341,3 +348,8 @@ if (typeof temp === 'string') {
                     }
-                    value = gObj.editModule.getValueFromType(col, col.edit.read(inputs[i]));
+                    if (col.type !== 'checkbox') {
+                        value = gObj.editModule.getValueFromType(col, col.edit.read(inputs[i]));
+                    }
+                    else {
+                        value = inputs[i].checked;
+                    }
                     ej2_base_4.setValue(col.field, value, editedData);
@@ -349,3 +361,3 @@ }
         Edit.prototype.onActionBegin = function (e) {
-            if (this.parent.editSettings.mode !== 'batch' && this.formObj && !this.formObj.isDestroyed && !e.cancel) {
+            if (this.parent.editSettings.mode !== 'batch' && e.requestType !== 'save' && this.formObj && !this.formObj.isDestroyed) {
                 this.destroyForm();
@@ -374,4 +386,8 @@ this.destroyWidgets();
             this.removeEventListener();
+            var elem = this.dialogObj.element;
             this.dialogObj.destroy();
+            ej2_base_3.remove(elem);
+            elem = this.alertDObj.element;
             this.alertDObj.destroy();
+            ej2_base_3.remove(elem);
             this.unwireEvents();
@@ -391,3 +407,3 @@ };
                 case 'enter':
-                    if (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') && !document.querySelectorAll('.e-popup-open').length) {
@@ -434,13 +450,11 @@ e.preventDefault();
             if (this.parent.isEdit) {
-                var td = util_1.parentsUntil(inputElement, 'e-rowcell');
-                if (!td.ej2_instances || !td.ej2_instances.length) {
-                    var tooltip = new ej2_popups_2.Tooltip({
-                        opensOn: 'custom', content: error, position: 'bottom center', cssClass: 'e-griderror',
-                        animation: { open: { effect: 'None' }, close: { effect: 'None' } }
-                    });
-                    tooltip.appendTo(td);
-                    tooltip.open(td);
+                var id = error.getAttribute('for');
+                var parentElem = this.parent.editSettings.mode !== 'dialog' ? this.parent.getContentTable() :
+                    this.parent.element.querySelector('#' + this.parent.element.id + '_dialogEdit_wrapper');
+                var elem = parentElem.querySelector('#' + id + '_Error');
+                if (!elem) {
+                    this.createTooltip(inputElement, error, id, '');
                 }
                 else {
-                    td.ej2_instances[0].content = error;
+                    elem.querySelector('.e-tip-content').innerHTML = error.innerHTML;
                 }
@@ -451,15 +465,37 @@ }
             if (this.parent.isEdit) {
-                var elem = util_1.parentsUntil(document.getElementById(this.parent.element.id + args.inputName), 'e-rowcell');
-                if (elem && elem.ej2_instances && elem.ej2_instances.length) {
-                    var tObj = elem.ej2_instances[0];
+                var parentElem = this.parent.editSettings.mode !== 'dialog' ? this.parent.getContentTable() :
+                    this.parent.element.querySelector('#' + this.parent.element.id + '_dialogEdit_wrapper');
+                var elem = parentElem.querySelector('#' + args.inputName + '_Error');
+                if (elem) {
                     if (args.status === 'failure') {
-                        tObj.open(util_1.parentsUntil(args.element, 'e-rowcell'));
+                        elem.style.display = '';
                     }
                     else {
-                        tObj.close();
+                        elem.style.display = 'none';
                     }
-                    tObj.refresh();
                 }
             }
         };
+        Edit.prototype.createTooltip = function (element, error, name, display) {
+            var table = this.parent.editSettings.mode !== 'dialog' ? this.parent.getContentTable() :
+                this.parent.element.querySelector('#' + this.parent.element.id + '_dialogEdit_wrapper').querySelector('.e-dlg-content');
+            var client = table.getBoundingClientRect();
+            var inputClient = util_1.parentsUntil(element, 'e-rowcell').getBoundingClientRect();
+            var div = ej2_base_3.createElement('div', {
+                className: 'e-tooltip-wrap e-popup e-griderror',
+                id: name + '_Error',
+                styles: 'display:' + display + ';top:' +
+                    (inputClient.bottom - client.top + table.scrollTop + 9) + 'px;left:' +
+                    (inputClient.left - client.left + table.scrollLeft + inputClient.width / 2) + 'px;'
+            });
+            var content = ej2_base_3.createElement('div', { className: 'e-tip-content' });
+            content.appendChild(error);
+            var arrow = ej2_base_3.createElement('div', { className: 'e-arrow-tip e-tip-top' });
+            arrow.appendChild(ej2_base_3.createElement('div', { className: 'e-arrow-tip-outer e-tip-top' }));
+            arrow.appendChild(ej2_base_3.createElement('div', { className: 'e-arrow-tip-inner e-tip-top' }));
+            div.appendChild(content);
+            div.appendChild(arrow);
+            table.appendChild(div);
+            div.style.left = (parseInt(div.style.left, 10) - div.offsetWidth / 2) + 'px';
+        };
         return Edit;
@@ -466,0 +502,0 @@ }());

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

@@ -22,2 +22,3 @@ import { IGrid } from '../base/interface';
     private exportValueFormatter;
+    private isElementIdChanged;
     /**
@@ -24,0 +25,0 @@ * Constructor for the Grid Excel Export module

src/grid/actions/excel-export.js

@@ -15,2 +15,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.isCsvExport = false;
+            this.isElementIdChanged = false;
             this.parent = parent;
@@ -24,2 +25,3 @@ }
                 gObj.element.id = new Date().toISOString();
+                this.isElementIdChanged = true;
             }
@@ -200,2 +202,5 @@ this.parent = gObj;
                 }
+                if (this.isElementIdChanged) {
+                    gObj.element.id = '';
+                }
             }
@@ -288,12 +293,16 @@ };
                     if (!ej2_base_1.isNullOrUndefined(value)) {
-                        var args = {
-                            column: headerRow.columns[c], value: value, style: undefined
-                        };
-                        gObj.trigger(events.excelQueryCellInfo, args);
+                        var excelCellArgs = { data: record[r], column: headerRow.columns[c] };
+                        gObj.trigger(events.excelQueryCellInfo, ej2_base_1.extend(excelCellArgs, {
+                            column: headerRow.columns[c], data: record[r],
+                            value: value, style: undefined, colSpan: 1
+                        }));
                         var cell = {};
                         cell.index = index + level;
-                        cell.value = args.value;
-                        if (args.style !== undefined) {
+                        cell.value = excelCellArgs.value;
+                        if (excelCellArgs.colSpan > 1) {
+                            cell.colSpan = excelCellArgs.colSpan;
+                        }
+                        if (excelCellArgs.style !== undefined) {
                             var styleIndex = this.getColumnStyle(gObj, index + level);
-                            cell.style = this.mergeOptions(this.styles[styleIndex], args.style);
+                            cell.style = this.mergeOptions(this.styles[styleIndex], excelCellArgs.style);
                         }
@@ -300,0 +309,0 @@ else {

src/grid/actions/filter.d.ts

@@ -24,3 +24,8 @@ import { FilterSettings } from '../base/grid';
     private values;
+    private nextFlMenuOpen;
+    private type;
+    private filterModule;
     private filterOperators;
+    private fltrDlgDetails;
+    private customOperators;
     private parent;
@@ -75,2 +80,5 @@ private serviceLocator;
     removeEventListener(): void;
+    private filterMenuClose(args);
+    private columnMenuFilter(args);
+    private filterDialogOpen(col, target, left?, top?);
     /**
@@ -121,2 +129,5 @@ * Filters grid row by column name with given options.
     private columnPositionChanged(e);
+    private getLocalizedCustomOperators();
+    private clickHandler(e);
+    private filterHandler(args);
 }

src/grid/actions/filter.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@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"], function (require, exports, ej2_base_1, ej2_base_2, util_1, ej2_base_3, ej2_data_1, events, enum_1, row_renderer_1, cell_1, row_1, filter_cell_renderer_1) {
+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) {
     "use strict";
@@ -9,2 +9,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
             this.values = {};
+            this.nextFlMenuOpen = '';
+            this.type = { 'menu': filter_menu_renderer_1.FilterMenuRenderer, 'checkbox': checkbox_filter_1.CheckBoxFilter, 'excel': excel_filter_1.ExcelFilter };
             this.filterOperators = {
@@ -14,2 +16,3 @@ contains: 'contains', endsWith: 'endswith', equal: 'equal', greaterThan: 'greaterthan', greaterThanOrEqual: 'greaterthanorequal',
             };
+            this.fltrDlgDetails = { field: '', isOpen: false };
             this.parent = parent;
@@ -22,22 +25,32 @@ this.filterSettings = filterSettings;
             var gObj = this.parent;
-            if (gObj.columns.length) {
-                var rowRenderer = new row_renderer_1.RowRenderer(this.serviceLocator, enum_1.CellType.Filter);
-                var row = void 0;
-                var cellrender = this.serviceLocator.getService('cellRendererFactory');
-                cellrender.addCellRenderer(enum_1.CellType.Filter, new filter_cell_renderer_1.FilterCellRenderer(this.parent, this.serviceLocator));
-                this.l10n = this.serviceLocator.getService('localization');
-                this.valueFormatter = this.serviceLocator.getService('valueFormatter');
-                rowRenderer.element = ej2_base_3.createElement('tr', { className: 'e-filterbar' });
-                row = this.generateRow();
-                row.data = this.values;
-                this.element = rowRenderer.render(row, gObj.getColumns());
-                this.parent.getHeaderContent().querySelector('thead').appendChild(this.element);
-                var detail = this.element.querySelector('.e-detailheadercell');
-                if (detail) {
-                    detail.className = 'e-filterbarcell e-mastercell';
+            this.l10n = this.serviceLocator.getService('localization');
+            this.getLocalizedCustomOperators();
+            if (this.parent.filterSettings.type === 'filterbar') {
+                if (gObj.columns.length) {
+                    var rowRenderer = new row_renderer_1.RowRenderer(this.serviceLocator, enum_1.CellType.Filter, gObj);
+                    var row = void 0;
+                    var cellrender = this.serviceLocator.getService('cellRendererFactory');
+                    cellrender.addCellRenderer(enum_1.CellType.Filter, new filter_cell_renderer_1.FilterCellRenderer(this.parent, this.serviceLocator));
+                    this.valueFormatter = this.serviceLocator.getService('valueFormatter');
+                    rowRenderer.element = ej2_base_2.createElement('tr', { className: 'e-filterbar' });
+                    row = this.generateRow();
+                    row.data = this.values;
+                    this.element = rowRenderer.render(row, gObj.getColumns());
+                    this.parent.getHeaderContent().querySelector('thead').appendChild(this.element);
+                    var detail = this.element.querySelector('.e-detailheadercell');
+                    if (detail) {
+                        detail.className = 'e-filterbarcell e-mastercell';
+                    }
+                    var gCells = [].slice.call(this.element.querySelectorAll('.e-grouptopleftcell'));
+                    if (gCells.length) {
+                        gCells[gCells.length - 1].classList.add('e-lastgrouptopleftcell');
+                    }
+                    this.wireEvents();
                 }
-                this.wireEvents();
             }
         };
         Filter.prototype.destroy = function () {
+            if (this.filterModule) {
+                this.filterModule.destroy();
+            }
             this.filterSettings.columns = [];
@@ -47,3 +60,5 @@ this.updateFilterMsg();
             this.unWireEvents();
-            ej2_base_3.remove(this.element);
+            if (this.element) {
+                ej2_base_2.remove(this.element);
+            }
         };
@@ -114,3 +129,3 @@ Filter.prototype.generateRow = function (index) {
             };
-            this.parent.trigger(events.actionComplete, ej2_base_2.extend(e, args));
+            this.parent.trigger(events.actionComplete, ej2_base_1.extend(e, args));
             this.isRemove = false;
@@ -157,4 +172,8 @@ };
             this.parent.on(events.contentReady, this.initialEnd, this);
+            this.parent.on(events.filterMenuClose, this.filterMenuClose, this);
+            ej2_base_1.EventHandler.add(document, 'click', this.clickHandler, this);
+            this.parent.on(events.filterOpen, this.columnMenuFilter, this);
         };
         Filter.prototype.removeEventListener = function () {
+            ej2_base_1.EventHandler.remove(document, 'click', this.clickHandler);
             if (this.parent.isDestroyed) {
@@ -169,3 +188,35 @@ return;
             this.parent.off(events.headerRefreshed, this.render);
+            this.parent.off(events.filterOpen, this.columnMenuFilter);
+            this.parent.off(events.filterMenuClose, this.filterMenuClose);
         };
+        Filter.prototype.filterMenuClose = function (args) {
+            this.fltrDlgDetails.isOpen = false;
+        };
+        Filter.prototype.columnMenuFilter = function (args) {
+            this.column = args.col;
+            var ele = ej2_base_1.closest(args.target, '#' + args.id);
+            if (args.isClose && !ele) {
+                this.filterModule.closeDialog();
+            }
+            else if (ele) {
+                this.filterDialogOpen(this.column, args.target);
+            }
+        };
+        Filter.prototype.filterDialogOpen = function (col, target, left, top) {
+            var gObj = this.parent;
+            if (this.filterModule) {
+                this.filterModule.closeDialog();
+            }
+            this.filterModule = new this.type[col.filter.type || this.parent.filterSettings.type](this.parent, gObj.filterSettings, this.serviceLocator, this.customOperators, this);
+            this.filterModule.openDialog({
+                type: col.type, field: col.field, displayName: col.headerText,
+                dataSource: col.filter.dataSource || gObj.dataSource, format: col.format,
+                filteredColumns: gObj.filterSettings.columns, target: target,
+                sortedColumns: gObj.sortSettings.columns, formatFn: col.getFormatter(),
+                parserFn: col.getParser(), query: gObj.query, template: col.getFilterItemTemplate(),
+                hideSearchbox: ej2_base_1.isNullOrUndefined(col.filter.hideSearchbox) ? false : col.filter.hideSearchbox,
+                handler: this.filterHandler.bind(this), localizedStrings: {},
+                position: { X: left, Y: top }
+            });
+        };
         Filter.prototype.filterByColumn = function (fieldName, filterOperator, filterValue, predicate, matchCase, actualFilterValue, actualOperator) {
@@ -175,4 +226,6 @@ var gObj = this.parent;
             this.column = gObj.getColumnByField(fieldName);
-            filterCell = this.element.querySelector('#' + this.column.field + '_filterBarcell');
-            if (!ej2_base_2.isNullOrUndefined(this.column.allowFiltering) && !this.column.allowFiltering) {
+            if (this.filterSettings.type === 'filterbar') {
+                filterCell = gObj.getHeaderContent().querySelector('#' + this.column.field + '_filterBarcell');
+            }
+            if (!ej2_base_1.isNullOrUndefined(this.column.allowFiltering) && !this.column.allowFiltering) {
                 return;
@@ -192,3 +245,6 @@ }
             this.operator = filterOperator;
-            filterValue = filterValue.toString();
+            filterValue = !ej2_base_1.isNullOrUndefined(filterValue) && filterValue.toString();
+            if (this.column.type === 'number' || this.column.type === 'date') {
+                this.matchCase = true;
+            }
             this.values[this.column.field] = filterValue;
@@ -201,3 +257,3 @@ gObj.getColumnHeaderByField(fieldName).setAttribute('aria-filtered', 'true');
             }
-            if (filterCell.value !== filterValue) {
+            if (this.filterSettings.type === 'filterbar' && filterCell.value !== filterValue) {
                 filterCell.value = filterValue;
@@ -235,2 +291,5 @@ }
                         break;
+                    case 'type':
+                        this.parent.refreshHeader();
+                        break;
                 }
@@ -264,2 +323,3 @@ }
         Filter.prototype.removeFilteredColsByField = function (field, isClearFilterBar) {
+            var fCell;
             var cols = this.filterSettings.columns;
@@ -275,8 +335,12 @@ if (util_1.isActionPrevent(this.parent)) {
                 if (cols[i].field === field) {
-                    if (!(isClearFilterBar === false)) {
-                        this.element.querySelector('#' + cols[i].field + '_filterBarcell').value = '';
+                    if (this.filterSettings.type === 'filterbar' && !isClearFilterBar) {
+                        fCell = this.parent.getHeaderContent().querySelector('#' + cols[i].field + '_filterBarcell');
                         delete this.values[field];
                     }
                     cols.splice(i, 1);
-                    this.parent.getColumnHeaderByField(field).removeAttribute('aria-filtered');
+                    var fltrElement = this.parent.getColumnHeaderByField(field);
+                    fltrElement.removeAttribute('aria-filtered');
+                    if (this.filterSettings.type !== 'filterbar') {
+                        fltrElement.querySelector('.e-icon-filter').classList.remove('e-filtered');
+                    }
                     this.isRemove = true;
@@ -297,3 +361,3 @@ this.parent.notify(events.modelChanged, {
             var target = e.target;
-            if (ej2_base_3.matches(target, '.e-filterbar input')) {
+            if (target && ej2_base_2.matches(target, '.e-filterbar input')) {
                 this.column = gObj.getColumnByField(target.id.split('_')[0]);
@@ -337,22 +401,26 @@ if (!this.column) {
         Filter.prototype.updateFilterMsg = function () {
-            var gObj = this.parent;
-            var columns = this.filterSettings.columns;
-            var column;
-            if (!this.filterSettings.showFilterBarStatus) {
-                return;
-            }
-            if (columns.length > 0 && this.filterStatusMsg !== this.l10n.getConstant('InvalidFilterMessage')) {
-                this.filterStatusMsg = '';
-                for (var index = 0; index < columns.length; index++) {
-                    column = gObj.getColumnByField(columns[index].field);
-                    if (index) {
-                        this.filterStatusMsg += ' && ';
+            if (this.filterSettings.type === 'filterbar') {
+                var gObj = this.parent;
+                var columns = this.filterSettings.columns;
+                var formater = this.serviceLocator.getService('valueFormatter');
+                var column = void 0;
+                var value = void 0;
+                if (!this.filterSettings.showFilterBarStatus) {
+                    return;
+                }
+                if (columns.length > 0 && this.filterStatusMsg !== this.l10n.getConstant('InvalidFilterMessage')) {
+                    this.filterStatusMsg = '';
+                    for (var index = 0; index < columns.length; index++) {
+                        column = gObj.getColumnByField(columns[index].field);
+                        if (index) {
+                            this.filterStatusMsg += ' && ';
+                        }
+                        this.filterStatusMsg += column.headerText + ': ' + this.values[column.field];
                     }
-                    this.filterStatusMsg += column.headerText + ': ' + this.values[column.field];
                 }
+                if (gObj.allowPaging) {
+                    gObj.updateExternalMessage(this.filterStatusMsg);
+                }
+                this.filterStatusMsg = '';
             }
-            if (gObj.allowPaging) {
-                gObj.updateExternalMessage(this.filterStatusMsg);
-            }
-            this.filterStatusMsg = '';
         };
@@ -391,3 +459,4 @@ Filter.prototype.checkForSkipInput = function (column, value) {
         Filter.prototype.onTimerTick = function () {
-            var filterElement = this.element.querySelector('#' + this.column.field + '_filterBarcell');
+            var filterElement = this.parent.getHeaderContent()
+                .querySelector('#' + this.column.field + '_filterBarcell');
             var filterValue = JSON.parse(JSON.stringify(filterElement.value));
@@ -437,3 +506,3 @@ this.stopTimer();
                         this.value = this.valueFormatter.fromView(this.value, this.column.getParser(), this.column.type);
-                        if (ej2_base_2.isNullOrUndefined(this.value)) {
+                        if (ej2_base_1.isNullOrUndefined(this.value)) {
                             this.filterStatusMsg = this.l10n.getConstant('InvalidFilterMessage');
@@ -480,3 +549,3 @@ }
             var multipleOp = value.slice(0, 2);
-            var operators = ej2_base_2.extend({ '=': this.filterOperators.equal, '!': this.filterOperators.notEqual }, ej2_data_1.DataUtil.operatorSymbols);
+            var operators = ej2_base_1.extend({ '=': this.filterOperators.equal, '!': this.filterOperators.notEqual }, ej2_data_1.DataUtil.operatorSymbols);
             if (operators.hasOwnProperty(singleOp) || operators.hasOwnProperty(multipleOp)) {
@@ -506,2 +575,94 @@ this.operator = operators[singleOp];
         };
+        Filter.prototype.getLocalizedCustomOperators = function () {
+            var numOptr = [
+                { value: 'equal', text: this.l10n.getConstant('Equal') },
+                { value: 'greaterThan', text: this.l10n.getConstant('GreaterThan') },
+                { value: 'greaterThanOrEqual', text: this.l10n.getConstant('GreaterThanOrEqual') },
+                { value: 'lessThan', text: this.l10n.getConstant('LessThan') },
+                { value: 'lessThanOrEqual', text: this.l10n.getConstant('LessThanOrEqual') },
+                { value: 'notEqual', text: this.l10n.getConstant('NotEqual') }
+            ];
+            this.customOperators = {
+                stringOperator: [
+                    { value: 'startsWith', text: this.l10n.getConstant('StartsWith') },
+                    { value: 'endsWith', text: this.l10n.getConstant('EndsWith') },
+                    { value: 'contains', text: this.l10n.getConstant('Contains') },
+                    { value: 'equal', text: this.l10n.getConstant('Equal') }, { value: 'notEqual', text: this.l10n.getConstant('NotEqual') }
+                ],
+                numberOperator: numOptr,
+                dateOperator: numOptr,
+                datetimeOperator: numOptr,
+                booleanOperator: [
+                    { value: 'equal', text: this.l10n.getConstant('Equal') }, { value: 'notEqual', text: this.l10n.getConstant('NotEqual') }
+                ]
+            };
+        };
+        ;
+        Filter.prototype.clickHandler = function (e) {
+            if (this.parent.filterSettings.type === 'menu' ||
+                this.parent.filterSettings.type === 'checkbox' || this.parent.filterSettings.type === 'excel') {
+                var gObj = this.parent;
+                var target = e.target;
+                var elem = util_2.parentsUntil(target, 'e-filter-popup');
+                if (elem) {
+                    return;
+                }
+                if (target.classList.contains('e-filtermenudiv')) {
+                    var col = gObj.getColumnByUid(util_2.parentsUntil(target, 'e-headercell').firstElementChild.getAttribute('e-mappinguid'));
+                    var gClient = gObj.element.getBoundingClientRect();
+                    var fClient = target.getBoundingClientRect();
+                    this.column = col;
+                    if (this.fltrDlgDetails.field === col.field && this.fltrDlgDetails.isOpen) {
+                        return;
+                    }
+                    if (this.filterModule) {
+                        this.filterModule.closeDialog();
+                    }
+                    this.fltrDlgDetails = { field: col.field, isOpen: true };
+                    this.filterDialogOpen(this.column, target, fClient.right - gClient.left, fClient.bottom - gClient.top);
+                }
+                else {
+                    var datepickerEle = target.classList.contains('e-day');
+                    if (this.filterModule &&
+                        (!util_2.parentsUntil(target, 'e-popup-wrapper')
+                            && (!ej2_base_1.closest(target, '.e-filter-item.e-menu-item'))
+                            && (!util_2.parentsUntil(target, 'e-popup'))) && !datepickerEle) {
+                        this.filterModule.closeDialog(target);
+                    }
+                }
+            }
+        };
+        Filter.prototype.filterHandler = function (args) {
+            var filterIconElement;
+            var dataManager = new ej2_data_1.DataManager(this.filterSettings.columns);
+            var query = new ej2_data_1.Query().where('field', this.filterOperators.equal, args.field);
+            var result = dataManager.executeLocal(query);
+            for (var i = 0; i < result.length; i++) {
+                var index = -1;
+                for (var j = 0; j < this.filterSettings.columns.length; j++) {
+                    if (result[i].field === this.filterSettings.columns[j].field) {
+                        index = j;
+                        break;
+                    }
+                }
+                if (index !== -1) {
+                    this.filterSettings.columns.splice(index, 1);
+                }
+            }
+            var iconClass = this.parent.showColumnMenu ? '.e-columnmenu' : '.e-icon-filter';
+            filterIconElement = this.parent.getColumnHeaderByField(args.field).querySelector(iconClass);
+            if (args.action === 'filtering') {
+                this.filterSettings.columns = this.filterSettings.columns.concat(args.filterCollection);
+                if (this.filterSettings.columns.length && filterIconElement) {
+                    filterIconElement.classList.add('e-filtered');
+                }
+            }
+            else {
+                if (filterIconElement) {
+                    filterIconElement.classList.remove('e-filtered');
+                }
+                this.parent.refresh();
+            }
+            this.parent.dataBind();
+        };
         return Filter;
@@ -508,0 +669,0 @@ }());

src/grid/actions/group.d.ts

@@ -25,2 +25,3 @@ import { GroupSettingsModel } from '../base/grid-model';
     private aria;
+    private focus;
     /**
@@ -27,0 +28,0 @@ * Constructor for Grid group module

src/grid/actions/group.js

@@ -66,2 +66,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) {
             this.sortedColumns = sortedColumns;
+            this.focus = serviceLocator.getService('focus');
             this.addEventListener();
@@ -180,2 +181,13 @@ }
                     break;
+                case 'enter':
+                    if (this.parent.isEdit) {
+                        return;
+                    }
+                    var element = this.focus.getFocusedElement();
+                    var row = element.parentElement.querySelector('[class^="e-record"]');
+                    if (!row) {
+                        break;
+                    }
+                    this.expandCollapseRows(row);
+                    break;
             }
@@ -239,3 +251,4 @@ };
                 if (trgt.classList.contains('e-recordpluscollapse')) {
-                    trgt.className = 'e-recordplusexpand';
+                    ej2_base_2.addClass([trgt], 'e-recordplusexpand');
+                    ej2_base_2.removeClass([trgt], 'e-recordpluscollapse');
                     trgt.firstElementChild.className = 'e-icons e-gdiagonaldown e-icon-gdownarrow';
@@ -246,3 +259,4 @@ expand = true;
                     isHide = true;
-                    trgt.className = 'e-recordpluscollapse';
+                    ej2_base_2.removeClass([trgt], 'e-recordplusexpand');
+                    ej2_base_2.addClass([trgt], 'e-recordpluscollapse');
                     trgt.firstElementChild.className = 'e-icons e-gnextforward e-icon-grightarrow';
@@ -277,3 +291,4 @@ }
                 for (var i = 0, len = toExpand.length; i < len; i++) {
-                    toExpand[i].className = 'e-recordpluscollapse';
+                    ej2_base_2.removeClass([toExpand[i]], 'e-recordplusexpand');
+                    ej2_base_2.addClass([toExpand[i]], 'e-recordpluscollapse');
                     toExpand[i].firstElementChild.className = 'e-icons e-gnextforward e-icon-grightarrow';
@@ -455,6 +470,17 @@ this.expandCollapseRows(toExpand[i]);
             var headerCell = gObj.getColumnHeaderByUid(column.uid);
-            childDiv.appendChild(ej2_base_2.createElement('span', {
-                className: 'e-grouptext', innerHTML: column.headerText,
-                attrs: { tabindex: '-1', 'aria-label': 'sort the grouped column' }
-            }));
+            if (!ej2_base_3.isNullOrUndefined(column.headerTemplate)) {
+                if (column.headerTemplate.indexOf('#') !== -1) {
+                    childDiv.innerHTML = document.querySelector(column.headerTemplate).innerHTML.trim();
+                }
+                else {
+                    childDiv.innerHTML = column.headerTemplate;
+                }
+                childDiv.firstElementChild.classList.add('e-grouptext');
+            }
+            else {
+                childDiv.appendChild(ej2_base_2.createElement('span', {
+                    className: 'e-grouptext', innerHTML: column.headerText,
+                    attrs: { tabindex: '-1', 'aria-label': 'sort the grouped column' }
+                }));
+            }
             if (this.groupSettings.showToggleButton) {
@@ -487,12 +513,14 @@ childDiv.appendChild(ej2_base_2.createElement('span', {
                         var column = this.parent.getColumnByUid(headers[i].getAttribute('e-mappinguid'));
-                        if (headers[i].querySelectorAll('.e-grptogglebtn').length) {
-                            ej2_base_2.remove(headers[i].querySelectorAll('.e-grptogglebtn')[0]);
+                        if (!this.parent.showColumnMenu || (this.parent.showColumnMenu && !column.showColumnMenu)) {
+                            if (headers[i].querySelectorAll('.e-grptogglebtn').length) {
+                                ej2_base_2.remove(headers[i].querySelectorAll('.e-grptogglebtn')[0]);
+                            }
+                            if (!isRemove) {
+                                headers[i].appendChild(ej2_base_2.createElement('span', {
+                                    className: 'e-grptogglebtn e-icons ' +
+                                        (this.groupSettings.columns.indexOf(column.field) > -1 ? 'e-toggleungroup e-icon-ungroup'
+                                            : 'e-togglegroup e-icon-group'), attrs: { tabindex: '-1', 'aria-label': 'Group button' }
+                                }));
+                            }
                         }
-                        if (!isRemove) {
-                            headers[i].appendChild(ej2_base_2.createElement('span', {
-                                className: 'e-grptogglebtn e-icons ' +
-                                    (this.groupSettings.columns.indexOf(column.field) > -1 ? 'e-toggleungroup e-icon-ungroup'
-                                        : 'e-togglegroup e-icon-group'), attrs: { tabindex: '-1', 'aria-label': 'Group button' }
-                            }));
-                        }
                     }
@@ -499,0 +527,0 @@ }

src/grid/actions/normal-edit.js

@@ -14,3 +14,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) {
             var gObj = this.parent;
-            if (util_1.parentsUntil(target, 'e-gridcontent')) {
+            if (util_1.parentsUntil(target, 'e-gridcontent') && !util_1.parentsUntil(target, 'e-unboundcelldiv')) {
                 this.rowIndex = util_1.parentsUntil(target, 'e-rowcell') ? parseInt(target.parentElement.getAttribute('aria-rowindex'), 10) : -1;
@@ -28,5 +28,9 @@ if (gObj.isEdit) {
         NormalEdit.prototype.editComplete = function (e) {
+            this.parent.isEdit = false;
             switch (e.requestType) {
                 case 'save':
-                    this.parent.selectRow(0);
+                    if (!this.parent.element.classList.contains('e-checkboxselection')
+                        || !this.parent.element.classList.contains('e-persistselection')) {
+                        this.parent.selectRow(0);
+                    }
                     this.parent.trigger(events.actionComplete, ej2_base_1.extend(e, {
@@ -45,3 +49,2 @@ requestType: 'save',
             }
-            this.parent.element.focus();
         };
@@ -67,4 +70,7 @@ NormalEdit.prototype.startEdit = function (tr) {
             }
+            gObj.isEdit = true;
             gObj.clearSelection();
-            gObj.isEdit = true;
+            if (gObj.editSettings.mode === 'dialog') {
+                args.row.classList.add('e-dlgeditrow');
+            }
             this.renderer.update(args);
@@ -104,4 +110,9 @@ this.uid = tr.getAttribute('data-uid');
             }
-            this.parent.notify(events.dialogDestroy, {});
+            gObj.editModule.destroyWidgets();
+            gObj.editModule.destroyForm();
+            gObj.notify(events.dialogDestroy, {});
             this.stopEditStatus();
+            if (gObj.editSettings.mode === 'dialog' && args.action !== 'add') {
+                gObj.element.querySelector('.e-dlgeditrow').classList.remove('e-dlgeditrow');
+            }
         };
@@ -132,5 +143,9 @@ NormalEdit.prototype.editHandler = function (args) {
             args.type = events.actionComplete;
+            this.parent.isEdit = false;
             this.refreshRow(args.data);
             this.parent.trigger(events.actionComplete, args);
-            this.parent.selectRow(this.rowIndex > -1 ? this.rowIndex : this.editRowIndex);
+            if (!this.parent.element.classList.contains('e-checkboxselection')
+                || !this.parent.element.classList.contains('e-persistselection')) {
+                this.parent.selectRow(this.rowIndex > -1 ? this.rowIndex : this.editRowIndex);
+            }
             this.parent.element.focus();
@@ -141,3 +156,2 @@ this.parent.hideSpinner();
             this.parent.trigger(events.actionFailure, e);
-            this.parent.hideSpinner();
         };
@@ -153,2 +167,5 @@ NormalEdit.prototype.refreshRow = function (data) {
         NormalEdit.prototype.closeEdit = function () {
+            if (!this.parent.isEdit) {
+                return;
+            }
             var gObj = this.parent;
@@ -159,2 +176,3 @@ var args = {
             gObj.trigger(events.actionBegin, args);
+            gObj.isEdit = false;
             this.stopEditStatus();
@@ -166,3 +184,2 @@ args.type = events.actionComplete;
             gObj.selectRow(this.rowIndex);
-            gObj.element.focus();
             gObj.trigger(events.actionComplete, args);
@@ -172,11 +189,11 @@ };
             var gObj = this.parent;
-            if (gObj.isEdit) {
-                return;
-            }
             if (data) {
                 gObj.notify(events.modelChanged, {
-                    requestType: 'add', type: events.actionBegin, data: data
+                    requestType: 'save', type: events.actionBegin, data: data, selectedRow: 0, action: 'add'
                 });
                 return;
             }
+            if (gObj.isEdit) {
+                return;
+            }
             this.previousData = {};
@@ -196,4 +213,4 @@ this.uid = '';
             }
+            gObj.isEdit = true;
             gObj.clearSelection();
-            gObj.isEdit = true;
             this.renderer.addNew({ rowData: args.data, requestType: 'add' });
@@ -214,3 +231,2 @@ gObj.editModule.applyFormValidation();
             var gObj = this.parent;
-            gObj.isEdit = false;
             var elem = gObj.element.querySelector('.e-addedrow');
@@ -217,0 +233,0 @@ if (elem) {

src/grid/actions/page.js

@@ -87,4 +87,5 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../../pager/pager", "../../pager/pager-dropdown", "../../pager/external-message", "../base/util", "../base/constant"], function (require, exports, ej2_base_1, ej2_base_2, pager_1, pager_dropdown_1, external_message_1, util_1, events) {
                     gObj.notify(events.preventBatch, { instance: this, handler: this.goToPage, arg1: e.currentPage });
+                    this.isForceCancel = true;
                     this.pagerObj.currentPage = gObj.pageSettings.currentPage;
-                    this.isForceCancel = true;
+                    this.pagerObj.dataBind();
                 }
@@ -91,0 +92,0 @@ else {

src/grid/actions/pdf-export.js

@@ -165,2 +165,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"], 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) {
                 row.cells.getCell(groupIndex).value = value;
+                row.cells.getCell(groupIndex + 1).style.stringFormat = new ej2_pdf_export_3.PdfStringFormat(ej2_pdf_export_3.PdfTextAlignment.Left);
                 row.style.setBorder(border);
@@ -642,6 +643,9 @@ row.style.setFont(font);
                     var value = items[columns[j].field];
+                    var data = items;
                     var args = {
+                        data: data,
                         value: value,
                         column: columns[j],
-                        style: undefined
+                        style: undefined,
+                        colSpan: 1
                     };
@@ -654,2 +658,13 @@ gObj.trigger(events.pdfQueryCellInfo, args);
                     }
+                    if (args.colSpan > 1) {
+                        if ((j + startIndex + 1 + args.colSpan) > gridRow.cells.count) {
+                            args.colSpan = gridRow.cells.count - (j + startIndex + 1);
+                        }
+                        cell.columnSpan = args.colSpan;
+                        for (var i = 1; i < cell.columnSpan; i++) {
+                            var spanCell = gridRow.cells.getCell(j + startIndex + i);
+                            spanCell.value = '';
+                        }
+                        j += (args.colSpan - 1);
+                    }
                 }
@@ -656,0 +671,0 @@ }

src/grid/actions/resize.js

@@ -129,3 +129,8 @@ 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) {
             }
-            this.parent.on(events.headerRefreshed, this.render, this);
+            if (this.parent.frozenColumns) {
+                this.parent.on(events.freezeRefresh, this.render, this);
+            }
+            else {
+                this.parent.on(events.headerRefreshed, this.render, this);
+            }
         };
@@ -161,3 +166,5 @@ Resize.prototype.removeEventListener = function () {
         Resize.prototype.getResizeHandlers = function () {
-            return [].slice.call(this.parent.getHeaderTable().querySelectorAll('.' + exports.resizeClassList.root));
+            return this.parent.frozenColumns ?
+                [].slice.call(this.parent.getHeaderContent().querySelectorAll('.' + exports.resizeClassList.root))
+                : [].slice.call(this.parent.getHeaderTable().querySelectorAll('.' + exports.resizeClassList.root));
         };
@@ -271,3 +278,3 @@ Resize.prototype.setHandlerHeight = function () {
         Resize.prototype.resizeEnd = function (e) {
-            if (!this.helper) {
+            if (!this.helper || this.parent.isDestroyed) {
                 return;
@@ -337,3 +344,11 @@ }
             var rect = ej2_base_1.closest(this.element, exports.resizeClassList.header);
-            var tr = [].slice.call(this.parent.getHeaderTable().querySelectorAll('tr'));
+            var tr = [].slice.call(this.parent.getHeaderContent().querySelectorAll('tr'));
+            if (this.parent.frozenColumns) {
+                if (rect.parentElement.children.length !== this.parent.frozenColumns) {
+                    tr.splice(0, tr.length / 2);
+                }
+                else {
+                    tr.splice(tr.length / 2, tr.length / 2);
+                }
+            }
             for (var i = tr.indexOf(rect.parentElement); i < tr.length; i++) {
@@ -347,3 +362,4 @@ height += tr[i].offsetHeight;
         Resize.prototype.getScrollBarWidth = function (height) {
-            var ele = this.parent.getContent().firstChild;
+            var ele = this.parent.frozenColumns ? this.parent.getContent().querySelector('.e-movablecontent')
+                : this.parent.getContent().firstChild;
             return (ele.scrollHeight > ele.clientHeight && height) ||
@@ -350,0 +366,0 @@ ele.scrollWidth > ele.clientWidth ? util_1.getScrollBarWidth() : 0;

src/grid/actions/row-reorder.js

@@ -65,2 +65,5 @@ 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) {
                 var gObj = _this.parent;
+                if (_this.parent.isDestroyed) {
+                    return;
+                }
                 var target = _this.getElementFromPosition(e.helper, e.event);
@@ -152,3 +155,3 @@ gObj.element.classList.remove('e-rowdrag');
                 }
-                srcControl.notify(events.rowsRemoved, { indexes: this.selectedRows });
+                srcControl.notify(events.rowsRemoved, { indexes: this.selectedRows, records: records });
                 srcControl.notify(events.modelChanged, {
@@ -155,0 +158,0 @@ type: events.actionBegin, requestType: 'rowdraganddrop'

src/grid/actions/scroll.d.ts

@@ -13,2 +13,3 @@ import { IGrid, IAction } from '../base/interface';
     private widthService;
+    private pageY;
     /**
@@ -56,2 +57,7 @@ * Constructor for the Grid scrolling.
     private onContentScroll(scrollTarget);
+    private onFreezeContentScroll(scrollTarget);
+    private onWheelScroll(scrollTarget);
+    private onTouchScroll(scrollTarget);
+    private setPageY();
+    private getPointY(e);
     private wireEvents();
@@ -58,0 +64,0 @@ /**

src/grid/actions/scroll.js

@@ -18,3 +18,4 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/util", "../base/constant", "../services/width-controller"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, util_1, constant_1, width_controller_1) {
             this.parent.element.style.width = ej2_base_3.formatUnit(this.parent.width);
-            if (this.parent.toolbarModule && this.parent.toolbarModule.toolbar.element) {
+            if (this.parent.toolbarModule && this.parent.toolbarModule.toolbar &&
+                this.parent.toolbarModule.toolbar.element) {
                 this.parent.toolbarModule.toolbar.refreshOverflow();
@@ -24,4 +25,12 @@ }
         Scroll.prototype.setHeight = function () {
+            var mHdrHeight = 0;
             var content = this.parent.getContent().firstChild;
-            content.style.height = ej2_base_3.formatUnit(this.parent.height);
+            if (this.parent.frozenRows) {
+                mHdrHeight =
+                    this.parent.getHeaderContent().querySelector('tbody').offsetHeight;
+                content.style.height = ej2_base_3.formatUnit(this.parent.height - mHdrHeight);
+            }
+            else {
+                content.style.height = ej2_base_3.formatUnit(this.parent.height);
+            }
             this.ensureOverflow(content);
@@ -95,2 +104,68 @@ };
         };
+        Scroll.prototype.onFreezeContentScroll = function (scrollTarget) {
+            var _this = this;
+            var element = scrollTarget;
+            return function (e) {
+                if (_this.content.querySelector('tbody') === null) {
+                    return;
+                }
+                var target = e.target;
+                var top = target.scrollTop;
+                if (_this.previousValues.top === top) {
+                    return;
+                }
+                element.scrollTop = top;
+                _this.previousValues.top = top;
+                if (_this.parent.isDestroyed) {
+                    return;
+                }
+            };
+        };
+        Scroll.prototype.onWheelScroll = function (scrollTarget) {
+            var _this = this;
+            var element = scrollTarget;
+            return function (e) {
+                if (_this.content.querySelector('tbody') === null) {
+                    return;
+                }
+                var top = element.scrollTop + e.deltaY;
+                if (_this.previousValues.top === top) {
+                    return;
+                }
+                e.preventDefault();
+                _this.parent.getContent().querySelector('.e-frozencontent').scrollTop = top;
+                element.scrollTop = top;
+                _this.previousValues.top = top;
+            };
+        };
+        Scroll.prototype.onTouchScroll = function (scrollTarget) {
+            var _this = this;
+            var element = scrollTarget;
+            return function (e) {
+                var pageY = _this.getPointY(e);
+                var top = element.scrollTop + (_this.pageY - pageY);
+                if (_this.previousValues.top === top) {
+                    return;
+                }
+                e.preventDefault();
+                _this.parent.getContent().querySelector('.e-frozencontent').scrollTop = top;
+                element.scrollTop = top;
+                _this.pageY = pageY;
+                _this.previousValues.top = top;
+            };
+        };
+        Scroll.prototype.setPageY = function () {
+            var _this = this;
+            return function (e) {
+                _this.pageY = _this.getPointY(e);
+            };
+        };
+        Scroll.prototype.getPointY = function (e) {
+            if (e.touches && e.touches.length) {
+                return e.touches[0].pageY;
+            }
+            else {
+                return e.pageY;
+            }
+        };
         Scroll.prototype.wireEvents = function () {
@@ -100,4 +175,18 @@ if (this.oneTimeReady) {
                 this.header = this.parent.getHeaderContent().firstChild;
-                ej2_base_1.EventHandler.add(this.content, 'scroll', this.onContentScroll(this.header), this);
-                ej2_base_1.EventHandler.add(this.header, 'scroll', this.onContentScroll(this.content), this);
+                var mCont = this.content.querySelector('.e-movablecontent');
+                var fCont = this.content.querySelector('.e-frozencontent');
+                var mHdr = this.header.querySelector('.e-movableheader');
+                if (this.parent.frozenColumns) {
+                    ej2_base_1.EventHandler.add(mCont, 'scroll', this.onContentScroll(mHdr), this);
+                    ej2_base_1.EventHandler.add(mCont, 'scroll', this.onFreezeContentScroll(fCont), this);
+                    ej2_base_1.EventHandler.add(fCont, 'scroll', this.onFreezeContentScroll(mCont), this);
+                    ej2_base_1.EventHandler.add(mHdr, 'scroll', this.onContentScroll(mCont), this);
+                    ej2_base_1.EventHandler.add(fCont, 'wheel', this.onWheelScroll(mCont), this);
+                    ej2_base_1.EventHandler.add(fCont, 'touchstart', this.setPageY(), this);
+                    ej2_base_1.EventHandler.add(fCont, 'touchmove', this.onTouchScroll(mCont), this);
+                }
+                else {
+                    ej2_base_1.EventHandler.add(this.content, 'scroll', this.onContentScroll(this.header), this);
+                    ej2_base_1.EventHandler.add(this.header, 'scroll', this.onContentScroll(this.content), this);
+                }
                 if (this.parent.aggregates.length) {
@@ -129,3 +218,8 @@ ej2_base_1.EventHandler.add(this.parent.getFooterContent().firstChild, 'scroll', this.onContentScroll(this.content), this);
         Scroll.prototype.ensureOverflow = function (content) {
-            content.style.overflowY = this.parent.height === 'auto' ? 'auto' : 'scroll';
+            if (this.parent.frozenColumns) {
+                content.querySelector('.e-movablecontent').style.overflowY = this.parent.height === 'auto' ? 'auto' : 'scroll';
+            }
+            else {
+                content.style.overflowY = this.parent.height === 'auto' ? 'auto' : 'scroll';
+            }
         };
@@ -132,0 +226,0 @@ Scroll.prototype.onPropertyChanged = function (e) {

src/grid/actions/selection.d.ts

@@ -32,2 +32,3 @@ import { IGrid, IAction, IIndex, ISelectedCell } from '../base/interface';
     private prevECIdxs;
+    private preventFocus;
     private selectedRowIndex;
@@ -47,3 +48,21 @@ private isMultiShiftRequest;
     private contentRenderer;
+    private isChkSelection;
+    private chkAllBox;
+    private checkedTarget;
+    private persistSelection;
+    private primaryKey;
+    private chkField;
+    private selectedRowState;
+    private chkAllObj;
+    private isBatchEdit;
+    private prevKey;
+    private totalRecordsCount;
+    private isChkAll;
+    private isUnChkAll;
+    private chkAllCollec;
+    private isCheckedOnAdd;
+    private persistSelectedData;
+    private selectionRequest;
     private parent;
+    private focus;
     /**
@@ -109,2 +128,4 @@ * Constructor for the Grid selection module
     private updateRowProps(startIndex);
+    private updatePersistCollection(selectedRow, chkState);
+    private updateCheckBoxes(row, chkState?);
     private updateRowSelection(selectedRow, startIndex);
@@ -149,2 +170,4 @@ /**
     addCellsToSelection(cellIndexes: IIndex[]): void;
+    private getColIndex(rowIndex, index);
+    private getLastColIndex(rowIndex);
     private clearCell();
@@ -180,2 +203,14 @@ private cellDeselect(type, cellIndexes, data, cells);
     private initialEnd();
+    private checkBoxSelectionChanged();
+    private dataSuccess(res);
+    private refreshPersistSelection();
+    private actionBegin(e);
+    private actionComplete(e);
+    private onDataBound();
+    private checkSelectAllAction(checkState);
+    private checkSelectAll(checkBox);
+    private checkSelect(checkBox);
+    private moveIntoUncheckCollection(row);
+    private triggerChkChangeEvent(checkBox, checkState);
+    private setCheckAllState();
     private clickHandler(e);
@@ -185,5 +220,3 @@ private popUpClickHandler(e);
     private rowCellSelectionHandler(rowIndex, cellIndex);
-    private keyPressHandler(e);
-    private checkVisible(element);
-    private getRowHeight(element);
+    private onCellFocused(e);
     /**
@@ -195,43 +228,7 @@ * Apply ctrl + A key selection
     ctrlPlusA(): void;
-    /**
-     * Apply downArrow key selection
-     * @return {void}
-     * @hidden
-     */
-    downArrowKey(): void;
-    /**
-     * Apply upArrow key selection
-     * @return {void}
-     * @hidden
-     */
-    upArrowKey(): void;
-    private applyDownUpKey(key, cond1, cond2);
+    private applyDownUpKey(rowIndex?, cellIndex?);
     private applyUpDown(rowIndex);
+    private applyRightLeftKey(rowIndex?, cellIndex?);
+    private applyHomeEndKey(rowIndex?, cellIndex?);
     /**
-     * Apply rightArrow key selection
-     * @return {void}
-     * @hidden
-     */
-    rightArrowKey(): void;
-    /**
-     * Apply leftArrow key selection
-     * @return {void}
-     * @hidden
-     */
-    leftArrowKey(): void;
-    private applyRightLeftKey(key1, key2, cond);
-    /**
-     * Apply home key selection
-     * @return {void}
-     * @hidden
-     */
-    homeKey(): void;
-    /**
-     * Apply end key selection
-     * @return {void}
-     * @hidden
-     */
-    endKey(): void;
-    private applyHomeEndKey(key);
-    /**
      * Apply shift+down key selection
@@ -241,35 +238,5 @@ * @return {void}
      */
-    shiftDownKey(): void;
-    /**
-     * Apply shift+up key selection
-     * @return {void}
-     * @hidden
-     */
-    shiftUpKey(): void;
-    /**
-     * Apply shift+left key selection
-     * @return {void}
-     * @hidden
-     */
-    shiftLeftKey(): void;
-    /**
-     * Apply shift+right key selection
-     * @return {void}
-     * @hidden
-     */
-    shiftRightKey(): void;
-    private applyShiftLeftRightKey(key, cond);
-    /**
-     * Apply ctrl+home key selection
-     * @return {void}
-     * @hidden
-     */
-    ctrlHomeKey(): void;
-    /**
-     * Apply ctrl+end key selection
-     * @return {void}
-     * @hidden
-     */
-    ctrlEndKey(): void;
-    private applyCtrlHomeEndKey(rowIndex, colIndex);
+    shiftDownKey(rowIndex?: number, cellIndex?: number): void;
+    private applyShiftLeftRightKey(rowIndex?, cellIndex?);
+    private applyCtrlHomeEndKey(rowIndex, cellIndex);
     private addRemoveClassesForRow(row, isAdd, clearAll, ...args);
@@ -279,4 +246,8 @@ private isRowType();
     private isSingleSel();
-    private isCellHide(cellIndex);
     private getRenderer();
+    /**
+     * Gets the collection of selected records.
+     * @return {Object[]}
+     */
+    getSelectedRecords(): Object[];
 }

src/grid/actions/selection.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/util", "../base/constant", "../base/enum"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, util_1, events, enum_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "../base/util", "../base/constant", "../base/enum"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, ej2_data_1, util_1, events, enum_1) {
     "use strict";
@@ -9,8 +9,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
             this.selectedRecords = [];
+            this.preventFocus = false;
             this.isMultiShiftRequest = false;
             this.isMultiCtrlRequest = false;
             this.enableSelectMultiTouch = false;
+            this.persistSelection = false;
+            this.selectedRowState = {};
+            this.isBatchEdit = false;
+            this.prevKey = 0;
+            this.totalRecordsCount = 0;
+            this.isChkAll = false;
+            this.isUnChkAll = false;
+            this.chkAllCollec = [];
+            this.isCheckedOnAdd = false;
+            this.persistSelectedData = [];
+            this.selectionRequest = false;
             this.parent = parent;
             this.selectionSettings = selectionSettings;
             this.factory = locator.getService('rendererFactory');
+            this.focus = locator.getService('focus');
             this.addEventListener();
@@ -37,3 +50,3 @@ }
         Selection.prototype.isEditing = function () {
-            return this.parent.editSettings.mode !== 'batch' && this.parent.isEdit;
+            return this.parent.editSettings.mode !== 'batch' && this.parent.isEdit && !this.persistSelection;
         };
@@ -157,2 +170,36 @@ Selection.prototype.selectRow = function (index, isToggle) {
         };
+        Selection.prototype.updatePersistCollection = function (selectedRow, chkState) {
+            if (this.persistSelection && !ej2_base_2.isNullOrUndefined(selectedRow)) {
+                var rowObj = this.parent.getRowObjectFromUID(selectedRow.getAttribute('data-uid'));
+                var pKey = rowObj ? rowObj.data[this.primaryKey] : null;
+                if (pKey === null) {
+                    return;
+                }
+                rowObj.isSelected = chkState;
+                if (chkState) {
+                    this.selectedRowState[pKey] = chkState;
+                    if (this.selectionRequest && this.persistSelectedData.indexOf(rowObj.data) < 0) {
+                        this.persistSelectedData.push(rowObj.data);
+                    }
+                }
+                else {
+                    delete (this.selectedRowState[pKey]);
+                    if (this.selectionRequest && this.persistSelectedData.indexOf(rowObj.data) >= 0) {
+                        this.persistSelectedData.splice(this.persistSelectedData.indexOf(rowObj.data), 1);
+                    }
+                }
+            }
+        };
+        Selection.prototype.updateCheckBoxes = function (row, chkState) {
+            if (!ej2_base_2.isNullOrUndefined(row)) {
+                var chkBox = row.querySelector('.e-checkselect');
+                if (!ej2_base_2.isNullOrUndefined(chkBox) && this.checkedTarget !== chkBox) {
+                    chkBox.ej2_instances[0].setProperties({ checked: chkState });
+                    if (ej2_base_2.isNullOrUndefined(this.checkedTarget) || (!ej2_base_2.isNullOrUndefined(this.checkedTarget)
+                        && !this.checkedTarget.classList.contains('e-checkselectall'))) {
+                        this.setCheckAllState();
+                    }
+                }
+            }
+        };
         Selection.prototype.updateRowSelection = function (selectedRow, startIndex) {
@@ -165,12 +212,26 @@ if (!selectedRow) {
             selectedRow.setAttribute('aria-selected', 'true');
+            this.updatePersistCollection(selectedRow, true);
+            this.updateCheckBoxes(selectedRow, true);
             this.addRemoveClassesForRow(selectedRow, true, null, 'e-selectionbackground', 'e-active');
+            if (!this.preventFocus) {
+                var target = this.focus.getPrevIndexes().cellIndex ?
+                    selectedRow.cells[this.focus.getPrevIndexes().cellIndex] :
+                    selectedRow.querySelector('.e-selectionbackground:not(.e-hide)');
+                if (!target) {
+                    return;
+                }
+                this.focus.onClick({ target: target }, true);
+            }
         };
         Selection.prototype.clearSelection = function () {
-            var span = this.parent.element.querySelector('.e-gridpopup').querySelector('span');
-            if (span.classList.contains('e-rowselect')) {
-                span.classList.remove('e-spanclicked');
+            if (!this.persistSelection || (this.persistSelection && !this.parent.isEdit) ||
+                (!ej2_base_2.isNullOrUndefined(this.checkedTarget) && this.checkedTarget.classList.contains('e-checkselectall'))) {
+                var span = this.parent.element.querySelector('.e-gridpopup').querySelector('span');
+                if (span.classList.contains('e-rowselect')) {
+                    span.classList.remove('e-spanclicked');
+                }
+                this.clearRowSelection();
+                this.clearCellSelection();
+                this.enableSelectMultiTouch = false;
             }
-            this.clearRowSelection();
-            this.clearCellSelection();
-            this.enableSelectMultiTouch = false;
         };
@@ -196,2 +257,4 @@ Selection.prototype.clearRowSelection = function () {
                     this.addRemoveClassesForRow(row_1, false, true, 'e-selectionbackground', 'e-active');
+                    this.updatePersistCollection(row_1, false);
+                    this.updateCheckBoxes(row_1);
                 }
@@ -206,5 +269,7 @@ this.selectedRowIndexes = [];
         Selection.prototype.rowDeselect = function (type, rowIndex, data, row) {
+            this.updatePersistCollection(row[0], false);
             this.parent.trigger(type, {
                 rowIndex: rowIndex, data: data, row: row
             });
+            this.updateCheckBoxes(row[0]);
         };
@@ -216,3 +281,3 @@ Selection.prototype.selectCell = function (cellIndex, isToggle) {
             var gObj = this.parent;
-            var selectedCell = gObj.getCellFromIndex(cellIndex.rowIndex, cellIndex.cellIndex);
+            var selectedCell = gObj.getCellFromIndex(cellIndex.rowIndex, this.getColIndex(cellIndex.rowIndex, cellIndex.cellIndex));
             this.currentIndex = cellIndex.rowIndex;
@@ -279,3 +344,3 @@ var selectedData = gObj.getCurrentViewRecords()[this.currentIndex];
                     min = i === startIndex.rowIndex ? (startIndex.cellIndex) : 0;
-                    max = i === endIndex.rowIndex ? (endIndex.cellIndex) : gObj.getColumns().length - 1;
+                    max = i === endIndex.rowIndex ? (endIndex.cellIndex) : this.getLastColIndex(i);
                 }
@@ -346,3 +411,3 @@ else {
             var gObj = this.parent;
-            var selectedCell = gObj.getCellFromIndex(cellIndexes[0].rowIndex, cellIndexes[0].cellIndex);
+            var selectedCell = gObj.getCellFromIndex(cellIndexes[0].rowIndex, this.getColIndex(cellIndexes[0].rowIndex, cellIndexes[0].cellIndex));
             var index;
@@ -401,2 +466,16 @@ this.currentIndex = cellIndexes[0].rowIndex;
         };
+        Selection.prototype.getColIndex = function (rowIndex, index) {
+            var cells = this.parent.getDataRows()[rowIndex].querySelectorAll('td.e-rowcell');
+            for (var m = 0; m < cells.length; m++) {
+                var colIndex = parseInt(cells[m].getAttribute('aria-colindex'), 10);
+                if (colIndex === index) {
+                    return m;
+                }
+            }
+            return -1;
+        };
+        Selection.prototype.getLastColIndex = function (rowIndex) {
+            var cells = this.parent.getDataRows()[rowIndex].querySelectorAll('td.e-rowcell');
+            return parseInt(cells[cells.length - 1].getAttribute('aria-colindex'), 10);
+        };
         Selection.prototype.clearCell = function () {
@@ -406,2 +485,5 @@ this.clearCellSelection();
         Selection.prototype.cellDeselect = function (type, cellIndexes, data, cells) {
+            if (cells[0] && cells[0].classList.contains('e-gridchkbox')) {
+                this.updateCheckBoxes(ej2_base_3.closest(cells[0], 'tr'));
+            }
             this.parent.trigger(type, {
@@ -416,2 +498,5 @@ cells: cells, data: data, cellIndexes: cellIndexes
             selectedCell.classList.add('e-cellselectionbackground');
+            if (selectedCell.classList.contains('e-gridchkbox')) {
+                this.updateCheckBoxes(ej2_base_3.closest(selectedCell, 'tr'), true);
+            }
             this.addAttribute(selectedCell);
@@ -422,3 +507,5 @@ };
             cell.setAttribute('aria-selected', 'true');
-            cell.focus();
+            if (!this.preventFocus) {
+                this.focus.onClick({ target: cell }, true);
+            }
         };
@@ -549,3 +636,3 @@ Selection.prototype.updateCellProps = function (startIndex, endIndex) {
         Selection.prototype.clearSelAfterRefresh = function (e) {
-            if (e.requestType !== 'virtualscroll') {
+            if (e.requestType !== 'virtualscroll' && !this.persistSelection) {
                 this.clearSelection();
@@ -563,3 +650,3 @@ }
             this.parent.on(events.click, this.clickHandler, this);
-            this.parent.on(events.keyPressed, this.keyPressHandler, this);
+            this.parent.on(events.cellFocused, this.onCellFocused, this);
             this.parent.on(events.dataReady, this.dataReady, this);
@@ -569,2 +656,5 @@ this.parent.on(events.dataReady, this.clearSelAfterRefresh, this);
             this.parent.on(events.contentReady, this.initialEnd, this);
+            this.parent.addEventListener(events.dataBound, this.onDataBound.bind(this));
+            this.parent.addEventListener(events.actionBegin, this.actionBegin.bind(this));
+            this.parent.addEventListener(events.actionComplete, this.actionComplete.bind(this));
         };
@@ -580,9 +670,12 @@ Selection.prototype.removeEventListener = function () {
             this.parent.off(events.click, this.clickHandler);
-            this.parent.off(events.keyPressed, this.keyPressHandler);
+            this.parent.off(events.cellFocused, this.onCellFocused);
             this.parent.off(events.dataReady, this.dataReady);
             this.parent.off(events.dataReady, this.clearSelAfterRefresh);
             this.parent.off(events.columnPositionChanged, this.clearSelection);
+            this.parent.removeEventListener(events.dataBound, this.onDataBound);
+            this.parent.removeEventListener(events.actionBegin, this.actionBegin);
+            this.parent.removeEventListener(events.actionComplete, this.actionComplete);
         };
         Selection.prototype.dataReady = function (e) {
-            if (e.requestType !== 'virtualscroll') {
+            if (e.requestType !== 'virtualscroll' && !this.persistSelection) {
                 this.clearSelection();
@@ -611,2 +704,3 @@ }
             }
+            this.checkBoxSelectionChanged();
         };
@@ -621,3 +715,232 @@ Selection.prototype.hidePopUp = function () {
             this.selectRow(this.parent.selectedRowIndex);
+            this.checkBoxSelectionChanged();
         };
+        Selection.prototype.checkBoxSelectionChanged = function () {
+            var isCheckColumn = false;
+            for (var _i = 0, _a = this.parent.columns; _i < _a.length; _i++) {
+                var col = _a[_i];
+                if (col.type === 'checkbox') {
+                    this.isChkSelection = true;
+                    this.parent.selectionSettings.type = 'multiple';
+                    this.chkField = col.field;
+                    this.totalRecordsCount = this.parent.pageSettings.totalRecordsCount;
+                    if (ej2_base_2.isNullOrUndefined(this.totalRecordsCount)) {
+                        this.totalRecordsCount = this.parent.getCurrentViewRecords().length;
+                    }
+                    this.chkAllBox = this.parent.element.querySelector('.e-checkselectall');
+                    this.chkAllObj = this.chkAllBox;
+                    isCheckColumn = true;
+                    this.parent.element.classList.add('e-checkboxselection');
+                    break;
+                }
+            }
+            if (!isCheckColumn) {
+                this.isChkSelection = false;
+                this.chkField = '';
+                this.chkAllBox = this.chkAllObj = null;
+                this.parent.element.classList.remove('e-checkboxselection');
+            }
+            if (this.parent.selectionSettings.persistSelection && this.parent.getPrimaryKeyFieldNames().length > 0) {
+                this.persistSelection = true;
+                this.parent.element.classList.add('e-persistselection');
+                this.primaryKey = this.parent.getPrimaryKeyFieldNames()[0];
+                if (!this.parent.enableVirtualization && this.chkField && Object.keys(this.selectedRowState).length === 0) {
+                    var data = this.parent.getDataModule();
+                    var query = new ej2_data_1.Query().where(this.chkField, 'equal', true);
+                    var dataManager = data.getData({}, query);
+                    var proxy_1 = this;
+                    this.parent.showSpinner();
+                    dataManager.then(function (e) {
+                        proxy_1.dataSuccess(e.result);
+                        proxy_1.refreshPersistSelection();
+                        proxy_1.parent.hideSpinner();
+                    });
+                }
+            }
+            else {
+                this.persistSelection = false;
+                this.parent.element.classList.remove('e-persistselection');
+                this.selectedRowState = {};
+            }
+        };
+        Selection.prototype.dataSuccess = function (res) {
+            for (var i = 0; i < res.length; i++) {
+                if (ej2_base_2.isNullOrUndefined(this.selectedRowState[res[i][this.primaryKey]]) && res[i][this.chkField]) {
+                    this.selectedRowState[res[i][this.primaryKey]] = res[i][this.chkField];
+                }
+            }
+            this.persistSelectedData = res;
+        };
+        Selection.prototype.refreshPersistSelection = function () {
+            this.chkAllBox = this.parent.element.querySelector('.e-checkselectall');
+            this.chkAllObj = this.chkAllBox;
+            var rows = this.parent.getRows();
+            if (rows.length > 0 && (this.persistSelection || this.chkField)) {
+                var indexes = [];
+                for (var j = 0; j < rows.length; j++) {
+                    var rowObj = this.parent.getRowObjectFromUID(rows[j].getAttribute('data-uid'));
+                    var pKey = rowObj ? rowObj.data[this.primaryKey] : null;
+                    if (pKey === null) {
+                        return;
+                    }
+                    var checkState = void 0;
+                    if (this.selectedRowState[pKey] || (this.isChkAll && this.chkAllCollec.indexOf(pKey) < 0)
+                        || (this.isUnChkAll && this.chkAllCollec.indexOf(pKey) > 0) || (this.chkField && rowObj.data[this.chkField])) {
+                        indexes.push(parseInt(rows[j].getAttribute('aria-rowindex'), 10));
+                        checkState = true;
+                    }
+                    else {
+                        var chkBox = rows[j].querySelector('.e-checkselect');
+                        checkState = false;
+                        if (this.checkedTarget !== chkBox && this.isChkSelection) {
+                            chkBox.ej2_instances[0].setProperties({ checked: checkState });
+                        }
+                    }
+                    this.updatePersistCollection(rows[j], checkState);
+                }
+                if (this.selectionSettings.type === 'multiple') {
+                    this.selectRows(indexes);
+                }
+                else {
+                    this.clearSelection();
+                    if (indexes.length > 0) {
+                        this.selectRow(indexes[0], true);
+                    }
+                }
+            }
+            if (this.isChkSelection) {
+                this.setCheckAllState();
+            }
+        };
+        Selection.prototype.actionBegin = function (e) {
+            if (e.requestType === 'save' && this.persistSelection) {
+                var editChkBox = this.parent.element.querySelector('.e-edit-checkselect');
+                if (!ej2_base_2.isNullOrUndefined(editChkBox)) {
+                    var row = ej2_base_3.closest(editChkBox, '.e-editedrow');
+                    if (row) {
+                        if (this.parent.editSettings.mode === 'dialog') {
+                            row = this.parent.element.querySelector('.e-dlgeditrow');
+                        }
+                        var rowObj = this.parent.getRowObjectFromUID(row.getAttribute('data-uid'));
+                        if (!rowObj) {
+                            return;
+                        }
+                        this.selectedRowState[rowObj.data[this.primaryKey]] = rowObj.isSelected = editChkBox.checked;
+                    }
+                    else {
+                        this.isCheckedOnAdd = editChkBox.checked;
+                    }
+                }
+            }
+        };
+        Selection.prototype.actionComplete = function (e) {
+            if (e.requestType === 'save' && this.persistSelection) {
+                if (e.action === 'add' && this.isCheckedOnAdd) {
+                    var rowObj = this.parent.getRowObjectFromUID(this.parent.getRows()[e.selectedRow].getAttribute('data-uid'));
+                    this.selectedRowState[rowObj.data[this.primaryKey]] = rowObj.isSelected = this.isCheckedOnAdd;
+                }
+                this.refreshPersistSelection();
+            }
+        };
+        Selection.prototype.onDataBound = function () {
+            if (this.persistSelection || this.chkField) {
+                if (this.parent.enableVirtualization) {
+                    var records = this.parent.getCurrentViewRecords();
+                    this.dataSuccess(records);
+                }
+                this.refreshPersistSelection();
+            }
+        };
+        Selection.prototype.checkSelectAllAction = function (checkState) {
+            var editForm = this.parent.element.querySelector('.e-gridform');
+            this.checkedTarget = this.chkAllBox;
+            if (checkState) {
+                this.selectRowsByRange(0, this.parent.getCurrentViewRecords().length);
+                this.isChkAll = true;
+                this.isUnChkAll = false;
+            }
+            else {
+                this.clearSelection();
+                this.isUnChkAll = true;
+                this.isChkAll = false;
+            }
+            this.chkAllCollec = [];
+            if (this.persistSelection) {
+                var rows = this.parent.getRows();
+                for (var i = 0; i < rows.length; i++) {
+                    this.updatePersistCollection(rows[i], checkState);
+                }
+                if (this.isUnChkAll) {
+                    this.selectedRowState = {};
+                    this.persistSelectedData = [];
+                }
+            }
+            if (!ej2_base_2.isNullOrUndefined(editForm)) {
+                var editChkBox = editForm.querySelector('.e-edit-checkselect');
+                editChkBox.ej2_instances[0].setProperties({ checked: checkState });
+            }
+        };
+        Selection.prototype.checkSelectAll = function (checkBox) {
+            var checkObj = checkBox;
+            this.checkSelectAllAction(checkBox.checked);
+            this.target = null;
+            this.triggerChkChangeEvent(checkBox, checkBox.checked);
+        };
+        Selection.prototype.checkSelect = function (checkBox) {
+            var target = ej2_base_3.closest(this.checkedTarget, '.e-rowcell');
+            var checkObj = checkBox;
+            this.isMultiCtrlRequest = true;
+            var rIndex = parseInt(target.parentElement.getAttribute('aria-rowindex'), 10);
+            if (this.persistSelection && this.parent.element.querySelectorAll('.e-addedrow').length > 0) {
+                ++rIndex;
+            }
+            this.rowCellSelectionHandler(rIndex, parseInt(target.getAttribute('aria-colindex'), 10));
+            this.moveIntoUncheckCollection(ej2_base_3.closest(target, '.e-row'));
+            this.setCheckAllState();
+            this.isMultiCtrlRequest = false;
+            this.triggerChkChangeEvent(checkBox, checkBox.checked);
+        };
+        Selection.prototype.moveIntoUncheckCollection = function (row) {
+            if (this.isChkAll || this.isUnChkAll) {
+                var rowObj = this.parent.getRowObjectFromUID(row.getAttribute('data-uid'));
+                var pKey = rowObj ? rowObj.data[this.primaryKey] : null;
+                if (!pKey) {
+                    return;
+                }
+                if (this.chkAllCollec.indexOf(pKey) < 0) {
+                    this.chkAllCollec.push(pKey);
+                }
+                else {
+                    this.chkAllCollec.splice(this.chkAllCollec.indexOf(pKey), 1);
+                }
+            }
+        };
+        Selection.prototype.triggerChkChangeEvent = function (checkBox, checkState) {
+            this.parent.trigger(events.checkBoxChange, {
+                checked: checkState, selectedRowIndexes: this.parent.getSelectedRowIndexes(),
+                target: checkBox
+            });
+            if (!this.parent.isEdit) {
+                this.checkedTarget = null;
+            }
+        };
+        Selection.prototype.setCheckAllState = function () {
+            if (this.isChkSelection) {
+                var checkedLen = Object.keys(this.selectedRowState).length;
+                if (!this.persistSelection) {
+                    checkedLen = this.selectedRecords.length;
+                    this.totalRecordsCount = this.parent.getCurrentViewRecords().length;
+                }
+                if (checkedLen === this.totalRecordsCount || (this.persistSelection && this.parent.allowPaging
+                    && this.isChkAll && this.chkAllCollec.length === 0)) {
+                    this.chkAllObj.ej2_instances[0].setProperties({ checked: true });
+                }
+                else if (checkedLen === 0 || this.parent.getCurrentViewRecords().length === 0) {
+                    this.chkAllObj.ej2_instances[0].setProperties({ indeterminate: false, checked: false });
+                }
+                else {
+                    this.chkAllObj.ej2_instances[0].setProperties({ indeterminate: true });
+                }
+            }
+        };
         Selection.prototype.clickHandler = function (e) {
@@ -628,6 +951,37 @@ var target = e.target;
             this.popUpClickHandler(e);
-            if (target.classList.contains('e-rowcell')) {
+            var chkSelect = false;
+            this.preventFocus = true;
+            var checkBox;
+            this.selectionRequest = true;
+            if (target.classList.contains('e-checkselect') || target.classList.contains('e-checkselectall')) {
+                checkBox = target;
+                chkSelect = true;
+            }
+            if (target && (target.classList.contains('e-rowcell') && !this.parent.selectionSettings.checkboxOnly) || chkSelect) {
+                if (this.isChkSelection) {
+                    this.isMultiCtrlRequest = true;
+                }
                 this.target = target;
-                this.rowCellSelectionHandler(parseInt(target.parentElement.getAttribute('aria-rowindex'), 10), parseInt(target.getAttribute('aria-colindex'), 10));
-                if (ej2_base_1.Browser.isDevice && this.parent.selectionSettings.type === 'multiple') {
+                if (!ej2_base_2.isNullOrUndefined(checkBox)) {
+                    this.checkedTarget = checkBox;
+                    if (checkBox.classList.contains('e-checkselectall')) {
+                        this.checkSelectAll(checkBox);
+                    }
+                    else {
+                        this.checkSelect(checkBox);
+                        this.target = ej2_base_3.closest(target, '.e-rowcell');
+                    }
+                }
+                else {
+                    var rIndex = parseInt(target.parentElement.getAttribute('aria-rowindex'), 10);
+                    if (this.persistSelection && this.parent.element.querySelectorAll('.e-addedrow').length > 0) {
+                        ++rIndex;
+                    }
+                    this.rowCellSelectionHandler(rIndex, parseInt(target.getAttribute('aria-colindex'), 10));
+                    if (this.isChkSelection) {
+                        this.moveIntoUncheckCollection(ej2_base_3.closest(target, '.e-row'));
+                        this.setCheckAllState();
+                    }
+                }
+                if (!this.isChkSelection && ej2_base_1.Browser.isDevice && this.parent.selectionSettings.type === 'multiple') {
                     this.showPopup(e);
@@ -638,2 +992,4 @@ }
             this.isMultiShiftRequest = false;
+            this.selectionRequest = false;
+            this.preventFocus = false;
         };
@@ -682,86 +1038,70 @@ Selection.prototype.popUpClickHandler = function (e) {
         };
-        Selection.prototype.keyPressHandler = function (e) {
-            var checkScroll;
-            var preventDefault;
-            switch (e.action) {
+        Selection.prototype.onCellFocused = function (e) {
+            var clear = ((e.container.isHeader && e.isJump) || (e.container.isContent && !e.container.isSelectable)) &&
+                !(e.byKey && e.keyArgs.action === 'space');
+            var headerAction = e.container.isHeader && !(e.byKey && e.keyArgs.action === 'space');
+            if (!e.byKey || clear) {
+                if (clear) {
+                    this.clearSelection();
+                }
+                return;
+            }
+            var _a = e.container.isContent ? e.container.indexes : e.indexes, rowIndex = _a[0], cellIndex = _a[1];
+            var prev = this.focus.getPrevIndexes();
+            if (headerAction || (['ctrlPlusA', 'escape'].indexOf(e.keyArgs.action) === -1 && e.keyArgs.action !== 'space' &&
+                rowIndex === prev.rowIndex && cellIndex === prev.cellIndex)) {
+                return;
+            }
+            this.preventFocus = true;
+            switch (e.keyArgs.action) {
                 case 'downArrow':
-                    checkScroll = true;
-                    this.downArrowKey();
-                    break;
                 case 'upArrow':
-                    checkScroll = true;
-                    this.upArrowKey();
+                case 'enter':
+                case 'shiftEnter':
+                    this.applyDownUpKey(rowIndex, cellIndex);
                     break;
                 case 'rightArrow':
-                    preventDefault = true;
-                    this.rightArrowKey();
-                    break;
                 case 'leftArrow':
-                    preventDefault = true;
-                    this.leftArrowKey();
+                    this.applyRightLeftKey(rowIndex, cellIndex);
                     break;
+                case 'shiftDown':
+                case 'shiftUp':
+                    this.shiftDownKey(rowIndex, cellIndex);
+                    break;
+                case 'shiftLeft':
+                case 'shiftRight':
+                    this.applyShiftLeftRightKey(rowIndex, cellIndex);
+                    break;
                 case 'home':
-                    preventDefault = true;
-                    this.homeKey();
-                    break;
                 case 'end':
-                    preventDefault = true;
-                    this.endKey();
+                    this.applyHomeEndKey(rowIndex, cellIndex);
                     break;
                 case 'ctrlHome':
-                    preventDefault = true;
-                    this.ctrlHomeKey();
-                    break;
                 case 'ctrlEnd':
-                    preventDefault = true;
-                    this.ctrlEndKey();
+                    this.applyCtrlHomeEndKey(rowIndex, cellIndex);
                     break;
-                case 'shiftDown':
-                    this.shiftDownKey();
-                    break;
-                case 'shiftUp':
-                    this.shiftUpKey();
-                    break;
-                case 'shiftRight':
-                    this.shiftRightKey();
-                    break;
-                case 'shiftLeft':
-                    this.shiftLeftKey();
-                    break;
                 case 'escape':
-                    preventDefault = true;
                     this.clearSelection();
                     break;
                 case 'ctrlPlusA':
-                    preventDefault = true;
                     this.ctrlPlusA();
                     break;
-            }
-            if (checkScroll) {
-                var scrollElem = this.parent.getContent().firstElementChild;
-                if (this.selectedRecords.length || this.selectedRowCellIndexes.length) {
-                    var row = this.selectedRecords.length ? this.selectedRecords[0] :
-                        this.parent.getRowByIndex(this.selectedRowCellIndexes[0].rowIndex);
-                    var height = row.offsetHeight;
-                    var rowIndex = row.rowIndex;
-                    scrollElem.scrollTop = scrollElem.scrollTop + (e.action === 'downArrow' ? height : height * -1);
-                    if (this.checkVisible(row) &&
-                        rowIndex !== 0 && this.parent.getContentTable().querySelector('tbody').children.length !== rowIndex + 1) {
-                        e.preventDefault();
+                case 'space':
+                    this.selectionRequest = true;
+                    var target = e.element;
+                    if (target.classList.contains('e-checkselectall')) {
+                        this.checkedTarget = target;
+                        this.checkSelectAll(this.checkedTarget);
                     }
-                }
+                    else {
+                        if (target.classList.contains('e-checkselect')) {
+                            this.checkedTarget = target;
+                            this.checkSelect(this.checkedTarget);
+                        }
+                    }
+                    this.selectionRequest = false;
+                    break;
             }
-            if (preventDefault) {
-                e.preventDefault();
-            }
+            this.preventFocus = false;
         };
-        Selection.prototype.checkVisible = function (element) {
-            var st = window.scrollY;
-            var y = element.getBoundingClientRect().top + st;
-            return y + 36 < (window.innerHeight + st) - this.getRowHeight(element) && y > (st - element.offsetHeight) +
-                this.getRowHeight(element);
-        };
-        Selection.prototype.getRowHeight = function (element) {
-            return element.getBoundingClientRect().height;
-        };
         Selection.prototype.ctrlPlusA = function () {
@@ -775,20 +1115,23 @@ if (this.isRowType() && !this.isSingleSel()) {
         };
-        Selection.prototype.downArrowKey = function () {
-            this.applyDownUpKey(1, !ej2_base_2.isUndefined(this.parent.selectedRowIndex) && this.parent.selectedRowIndex + 1 < this.parent.getRows().length, !ej2_base_2.isUndefined(this.prevECIdxs) &&
-                this.prevECIdxs.rowIndex + 1 < this.parent.getRows().length);
-        };
-        Selection.prototype.upArrowKey = function () {
-            this.applyDownUpKey(-1, !ej2_base_2.isUndefined(this.parent.selectedRowIndex) && this.parent.selectedRowIndex - 1 > -1, !ej2_base_2.isUndefined(this.prevECIdxs) && this.prevECIdxs.rowIndex - 1 > -1);
-        };
-        Selection.prototype.applyDownUpKey = function (key, cond1, cond2) {
+        Selection.prototype.applyDownUpKey = function (rowIndex, cellIndex) {
             var gObj = this.parent;
-            if (this.isRowType() && cond1) {
-                this.selectRow(gObj.selectedRowIndex + key, true);
+            if (this.isChkSelection && this.isChkAll) {
+                this.checkSelectAllAction(false);
+                this.checkedTarget = null;
+            }
+            if (this.isRowType()) {
+                this.selectRow(rowIndex, true);
                 this.applyUpDown(gObj.selectedRowIndex);
             }
-            if (this.isCellType() && cond2) {
-                this.selectCell({ rowIndex: this.prevECIdxs.rowIndex + key, cellIndex: this.prevECIdxs.cellIndex }, true);
+            if (this.isCellType()) {
+                this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, true);
             }
         };
         Selection.prototype.applyUpDown = function (rowIndex) {
+            if (rowIndex < 0) {
+                return;
+            }
+            if (!this.target) {
+                this.target = this.parent.getRows()[0].children[this.parent.groupSettings.columns.length || 0];
+            }
             var cIndex = parseInt(this.target.getAttribute('aria-colindex'), 10);
@@ -798,84 +1141,18 @@ this.target = this.contentRenderer.getRowByIndex(rowIndex).querySelectorAll('.e-rowcell')[cIndex];
         };
-        Selection.prototype.rightArrowKey = function () {
-            this.preSelectedCellIndex = this.prevECIdxs;
-            this.applyRightLeftKey(1, 0, !ej2_base_2.isUndefined(this.prevECIdxs) && this.prevECIdxs.cellIndex + 1 < this.parent.getColumns().length);
-        };
-        Selection.prototype.leftArrowKey = function () {
-            this.preSelectedCellIndex = this.prevECIdxs;
-            this.applyRightLeftKey(-1, this.parent.getColumns().length - 1, !ej2_base_2.isUndefined(this.prevECIdxs) && this.prevECIdxs.cellIndex - 1 > -1);
-        };
-        Selection.prototype.applyRightLeftKey = function (key1, key2, cond) {
+        Selection.prototype.applyRightLeftKey = function (rowIndex, cellIndex) {
             var gObj = this.parent;
-            var cellIndex;
-            var rowIndex;
-            if (!ej2_base_2.isNullOrUndefined(this.prevECIdxs)) {
-                cellIndex = this.prevECIdxs.cellIndex;
-                rowIndex = this.prevECIdxs.rowIndex;
-            }
             if (this.isCellType()) {
-                if (cond && this.prevECIdxs.cellIndex + key1 > -1 &&
-                    this.prevECIdxs.cellIndex + key1 < this.parent.getColumns().length) {
-                    cellIndex = this.prevECIdxs.cellIndex + key1;
-                    rowIndex = this.prevECIdxs.rowIndex;
-                    this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, true);
-                }
-                else if (this.prevECIdxs.rowIndex + key1 > -1 &&
-                    this.prevECIdxs.rowIndex + key1 < this.parent.getRows().length) {
-                    cellIndex = key2;
-                    rowIndex = this.prevECIdxs.rowIndex + key1;
-                    this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, true);
-                }
-                if (this.isCellHide({ rowIndex: rowIndex, cellIndex: cellIndex })) {
-                    if (!((cellIndex === 0 && rowIndex === 0) ||
-                        (cellIndex === gObj.getColumns().length - 1 && rowIndex === gObj.getRows().length - 1))) {
-                        this.applyRightLeftKey(key1, key2, cond);
-                    }
-                    else {
-                        this.selectCell(this.preSelectedCellIndex, true);
-                    }
-                }
+                this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, true);
+                this.addAttribute(this.target);
             }
-            else if (this.isRowType()) {
-                var cellIndex_1 = parseInt(this.target.getAttribute('aria-colindex'), 10);
-                var rowElement = ej2_base_3.closest(this.target, 'tr');
-                if (cellIndex_1 + key1 > -1 && cellIndex_1 + key1 < this.parent.getColumns().length) {
-                    var cell = rowElement.querySelectorAll('.e-rowcell')[cellIndex_1 + key1];
-                    if (cell) {
-                        if (!cell.classList.contains('e-hide')) {
-                            this.addAttribute(cell);
-                        }
-                        else {
-                            key1 += key1;
-                            this.applyRightLeftKey(key1, key2, cond);
-                        }
-                    }
-                }
-                else {
-                    this.addAttribute(this.target);
-                }
-            }
         };
-        Selection.prototype.homeKey = function () {
-            this.applyHomeEndKey({ rowIndex: this.currentIndex || 0, cellIndex: 0 });
-        };
-        Selection.prototype.endKey = function () {
-            this.applyHomeEndKey({ rowIndex: this.currentIndex || 0, cellIndex: this.parent.getColumns().length - 1 });
-        };
-        Selection.prototype.applyHomeEndKey = function (key) {
+        Selection.prototype.applyHomeEndKey = function (rowIndex, cellIndex) {
             if (this.isCellType()) {
-                this.selectCell(key, true);
-                if (this.isCellHide(key)) {
-                    if (key.cellIndex > 0) {
-                        this.applyRightLeftKey(-1, this.parent.getColumns().length - 1, true);
-                    }
-                    else {
-                        this.applyRightLeftKey(1, 0, true);
-                    }
-                }
+                this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, true);
             }
             else {
-                this.addAttribute(this.parent.getCellFromIndex(key.rowIndex, key.cellIndex));
+                this.addAttribute(this.parent.getCellFromIndex(rowIndex, cellIndex));
             }
         };
-        Selection.prototype.shiftDownKey = function () {
+        Selection.prototype.shiftDownKey = function (rowIndex, cellIndex) {
             var gObj = this.parent;
@@ -885,9 +1162,4 @@ this.isMultiShiftRequest = true;
                 if (!ej2_base_2.isUndefined(this.prevRowIndex)) {
-                    var endIndex = ej2_base_2.isUndefined(gObj.selectedRowIndex) ? this.prevRowIndex + 1 :
-                        (gObj.selectedRowIndex + 1 < this.parent.getRows().length ?
-                            gObj.selectedRowIndex + 1 : gObj.selectedRowIndex);
-                    if (endIndex < this.parent.getRows().length) {
-                        this.selectRowsByRange(this.prevRowIndex, endIndex);
-                        this.applyUpDown(endIndex);
-                    }
+                    this.selectRowsByRange(this.prevRowIndex, rowIndex);
+                    this.applyUpDown(rowIndex);
                 }
@@ -899,81 +1171,19 @@ else {
             if (this.isCellType() && !this.isSingleSel()) {
-                if (!ej2_base_2.isUndefined(this.prevCIdxs)) {
-                    if (this.prevECIdxs.rowIndex + 1 < this.parent.getRows().length) {
-                        this.selectCellsByRange(this.prevCIdxs, { rowIndex: this.prevECIdxs.rowIndex + 1, cellIndex: this.prevECIdxs.cellIndex });
-                    }
-                }
-                else {
-                    this.selectCellsByRange({ rowIndex: 0, cellIndex: 0 }, { rowIndex: 1, cellIndex: 0 });
-                }
+                this.selectCellsByRange(this.prevCIdxs || { rowIndex: 0, cellIndex: 0 }, { rowIndex: rowIndex, cellIndex: cellIndex });
             }
             this.isMultiShiftRequest = false;
         };
-        Selection.prototype.shiftUpKey = function () {
+        Selection.prototype.applyShiftLeftRightKey = function (rowIndex, cellIndex) {
             var gObj = this.parent;
             this.isMultiShiftRequest = true;
-            if (this.isRowType() && !ej2_base_2.isUndefined(this.prevRowIndex) && !this.isSingleSel()) {
-                var endIndex = ej2_base_2.isUndefined(gObj.selectedRowIndex) ? (this.prevRowIndex - 1 > -1 ? (this.prevRowIndex - 1) : 0) :
-                    ((gObj.selectedRowIndex - 1) > -1 ? gObj.selectedRowIndex - 1 : gObj.selectedRowIndex);
-                this.selectRowsByRange(this.prevRowIndex, endIndex);
-                this.applyUpDown(endIndex);
-            }
-            if (this.isCellType() && !ej2_base_2.isUndefined(this.prevECIdxs) && (this.prevECIdxs.rowIndex - 1) > -1 && !this.isSingleSel()) {
-                this.selectCellsByRange(this.prevCIdxs, { rowIndex: this.prevECIdxs.rowIndex - 1, cellIndex: this.prevECIdxs.cellIndex });
-            }
+            this.selectCellsByRange(this.prevCIdxs, { rowIndex: rowIndex, cellIndex: cellIndex });
             this.isMultiShiftRequest = false;
         };
-        Selection.prototype.shiftLeftKey = function () {
-            this.applyShiftLeftRightKey(-1, !ej2_base_2.isUndefined(this.prevCIdxs) && this.prevECIdxs.cellIndex - 1 > -1);
-        };
-        Selection.prototype.shiftRightKey = function () {
-            this.applyShiftLeftRightKey(1, !ej2_base_2.isUndefined(this.prevCIdxs) && this.prevECIdxs.cellIndex + 1 < this.parent.getColumns().length);
-        };
-        Selection.prototype.applyShiftLeftRightKey = function (key, cond) {
-            var gObj = this.parent;
-            var cellIndex;
-            this.isMultiShiftRequest = true;
-            if (this.isCellType() && !this.isSingleSel()) {
-                if (cond) {
-                    cellIndex = { rowIndex: this.prevECIdxs.rowIndex, cellIndex: this.prevECIdxs.cellIndex + key };
-                    this.selectCellsByRange(this.prevCIdxs, {
-                        rowIndex: this.prevECIdxs.rowIndex, cellIndex: this.prevECIdxs.cellIndex + key
-                    });
-                }
-                else if (!this.isSingleSel()) {
-                    if (this.selectionSettings.cellSelectionMode === 'flow' &&
-                        (key > 0 ? this.prevECIdxs.rowIndex + 1 < this.parent.pageSettings.pageSize : this.prevECIdxs.rowIndex - 1 > -1)) {
-                        cellIndex = { rowIndex: this.prevECIdxs.rowIndex + key, cellIndex: key > 0 ? 0 : gObj.getColumns().length - 1 };
-                        this.selectCellsByRange(this.prevCIdxs, {
-                            rowIndex: this.prevECIdxs.rowIndex + key, cellIndex: key > 0 ? 0 : gObj.getColumns().length - 1
-                        });
-                    }
-                }
-                if (!ej2_base_2.isNullOrUndefined(cellIndex) && this.isCellHide(cellIndex) && !((cellIndex.rowIndex === 0 && cellIndex.cellIndex === 0) ||
-                    (cellIndex.rowIndex === gObj.getRows().length - 1 && cellIndex.cellIndex === gObj.getColumns().length))) {
-                    this.applyShiftLeftRightKey(key, cellIndex.cellIndex > 0);
-                }
-            }
-            this.isMultiShiftRequest = false;
-        };
-        Selection.prototype.ctrlHomeKey = function () {
-            this.applyCtrlHomeEndKey(0, 0);
-        };
-        Selection.prototype.ctrlEndKey = function () {
-            this.applyCtrlHomeEndKey(this.parent.getRows().length - 1, this.parent.getColumns().length - 1);
-        };
-        Selection.prototype.applyCtrlHomeEndKey = function (rowIndex, colIndex) {
+        Selection.prototype.applyCtrlHomeEndKey = function (rowIndex, cellIndex) {
             if (this.isRowType()) {
                 this.selectRow(rowIndex, true);
-                this.addAttribute(this.parent.getCellFromIndex(rowIndex, colIndex));
+                this.addAttribute(this.parent.getCellFromIndex(rowIndex, cellIndex));
             }
             if (this.isCellType()) {
-                this.selectCell({ rowIndex: rowIndex, cellIndex: colIndex }, true);
-                if (this.isCellHide({ rowIndex: rowIndex, cellIndex: colIndex })) {
-                    if (colIndex > 0) {
-                        this.applyRightLeftKey(-1, this.parent.getColumns().length - 1, true);
-                    }
-                    else {
-                        this.applyRightLeftKey(1, 0, true);
-                    }
-                }
+                this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, true);
             }
@@ -992,12 +1202,3 @@ };
                 }
-                for (var i = 0, len = cells.length; i < len; i++) {
-                    if (isAdd) {
-                        ej2_base_3.classList(cells[i], args.slice(), []);
-                        cells[i].setAttribute('aria-selected', 'true');
-                    }
-                    else {
-                        ej2_base_3.classList(cells[i], [], args.slice());
-                        cells[i].removeAttribute('aria-selected');
-                    }
-                }
+                util_1.addRemoveActiveClasses.apply(void 0, [cells, isAdd].concat(args));
             }
@@ -1015,5 +1216,2 @@ this.getRenderer().setSelection(row ? row.getAttribute('data-uid') : null, isAdd, clearAll);
         };
-        Selection.prototype.isCellHide = function (cellIndex) {
-            return !this.parent.getColumns()[cellIndex.cellIndex].visible;
-        };
         Selection.prototype.getRenderer = function () {
@@ -1025,2 +1223,13 @@ if (ej2_base_2.isNullOrUndefined(this.contentRenderer)) {
         };
+        Selection.prototype.getSelectedRecords = function () {
+            var selectedData = [];
+            if (!this.selectionSettings.persistSelection) {
+                selectedData = this.parent.getRowsObject().filter(function (row) { return row.isSelected; })
+                    .map(function (m) { return m.data; });
+            }
+            else {
+                selectedData = this.persistSelectedData;
+            }
+            return selectedData;
+        };
         return Selection;
@@ -1027,0 +1236,0 @@ }());

src/grid/actions/sort.d.ts

 import { SortSettings } from '../base/grid';
 import { IGrid, IAction, NotifyArgs } from '../base/interface';
 import { SortDirection } from '../base/enum';
+import { ServiceLocator } from '../services/service-locator';
 /**
@@ -20,2 +21,3 @@ *
     private aria;
+    private focus;
     private parent;
@@ -26,3 +28,3 @@ /**
      */
-    constructor(parent?: IGrid, sortSettings?: SortSettings, sortedColumns?: string[]);
+    constructor(parent?: IGrid, sortSettings?: SortSettings, sortedColumns?: string[], locator?: ServiceLocator);
     /**
@@ -88,2 +90,4 @@ * The function used to update sortSettings
     private clickHandler(e);
+    private keyPressed(e);
+    private initiateSort(target, e, column);
     private showPopUp(e);
@@ -90,0 +94,0 @@ private popUpClickHandler(e);

src/grid/actions/sort.js

@@ -5,3 +5,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) {
     var Sort = (function () {
-        function Sort(parent, sortSettings, sortedColumns) {
+        function Sort(parent, sortSettings, sortedColumns, locator) {
             this.contentRefresh = true;
@@ -13,2 +13,3 @@ this.isModelChanged = true;
             this.sortedColumns = sortedColumns;
+            this.focus = locator.getService('focus');
             this.addEventListener();
@@ -65,7 +66,11 @@ }
         Sort.prototype.sortColumn = function (columnName, direction, isMultiSort) {
-            if (this.parent.getColumnByField(columnName).allowSorting === false) {
+            var gObj = this.parent;
+            if (this.parent.getColumnByField(columnName).allowSorting === false || this.parent.isContextMenuOpen()) {
                 return;
             }
+            if (!gObj.allowMultiSorting) {
+                isMultiSort = gObj.allowMultiSorting;
+            }
             if (this.isActionPrevent()) {
-                this.parent.notify(events.preventBatch, {
+                gObj.notify(events.preventBatch, {
                     instance: this, handler: this.sortColumn,
@@ -80,3 +85,3 @@ arg1: columnName, arg2: direction, arg3: isMultiSort
             this.removeSortIcons();
-            var column = this.parent.getColumnHeaderByField(columnName);
+            var column = gObj.getColumnHeaderByField(columnName);
             this.updateSortedCols(columnName, isMultiSort);
@@ -193,2 +198,3 @@ this.updateModel();
             this.parent.on(events.headerRefreshed, this.refreshSortIcons, this);
+            this.parent.on(events.keyPressed, this.keyPressed, this);
         };
@@ -203,2 +209,3 @@ Sort.prototype.removeEventListener = function () {
             this.parent.off(events.headerRefreshed, this.refreshSortIcons);
+            this.parent.off(events.keyPressed, this.keyPressed);
         };
@@ -220,21 +227,43 @@ Sort.prototype.destroy = function () {
                 !e.target.classList.contains('e-stackedheadercelldiv') &&
-                !e.target.classList.contains('e-rhandler')) {
+                !e.target.classList.contains('e-rhandler') &&
+                !e.target.classList.contains('e-columnmenu') &&
+                !e.target.classList.contains('e-filtermenudiv')) {
                 var gObj = this.parent;
-                var field = gObj.getColumnByUid(target.querySelector('.e-headercelldiv').getAttribute('e-mappinguid')).field;
+                var colObj = gObj.getColumnByUid(target.querySelector('.e-headercelldiv').getAttribute('e-mappinguid'));
                 var direction = !target.querySelectorAll('.e-ascending').length ? 'ascending' :
                     'descending';
-                if (!e.shiftKey) {
-                    this.sortColumn(field, direction, e.ctrlKey || this.enableSortMultiTouch);
+                if (colObj.type !== 'checkbox') {
+                    this.initiateSort(target, e, colObj);
+                    if (ej2_base_1.Browser.isDevice) {
+                        this.showPopUp(e);
+                    }
                 }
-                else {
-                    this.removeSortColumn(field);
+            }
+        };
+        Sort.prototype.keyPressed = function (e) {
+            if (!this.parent.isEdit && (e.action === 'enter' || e.action === 'ctrlEnter' || e.action === 'shiftEnter')) {
+                var target = this.focus.getFocusedElement();
+                if (!target || !target.classList.contains('e-headercell') || (this.parent.frozenColumns || this.parent.frozenRows)) {
+                    return;
                 }
-                if (ej2_base_1.Browser.isDevice) {
-                    this.showPopUp(e);
-                }
+                var col = this.parent.getColumnByUid(target.querySelector('.e-headercelldiv').getAttribute('e-mappinguid'));
+                this.initiateSort(target, e, col);
             }
         };
+        Sort.prototype.initiateSort = function (target, e, column) {
+            var gObj = this.parent;
+            var field = column.field;
+            var direction = !target.querySelectorAll('.e-ascending').length ? 'ascending' :
+                'descending';
+            if (e.shiftKey || (this.sortSettings.allowUnsort && target.querySelectorAll('.e-descending').length)
+                && !(gObj.groupSettings.columns.indexOf(field) > -1)) {
+                this.removeSortColumn(field);
+            }
+            else {
+                this.sortColumn(field, direction, e.ctrlKey || this.enableSortMultiTouch);
+            }
+        };
         Sort.prototype.showPopUp = function (e) {
             var target = ej2_base_3.closest(e.target, '.e-headercell');
-            if (!ej2_base_2.isNullOrUndefined(target)) {
+            if (!ej2_base_2.isNullOrUndefined(target) || this.parent.isContextMenuOpen()) {
                 util_1.setCssInGridPopUp(this.parent.element.querySelector('.e-gridpopup'), e, 'e-sortdirect e-icons e-icon-sortdirect' + (this.sortedColumns.length > 1 ? ' e-spanclicked' : ''));
@@ -241,0 +270,0 @@ }

src/grid/actions/toolbar.js

@@ -129,9 +129,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-navigations", "../base/constant", "../base/util"], function (require, exports, ej2_base_1, ej2_base_2, ej2_navigations_1, events, util_1) {
             var item = this.predefinedItems[itemObject.text];
-            if (item) {
-                ej2_base_1.extend(item, item, itemObject);
-            }
-            else {
-                item = itemObject;
-            }
-            return item;
+            return item ? ej2_base_1.extend(item, item, itemObject) : itemObject;
         };
@@ -138,0 +132,0 @@ Toolbar.prototype.getItemObject = function (itemName) {

src/grid/base/constant.d.ts

@@ -91,2 +91,12 @@ /** @hidden */
 export declare const resizeStop: string;
+/** @hidden */
+export declare const checkBoxChange: string;
+/** @hidden */
+export declare const beforeCopy: string;
+/** @hidden */
+export declare const filterChoiceRequest: string;
+/** @hidden */
+export declare const filterAfterOpen: string;
+/** @hidden */
+export declare const filterBeforeOpen: string;
 /**
@@ -106,2 +116,4 @@ * Specifies grid internal events
 /** @hidden */
+export declare const onEmpty: string;
+/** @hidden */
 export declare const inBoundModelChanged: string;
@@ -159,2 +171,6 @@ /** @hidden */
 /** @hidden */
+export declare const beforeCellFocused: string;
+/** @hidden */
+export declare const cellFocused: string;
+/** @hidden */
 export declare const keyPressed: string;
@@ -239,1 +255,19 @@ /** @hidden */
 export declare const pdfQueryCellInfo: string;
+/** @hidden */
+export declare const accessPredicate: string;
+/** @hidden */
+export declare const contextMenuClick: string;
+/** @hidden */
+export declare const freezeRefresh: string;
+/** @hidden */
+export declare const contextMenuOpen: string;
+/** @hidden */
+export declare const columnMenuClick: string;
+/** @hidden */
+export declare const columnMenuOpen: string;
+/** @hidden */
+export declare const filterOpen: string;
+/** @hidden */
+export declare const filterDialogCreated: string;
+/** @hidden */
+export declare const filterMenuClose: string;

src/grid/base/constant.js

@@ -49,2 +49,7 @@ define(["require", "exports"], function (require, exports) {
     exports.resizeStop = 'resizeStop';
+    exports.checkBoxChange = 'checkBoxChange';
+    exports.beforeCopy = 'beforeCopy';
+    exports.filterChoiceRequest = 'filterchoicerequest';
+    exports.filterAfterOpen = 'filterafteropen';
+    exports.filterBeforeOpen = 'filterbeforeopen';
     exports.initialLoad = 'initial-load';
@@ -55,2 +60,3 @@ exports.initialEnd = 'initial-end';
     exports.uiUpdate = 'ui-update';
+    exports.onEmpty = 'on-empty';
     exports.inBoundModelChanged = 'inbound-model-changed';
@@ -82,2 +88,4 @@ exports.modelChanged = 'model-changed';
     exports.cellSelectionComplete = 'cellselected';
+    exports.beforeCellFocused = 'beforecellfocused';
+    exports.cellFocused = 'cellfocused';
     exports.keyPressed = 'key-pressed';
@@ -123,2 +131,11 @@ exports.click = 'click';
     exports.pdfQueryCellInfo = 'pdfQueryCellInfo';
+    exports.accessPredicate = 'access-predicate';
+    exports.contextMenuClick = 'contextMenuClick';
+    exports.freezeRefresh = 'freezerefresh';
+    exports.contextMenuOpen = 'contextMenuOpen';
+    exports.columnMenuClick = 'contextMenuClick';
+    exports.columnMenuOpen = 'columnMenuOpen';
+    exports.filterOpen = 'filterOpen';
+    exports.filterDialogCreated = 'filterDialogCreated';
+    exports.filterMenuClose = 'filter-menu-close';
 });

src/grid/base/enum.d.ts

@@ -67,2 +67,4 @@ /**
     DetailExpand = 13,
+    /**  Defines CellType as CommandColumn */
+    CommandColumn = 14,
 }
@@ -109,3 +111,3 @@ /**
  */
-export declare type FilterType = 'filterbar' | 'excel' | 'menu';
+export declare type FilterType = 'filterbar' | 'excel' | 'menu' | 'checkbox';
 /**
@@ -144,1 +146,17 @@ * Filter bar mode options are
 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.
+ */
+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';
+/**
+ * Defines the default items of Column menu.
+ */
+export declare type ColumnMenuItem = 'autoFitAll' | 'autoFit' | 'group' | 'ungroup' | 'sortAscending' | 'sortDescending' | 'columnChooser' | 'filter';

src/grid/base/enum.js

@@ -20,2 +20,3 @@ define(["require", "exports"], function (require, exports) {
         CellType[CellType["DetailExpand"] = 13] = "DetailExpand";
+        CellType[CellType["CommandColumn"] = 14] = "CommandColumn";
     })(CellType = exports.CellType || (exports.CellType = {}));
@@ -22,0 +23,0 @@ var RenderType;

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

@@ -1,2 +0,2 @@
-import { Component, ModuleDeclaration, ChildProperty, Browser } from '@syncfusion/ej2-base';import { isNullOrUndefined } 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 } 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 } from './util';import * as events from '../base/constant';import { IRenderer, IValueFormatter, IFilterOperator, IIndex, RowDataBoundEventArgs, QueryCellInfoEventArgs } from './interface';import { CellDeselectEventArgs, CellSelectEventArgs, CellSelectingEventArgs, ParentDetails } from './interface';import { PdfQueryCellInfoEventArgs, ExcelQueryCellInfoEventArgs } from './interface';import { FailureEventArgs, FilterEventArgs, ColumnDragEventArgs, GroupEventArgs, PrintEventArgs } from './interface';import { RowDeselectEventArgs, RowSelectEventArgs, RowSelectingEventArgs, PageEventArgs, RowDragEventArgs } from './interface';import { BeforeBatchAddArgs, BeforeBatchDeleteArgs, BeforeBatchSaveArgs, ResizeArgs } from './interface';import { BatchAddArgs, BatchDeleteArgs, BeginEditArgs, CellEditArgs, CellSaveArgs, BeforeDataBoundArgs } from './interface';import { DetailDataBoundEventArgs, ColumnChooserEventArgs, AddEventArgs, SaveEventArgs, EditEventArgs, DeleteEventArgs } from './interface';import { SearchEventArgs, SortEventArgs, ISelectedCell, EJ2Intance } 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 } from './enum';import { Data } from '../actions/data';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 { 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 { Component, ModuleDeclaration, ChildProperty, Browser, closest, extend } from '@syncfusion/ej2-base';import { isNullOrUndefined, setValue } 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 } 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 } 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, ColumnMenuOpenEventArgs } 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 } from './interface';import { DetailDataBoundEventArgs, ColumnChooserEventArgs, AddEventArgs, SaveEventArgs, EditEventArgs, DeleteEventArgs } 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 } from './enum';import { Data } from '../actions/data';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 {ComponentModel} from '@syncfusion/ej2-base';
@@ -32,2 +32,8 @@
 
+    /**
+     * If set to false the user can not get the grid in unsorted state by clicking the sorted column header.
+     * @default true
+     */
+    allowUnsort?: boolean;
+
 }
@@ -130,2 +136,26 @@
 
+    /**
+     * @hidden 
+     * Defines the type of the filter column.  
+     */
+    type?: string;
+
+    /**
+     * @hidden 
+     * Defines the predicate of filter column.  
+     */
+    ejpredicate?: Object;
+
+    /**
+     * @hidden 
+     * Defines the matchcase of filter column.  
+     */
+    matchcase?: boolean;
+
+    /**
+     * @hidden 
+     * Defines the ignoreCase of filter column.  
+     */
+    ignoreCase?: boolean;
+
 }
@@ -145,5 +175,5 @@
     /**
-     * @hidden 
-     * Defines options for filtering type. The available options are      
-     * * `excel` - Specifies the filter type as excel. 
+     * 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.  
@@ -174,2 +204,8 @@ * @default filterbar
 
+    /**
+     * Defines the custom operator for Menu filter.
+     * @default null
+     */
+    operators?: ICustomOptr;
+
 }
@@ -206,2 +242,15 @@
 
+    /**
+     * If 'checkboxOnly' set to true, then the Grid selection is allowed only through checkbox when checkbox type column has been enabled.
+     * @default false 
+     */
+    checkboxOnly?: boolean;
+
+    /**
+     * If 'persistSelection' set to true, then the Grid selection is persisted on all operations.
+     * For persisting selection on the Grid, any one of the column should be enabled as a primary key.
+     * @default false 
+     */
+    persistSelection?: boolean;
+
 }
@@ -339,2 +388,7 @@
 
+    /**
+     * The Caption Template allows user to display the string or HTML element in group caption.
+     */
+    captionTemplate?: string;
+
 }
@@ -477,2 +531,9 @@
     /**
+     * If `allowMultiSorting` set to true, then it will allow the user to sort multiple column in the grid.
+     * > `allowSorting` should be true.
+     * @default false
+     */
+    allowMultiSorting?: boolean;
+
+    /**
      * If `allowExcelExport` set to true, then it will allow the user to export grid to Excel file.
@@ -550,3 +611,3 @@ * @default false
      * Configures the filter settings of Grid.  
-     * @default {columns: [], type: 'filterbar', mode: 'immediate', showFilterBarStatus: true, immediateModeDelay: 1500}    
+     * @default {columns: [], type: 'filterbar', mode: 'immediate', showFilterBarStatus: true, immediateModeDelay: 1500, operators: {}}    
      */
@@ -563,2 +624,8 @@ filterSettings?: FilterSettingsModel;
     /**
+     * If `showColumnMenu` set to true, then it will enable the column menu options in each columns.  
+     * @default false    
+     */
+    showColumnMenu?: boolean;
+
+    /**
      * Configures the group settings. 
@@ -745,2 +812,43 @@ * @default {showDropArea: true, showToggleButton: false, showGroupedColumn: false, showUngroupButton: true, columns: []}
     /**
+     * `contextMenuItems` defines both built-in and custom context menu items.
+     * <br><br> 
+     * The available default 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.
+     * @default null
+     */
+    contextMenuItems?: ContextMenuItem[] | ContextMenuItemModel[];
+
+    /**
+     * `columnMenuItems` defines both built-in and custom column menu items.
+     * <br><br> 
+     * The available default 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
+     * @default null
+     */
+    columnMenuItems?: ColumnMenuItem[] | ColumnMenuItemModel[];
+
+    /**
      * @hidden
@@ -760,8 +868,14 @@ * It used to render toolbar template
     /**
-     * @hidden
-     * @default ['columns']
+     * Defines the frozen rows for the grid content
+     * @default 0
      */
-    deepMerge?: string[];
+    frozenRows?: number;
 
     /**
+     * Defines the frozen columns for the grid content
+     * @default 0
+     */
+    frozenColumns?: number;
+
+    /**
      * Triggers when the component is created.
@@ -1021,2 +1135,38 @@ * @event
 
+    /**
+     * Triggers before context menu opens.
+     * @event
+     */
+    contextMenuOpen?: EmitType<BeforeOpenCloseMenuEventArgs>;
+
+    /**
+     * Triggers when click on context menu.
+     * @event
+     */
+    contextMenuClick?: EmitType<MenuEventArgs>;
+
+    /**
+     * Triggers before column menu opens.
+     * @event
+     */
+    columnMenuOpen?: EmitType<ColumnMenuOpenEventArgs>;
+
+    /**
+     * Triggers when click on column menu.
+     * @event
+     */
+    columnMenuClick?: EmitType<MenuEventArgs>;
+
+    /**
+     * Triggers when the check box in checkbox type column is changed.
+     * @event
+     */
+    checkBoxChange?: EmitType<CheckBoxChangeEventArgs>;
+
+    /**
+     * Triggers before Grid copy action.
+     * @event
+     */
+    beforeCopy?: EmitType<BeforeCopyEventArgs>;
+
 }

src/grid/base/grid.d.ts

@@ -8,14 +8,14 @@ import { Component, ModuleDeclaration, ChildProperty } from '@syncfusion/ej2-base';
 import { IRenderer, IValueFormatter, IFilterOperator, IIndex, RowDataBoundEventArgs, QueryCellInfoEventArgs } from './interface';
-import { CellDeselectEventArgs, CellSelectEventArgs, CellSelectingEventArgs, ParentDetails } from './interface';
-import { PdfQueryCellInfoEventArgs, ExcelQueryCellInfoEventArgs } from './interface';
-import { FailureEventArgs, FilterEventArgs, ColumnDragEventArgs, GroupEventArgs, PrintEventArgs } from './interface';
+import { CellDeselectEventArgs, CellSelectEventArgs, CellSelectingEventArgs, ParentDetails, ContextMenuItemModel } from './interface';
+import { PdfQueryCellInfoEventArgs, ExcelQueryCellInfoEventArgs, ColumnMenuOpenEventArgs } from './interface';
+import { FailureEventArgs, FilterEventArgs, ColumnDragEventArgs, GroupEventArgs, PrintEventArgs, ICustomOptr } from './interface';
 import { RowDeselectEventArgs, RowSelectEventArgs, RowSelectingEventArgs, PageEventArgs, RowDragEventArgs } from './interface';
-import { BeforeBatchAddArgs, BeforeBatchDeleteArgs, BeforeBatchSaveArgs, ResizeArgs } from './interface';
+import { BeforeBatchAddArgs, BeforeBatchDeleteArgs, BeforeBatchSaveArgs, ResizeArgs, ColumnMenuItemModel } from './interface';
 import { BatchAddArgs, BatchDeleteArgs, BeginEditArgs, CellEditArgs, CellSaveArgs, BeforeDataBoundArgs } from './interface';
 import { DetailDataBoundEventArgs, ColumnChooserEventArgs, AddEventArgs, SaveEventArgs, EditEventArgs, DeleteEventArgs } from './interface';
-import { SearchEventArgs, SortEventArgs, ISelectedCell } from './interface';
+import { SearchEventArgs, SortEventArgs, ISelectedCell, BeforeCopyEventArgs, CheckBoxChangeEventArgs } from './interface';
 import { Render } from '../renderer/render';
 import { Column, ColumnModel } from '../models/column';
 import { Action, SelectionType, GridLine, SortDirection, SelectionMode, PrintMode, FilterType, FilterBarMode } from './enum';
-import { WrapMode, ToolbarItems } from './enum';
+import { WrapMode, ToolbarItems, ContextMenuItem, ColumnMenuItem } from './enum';
 import { Data } from '../actions/data';
@@ -47,2 +47,6 @@ import { ServiceLocator } from '../services/service-locator';
 import { PdfExport } from '../actions/pdf-export';
+import { Clipboard } from '../actions/clipboard';
+import { ContextMenu } from '../actions/context-menu';
+import { BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-navigations';
+import { ColumnMenu } from '../actions/column-menu';
 /**
@@ -70,2 +74,7 @@ * Represents the field name and direction of sort column.
     columns: SortDescriptorModel[];
+    /**
+     * If set to false the user can not get the grid in unsorted state by clicking the sorted column header.
+     * @default true
+     */
+    allowUnsort: boolean;
 }
@@ -159,2 +168,22 @@ /**
     actualOperator: Object;
+    /**
+     * @hidden
+     * Defines the type of the filter column.
+     */
+    type: string;
+    /**
+     * @hidden
+     * Defines the predicate of filter column.
+     */
+    ejpredicate: Object;
+    /**
+     * @hidden
+     * Defines the matchcase of filter column.
+     */
+    matchcase: boolean;
+    /**
+     * @hidden
+     * Defines the ignoreCase of filter column.
+     */
+    ignoreCase: boolean;
 }
@@ -171,5 +200,5 @@ /**
     /**
-     * @hidden
      * Defines options for filtering type. The available options are
-     * * `excel` - Specifies the filter type as excel.
+     * * `menu` - Specifies the filter type as menu.
+     * * `checkbox` - Specifies the filter type as checkbox.
      * * `filterbar` - Specifies the filter type as filterbar.
@@ -196,2 +225,7 @@ * @default filterbar
     immediateModeDelay: number;
+    /**
+     * Defines the custom operator for Menu filter.
+     * @default null
+     */
+    operators: ICustomOptr;
 }
@@ -223,2 +257,13 @@ /**
     type: SelectionType;
+    /**
+     * If 'checkboxOnly' set to true, then the Grid selection is allowed only through checkbox when checkbox type column has been enabled.
+     * @default false
+     */
+    checkboxOnly: boolean;
+    /**
+     * If 'persistSelection' set to true, then the Grid selection is persisted on all operations.
+     * For persisting selection on the Grid, any one of the column should be enabled as a primary key.
+     * @default false
+     */
+    persistSelection: boolean;
 }
@@ -336,2 +381,6 @@ /**
     columns: string[];
+    /**
+     * The Caption Template allows user to display the string or HTML element in group caption.
+     */
+    captionTemplate: string;
 }
@@ -405,5 +454,13 @@ /**
     private isInitialLoad;
+    private dataBoundFunction;
+    private freezeRefresh;
     /** @hidden */
     recordsCount: number;
     /**
+     * @hidden
+     */
+    mergeCells: {
+        [key: string]: number;
+    };
+    /**
      * Gets the current visible records of Grid.
@@ -523,2 +580,10 @@ */
     /**
+     * `contextMenuModule` is used to manipulate context menu items in the Grid.
+     */
+    contextMenuModule: ContextMenu;
+    /**
+     * `columnMenuModule` is used to manipulate column menu items in the Grid.
+     */
+    columnMenuModule: ColumnMenu;
+    /**
      * `editModule` is used to handle Grid content manipulation.
@@ -528,2 +593,6 @@ */
     /**
+     * `clipboardModule` is used to handle Grid copy action.
+     */
+    clipboardModule: Clipboard;
+    /**
      * `columnchooserModule` is used to dynamically show or hide the Grid columns.
@@ -533,2 +602,4 @@ * @hidden
     columnChooserModule: ColumnChooser;
+    private commandColumnModule;
+    private focusModule;
     /**
@@ -600,2 +671,8 @@ * Defines the schema of dataSource.
     /**
+     * If `allowMultiSorting` set to true, then it will allow the user to sort multiple column in the grid.
+     * > `allowSorting` should be true.
+     * @default false
+     */
+    allowMultiSorting: boolean;
+    /**
      * If `allowExcelExport` set to true, then it will allow the user to export grid to Excel file.
@@ -662,3 +739,3 @@ * @default false
      * Configures the filter settings of Grid.
-     * @default {columns: [], type: 'filterbar', mode: 'immediate', showFilterBarStatus: true, immediateModeDelay: 1500}
+     * @default {columns: [], type: 'filterbar', mode: 'immediate', showFilterBarStatus: true, immediateModeDelay: 1500, operators: {}}
      */
@@ -673,2 +750,7 @@ filterSettings: FilterSettingsModel;
     /**
+     * If `showColumnMenu` set to true, then it will enable the column menu options in each columns.
+     * @default false
+     */
+    showColumnMenu: boolean;
+    /**
      * Configures the group settings.
@@ -840,2 +922,41 @@ * @default {showDropArea: true, showToggleButton: false, showGroupedColumn: false, showUngroupButton: true, columns: []}
     /**
+     * `contextMenuItems` defines both built-in and custom context menu items.
+     * <br><br>
+     * The available default 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.
+     * @default null
+     */
+    contextMenuItems: ContextMenuItem[] | ContextMenuItemModel[];
+    /**
+     * `columnMenuItems` defines both built-in and custom column menu items.
+     * <br><br>
+     * The available default 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
+     * @default null
+     */
+    columnMenuItems: ColumnMenuItem[] | ColumnMenuItemModel[];
+    /**
      * @hidden
@@ -853,7 +974,12 @@ * It used to render toolbar template
     /**
-     * @hidden
-     * @default ['columns']
+     * Defines the frozen rows for the grid content
+     * @default 0
      */
-    deepMerge: string[];
+    frozenRows: number;
     /**
+     * Defines the frozen columns for the grid content
+     * @default 0
+     */
+    frozenColumns: number;
+    /**
      * Triggers when the component is created.
@@ -1072,2 +1198,32 @@ * @event
     /**
+     * Triggers before context menu opens.
+     * @event
+     */
+    contextMenuOpen: EmitType<BeforeOpenCloseMenuEventArgs>;
+    /**
+     * Triggers when click on context menu.
+     * @event
+     */
+    contextMenuClick: EmitType<MenuEventArgs>;
+    /**
+     * Triggers before column menu opens.
+     * @event
+     */
+    columnMenuOpen: EmitType<ColumnMenuOpenEventArgs>;
+    /**
+     * Triggers when click on column menu.
+     * @event
+     */
+    columnMenuClick: EmitType<MenuEventArgs>;
+    /**
+     * Triggers when the check box in checkbox type column is changed.
+     * @event
+     */
+    checkBoxChange: EmitType<CheckBoxChangeEventArgs>;
+    /**
+     * Triggers before Grid copy action.
+     * @event
+     */
+    beforeCopy: EmitType<BeforeCopyEventArgs>;
+    /**
      * Constructor for creating the component
@@ -1091,2 +1247,3 @@ * @hidden
     requiredModules(): ModuleDeclaration[];
+    extendRequiredModules(modules: ModuleDeclaration[]): void;
     /**
@@ -1153,2 +1310,6 @@ * For internal use only - Initialize the event handler;
      */
+    getLocaleConstants(): Object;
+    /**
+     * @private
+     */
     setColumnIndexesInView(indexes: number[]): void;
@@ -1259,2 +1420,6 @@ /**
     /**
+     * @hidden
+     */
+    getRowsObject(): Row<Column>[];
+    /**
      * Gets a column header by column name.
@@ -1504,2 +1669,7 @@ * @param  {string} field - Specifies the column name.
     /**
+     * Copy selected rows or cells data into clipboard.
+     * @param {boolean} withHeader - Specifies whether the column header data need to be copied or not.
+     */
+    copy(withHeader?: boolean): void;
+    /**
      * @hidden
@@ -1603,2 +1773,3 @@ */
     private isChildGrid(e);
+    private mergePersistGridData();
     private isDetail();
@@ -1639,2 +1810,37 @@ private keyActionHandler(e);
     pdfExport(exportProperties?: any, isMultipleExport?: boolean, pdfDoc?: Object): Promise<Object>;
+    private isCommandColumn(columns);
+    /**
+     * Groups a column by column name.
+     * @param  {string} columnName - Defines the column name to group.
+     * @return {void}
+     */
+    groupColumn(columnName: string): void;
+    /**
+     * Ungroups a column by column name.
+     * @param  {string} columnName - Defines the column name to ungroup.
+     * @return {void}
+     */
+    ungroupColumn(columnName: string): void;
+    /**
+     * @hidden
+     */
+    isContextMenuOpen(): boolean;
+    /**
+     * @hidden
+     */
+    ensureModuleInjected(module: Function): boolean;
+    /**
+     * Shows a column by column name.
+     * @param  {string|string[]} columnName - Defines a single or collection of column names to show.
+     * @param  {string} showBy - Defines the column key either as field name or header text.
+     * @return {void}
+     */
+    showColumn(columnName: string | string[], showBy?: string): void;
+    /**
+     * Hides a column by column name.
+     * @param  {string|string[]} columnName - Defines a single or collection of column names to hide.
+     * @param  {string} hideBy - Defines the column key either as field name or header text.
+     * @return {void}
+     */
+    hideColumn(columnName: string | string[], hideBy?: string): void;
 }

src/grid/base/interface.d.ts

@@ -1,4 +0,5 @@
-import { Component, NumberFormatOptions, DateFormatOptions } from '@syncfusion/ej2-base';
+import { Component, NumberFormatOptions, DateFormatOptions, EmitType, KeyboardEventArgs } from '@syncfusion/ej2-base';
 import { Query, DataManager } from '@syncfusion/ej2-data';
-import { ItemModel } from '@syncfusion/ej2-navigations';
+import { ItemModel, MenuItemModel, BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-navigations';
+import { ButtonModel } from '@syncfusion/ej2-buttons';
 import { Column, ColumnModel } from '../models/column';
@@ -10,3 +11,3 @@ import { SortSettingsModel, TextWrapSettingsModel, SelectionSettingsModel, FilterSettingsModel, SearchSettingsModel } from './grid-model';
 import { Row } from '../models/row';
-import { GridLine, Action, CellType, SortDirection, PrintMode, ToolbarItems } from './enum';
+import { GridLine, Action, CellType, SortDirection, PrintMode, ToolbarItems, CommandButtonType, ContextMenuItem } from './enum';
 import { PredicateModel } from './grid-model';
@@ -19,2 +20,4 @@ import { SentinelType, Offsets } from './type';
 import { Data } from '../actions/data';
+import { DatePickerModel } from '@syncfusion/ej2-calendars';
+import { Matrix } from '../services/focus-strategy';
 /**
@@ -74,2 +77,7 @@ * Specifies grid interfaces.
     /**
+     * Specifies whether the multi-sorting is enable or not.
+     * @default null
+     */
+    allowMultiSorting?: boolean;
+    /**
      * Specifies the sortSettings for Grid.
@@ -130,2 +138,7 @@ * @default []
     /**
+     * Specifies whether the column menu is show or not.
+     * @default null
+     */
+    showColumnMenu?: boolean;
+    /**
      * Specifies the groupSettings for Grid.
@@ -217,2 +230,12 @@ * @default []
     /**
+     * Specifies the context menu items for Grid.
+     * @default null
+     */
+    contextMenuItems?: ContextMenuItem[] | ContextMenuItemModel[];
+    /**
+     * Specifies the column menu items for Grid.
+     * @default null
+     */
+    columnMenuItems?: string[] | ContextMenuItemModel[];
+    /**
      * @hidden
@@ -229,4 +252,17 @@ * It used to render toolbar template
     pagerTemplate?: string;
+    /**
+     * Defines the frozen rows for the grid content
+     * @default 0
+     */
+    frozenRows?: number;
+    /**
+     * Defines the frozen columns for the grid content
+     * @default 0
+     */
+    frozenColumns?: number;
     isEdit?: boolean;
     editModule?: Edit;
+    mergeCells?: {
+        [key: string]: number;
+    };
     getHeaderContent?(): Element;
@@ -261,2 +297,3 @@ setGridHeaderContent?(value: Element): void;
     getSelectedRowIndexes?(): number[];
+    getSelectedRowCellIndexes(): ISelectedCell[];
     getCurrentViewRecords(): Object[];
@@ -281,2 +318,10 @@ selectRows?(indexes: number[]): void;
     getPrimaryKeyFieldNames?(): string[];
+    autoFitColumns(fieldNames: string | string[]): void;
+    groupColumn(columnName: string): void;
+    ungroupColumn(columnName: string): void;
+    ensureModuleInjected(module: Function): Boolean;
+    isContextMenuOpen(): Boolean;
+    goToPage(pageNo: number): void;
+    showColumn(columnName: string | string[], showBy?: string): void;
+    hideColumn(columnName: string | string[], hideBy?: string): void;
     print(): void;
@@ -294,5 +339,8 @@ excelExport(exportProperties?: any, isMultipleExport?: boolean, workbook?: any): Promise<any>;
     getRowObjectFromUID?(uid: string): Row<Column>;
+    getRowsObject?(): Row<Column>[];
     createColumnchooser(x: number, y: number, target: Element): void;
     getDataModule?(): Data;
     refreshTooltip?(): void;
+    copy?(withHeader?: boolean): void;
+    getLocaleConstants?(): Object;
 }
@@ -364,3 +412,3 @@ /** @hidden */
     write?: void | Function;
-    params?: NumericTextBoxModel | DropDownListModel;
+    params?: DatePickerModel | NumericTextBoxModel | DropDownListModel;
     destroy?: Function;
@@ -379,2 +427,27 @@ }
  */
+export interface IFilterMUI {
+    create?: void | Function;
+    read?: Object | Function;
+    write?: void | Function;
+}
+/**
+ * @hidden
+ */
+export interface ICustomOptr {
+    stringOperator?: {
+        [key: string]: Object;
+    }[];
+    numberOperator?: {
+        [key: string]: Object;
+    }[];
+    dateOperator?: {
+        [key: string]: Object;
+    }[];
+    booleanOperator?: {
+        [key: string]: Object;
+    }[];
+}
+/**
+ * @hidden
+ */
 export interface ICellRenderer<T> {
@@ -410,4 +483,4 @@ element?: Element;
 export interface IIndex {
-    rowIndex: number;
-    cellIndex: number;
+    rowIndex?: number;
+    cellIndex?: number;
 }
@@ -460,2 +533,3 @@ /**
     className?: string;
+    commands?: CommandModel[];
 }
@@ -612,2 +686,4 @@ /**
     column?: Column;
+    /** Defines the no. of columns to be spanned */
+    colSpan?: number;
 }
@@ -621,4 +697,16 @@ export interface PdfQueryCellInfoEventArgs {
     value?: any;
+    /** Defines the no. of columns to be spanned */
+    colSpan?: number;
 }
+export interface PdfQueryCellInfoEventArgs {
+    /** Defines the column of the current cell. */
+    column?: Column;
+    /** Defines the style of the current cell. */
+    style?: any;
+    /** Defines the value of the current cell. */
+    value?: any;
+}
 export interface ExcelQueryCellInfoEventArgs {
+    /** Defines the row data associated with this cell. */
+    data?: Object;
     /** Defines the column of the current cell. */
@@ -630,2 +718,4 @@ column: any;
     style?: any;
+    /** Defines the number of columns to be spanned */
+    colSpan?: number;
 }
@@ -887,1 +977,161 @@ export interface RowDragEventArgs {
 }
+/**
+ * @hidden
+ */
+export interface CheckBoxChangeEventArgs extends ICancel {
+    /** Defines the checked state. */
+    checked?: boolean;
+    /** Defines the selected row indexes. */
+    selectedRowIndexes?: number[];
+    /** Defines the target element for selection. */
+    target?: Element;
+}
+/**
+ * @hidden
+ */
+export interface BeforeCopyEventArgs extends ICancel {
+    /** Defines the grid copied data. */
+    data?: string;
+}
+export interface CommandButtonOptions extends ButtonModel {
+    /**
+     * Define handler for click event.
+     */
+    click?: EmitType<Event>;
+}
+/**
+ * Define options for custom command buttons.
+ */
+export interface CommandModel {
+    /**
+     * Define the command Button type
+     */
+    type?: CommandButtonType;
+    /**
+     * Define the button model
+     */
+    buttonOption?: CommandButtonOptions;
+}
+/**
+ * @hidden
+ */
+export interface CheckBoxChangeEventArgs extends ICancel {
+    /** Defines the checked state. */
+    checked?: boolean;
+    /** Defines the selected row indexes. */
+    selectedRowIndexes?: number[];
+    /** Defines the target element for selection. */
+    target?: Element;
+}
+/**
+ * @hidden
+ */
+export interface BeforeCopyEventArgs extends ICancel {
+    /** Defines the grid copied data. */
+    data?: string;
+}
+/**
+ * @hidden
+ */
+export interface IFocus {
+    matrix: Matrix;
+    onKeyPress?: Function;
+    onClick?: Function;
+    onFocus?: Function;
+    jump?: (action: string, current: number[]) => boolean;
+    getFocusInfo?: () => FocusInfo;
+    selector?: (row: Row<Column>, cell: Cell<Column>) => boolean;
+    generateRows?: (rows: Row<Column>[]) => void;
+    getInfo?: (e?: KeyboardEventArgs) => FocusedContainer;
+    validator?: () => Function;
+}
+/**
+ * @hidden
+ */
+export interface FocusInfo {
+    element?: HTMLElement;
+    elementToFocus?: HTMLElement;
+    outline?: boolean;
+    class?: string;
+}
+/**
+ * @hidden
+ */
+export interface CellFocusArgs {
+    element?: HTMLElement;
+    parent?: HTMLElement;
+    indexes?: number[];
+    byKey?: boolean;
+    byClick?: boolean;
+    keyArgs?: KeyboardEventArgs;
+    clickArgs?: Event;
+    isJump?: boolean;
+    container?: FocusedContainer;
+    outline?: boolean;
+    cancel?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface FocusedContainer {
+    isContent?: boolean;
+    isHeader?: boolean;
+    isDataCell?: boolean;
+    isFrozen?: boolean;
+    isStacked?: boolean;
+    isSelectable?: boolean;
+    indexes?: number[];
+}
+export interface ContextMenuItemModel extends MenuItemModel {
+    target?: string;
+}
+/**
+ * @hidden
+ */
+export interface IFilter {
+    type?: string;
+    dataSource?: Object[] | DataManager;
+    hideSearchbox?: boolean;
+    itemTemplate?: string;
+    ui?: IFilterMUI;
+}
+/**
+ * @hidden
+ */
+export interface IFilterArgs {
+    type?: string;
+    field?: string;
+    displayName?: string;
+    query?: Query;
+    dataSource?: Object[] | DataManager;
+    format?: string;
+    filteredColumns?: Object[];
+    sortedColumns?: string[];
+    localizedStrings?: Object;
+    position?: {
+        X: number;
+        Y: number;
+    };
+    formatFn?: Function;
+    parserFn?: Function;
+    hideSearchbox?: boolean;
+    allowCaseSensitive?: boolean;
+    handler?: Function;
+    template?: Function;
+    target?: Element;
+}
+/**
+ * Defines the context menu item model.
+ */
+export interface ContextMenuItemModel extends MenuItemModel {
+    /**
+     * Define the target to show the menu item.
+     */
+    target?: string;
+}
+export interface ColumnMenuItemModel extends MenuItemModel {
+    hide?: boolean;
+}
+export interface ColumnMenuOpenEventArgs extends BeforeOpenCloseMenuEventArgs {
+    column?: Column;
+}

src/grid/base/util.d.ts

 import { IPosition, IGrid } from './interface';
+import { ServiceLocator } from '../services/service-locator';
 import { Column } from '../models/column';
 import { ColumnModel, AggregateColumnModel } from '../models/models';
 import { AggregateType } from './enum';
+import { Dialog, Popup } from '@syncfusion/ej2-popups';
 /**
@@ -77,1 +79,17 @@ * Function to check whether target object implement specific interface
 export declare function changeButtonType(target: Element): void;
+/** @hidden */
+export declare function setFormatter(serviceLocator?: ServiceLocator, column?: Column): void;
+/** @hidden */
+export declare function addRemoveActiveClasses(cells: Element[], add: boolean, ...args: string[]): void;
+/** @hidden */
+export declare function distinctStringValues(result: string[]): string[];
+/** @hidden */
+export declare function getFilterMenuPostion(target: Element, dialogObj: Dialog): void;
+/** @hidden */
+export declare function getZIndexCalcualtion(args: {
+    popup: Popup;
+}, dialogObj: Dialog): void;
+/** @hidden */
+export declare function toogleCheckbox(elem: Element): void;
+/** @hidden */
+export declare function createCboxWithWrap(uid: string, elem: Element, className?: string): Element;

src/grid/base/util.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "../models/column"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, ej2_data_1, column_1) {
+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) {
     "use strict";
@@ -312,2 +312,82 @@ Object.defineProperty(exports, "__esModule", { value: true });
     exports.changeButtonType = changeButtonType;
+    function setFormatter(serviceLocator, column) {
+        var fmtr = serviceLocator.getService('valueFormatter');
+        switch (column.type) {
+            case 'date':
+                column.setFormatter(fmtr.getFormatFunction({ type: 'date', skeleton: column.format }));
+                column.setParser(fmtr.getParserFunction({ type: 'date', skeleton: column.format }));
+                break;
+            case 'datetime':
+                column.setFormatter(fmtr.getFormatFunction({ type: 'dateTime', skeleton: column.format }));
+                column.setParser(fmtr.getParserFunction({ type: 'dateTime', skeleton: column.format }));
+                break;
+            case 'number':
+                column.setFormatter(fmtr.getFormatFunction({ format: column.format }));
+                column.setParser(fmtr.getParserFunction({ format: column.format }));
+                break;
+        }
+    }
+    exports.setFormatter = setFormatter;
+    function addRemoveActiveClasses(cells, add) {
+        var args = [];
+        for (var _i = 2; _i < arguments.length; _i++) {
+            args[_i - 2] = arguments[_i];
+        }
+        for (var i = 0, len = cells.length; i < len; i++) {
+            if (add) {
+                ej2_base_1.classList(cells[i], args.slice(), []);
+                cells[i].setAttribute('aria-selected', 'true');
+            }
+            else {
+                ej2_base_1.classList(cells[i], [], args.slice());
+                cells[i].removeAttribute('aria-selected');
+            }
+        }
+    }
+    exports.addRemoveActiveClasses = addRemoveActiveClasses;
+    function distinctStringValues(result) {
+        var temp = {};
+        var res = [];
+        for (var i = 0; i < result.length; i++) {
+            if (!(result[i] in temp)) {
+                res.push(result[i].toString());
+                temp[result[i]] = 1;
+            }
+        }
+        return res;
+    }
+    exports.distinctStringValues = distinctStringValues;
+    function getFilterMenuPostion(target, dialogObj) {
+        var elementVisible = dialogObj.element.style.display;
+        dialogObj.element.style.display = 'block';
+        var dlgWidth = dialogObj.width;
+        var newpos = ej2_popups_1.calculateRelativeBasedPosition(target, dialogObj.element);
+        dialogObj.element.style.display = elementVisible;
+        dialogObj.element.style.top = (newpos.top + target.getBoundingClientRect().height) - 5 + 'px';
+        var leftPos = ((newpos.left - dlgWidth) + target.clientWidth);
+        if (leftPos < 1) {
+            dialogObj.element.style.left = (dlgWidth + leftPos) - 16 + 'px';
+        }
+        else {
+            dialogObj.element.style.left = leftPos + -4 + 'px';
+        }
+    }
+    exports.getFilterMenuPostion = getFilterMenuPostion;
+    function getZIndexCalcualtion(args, dialogObj) {
+        args.popup.element.style.zIndex = (dialogObj.zIndex + 1).toString();
+    }
+    exports.getZIndexCalcualtion = getZIndexCalcualtion;
+    function toogleCheckbox(elem) {
+        var span = elem.querySelector('.e-frame');
+        span.classList.contains('e-check') ? ej2_base_1.classList(span, ['e-uncheck'], ['e-check']) :
+            ej2_base_1.classList(span, ['e-check'], ['e-uncheck']);
+    }
+    exports.toogleCheckbox = toogleCheckbox;
+    function createCboxWithWrap(uid, elem, className) {
+        var div = ej2_base_3.createElement('div', { className: className });
+        div.appendChild(elem);
+        div.setAttribute('uid', uid);
+        return div;
+    }
+    exports.createCboxWithWrap = createCboxWithWrap;
 });

src/grid/models/cell.d.ts

 import { CellType } from '../base/enum';
+import { CommandModel } from '../base/interface';
 /**
@@ -22,2 +23,6 @@ * Cell
     };
+    isSpanned: boolean;
+    cellSpan: number;
+    spanText: string | number | boolean | Date;
+    commands: CommandModel[];
     constructor(options: {
@@ -24,0 +29,0 @@ [x: string]: Object;

src/grid/models/cell.js

@@ -6,2 +6,3 @@ define(["require", "exports", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1) {
         function Cell(options) {
+            this.isSpanned = false;
             ej2_base_1.merge(this, options);
@@ -8,0 +9,0 @@ }

src/grid/models/column.d.ts

 import { NumberFormatOptions, DateFormatOptions } from '@syncfusion/ej2-base';
-import { ICellFormatter, IFilterUI, IEditCell } from '../base/interface';
+import { ICellFormatter, IFilterUI, IEditCell, CommandModel, IFilter } from '../base/interface';
 import { TextAlign, ClipMode } from '../base/enum';
@@ -92,5 +92,4 @@ import { ValueAccessor } from '../base/type';
     /**
-     * Defines the column template as string or HTML element ID which is used to add customized element in the column header.
+     * Defines the header template as string or HTML element ID which is used to add customized element in the column header.
      * @default null
-     * @hidden
      */
@@ -123,2 +122,13 @@ headerTemplate: string;
     /**
+     * If `showColumnMenu` set to false, then it disable the column menu of a particular column.
+     * By default column menu will show for all columns
+     * @default true
+     */
+    showColumnMenu: boolean;
+    /**
+     * If `enableGroupByFormat` set to true, then it groups the particular column by formatted values.
+     * @default true
+     */
+    enableGroupByFormat: boolean;
+    /**
      * If `allowEditing` set to false, then it disables editing of a particular column.
@@ -254,2 +264,62 @@ * By default all columns are editable.
     /**
+     *  It is used to customize the default filter options for a specific columns.
+     * * type -  Specifies the filter type as menu or checkbox.
+     * * ui - to render custom component for specific column it has following functions.
+     * * create – It is used for creating custom components.
+     * * read -  It is used for read the value from the component.
+     * * write - It is used to apply component model as dynamically.
+     *
+     *  ``` html
+     * <div id="Grid"></div>
+     * ```
+     * ```typescript
+     * let gridObj: Grid = new Grid({
+     * dataSource: filterData,
+     * allowFiltering: true,
+     * filterSettings: { type: 'menu'},
+     *  columns: [
+     *      {
+     *          field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'right', filter: {
+     *              ui: {
+     *                  create: (args: { target: Element, column: Object }) => {
+     *                      let db: Object = new DataManager(data);
+     *                      let flValInput: HTMLElement = createElement('input', { className: 'flm-input' });
+     *                      args.target.appendChild(flValInput);
+     *                      this.dropInstance = new DropDownList({
+     *                          dataSource: new DataManager(data),
+     *                          fields: { text: 'OrderID', value: 'OrderID' },
+     *                          placeholder: 'Select a value',
+     *                          popupHeight: '200px'
+     *                      });
+     *                      this.dropInstance.appendTo(flValInput);
+     *                  },
+     *                  write: (args: {
+     *                      column: Object, target: Element, parent: any,
+     *                      filteredValue: number | string
+     *                  }) => {
+     *                      this.dropInstance.value = args.filteredValue;
+     *                  },
+     *                  read: (args: { target: Element, column: any, operator: string, fltrObj: Filter }) => {
+     *                      args.fltrObj.filterByColumn(args.column.field, args.operator, this.dropInstance.value);
+     *
+     *                  }
+     *              }
+     *          }
+     *      },
+     *      { field: 'CustomerID', headerText: 'Customer Name', width: 150 },
+     *      { field: 'EmployeeID', headerText: 'Employee ID', width: 150 },
+     *      {
+     *          field: 'ShipCountry', headerText: 'Ship Country', filter: {
+     *              type: 'checkbox'
+     *          }, width: 150
+     *      }
+     *  ]
+     * });
+     * gridObj.appendTo('#Grid');
+     * ```
+     *
+     *  @default null
+     */
+    filter: IFilter;
+    /**
      * It is used to render multiple header rows(stacked headers) on the Grid header.
@@ -313,2 +383,39 @@ * @default null
     foreignKeyValue: string;
+    /**
+     * @hidden
+     * Defines the commands column template as string or HTML element ID which is used to add
+     * customized command buttons in each cells of the column.
+     */
+    commandsTemplate: string;
+    /**
+     * `commands` provides an option to display command buttons in every cell.
+     * The available built-in command buttons are
+     * * edit - Edit the record.
+     * * delete - Delete the record.
+     * * save - Save the record.
+     * * cancel - Cancel the edit state.
+     *
+     * The following code example implements the custom command column.
+     * ```html
+     * <style type="text/css" class="cssStyles">
+     * .details-icon:before
+     * {
+     *    content:"\e74d";
+     * }
+     * </style>
+     * <div id="Grid"></div>
+     * ```
+     * ```typescript
+     * var gridObj = new Grid({
+     * datasource: window.gridData,
+     * columns : [
+     *  { field: 'CustomerID', headerText: 'Customer ID' },
+     *  { field: 'CustomerName', headerText: 'Customer Name' },
+     *  {commands: [{buttonOption:{content: 'Details', click: onClick, cssClass: details-icon}}], headerText: 'Customer Details'}
+     * ]
+     * gridObj.appendTo("#Grid");
+     * ```
+     * @default null
+     */
+    commands: CommandModel[];
     constructor(options: ColumnModel);
@@ -318,2 +425,3 @@ private formatFn;
     private templateFn;
+    private fltrTemplateFn;
     /** @hidden */
@@ -330,2 +438,4 @@ getFormatter(): Function;
     /** @hidden */
+    getFilterItemTemplate(): Function;
+    /** @hidden */
     getDomSetter(): string;
@@ -450,2 +560,8 @@ }
     /**
+     * If `enableGroupByFormat` set to true, then it groups the particular column by formatted values.
+     * By default no columns are group by format.
+     * @default true
+     */
+    enableGroupByFormat?: boolean;
+    /**
      * If `allowEditing` set to false, then it disables editing of a particular column.
@@ -581,2 +697,7 @@ * By default all columns are editable.
     /**
+     *  Defines the filter options to customize filtering for the particular column.
+     *  @default null
+     */
+    filter?: IFilter;
+    /**
      * It is used to render multiple header rows(stacked headers) on the Grid header.
@@ -646,2 +767,39 @@ * @default null
     showInColumnChooser?: boolean;
+    /**
+     * @hidden
+     * Defines the commands column template as string or HTML element ID which is used to add
+     * customized command buttons in each cells of the column.
+     */
+    commandsTemplate?: string;
+    /**
+     * `commands` provides an option to display command buttons in every cell.
+     * The available built-in command buttons are
+     * * edit - Edit the record.
+     * * delete - Delete the record.
+     * * save - Save the record.
+     * * cancel - Cancel the edit state.
+     *
+     * The following code example implements the custom command column.
+     * ```html
+     * <style type="text/css" class="cssStyles">
+     * .details-icon:before
+     * {
+     *    content:"\e74d";
+     * }
+     * </style>
+     * <div id="Grid"></div>
+     * ```
+     * ```typescript
+     * var gridObj = new Grid({
+     * datasource: window.gridData,
+     * columns : [
+     *  { field: 'CustomerID', headerText: 'Customer ID' },
+     *  { field: 'CustomerName', headerText: 'Customer Name' },
+     *  {commands: [{buttonOption:{content: 'Details', click: onClick, cssClass: details-icon}}], headerText: 'Customer Details'}
+     * ]
+     * gridObj.appendTo("#Grid");
+     * ```
+     * @default null
+     */
+    commands?: CommandModel[];
 }

src/grid/models/column.js

@@ -10,3 +10,6 @@ define(["require", "exports", "@syncfusion/ej2-base", "../services/value-formatter", "../base/util"], function (require, exports, ej2_base_1, value_formatter_1, util_1) {
             this.allowGrouping = true;
+            this.showColumnMenu = true;
+            this.enableGroupByFormat = false;
             this.allowEditing = true;
+            this.filter = {};
             this.showInColumnChooser = true;
@@ -25,5 +28,11 @@ ej2_base_1.merge(this, options);
             }
-            if (this.template) {
-                this.templateFn = util_1.templateCompiler(this.template);
+            if (this.commands && !this.textAlign) {
+                this.textAlign = 'right';
             }
+            if (this.template || this.commandsTemplate) {
+                this.templateFn = util_1.templateCompiler(this.template || this.commandsTemplate);
+            }
+            if (this.filter.itemTemplate) {
+                this.fltrTemplateFn = util_1.templateCompiler(this.filter.itemTemplate);
+            }
         }
@@ -45,2 +54,5 @@ Column.prototype.getFormatter = function () {
         };
+        Column.prototype.getFilterItemTemplate = function () {
+            return this.fltrTemplateFn;
+        };
         Column.prototype.getDomSetter = function () {
@@ -47,0 +59,0 @@ return this.disableHtmlEncode ? 'textContent' : 'innerHTML';

src/grid/renderer.d.ts

@@ -23,1 +23,4 @@ /**
 export * from './renderer/numeric-edit-cell';
+export * from './renderer/datepicker-edit-cell';
+export * from './renderer/command-column-renderer';
+export * from './renderer/freeze-renderer';

src/grid/renderer.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "./renderer/header-renderer", "./renderer/content-renderer", "./renderer/row-renderer", "./renderer/cell-renderer", "./renderer/header-cell-renderer", "./renderer/filter-cell-renderer", "./renderer/stacked-cell-renderer", "./renderer/render", "./renderer/filter-cell-renderer", "./renderer/indent-cell-renderer", "./renderer/caption-cell-renderer", "./renderer/batch-edit-renderer", "./renderer/dialog-edit-renderer", "./renderer/inline-edit-renderer", "./renderer/edit-renderer", "./renderer/boolean-edit-cell", "./renderer/default-edit-cell", "./renderer/dropdown-edit-cell", "./renderer/numeric-edit-cell"], function (require, exports, header_renderer_1, content_renderer_1, row_renderer_1, cell_renderer_1, header_cell_renderer_1, filter_cell_renderer_1, stacked_cell_renderer_1, render_1, filter_cell_renderer_2, indent_cell_renderer_1, caption_cell_renderer_1, batch_edit_renderer_1, dialog_edit_renderer_1, inline_edit_renderer_1, edit_renderer_1, boolean_edit_cell_1, default_edit_cell_1, dropdown_edit_cell_1, numeric_edit_cell_1) {
+define(["require", "exports", "./renderer/header-renderer", "./renderer/content-renderer", "./renderer/row-renderer", "./renderer/cell-renderer", "./renderer/header-cell-renderer", "./renderer/filter-cell-renderer", "./renderer/stacked-cell-renderer", "./renderer/render", "./renderer/filter-cell-renderer", "./renderer/indent-cell-renderer", "./renderer/caption-cell-renderer", "./renderer/batch-edit-renderer", "./renderer/dialog-edit-renderer", "./renderer/inline-edit-renderer", "./renderer/edit-renderer", "./renderer/boolean-edit-cell", "./renderer/default-edit-cell", "./renderer/dropdown-edit-cell", "./renderer/numeric-edit-cell", "./renderer/datepicker-edit-cell", "./renderer/command-column-renderer", "./renderer/freeze-renderer"], function (require, exports, header_renderer_1, content_renderer_1, row_renderer_1, cell_renderer_1, header_cell_renderer_1, filter_cell_renderer_1, stacked_cell_renderer_1, render_1, filter_cell_renderer_2, indent_cell_renderer_1, caption_cell_renderer_1, batch_edit_renderer_1, dialog_edit_renderer_1, inline_edit_renderer_1, edit_renderer_1, boolean_edit_cell_1, default_edit_cell_1, dropdown_edit_cell_1, numeric_edit_cell_1, datepicker_edit_cell_1, command_column_renderer_1, freeze_renderer_1) {
     "use strict";
@@ -26,2 +26,5 @@ function __export(m) {
     __export(numeric_edit_cell_1);
+    __export(datepicker_edit_cell_1);
+    __export(command_column_renderer_1);
+    __export(freeze_renderer_1);
 });

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

@@ -9,2 +9,6 @@ import { IEditCell, IGrid } from '../base/interface';
     private parent;
+    private obj;
+    private editRow;
+    private editType;
+    private activeClasses;
     constructor(parent?: IGrid);
@@ -14,4 +18,3 @@ create(args: {
         value: string;
-        requestType: string;
-        element: Element;
+        type: string;
     }): Element;
@@ -24,4 +27,6 @@ read(element: Element): boolean;
         requestType: string;
+        row: Element;
     }): void;
+    private checkBoxChange(args);
     destroy(): void;
 }

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

@@ -1,2 +0,2 @@
-define(["require", "exports", "@syncfusion/ej2-base", "../base/util"], function (require, exports, ej2_base_1, util_1) {
+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) {
     "use strict";
@@ -6,2 +6,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
         function BooleanEditCell(parent) {
+            this.activeClasses = ['e-selectionbackground', 'e-active'];
             this.parent = parent;
@@ -11,4 +12,8 @@ }
             var col = args.column;
-            var input = ej2_base_1.createElement('input', {
-                className: 'e-field e-boolcell', attrs: {
+            var classNames = 'e-field e-boolcell';
+            if (col.type === 'checkbox') {
+                classNames = 'e-field e-boolcell e-edit-checkselect';
+            }
+            return ej2_base_1.createElement('input', {
+                className: classNames, attrs: {
                     type: 'checkbox', value: args.value, 'e-mappinguid': col.uid,
@@ -18,9 +23,2 @@ id: this.parent.element.id + col.field, name: col.field
             });
-            if (!util_1.isEditable(args.column, args.requestType, args.element)) {
-                input.setAttribute('disabled', 'true');
-            }
-            if (args.value) {
-                input.checked = true;
-            }
-            return input;
         };
@@ -31,5 +29,44 @@ BooleanEditCell.prototype.read = function (element) {
         BooleanEditCell.prototype.write = function (args) {
-            args.element.style.width = 'auto';
+            var selectChkBox;
+            var chkState;
+            if (!ej2_base_1.isNullOrUndefined(args.row)) {
+                selectChkBox = args.row.querySelector('.e-edit-checkselect');
+            }
+            if (args.rowData[args.column.field]) {
+                chkState = JSON.parse(args.rowData[args.column.field].toString().toLowerCase());
+            }
+            if (!ej2_base_1.isNullOrUndefined(selectChkBox)) {
+                this.editType = this.parent.editSettings.mode;
+                this.editRow = args.row;
+                if (args.requestType !== 'add') {
+                    var row = this.parent.getRowObjectFromUID(args.row.getAttribute('data-uid'));
+                    chkState = row ? row.isSelected : false;
+                }
+                util_1.addRemoveActiveClasses.apply(void 0, [[].slice.call(args.row.querySelectorAll('.e-rowcell')), chkState].concat(this.activeClasses));
+            }
+            this.obj = new ej2_buttons_1.CheckBox(ej2_base_2.extend({
+                label: this.parent.editSettings.mode !== 'dialog' ? '' : args.column.headerText,
+                checked: chkState,
+                disabled: !util_1.isEditable(args.column, args.requestType, args.element), enableRtl: this.parent.enableRtl,
+                change: this.checkBoxChange.bind(this)
+            }, args.column.edit.params));
+            this.obj.appendTo(args.element);
         };
+        BooleanEditCell.prototype.checkBoxChange = function (args) {
+            if (this.editRow && this.editType !== 'dialog') {
+                var add = false;
+                if (!args.checked) {
+                    this.editRow.removeAttribute('aria-selected');
+                }
+                else {
+                    add = true;
+                    this.editRow.setAttribute('aria-selected', add.toString());
+                }
+                util_1.addRemoveActiveClasses.apply(void 0, [[].slice.call(this.editRow.querySelectorAll('.e-rowcell')), add].concat(this.activeClasses));
+            }
+        };
         BooleanEditCell.prototype.destroy = function () {
+            if (this.obj) {
+                this.obj.destroy();
+            }
         };
@@ -36,0 +73,0 @@ return BooleanEditCell;

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

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "@syncfusion/ej2-base", "./cell-renderer"], function (require, exports, ej2_base_1, cell_renderer_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "./cell-renderer", "../base/util"], function (require, exports, ej2_base_1, cell_renderer_1, util_1) {
     "use strict";
@@ -24,5 +24,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
             var node = this.element.cloneNode();
-            var value = this.format(cell.column, cell.column.valueAccessor('key', data, cell.column));
-            node.innerHTML = cell.column.headerText + ': ' + value + ' - ' + data.count + ' ' +
-                (data.count < 2 ? this.localizer.getConstant('Item') : this.localizer.getConstant('Items'));
+            var gObj = this.parent;
+            var result;
+            var helper = {};
+            var value = cell.column.enableGroupByFormat ? data.key :
+                this.format(cell.column, cell.column.valueAccessor('key', data, cell.column));
+            if (!ej2_base_1.isNullOrUndefined(gObj.groupSettings.captionTemplate)) {
+                if (gObj.groupSettings.captionTemplate.indexOf('#') !== -1) {
+                    result = util_1.templateCompiler(document.querySelector(gObj.groupSettings.captionTemplate).innerHTML.trim())(data);
+                }
+                else {
+                    result = util_1.templateCompiler(gObj.groupSettings.captionTemplate)(data);
+                }
+                util_1.appendChildren(node, result);
+            }
+            else {
+                node.innerHTML = cell.column.headerText + ': ' + value + ' - ' + data.count + ' ' +
+                    (data.count < 2 ? this.localizer.getConstant('Item') : this.localizer.getConstant('Items'));
+            }
             node.setAttribute('colspan', cell.colSpan.toString());
@@ -29,0 +44,0 @@ node.setAttribute('aria-label', node.innerHTML + ' is groupcaption cell');

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

@@ -12,2 +12,3 @@ import { L10n } from '@syncfusion/ej2-base';
     element: HTMLElement;
+    private rowChkBox;
     protected localizer: L10n;
@@ -14,0 +15,0 @@ protected formatter: IValueFormatter;

src/grid/renderer/cell-renderer.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/util"], function (require, exports, ej2_base_1, ej2_base_2, util_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/util", "@syncfusion/ej2-buttons"], function (require, exports, ej2_base_1, ej2_base_2, util_1, ej2_buttons_1) {
     "use strict";
@@ -7,2 +7,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
             this.element = ej2_base_2.createElement('TD', { className: 'e-rowcell', attrs: { role: 'gridcell', tabindex: '-1' } });
+            this.rowChkBox = ej2_base_2.createElement('input', { className: 'e-checkselect', attrs: { 'type': 'checkbox' } });
             this.localizer = locator.getService('localization');
@@ -74,3 +75,3 @@ this.formatter = locator.getService('valueFormatter');
                     node.classList.add('e-checkbox');
-                    innerHtml = isNull ? null : '<input type="checkbox" disabled ' + (value === 'true' ? 'checked' : '') + '/>';
+                    innerHtml = isNull ? null : '<input type="checkbox" disabled ' + '/>';
                 }
@@ -85,6 +86,24 @@ else {
             node.setAttribute('aria-label', innerHtml + ' column header ' + cell.column.headerText);
-            if (this.evaluate(node, cell, data, attributes)) {
+            if (this.evaluate(node, cell, data, attributes) && column.type !== 'checkbox') {
                 this.appendHtml(node, innerHtml, column.getDomSetter ? column.getDomSetter() : 'innerHTML');
             }
+            else if (column.type === 'checkbox') {
+                node.classList.add('e-gridchkbox');
+                node.setAttribute('aria-label', 'column header ' + cell.column.headerText);
+                var checkBox = this.rowChkBox.cloneNode();
+                checkBox.id = 'checkselect_' + cell.rowID.split('grid-row')[1];
+                node.appendChild(checkBox);
+                if (this.parent.selectionSettings.persistSelection) {
+                    value = value === 'true';
+                }
+                else {
+                    value = false;
+                }
+                new ej2_buttons_1.CheckBox({ checked: value }).appendTo(checkBox);
+            }
             this.setAttributes(node, cell, attributes);
+            if (column.type === 'boolean') {
+                var obj = new ej2_buttons_1.CheckBox({ disabled: true, checked: value === 'true' });
+                obj.appendTo(node.firstElementChild);
+            }
             return node;
@@ -91,0 +110,0 @@ };

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

@@ -15,2 +15,3 @@ import { IRenderer, IGrid, NotifyArgs, IModelGenerator } from '../base/interface';
     colgroup: Element;
+    private isLoaded;
     private drop;
@@ -17,0 +18,0 @@ private args;

src/grid/renderer/content-renderer.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/util", "../base/constant", "./row-renderer", "../services/row-model-generator", "../services/group-model-generator"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, util_1, events, row_renderer_1, row_model_generator_1, group_model_generator_1) {
+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"], 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) {
     "use strict";
@@ -8,2 +8,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
             this.rows = [];
+            this.isLoaded = true;
             this.drop = function (e) {
@@ -13,15 +14,17 @@ _this.parent.notify(events.columnDrop, { target: e.target, droppedElement: e.droppedElement });
             };
-            this.rafCallback = function () {
-                _this.ariaService.setBusy(_this.getPanel().firstChild, false);
-                if (_this.parent.isDestroyed) {
-                    return;
+            this.rafCallback = function (args) { return function () {
+                if (_this.isLoaded) {
+                    _this.ariaService.setBusy(_this.getPanel().firstChild, false);
+                    if (_this.parent.isDestroyed) {
+                        return;
+                    }
+                    _this.parent.notify(events.contentReady, { rows: _this.rows, args: args });
+                    _this.parent.trigger(events.dataBound, {});
+                    if (args) {
+                        var action = (args.requestType || '').toLowerCase() + '-complete';
+                        _this.parent.notify(action, args);
+                    }
+                    _this.parent.hideSpinner();
                 }
-                _this.parent.notify(events.contentReady, {});
-                _this.parent.trigger(events.dataBound, {});
-                if (_this.args) {
-                    var action = (_this.args.requestType || '').toLowerCase() + '-complete';
-                    _this.parent.notify(action, _this.args);
-                }
-                _this.parent.hideSpinner();
-            };
+            }; };
             this.parent = parent;
@@ -80,8 +83,24 @@ this.serviceLocator = serviceLocator;
             var frag = document.createDocumentFragment();
+            var hdrfrag = document.createDocumentFragment();
             var columns = gObj.getColumns();
             var tr;
+            var tbody;
             var row = new row_renderer_1.RowRenderer(this.serviceLocator, null, this.parent);
             this.rowElements = [];
+            this.rows = [];
             var modelData = this.generator.generateRows(dataSource, args);
-            var tbody = this.getTable().querySelector('tbody');
+            var idx = modelData[0].cells[0].index;
+            var fCont = this.getPanel().querySelector('.e-frozencontent');
+            var mCont = this.getPanel().querySelector('.e-movablecontent');
+            var cont = this.getPanel().querySelector('.e-content');
+            if (this.parent.enableColumnVirtualization) {
+                var cellMerge = new cell_merge_renderer_1.CellMergeRender(this.serviceLocator, this.parent);
+                cellMerge.updateVirtualCells(modelData);
+            }
+            if (this.parent.frozenColumns && idx >= this.parent.frozenColumns) {
+                tbody = mCont.querySelector('tbody');
+            }
+            else {
+                tbody = this.getTable().querySelector('tbody');
+            }
             for (var i = 0, len = modelData.length; i < len; i++) {
@@ -100,3 +119,8 @@ if (!gObj.rowTemplate) {
                 }
-                frag.appendChild(tr);
+                if (gObj.frozenRows && i < gObj.frozenRows) {
+                    hdrfrag.appendChild(tr);
+                }
+                else {
+                    frag.appendChild(tr);
+                }
                 this.rows.push(modelData[i]);
@@ -114,6 +138,43 @@ if (modelData[i].isDataRow) {
             util_1.getUpdateUsingRaf(function () {
+                var hdrTbody;
                 ej2_base_3.remove(tbody);
                 tbody = ej2_base_3.createElement('tbody');
-                _this.appendContent(tbody, frag, args);
-            }, this.rafCallback);
+                if (gObj.frozenColumns) {
+                    tbody.appendChild(frag);
+                    if (idx === 0) {
+                        _this.isLoaded = false;
+                        fCont.querySelector('table').appendChild(tbody);
+                        _this.getPanel().firstChild.style.overflowY = 'hidden';
+                    }
+                    else {
+                        _this.isLoaded = true;
+                        mCont.querySelector('table').appendChild(tbody);
+                    }
+                    if (gObj.frozenRows) {
+                        hdrTbody = gObj.getHeaderContent().querySelector(idx === 0 ? '.e-frozenheader'
+                            : '.e-movableheader').querySelector('tbody');
+                        hdrTbody.innerHTML = '';
+                        hdrTbody.appendChild(hdrfrag);
+                    }
+                    fCont.style.height
+                        = ((mCont.offsetHeight) - 17) + 'px';
+                    mCont.style.overflow = 'scroll';
+                }
+                else {
+                    _this.appendContent(tbody, frag, args);
+                }
+                if (gObj.frozenRows && !gObj.frozenColumns) {
+                    hdrTbody = gObj.getHeaderTable().querySelector('tbody');
+                    hdrTbody.innerHTML = '';
+                    hdrTbody.appendChild(hdrfrag);
+                }
+                if (gObj.frozenRows && idx === 0 && cont.offsetHeight === gObj.height) {
+                    cont.style.height =
+                        (cont.offsetHeight -
+                            gObj.getHeaderContent().querySelector('tbody').offsetHeight) + 'px';
+                }
+                if (gObj.frozenColumns && idx === 0) {
+                    _this.refreshContentRows(args);
+                }
+            }, this.rafCallback(args));
         };
@@ -120,0 +181,0 @@ ContentRender.prototype.appendContent = function (tbody, frag, args) {

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

@@ -8,2 +8,5 @@ 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.serviceLocator = serviceLocator;
+            if (this.parent.isDestroyed) {
+                return;
+            }
             this.parent.on(events.dialogDestroy, this.destroy, this);
@@ -30,3 +33,3 @@ this.parent.on(events.destroy, this.destroy, this);
                 header: this.isEdit ? this.l10n.getConstant('EditFormTitle') + args.primaryKeyValue[0] :
-                    this.l10n.getConstant('AddFormTitle'), isModal: true, visible: true,
+                    this.l10n.getConstant('AddFormTitle'), isModal: true, visible: true, cssClass: 'e-edit-dialog',
                 content: this.getEditElement(elements), showCloseIcon: true, allowDragging: true, close: this.destroy.bind(this),
@@ -69,3 +72,3 @@ closeOnEscape: true, width: '330px', target: gObj.element, animationSettings: { effect: 'None' },
             for (var i = 0; i < cols.length; i++) {
-                if (!cols[i].visible) {
+                if (!cols[i].visible || cols[i].commands || cols[i].commandsTemplate) {
                     continue;
@@ -77,12 +80,3 @@ }
                 elements[cols[i].uid].classList.remove('e-input');
-                if (cols[i].editType === 'booleanedit') {
-                    var elem = dataCell.appendChild(elements[cols[i].uid]);
-                    var lbl = ej2_base_1.createElement('label', { className: 'e-noselect', attrs: { for: elem.id, style: ej2_base_1.Browser.isDevice ? '' : 'vertical-align: top;' } });
-                    lbl.innerHTML = cols[i].headerText;
-                    dataCell.appendChild(elem);
-                    dataCell.appendChild(lbl);
-                }
-                else {
-                    dataCell.appendChild(elements[cols[i].uid]);
-                }
+                dataCell.appendChild(elements[cols[i].uid]);
                 tr.appendChild(dataCell);
@@ -89,0 +83,0 @@ tbody.appendChild(tr);

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

@@ -23,3 +23,4 @@ import { IGrid, IEditCell } from '../base/interface';
     private ddActionComplete(e);
+    private dropDownOpen(args);
     destroy(): void;
 }

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

@@ -1,2 +0,2 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-dropdowns", "@syncfusion/ej2-data", "../base/util"], function (require, exports, ej2_base_1, ej2_base_2, ej2_dropdowns_1, ej2_data_1, util_1) {
+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) {
     "use strict";
@@ -25,3 +25,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 placeholder: isInline ? '' : args.column.headerText, popupHeight: '200px',
-                floatLabelType: isInline ? 'Never' : 'Always',
+                floatLabelType: isInline ? 'Never' : 'Always', open: this.dropDownOpen.bind(this),
             }, args.column.edit.params));
@@ -38,2 +38,9 @@ this.obj.appendTo(args.element);
         };
+        DropDownEditCell.prototype.dropDownOpen = function (args) {
+            var dlgElement = util_2.parentsUntil(this.obj.element, 'e-dialog');
+            if (!ej2_base_1.isNullOrUndefined(dlgElement)) {
+                var dlgObj = this.parent.element.querySelector('#' + dlgElement.id).ej2_instances[0];
+                args.popup.element.style.zIndex = (dlgObj.zIndex + 1).toString();
+            }
+        };
         DropDownEditCell.prototype.destroy = function () {
@@ -40,0 +47,0 @@ if (this.obj) {

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

@@ -13,2 +13,3 @@ import { IGrid } from '../base/interface';
     protected serviceLocator: ServiceLocator;
+    private focus;
     /**
@@ -37,4 +38,4 @@ * Constructor for render module
     private convertWidget(args);
-    private focusElement(elem);
+    private focusElement(elem, type?);
     private getEditElements(args);
 }

src/grid/renderer/edit-renderer.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "@syncfusion/ej2-base", "./inline-edit-renderer", "./batch-edit-renderer", "./dialog-edit-renderer", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1, inline_edit_renderer_1, batch_edit_renderer_1, dialog_edit_renderer_1, ej2_base_2) {
+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) {
     "use strict";
@@ -13,2 +13,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
             this.renderer = new this.editType[this.parent.editSettings.mode](parent, serviceLocator);
+            this.focus = serviceLocator.getService('focus');
         }
@@ -32,3 +33,3 @@ EditRender.prototype.addNew = function (args) {
                 var col = cols_1[_i];
-                if (!col.visible) {
+                if (!col.visible || col.commands) {
                     continue;
@@ -39,8 +40,7 @@ }
                 var temp = col.edit.write;
-                if (typeof temp === 'string') {
-                    temp = ej2_base_1.getValue(temp, window);
-                }
-                col.edit.write({ rowData: args.rowData, element: cell, column: col, requestType: args.requestType });
+                col.edit.write({
+                    rowData: args.rowData, element: cell, column: col, requestType: args.requestType, row: args.row
+                });
                 if (!isFocused && !cell.getAttribute('disabled')) {
-                    this.focusElement(cell);
+                    this.focusElement(cell, args.type);
                     isFocused = true;
@@ -50,4 +50,13 @@ }
         };
-        EditRender.prototype.focusElement = function (elem) {
-            elem.focus();
+        EditRender.prototype.focusElement = function (elem, type) {
+            var chkBox = this.parent.element.querySelector('.e-edit-checkselect');
+            if (!ej2_base_1.isNullOrUndefined(chkBox)) {
+                chkBox.nextElementSibling.classList.add('e-focus');
+            }
+            if (this.parent.editSettings.mode === 'batch') {
+                this.focus.onClick({ target: ej2_base_1.closest(elem, 'td') }, true);
+            }
+            else {
+                elem.focus();
+            }
             if (elem.classList.contains('e-defaultcell')) {
@@ -61,9 +70,20 @@ elem.setSelectionRange(elem.value.length, elem.value.length);
             var cols = gObj.editSettings.mode !== 'batch' ? gObj.columns : [gObj.getColumnByField(args.columnName)];
-            for (var _i = 0, cols_2 = cols; _i < cols_2.length; _i++) {
-                var col = cols_2[_i];
+            for (var i = 0, len = cols.length; i < len; i++) {
+                var col = cols[i];
                 if (!col.visible) {
                     continue;
                 }
+                if (col.commands || col.commandsTemplate) {
+                    var cellRendererFact = this.serviceLocator.getService('cellRendererFactory');
+                    var model = new row_model_generator_1.RowModelGenerator(this.parent);
+                    var cellRenderer = cellRendererFact.getCellRenderer(enum_1.CellType.CommandColumn);
+                    var cells = model.generateRows(args.rowData)[0].cells;
+                    var td = cellRenderer.render(cells[i], args.rowData, { 'index': args.row ? args.row.getAttribute('aria-rowindex') : 0 });
+                    var div = td.firstElementChild;
+                    div.setAttribute('textAlign', td.getAttribute('textAlign'));
+                    elements[col.uid] = div;
+                    continue;
+                }
                 var value = col.valueAccessor(col.field, args.rowData, col);
-                var tArgs = { column: col, value: value, type: args.requestType };
+                var tArgs = { column: col, value: value, type: args.requestType, data: args.rowData };
                 var temp = col.edit.create;
@@ -70,0 +90,0 @@ var input = void 0;

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

@@ -29,71 +29,73 @@ var __extends = (this && this.__extends) || (function () {
             var column = cell.column;
-            if ((ej2_base_1.isNullOrUndefined(column.allowFiltering) || column.allowFiltering) && !ej2_base_1.isNullOrUndefined(column.filterBarTemplate)) {
-                node.classList.add('e-fltrtemp');
-                ej2_base_2.attributes(innerDIV, {
-                    'class': 'e-fltrtempdiv'
-                });
-                if (ej2_base_1.isNullOrUndefined(column.filterBarTemplate.create)) {
-                    input = ej2_base_2.createElement('input', {
-                        id: column.field + '_filterBarcell', className: 'e-filterUi_input e-filtertext e-fltrTemp',
-                        attrs: { type: 'search', title: column.headerText }
+            if (column.type !== 'checkbox') {
+                if ((ej2_base_1.isNullOrUndefined(column.allowFiltering) || column.allowFiltering) && !ej2_base_1.isNullOrUndefined(column.filterBarTemplate)) {
+                    node.classList.add('e-fltrtemp');
+                    ej2_base_2.attributes(innerDIV, {
+                        'class': 'e-fltrtempdiv'
                     });
-                    innerDIV.appendChild(input);
+                    if (ej2_base_1.isNullOrUndefined(column.filterBarTemplate.create)) {
+                        input = ej2_base_2.createElement('input', {
+                            id: column.field + '_filterBarcell', className: 'e-filterUi_input e-filtertext e-fltrTemp',
+                            attrs: { type: 'search', title: column.headerText }
+                        });
+                        innerDIV.appendChild(input);
+                    }
+                    else {
+                        var args = { column: column };
+                        var temp = column.filterBarTemplate.create;
+                        if (typeof temp === 'string') {
+                            temp = ej2_base_1.getValue(temp, window);
+                        }
+                        input = temp(args);
+                        if (typeof input === 'string') {
+                            var div = ej2_base_2.createElement('div');
+                            div.innerHTML = input;
+                            input = div.firstChild;
+                        }
+                        ej2_base_2.attributes(innerDIV, {
+                            class: 'e-filterUi_input e-filtertext e-fltrTemp',
+                            title: column.headerText,
+                            id: column.field + '_filterBarcell',
+                        });
+                        innerDIV.appendChild(input);
+                    }
                 }
                 else {
-                    var args = { column: column };
-                    var temp = column.filterBarTemplate.create;
-                    if (typeof temp === 'string') {
-                        temp = ej2_base_1.getValue(temp, window);
-                    }
-                    input = temp(args);
-                    if (typeof input === 'string') {
-                        var div = ej2_base_2.createElement('div');
-                        div.innerHTML = input;
-                        input = div.firstChild;
-                    }
                     ej2_base_2.attributes(innerDIV, {
-                        class: 'e-filterUi_input e-filtertext e-fltrTemp',
-                        title: column.headerText,
-                        id: column.field + '_filterBarcell',
+                        'class': 'e-filterdiv e-fltrinputdiv'
                     });
+                    input = ej2_base_2.createElement('input', {
+                        id: column.field + '_filterBarcell', className: 'e-filtertext',
+                        attrs: {
+                            type: 'search', title: column.headerText + cell.attributes.title,
+                            value: data[cell.column.field] ? data[cell.column.field] : '', role: 'search'
+                        }
+                    });
                     innerDIV.appendChild(input);
+                    innerDIV.appendChild(ej2_base_2.createElement('span', {
+                        className: 'e-cancel e-hide e-icons e-icon-hide',
+                        attrs: { 'aria-label': 'clear filter cell', tabindex: '-1' }
+                    }));
                 }
-            }
-            else {
-                ej2_base_2.attributes(innerDIV, {
-                    'class': 'e-filterdiv e-fltrinputdiv'
-                });
-                input = ej2_base_2.createElement('input', {
-                    id: column.field + '_filterBarcell', className: 'e-filtertext',
-                    attrs: {
-                        type: 'search', title: column.headerText + cell.attributes.title,
-                        value: data[cell.column.field] ? data[cell.column.field] : '', role: 'search'
+                if (column.allowFiltering === false || column.field === '' || ej2_base_1.isNullOrUndefined(column.field)) {
+                    input.setAttribute('disabled', 'true');
+                    input.classList.add('e-disable');
+                }
+                if (!column.visible) {
+                    node.classList.add('e-hide');
+                }
+                if ((ej2_base_1.isNullOrUndefined(column.allowFiltering) || column.allowFiltering) && !ej2_base_1.isNullOrUndefined(column.filterBarTemplate)) {
+                    var templateRead = column.filterBarTemplate.read;
+                    var templateWrite = column.filterBarTemplate.write;
+                    var args = { element: input, column: column };
+                    if (typeof templateRead === 'string') {
+                        templateRead = args.column = ej2_base_1.getValue(templateRead, window);
                     }
-                });
-                innerDIV.appendChild(input);
-                innerDIV.appendChild(ej2_base_2.createElement('span', {
-                    className: 'e-cancel e-hide e-icons e-icon-hide',
-                    attrs: { 'aria-label': 'clear filter cell', tabindex: '-1' }
-                }));
-            }
-            if (column.allowFiltering === false || column.field === '' || ej2_base_1.isNullOrUndefined(column.field)) {
-                input.setAttribute('disabled', 'true');
-                input.classList.add('e-disable');
-            }
-            if (!column.visible) {
-                node.classList.add('e-hide');
-            }
-            if ((ej2_base_1.isNullOrUndefined(column.allowFiltering) || column.allowFiltering) && !ej2_base_1.isNullOrUndefined(column.filterBarTemplate)) {
-                var templateRead = column.filterBarTemplate.read;
-                var templateWrite = column.filterBarTemplate.write;
-                var args = { element: input, column: column };
-                if (typeof templateRead === 'string') {
-                    templateRead = args.column = ej2_base_1.getValue(templateRead, window);
+                    if (typeof templateWrite === 'string') {
+                        templateWrite = ej2_base_1.getValue(templateWrite, window);
+                    }
+                    templateWrite.call(this, args);
                 }
-                if (typeof templateWrite === 'string') {
-                    templateWrite = ej2_base_1.getValue(templateWrite, window);
-                }
-                templateWrite.call(this, args);
+                this.appendHtml(node, innerDIV);
             }
-            this.appendHtml(node, innerDIV);
             return node;
@@ -100,0 +102,0 @@ };

src/grid/renderer/footer-renderer.js

@@ -54,3 +54,3 @@ var __extends = (this && this.__extends) || (function () {
             var fragment = document.createDocumentFragment();
-            var rowrenderer = new row_renderer_1.RowRenderer(this.locator);
+            var rowrenderer = new row_renderer_1.RowRenderer(this.locator, null, this.parent);
             rowrenderer.element = ej2_base_1.createElement('TR', { className: 'e-summaryrow' });
@@ -57,0 +57,0 @@ for (var srow = 0, len = summaries.length; srow < len; srow++) {

src/grid/renderer/header-cell-renderer.d.ts

@@ -15,2 +15,3 @@ import { Column } from '../models/column';
     private gui;
+    private chkAllBox;
     /**
@@ -37,3 +38,4 @@ * Function to return the wrapper for the TH content.
     private clean(node);
-    private prepareHeader(cell, node);
+    private prepareHeader(cell, node, fltrMenuEle);
+    private extendPrepareHeader(column, node);
     /**
@@ -40,0 +42,0 @@ * Function to specifies how the result content to be placed in the cell.

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

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/util", "./cell-renderer", "../services/aria-service"], function (require, exports, ej2_base_1, ej2_base_2, util_1, cell_renderer_1, aria_service_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/util", "./cell-renderer", "../services/aria-service", "@syncfusion/ej2-buttons"], function (require, exports, ej2_base_1, ej2_base_2, util_1, cell_renderer_1, aria_service_1, ej2_buttons_1) {
     "use strict";
@@ -24,2 +24,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
             _this.gui = ej2_base_2.createElement('div');
+            _this.chkAllBox = ej2_base_2.createElement('input', { className: 'e-checkselectall', attrs: { 'type': 'checkbox' } });
             return _this;
@@ -32,7 +33,9 @@ }
             var node = this.element.cloneNode();
-            return this.prepareHeader(cell, node);
+            var fltrMenuEle = ej2_base_2.createElement('div', { className: 'e-filtermenudiv e-icons e-icon-filter' });
+            return this.prepareHeader(cell, node, fltrMenuEle);
         };
         HeaderCellRenderer.prototype.refresh = function (cell, node) {
             this.clean(node);
-            return this.prepareHeader(cell, node);
+            var fltrMenuEle = ej2_base_2.createElement('div', { className: 'e-filtermenudiv e-icons e-icon-filter' });
+            return this.prepareHeader(cell, node, fltrMenuEle);
         };
@@ -42,10 +45,6 @@ HeaderCellRenderer.prototype.clean = function (node) {
         };
-        HeaderCellRenderer.prototype.prepareHeader = function (cell, node) {
+        HeaderCellRenderer.prototype.prepareHeader = function (cell, node, fltrMenuEle) {
             var column = cell.column;
             var ariaAttr = {};
             var innerDIV = this.getGui();
-            var value = column.headerText;
-            var headerText = this.hTxtEle.cloneNode();
-            headerText[column.getDomSetter()] = value;
-            innerDIV.appendChild(headerText);
             ej2_base_2.attributes(innerDIV, {
@@ -55,5 +54,40 @@ 'e-mappinguid': column.uid,
             });
+            if (column.type !== 'checkbox') {
+                var value = column.headerText;
+                var headerText = this.hTxtEle.cloneNode();
+                headerText[column.getDomSetter()] = value;
+                innerDIV.appendChild(headerText);
+            }
+            else {
+                column.editType = 'booleanedit';
+                var checkAllBox = this.chkAllBox.cloneNode();
+                innerDIV.appendChild(checkAllBox);
+                var checkAllBoxObj = new ej2_buttons_1.CheckBox();
+                checkAllBoxObj.appendTo(checkAllBox);
+                innerDIV.classList.add('e-headerchkcelldiv');
+            }
             this.buildAttributeFromCell(node, cell);
             this.appendHtml(node, innerDIV);
             node.appendChild(this.sortEle.cloneNode());
+            if ((this.parent.allowFiltering && this.parent.filterSettings.type !== 'filterbar') &&
+                (column.allowFiltering && ej2_base_1.isNullOrUndefined(column.template)) &&
+                !(this.parent.showColumnMenu && column.showColumnMenu)) {
+                ej2_base_2.attributes(fltrMenuEle, {
+                    'e-mappinguid': 'e-flmenu-' + column.uid,
+                });
+                node.classList.add('e-fltr-icon');
+                var matchFlColumns = [];
+                if (this.parent.filterSettings.columns.length && this.parent.filterSettings.columns.length !== matchFlColumns.length) {
+                    for (var index = 0; index < this.parent.columns.length; index++) {
+                        for (var count = 0; count < this.parent.filterSettings.columns.length; count++) {
+                            if (this.parent.filterSettings.columns[count].field === column.field) {
+                                fltrMenuEle.classList.add('e-filtered');
+                                matchFlColumns.push(column.field);
+                                break;
+                            }
+                        }
+                    }
+                }
+                node.appendChild(fltrMenuEle.cloneNode());
+            }
             if (cell.className) {
@@ -71,6 +105,10 @@ node.classList.add(cell.className);
             }
-            if (this.parent.allowResizing) {
-                var handler = ej2_base_2.createElement('div');
-                handler.className = column.allowResizing ? 'e-rhandler e-rcursor' : 'e-rsuppress';
-                node.appendChild(handler);
+            node = this.extendPrepareHeader(column, node);
+            if (!ej2_base_1.isNullOrUndefined(column.headerTemplate)) {
+                if (column.headerTemplate.indexOf('#') !== -1) {
+                    innerDIV.innerHTML = document.querySelector(column.headerTemplate).innerHTML.trim();
+                }
+                else {
+                    innerDIV.innerHTML = column.headerTemplate;
+                }
             }
@@ -95,2 +133,27 @@ this.ariaService.setOptions(node, ariaAttr);
         };
+        HeaderCellRenderer.prototype.extendPrepareHeader = function (column, node) {
+            if (this.parent.showColumnMenu && column.showColumnMenu) {
+                var element = (ej2_base_2.createElement('div', { className: 'e-icons e-columnmenu' }));
+                var matchFilteredColumns = [];
+                if (this.parent.filterSettings.columns.length && this.parent.filterSettings.columns.length !== matchFilteredColumns.length) {
+                    for (var i = 0; i < this.parent.columns.length; i++) {
+                        for (var j = 0; j < this.parent.filterSettings.columns.length; j++) {
+                            if (this.parent.filterSettings.columns[j].field === column.field) {
+                                element.classList.add('e-filtered');
+                                matchFilteredColumns.push(column.field);
+                                break;
+                            }
+                        }
+                    }
+                }
+                node.classList.add('e-fltr-icon');
+                node.appendChild(element);
+            }
+            if (this.parent.allowResizing) {
+                var handler = ej2_base_2.createElement('div');
+                handler.className = column.allowResizing ? 'e-rhandler e-rcursor' : 'e-rsuppress';
+                node.appendChild(handler);
+            }
+            return node;
+        };
         HeaderCellRenderer.prototype.appendHtml = function (node, innerHtml) {
@@ -97,0 +160,0 @@ node.appendChild(innerHtml);

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

@@ -17,2 +17,3 @@ import { IRenderer, IGrid } from '../base/interface';
     private column;
+    private rows;
     private helper;
@@ -19,0 +20,0 @@ private dragStart;

src/grid/renderer/header-renderer.js

@@ -21,4 +21,15 @@ 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) {
                 var headercelldiv = element.querySelector('.e-headercelldiv');
-                visualElement.textContent = headercelldiv ?
-                    gObj.getColumnByUid(headercelldiv.getAttribute('e-mappinguid')).headerText : element.innerHTML;
+                var col = gObj.getColumnByUid(headercelldiv.getAttribute('e-mappinguid'));
+                if (!ej2_base_1.isNullOrUndefined(col.headerTemplate)) {
+                    if (col.headerTemplate.indexOf('#') !== -1) {
+                        visualElement.innerHTML = document.querySelector(col.headerTemplate).innerHTML.trim();
+                    }
+                    else {
+                        visualElement.innerHTML = col.headerTemplate;
+                    }
+                }
+                else {
+                    visualElement.textContent = headercelldiv ?
+                        gObj.getColumnByUid(headercelldiv.getAttribute('e-mappinguid')).headerText : element.firstElementChild.innerHTML;
+                }
                 visualElement.style.width = element.offsetWidth + 'px';
@@ -102,3 +113,3 @@ visualElement.style.height = element.offsetHeight + 'px';
             this.initializeHeaderDrop();
-            this.parent.notify(events.headerRefreshed, {});
+            this.parent.notify(events.headerRefreshed, { rows: this.rows });
         };
@@ -144,3 +155,4 @@ HeaderRender.prototype.getPanel = function () {
             var bodyCell;
-            var rows = findHeaderRow.rows;
+            var rows = this.rows = findHeaderRow.rows;
+            var rowRenderer = new row_renderer_1.RowRenderer(this.serviceLocator, enum_1.CellType.Header);
             for (var i = 0, len = rows.length; i < len; i++) {
@@ -169,3 +181,3 @@ for (var j = 0, len_1 = rows[i].cells.length; j < len_1; j++) {
             var colHeader = ej2_base_2.createElement('tr', { className: 'e-columnheader' });
-            var rowRenderer = new row_renderer_1.RowRenderer(this.serviceLocator, enum_1.CellType.Header);
+            var rowRenderer = new row_renderer_1.RowRenderer(this.serviceLocator, enum_1.CellType.Header, gObj);
             rowRenderer.element = colHeader;
@@ -236,3 +248,13 @@ var rows = [];
         HeaderRender.prototype.getHeaderCells = function (rows) {
-            var cols = this.parent.enableColumnVirtualization ? this.parent.getColumns() : this.parent.columns;
+            var column;
+            if (this.parent.frozenColumns) {
+                if (this.parent.getHeaderTable() && this.parent.getHeaderTable().querySelector('thead')) {
+                    column = this.parent.columns.slice(this.parent.frozenColumns, this.parent.columns.length);
+                }
+                else {
+                    column = this.parent.columns.slice(0, this.parent.frozenColumns);
+                }
+            }
+            var cols = this.parent.enableColumnVirtualization ? this.parent.getColumns()
+                : (this.parent.frozenColumns ? column : this.parent.columns);
             for (var i = 0, len = cols.length; i < len; i++) {
@@ -306,2 +328,3 @@ rows = this.appendCells(cols[i], rows, 0, i === 0, false, i === (len - 1));
             var findHeaderRow = this.createHeaderContent();
+            this.rows = findHeaderRow.rows;
             table.insertBefore(findHeaderRow.thead, table.firstChild);
@@ -315,4 +338,11 @@ this.updateColGroup(colGroup);
             this.initializeHeaderDrag();
-            this.parent.notify(events.headerRefreshed, {});
             var rows = [].slice.call(headerDiv.querySelectorAll('tr.e-columnheader'));
+            for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {
+                var row = rows_1[_i];
+                var gCells = [].slice.call(row.querySelectorAll('.e-grouptopleftcell'));
+                if (gCells.length) {
+                    gCells[gCells.length - 1].classList.add('e-lastgrouptopleftcell');
+                }
+            }
+            this.parent.notify(events.headerRefreshed, { rows: this.rows });
             if (this.parent.allowTextWrap && this.parent.textWrapSettings.wrapMode === 'header') {
@@ -319,0 +349,0 @@ util_1.wrap(rows, true);

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

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

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

@@ -15,7 +15,8 @@ define(["require", "exports", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1) {
         InlineEditRender.prototype.update = function (elements, args) {
+            var tdElement = [].slice.call(args.row.querySelectorAll('td.e-rowcell'));
             args.row.innerHTML = '';
-            args.row.appendChild(this.getEditElement(elements, true));
+            args.row.appendChild(this.getEditElement(elements, true, tdElement));
             args.row.classList.add('e-editedrow');
         };
-        InlineEditRender.prototype.getEditElement = function (elements, isEdit) {
+        InlineEditRender.prototype.getEditElement = function (elements, isEdit, tdElement) {
             var gObj = this.parent;
@@ -44,15 +45,22 @@ var gLen = 0;
             }
-            for (var _i = 0, _a = gObj.columns; _i < _a.length; _i++) {
-                var col = _a[_i];
-                if (!col.visible) {
-                    continue;
+            var m = 0;
+            i = 0;
+            while ((isEdit && m < tdElement.length && i < gObj.columns.length) || i < gObj.columns.length) {
+                var span = isEdit ? tdElement[m].getAttribute('colspan') : null;
+                var col = gObj.columns[i];
+                if (col.visible) {
+                    var td_1 = ej2_base_1.createElement('td', {
+                        className: 'e-rowcell', attrs: { style: 'text-align:' + (col.textAlign ? col.textAlign : ''), 'colspan': span ? span : '' }
+                    });
+                    td_1.appendChild(elements[col.uid]);
+                    if (col.editType === 'booleanedit') {
+                        td_1.classList.add('e-boolcell');
+                    }
+                    else if (col.commands || col.commandsTemplate) {
+                        ej2_base_1.addClass([td_1], 'e-unboundcell');
+                    }
+                    tr.appendChild(td_1);
                 }
-                var td_1 = ej2_base_1.createElement('td', {
-                    className: 'e-rowcell', attrs: { style: 'text-align:' + (col.textAlign ? col.textAlign : '') }
-                });
-                td_1.appendChild(elements[col.uid]);
-                if (col.editType === 'booleanedit') {
-                    td_1.classList.add('e-boolcell');
-                }
-                tr.appendChild(td_1);
+                i = span ? i + parseInt(span, 10) : i + 1;
+                m++;
             }
@@ -59,0 +67,0 @@ tbody.appendChild(tr);

src/grid/renderer/render.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "../base/enum", "../actions/data", "../base/constant", "../base/util", "../renderer/content-renderer", "../renderer/header-renderer", "../renderer/cell-renderer", "../renderer/header-cell-renderer", "../renderer/stacked-cell-renderer", "../renderer/indent-cell-renderer", "../renderer/caption-cell-renderer", "../renderer/expand-cell-renderer", "../renderer/header-indent-renderer", "../renderer/detail-header-indent-renderer", "../renderer/detail-expand-cell-renderer"], function (require, exports, ej2_base_1, ej2_base_2, ej2_data_1, enum_1, data_1, events, util_1, content_renderer_1, header_renderer_1, cell_renderer_1, header_cell_renderer_1, stacked_cell_renderer_1, indent_cell_renderer_1, caption_cell_renderer_1, expand_cell_renderer_1, header_indent_renderer_1, detail_header_indent_renderer_1, detail_expand_cell_renderer_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "../base/enum", "../actions/data", "../models/row", "../models/cell", "../base/constant", "../base/util", "../renderer/content-renderer", "../renderer/header-renderer", "../renderer/cell-renderer", "../renderer/header-cell-renderer", "../renderer/stacked-cell-renderer", "../renderer/indent-cell-renderer", "../renderer/caption-cell-renderer", "../renderer/expand-cell-renderer", "../renderer/header-indent-renderer", "../renderer/detail-header-indent-renderer", "../renderer/detail-expand-cell-renderer"], function (require, exports, ej2_base_1, ej2_base_2, ej2_data_1, enum_1, data_1, row_1, cell_1, events, util_1, content_renderer_1, header_renderer_1, cell_renderer_1, header_cell_renderer_1, stacked_cell_renderer_1, indent_cell_renderer_1, caption_cell_renderer_1, expand_cell_renderer_1, header_indent_renderer_1, detail_header_indent_renderer_1, detail_expand_cell_renderer_1) {
     "use strict";
@@ -8,3 +8,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
             this.locator = locator;
-            this.data = new data_1.Data(parent);
+            this.data = new data_1.Data(parent, locator);
             this.l10n = locator.getService('localization');
@@ -35,2 +35,5 @@ this.ariaService = this.locator.getService('ariaService');
             }
+            if (e.requestType === 'save' && e.action === 'add') {
+                this.parent.isEdit = false;
+            }
             this.refreshDataManager(e);
@@ -94,2 +97,3 @@ };
                 this.parent.trigger(events.dataBound, {});
+                this.parent.notify(events.onEmpty, { rows: [new row_1.Row({ isDataRow: true, cells: [new cell_1.Cell({ isDataCell: true, visible: true })] })] });
             }
@@ -111,16 +115,3 @@ };
                     if (typeof (columns[i].format) === 'string') {
-                        switch (columns[i].type) {
-                            case 'date':
-                                columns[i].setFormatter(fmtr.getFormatFunction({ type: 'date', skeleton: columns[i].format }));
-                                columns[i].setParser(fmtr.getParserFunction({ type: 'date', skeleton: columns[i].format }));
-                                break;
-                            case 'datetime':
-                                columns[i].setFormatter(fmtr.getFormatFunction({ type: 'dateTime', skeleton: columns[i].format }));
-                                columns[i].setParser(fmtr.getParserFunction({ type: 'dateTime', skeleton: columns[i].format }));
-                                break;
-                            case 'number':
-                                columns[i].setFormatter(fmtr.getFormatFunction({ format: columns[i].format }));
-                                columns[i].setParser(fmtr.getParserFunction({ format: columns[i].format }));
-                                break;
-                        }
+                        util_1.setFormatter(this.locator, columns[i]);
                     }
@@ -262,3 +253,3 @@ else if (!columns[i].format && columns[i].type === 'number') {
                 deferred.resolve(e);
-            });
+            }).catch(function (e) { return deferred.reject(e); });
             return deferred.promise;
@@ -265,0 +256,0 @@ };

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

@@ -38,2 +38,3 @@ import { Column } from '../models/column';
     private refreshRow(row, columns, attributes?, rowTemplate?);
+    private refreshMergeCells(row);
     /**
@@ -40,0 +41,0 @@ * Function to check and add alternative row css class.

src/grid/renderer/row-renderer.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/constant", "../base/util", "../base/enum"], function (require, exports, ej2_base_1, ej2_base_2, constant_1, util_1, enum_1) {
+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) {
     "use strict";
@@ -17,4 +17,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 row.data = ej2_base_1.extend({}, row.changes);
+                this.refreshMergeCells(row);
             }
-            var node = this.parent.getContent().querySelector('[data-uid=' + row.uid + ']');
+            var node = this.parent.element.querySelector('[data-uid=' + row.uid + ']');
             var tr = this.refreshRow(row, columns, attributes, rowTemplate);
@@ -45,6 +46,12 @@ var cells = [].slice.call(tr.cells);
                 var td = cellRenderer.render(row.cells[i], row.data, { 'index': !ej2_base_1.isNullOrUndefined(row.index) ? row.index.toString() : '' });
-                tr.appendChild(td);
                 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 }));
+                    this.parent.trigger(constant_1.queryCellInfo, ej2_base_1.extend(cellArgs, { cell: td, column: cell.column, colSpan: 1 }));
+                    if (cellArgs.colSpan > 1 || row.cells[i].cellSpan > 1) {
+                        var cellMerge = new cell_merge_renderer_1.CellMergeRender(this.serviceLocator, this.parent);
+                        td = cellMerge.render(cellArgs, row, i, td);
+                    }
                 }
+                if (!row.cells[i].isSpanned) {
+                    tr.appendChild(td);
+                }
             }
@@ -59,2 +66,9 @@ if (row.isDataRow) {
         };
+        RowRenderer.prototype.refreshMergeCells = function (row) {
+            for (var _i = 0, _a = row.cells; _i < _a.length; _i++) {
+                var cell = _a[_i];
+                cell.isSpanned = false;
+            }
+            return row;
+        };
         RowRenderer.prototype.buildAttributeFromRow = function (tr, row) {
@@ -61,0 +75,0 @@ var attr = {};

src/grid/services.d.ts

@@ -8,1 +8,2 @@ /**
 export * from './services/group-model-generator';
+export * from './services/freeze-row-model-generator';

src/grid/services.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "./services/cell-render-factory", "./services/service-locator", "./services/row-model-generator", "./services/group-model-generator"], function (require, exports, cell_render_factory_1, service_locator_1, row_model_generator_1, group_model_generator_1) {
+define(["require", "exports", "./services/cell-render-factory", "./services/service-locator", "./services/row-model-generator", "./services/group-model-generator", "./services/freeze-row-model-generator"], function (require, exports, cell_render_factory_1, service_locator_1, row_model_generator_1, group_model_generator_1, freeze_row_model_generator_1) {
     "use strict";
@@ -11,2 +11,3 @@ function __export(m) {
     __export(group_model_generator_1);
+    __export(freeze_row_model_generator_1);
 });

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

@@ -83,4 +83,11 @@ var __extends = (this && this.__extends) || (function () {
                 ej2_base_1.extend(data, captionCells.data);
-                visibles = captionCells.cells.filter(function (cell) { return cell.visible; });
-                visibles = visibles.slice(groupedLen + 1, visibles.length);
+                var cIndex_1 = 0;
+                captionCells.cells.some(function (cell, index) { cIndex_1 = index; return cell.visible && cell.isDataCell; });
+                visibles = captionCells.cells.slice(cIndex_1).filter(function (cell) { return cell.visible; });
+                if (captionCells.visible && visibles[0].column.field === this.parent.getVisibleColumns()[0].field) {
+                    visibles = visibles.slice(1);
+                }
+                if (this.parent.getVisibleColumns().length === 1) {
+                    visibles = [];
+                }
                 indent = indent - visibles.length;
@@ -87,0 +94,0 @@ }

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

@@ -44,3 +44,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "../models/row", "../base/enum", "../models/cell", "../base/util"], function (require, exports, ej2_base_1, row_1, enum_1, cell_1, util_1) {
             dummies.forEach(function (dummy, index) {
-                return tmp.push(_this.generateCell(dummy, options.uid, undefined, null, index));
+                return tmp.push(_this.generateCell(dummy, options.uid, ej2_base_1.isNullOrUndefined(dummy.commands) ? undefined : enum_1.CellType.CommandColumn, null, index));
             });
@@ -57,5 +57,6 @@ return tmp;
                 'cellType': !ej2_base_1.isNullOrUndefined(cellType) ? cellType : enum_1.CellType.Data,
-                'colSpan': colSpan
+                'colSpan': colSpan,
+                'commands': column.commands
             };
-            if (opt.isDataCell) {
+            if (opt.isDataCell || opt.column.type === 'checkbox') {
                 opt.index = this.parent.getColumnIndexByField(column.field);
@@ -62,0 +63,0 @@ }

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

@@ -116,3 +116,3 @@ var __extends = (this && this.__extends) || (function () {
                 var disp = column.columnName;
-                var val = group.aggregates && group.aggregates[key] ? group.aggregates[key] :
+                var val = group.aggregates && !ej2_base_1.isNullOrUndefined(group.aggregates[key]) ? group.aggregates[key] :
                     util_1.calculateAggregate(type, group.aggregates ? group.result : data, column, _this.parent);
@@ -119,0 +119,0 @@ single[disp] = single[disp] || {};

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

@@ -134,3 +134,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) {
             });
-            if (currentFirst.isDataRow || block % 2 === 0) {
+            if ((currentFirst && currentFirst.isDataRow) || block % 2 === 0) {
                 return current;
@@ -143,3 +143,3 @@ }
             var offset = 0;
-            if (currentFirst.isDataRow) {
+            if (currentFirst && currentFirst.isDataRow) {
                 return current;
@@ -146,0 +146,0 @@ }

src/grid/services/width-controller.js

@@ -44,7 +44,24 @@ 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 fWidth = ej2_base_2.formatUnit(width);
-            var headerCol = header.querySelector('colgroup').children[index];
+            var headerCol;
+            var mHdr = this.parent.getHeaderContent().querySelector('.e-movableheader');
+            if (this.parent.frozenColumns && index >= this.parent.frozenColumns && mHdr && mHdr.querySelector('colgroup')) {
+                headerCol = mHdr.querySelector('colgroup').children[index - this.parent.frozenColumns];
+            }
+            else {
+                headerCol = header.querySelector('colgroup').children[index];
+            }
             if (headerCol) {
                 headerCol.style.width = fWidth;
-                content.querySelector('colgroup').children[index].style.width = fWidth;
             }
+            var contentCol;
+            if (this.parent.frozenColumns && index >= this.parent.frozenColumns) {
+                contentCol = this.parent.getContent().querySelector('.e-movablecontent')
+                    .querySelector('colgroup').children[index - this.parent.frozenColumns];
+            }
+            else {
+                contentCol = content.querySelector('colgroup').children[index];
+            }
+            if (contentCol) {
+                contentCol.style.width = fWidth;
+            }
             var edit = content.querySelector('.e-table.e-inline-edit');
@@ -99,5 +116,26 @@ if (edit) {
         ColumnWidthService.prototype.setWidthToTable = function () {
-            var tWidth = ej2_base_2.formatUnit(this.getTableWidth(this.parent.getColumns()));
-            this.parent.getHeaderTable().style.width = tWidth;
-            this.parent.getContentTable().style.width = tWidth;
+            var tWidth = null;
+            if (this.parent.frozenColumns) {
+                var freezeWidth = 0;
+                var colGrp = this.parent.getContentTable().querySelector('colgroup');
+                var mColGrp = ej2_base_1.select('.e-movablecontent');
+                for (var i = 0; i < this.parent.getHeaderTable().querySelector('.e-columnheader').children.length; i++) {
+                    freezeWidth += parseInt(colGrp.children[i].style.width, 10);
+                }
+                tWidth = ej2_base_2.formatUnit(freezeWidth);
+                this.parent.getHeaderTable().style.width = tWidth;
+                this.parent.getContentTable().style.width = tWidth;
+                freezeWidth = 0;
+                for (var i = 0; i < ej2_base_1.select('.e-movableheader').querySelector('.e-columnheader').children.length; i++) {
+                    freezeWidth += parseInt(mColGrp.children[0].querySelector('colgroup').children[i].style.width, 10);
+                }
+                tWidth = ej2_base_2.formatUnit(freezeWidth);
+                ej2_base_1.select('.e-movableheader').firstElementChild.style.width = tWidth;
+                ej2_base_1.select('.e-movablecontent').firstElementChild.style.width = tWidth;
+            }
+            else {
+                tWidth = ej2_base_2.formatUnit(this.getTableWidth(this.parent.getColumns()));
+                this.parent.getHeaderTable().style.width = tWidth;
+                this.parent.getContentTable().style.width = tWidth;
+            }
             var edit = this.parent.element.querySelector('.e-table.e-inline-edit');
@@ -104,0 +142,0 @@ if (edit) {

No alert changes

Improved metrics

Total package byte prevSize

22965488

increased by20.19%

Number of package files

372

increased by18.1%

Lines of code

241935

increased by14.32%

Dependency changes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Updated@syncfusion/ej2-base@^15.4.17

• Updated@syncfusion/ej2-buttons@^15.4.17

• Updated@syncfusion/ej2-calendars@^15.4.17

• Updated@syncfusion/ej2-compression@^15.4.17

• Updated@syncfusion/ej2-data@^15.4.17

• Updated@syncfusion/ej2-dropdowns@^15.4.17

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

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

• Updated@syncfusion/ej2-inputs@^15.4.17

• Updated@syncfusion/ej2-lists@^15.4.17

• Updated@syncfusion/ej2-navigations@^15.4.17

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

• Updated@syncfusion/ej2-popups@^15.4.17