@syncfusion/ej2-grids - npm Package Compare versions

Comparing version 15.4.27 to 15.4.28

CHANGELOG.md

@@ -9,2 +9,13 @@ # Changelog
 
+- Child Grid editing dialog closes when clicking on edit element.
+- Printing window is blocking by browser and column hiding.
+- `getSelectedRecords` method returns selected records properly with checkbox persist selection fixed.
+- Aggregate with frozen columns scroller is working fine.
+
+## 15.4.27-preview (2018-01-30)
+
+### Grid
+
+#### Bug Fixes
+
 - Disable edit, delete button when Grid is empty.
@@ -11,0 +22,0 @@ - `ShowConfirmDialog` is not showing in Command Column.

dist/global/index.d.ts

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

package.json

 {
   "name": "@syncfusion/ej2-grids",
-  "version": "15.4.27",
+  "version": "15.4.28",
   "description": "Essential JS 2 Grid Component",
@@ -14,3 +14,3 @@ "author": "Syncfusion Inc.",
     "@syncfusion/ej2-navigations": "^15.4.27",
-    "@syncfusion/ej2-inputs": "^15.4.24",
+    "@syncfusion/ej2-inputs": "^15.4.28",
     "@syncfusion/ej2-calendars": "^15.4.26",
@@ -22,3 +22,3 @@ "@syncfusion/ej2-dropdowns": "^15.4.27",
     "@syncfusion/ej2-excel-export": "^15.4.26",
-    "@syncfusion/ej2-pdf-export": "^15.4.27",
+    "@syncfusion/ej2-pdf-export": "^15.4.28",
     "@syncfusion/ej2-file-utils": "^15.4.26",
@@ -25,0 +25,0 @@ "@syncfusion/ej2-compression": "^15.4.26"

src/grid/actions/checkbox-filter.js

@@ -222,3 +222,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "../base/util", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "@syncfusion/ej2-buttons", "../base/constant", "../services/value-formatter", "../base/util", "@syncfusion/ej2-popups", "@syncfusion/ej2-inputs", "@syncfusion/ej2-popups", "../base/util"], function (require, exports, ej2_base_1, util_1, ej2_base_2, ej2_data_1, ej2_buttons_1, events, value_formatter_1, util_2, ej2_popups_1, ej2_inputs_1, ej2_popups_2, util_3) {
                 field: this.options.field, predicate: 'or',
-                operator: optr, matchcase: caseSen
+                operator: optr, matchcase: caseSen, ignoreAccent: this.parent.filterSettings.ignoreAccent
             };
@@ -250,7 +250,7 @@ var isNotEqual = this.itemsCnt !== checked.length && this.itemsCnt - checked.length < checked.length;
                 predicate = firstVal.ejpredicate ? firstVal.ejpredicate :
-                    new ej2_data_1.Predicate(firstVal.field, firstVal.operator, firstVal.value, !firstVal.matchCase);
+                    new ej2_data_1.Predicate(firstVal.field, firstVal.operator, firstVal.value, !firstVal.matchCase, firstVal.ignoreAccent);
                 for (var j = 1; j < fColl.length; j++) {
                     predicate = fColl[j].ejpredicate !== undefined ?
                         predicate[fColl[j].predicate](fColl[j].ejpredicate) :
-                        predicate[fColl[j].predicate](fColl[j].field, fColl[j].operator, fColl[j].value, !fColl[j].matchCase);
+                        predicate[fColl[j].predicate](fColl[j].field, fColl[j].operator, fColl[j].value, !fColl[j].matchCase, fColl[j].ignoreAccent);
                 }
@@ -270,4 +270,5 @@ var args = {
             var matchcase = true;
+            var ignoreAccent = this.parent.filterSettings.ignoreAccent;
             parsed = (parsed === '' || parsed === undefined) ? undefined : parsed;
-            var predicte = new ej2_data_1.Predicate(this.options.field, operator, parsed, matchcase);
+            var predicte = new ej2_data_1.Predicate(this.options.field, operator, parsed, matchcase, ignoreAccent);
             if (this.options.type === 'boolean') {
@@ -282,3 +283,3 @@ if (parsed !== undefined &&
                 }
-                predicte = new ej2_data_1.Predicate(this.options.field, operator, parsed, matchcase);
+                predicte = new ej2_data_1.Predicate(this.options.field, operator, parsed, matchcase, ignoreAccent);
             }
@@ -291,3 +292,6 @@ if (this.options.type === 'date' || this.options.type === 'datetime') {
                 }
-                predicte = util_1.getDatePredicate({ field: this.options.field, operator: operator, value: parsed, matchCase: matchcase });
+                predicte = util_1.getDatePredicate({
+                    field: this.options.field, operator: operator, value: parsed, matchCase: matchcase,
+                    ignoreAccent: ignoreAccent
+                });
             }
@@ -565,2 +569,3 @@ if (val.length) {
             first = CheckBoxFilter.updateDateFilter(cols[0]);
+            first.ignoreAccent = !ej2_base_1.isNullOrUndefined(first.ignoreAccent) ? first.ignoreAccent : false;
             if (first.type === 'date' || first.type === 'datetime') {
@@ -571,3 +576,3 @@ predicate = CheckBoxFilter.getDatePredicate(first);
                 predicate = first.ejpredicate ? first.ejpredicate :
-                    new ej2_data_1.Predicate(first.field, first.operator, first.value, CheckBoxFilter.getCaseValue(first));
+                    new ej2_data_1.Predicate(first.field, first.operator, first.value, CheckBoxFilter.getCaseValue(first), first.ignoreAccent);
             }
@@ -581,3 +586,3 @@ for (var p = 1; p < len; p++) {
                     else {
-                        predicate.predicates.push(new ej2_data_1.Predicate(cols[p].field, cols[p].operator, cols[p].value, CheckBoxFilter.getCaseValue(cols[p])));
+                        predicate.predicates.push(new ej2_data_1.Predicate(cols[p].field, cols[p].operator, cols[p].value, CheckBoxFilter.getCaseValue(cols[p]), cols[p].ignoreAccent));
                     }
@@ -587,3 +592,3 @@ }
                     if (cols[p].type === 'date' || cols[p].type === 'datetime') {
-                        predicate = predicate[(cols[p].predicate)](CheckBoxFilter.getDatePredicate(cols[p]));
+                        predicate = predicate[(cols[p].predicate)](CheckBoxFilter.getDatePredicate(cols[p]), cols[p].ignoreAccent);
                     }
@@ -593,3 +598,3 @@ else {
                             predicate[cols[p].predicate](cols[p].ejpredicate) :
-                            predicate[(cols[p].predicate)](cols[p].field, cols[p].operator, cols[p].value, CheckBoxFilter.getCaseValue(cols[p]));
+                            predicate[(cols[p].predicate)](cols[p].field, cols[p].operator, cols[p].value, CheckBoxFilter.getCaseValue(cols[p]), cols[p].ignoreAccent);
                     }
@@ -596,0 +601,0 @@ }

src/grid/actions/clipboard.js

@@ -29,3 +29,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "../base/constant"], function (require, exports, ej2_base_1, events) {
                 styles: 'opacity: 0',
-                attrs: { readonly: 'true' }
+                attrs: { readonly: 'true', tabindex: '-1', 'aria-label': 'clipboard' }
             });
@@ -32,0 +32,0 @@ this.parent.element.appendChild(this.clipBoardTextArea);

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

@@ -5,4 +5,3 @@ import { ServiceLocator } from '../services/service-locator';
 /**
- *
- * `ColumnChooser` module is used to show or hide the columns dynamically.
+ * The `ColumnChooser` module is used to show or hide columns dynamically.
  */
@@ -9,0 +8,0 @@ export declare class ColumnChooser implements IAction {

src/grid/actions/command-column.js

@@ -66,3 +66,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "../base/constant", "../base/enum", "../renderer/command-column-renderer"], function (require, exports, ej2_base_1, constant_1, enum_1, command_column_renderer_1) {
         CommandColumn.prototype.keyPressHandler = function (e) {
-            if (e.action === 'enter' && ej2_base_1.closest(e.target, 'button')) {
+            if (e.action === 'enter' && ej2_base_1.closest(e.target, '.e-unboundcelldiv')) {
                 this.commandClickHandler(e);
@@ -69,0 +69,0 @@ e.preventDefault();

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

@@ -30,3 +30,3 @@ import { ContextMenu as Menu } from '@syncfusion/ej2-navigations';
 /**
- * 'ContextMenu module used to handle context menu actions.'
+ * The `ContextMenu` module is used to handle context menu actions.
  */
@@ -71,3 +71,3 @@ export declare class ContextMenu implements IAction {
     /**
-     * Gets the context menu of grid.
+     * Gets the context menu element from the Grid.
      * @return {Element}
@@ -77,5 +77,6 @@ */
     /**
-     * To destroy the Context menu.
+     * Destroys the context menu component in the Grid.
      * @method destroy
      * @return {void}
+     * @hidden
      */
@@ -82,0 +83,0 @@ destroy(): void;

src/grid/actions/data.d.ts

 import { Query, DataManager } from '@syncfusion/ej2-data';
-import { IDataProcessor, IGrid } from '../base/interface';
+import { IDataProcessor, IGrid, PendingState } from '../base/interface';
 import { PredicateModel } from '../base/grid-model';
@@ -13,2 +13,3 @@ import { ServiceLocator } from '../services/service-locator';
     protected serviceLocator: ServiceLocator;
+    protected dataState: PendingState;
     /**
@@ -60,2 +61,6 @@ * Constructor for data module.
     protected destroy(): void;
+    getState(): PendingState;
+    setState(state: PendingState): Object;
+    getStateEventArgument(query: Query): PendingState;
+    private eventPromise(args, query?, key?);
 }

src/grid/actions/data.js

@@ -6,2 +6,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "../base/util", "../base/constant", "../services/value-formatter", "../actions/checkbox-filter"], function (require, exports, ej2_base_1, ej2_data_1, util_1, events, value_formatter_1, checkbox_filter_1) {
         function Data(parent, serviceLocator) {
+            this.dataState = { isPending: false, resolver: null, group: [] };
             this.parent = parent;
@@ -115,3 +116,3 @@ this.serviceLocator = serviceLocator;
                         else {
-                            predicateList.push(new ej2_data_1.Predicate(column.field, sSettings.operator, sSettings.key, sSettings.ignoreCase));
+                            predicateList.push(new ej2_data_1.Predicate(column.field, sSettings.operator, sSettings.key, sSettings.ignoreCase, sSettings.ignoreAccent));
                         }
@@ -122,3 +123,3 @@ });
                 else {
-                    query.search(sSettings.key, fields, sSettings.operator, sSettings.ignoreCase);
+                    query.search(sSettings.key, fields, sSettings.operator, sSettings.ignoreCase, sSettings.ignoreAccent);
                 }
@@ -178,3 +179,3 @@ }
                             if (sType !== 'date' && sType !== 'datetime') {
-                                predicateList.push(new ej2_data_1.Predicate(col.field, col.operator, col.value, !col.matchCase));
+                                predicateList.push(new ej2_data_1.Predicate(col.field, col.operator, col.value, !col.matchCase, this.parent.filterSettings.ignoreAccent));
                             }
@@ -212,28 +213,34 @@ else {
                 args.foreignKeyData : this.parent.getPrimaryKeyFieldNames());
-            switch (args.requestType) {
-                case 'delete':
-                    query = query ? query : this.generateQuery();
-                    this.dataManager.remove(key, args.data[0], null, query);
-                    break;
-                case 'save':
-                    query = query ? query : this.generateQuery();
-                    args.index = ej2_base_1.isNullOrUndefined(args.index) ? 0 : args.index;
-                    this.dataManager.insert(args.data, null, query, args.index);
-                    break;
+            if (this.parent.dataSource && 'result' in this.parent.dataSource) {
+                var def = this.eventPromise(args, query, key);
+                return def.promise;
             }
-            if (this.dataManager.ready) {
-                var deferred_1 = new ej2_data_1.Deferred();
-                var ready = this.dataManager.ready;
-                ready.then(function (e) {
-                    _this.dataManager.executeQuery(query).then(function (result) {
-                        deferred_1.resolve(result);
+            else {
+                switch (args.requestType) {
+                    case 'delete':
+                        query = query ? query : this.generateQuery();
+                        this.dataManager.remove(key, args.data[0], null, query);
+                        break;
+                    case 'save':
+                        query = query ? query : this.generateQuery();
+                        args.index = ej2_base_1.isNullOrUndefined(args.index) ? 0 : args.index;
+                        this.dataManager.insert(args.data, null, query, args.index);
+                        break;
+                }
+                if (this.dataManager.ready) {
+                    var deferred_1 = new ej2_data_1.Deferred();
+                    var ready = this.dataManager.ready;
+                    ready.then(function (e) {
+                        _this.dataManager.executeQuery(query).then(function (result) {
+                            deferred_1.resolve(result);
+                        });
+                    }).catch(function (e) {
+                        deferred_1.reject(e);
                     });
-                }).catch(function (e) {
-                    deferred_1.reject(e);
-                });
-                return deferred_1.promise;
+                    return deferred_1.promise;
+                }
+                else {
+                    return this.dataManager.executeQuery(query);
+                }
             }
-            else {
-                return this.dataManager.executeQuery(query);
-            }
         };
@@ -256,3 +263,3 @@ Data.prototype.formatGroupColumn = function (value, field) {
         Data.prototype.crudActions = function (args) {
-            this.generateQuery();
+            var query = this.generateQuery();
             var promise = null;
@@ -263,2 +270,5 @@ var pr = 'promise';
                 this.parent.getPrimaryKeyFieldNames());
+            if (this.parent.dataSource && 'result' in this.parent.dataSource) {
+                this.eventPromise(args, query, key);
+            }
             switch (args.requestType) {
@@ -273,4 +283,17 @@ case 'save':
         Data.prototype.saveChanges = function (changes, key) {
-            var promise = this.dataManager.saveChanges(changes, key, null, this.generateQuery().requiresCount());
-            return promise;
+            var query = this.generateQuery().requiresCount();
+            if ('result' in this.parent.dataSource) {
+                var state = void 0;
+                state = this.getStateEventArgument(query);
+                var deff = new ej2_data_1.Deferred();
+                var args = { requestType: 'batchsave', changes: changes, key: key, query: query,
+                    endEdit: deff.resolve };
+                this.setState({ isPending: true, resolver: deff.resolve });
+                this.parent.trigger(events.dataSourceChange, args);
+                return deff.promise;
+            }
+            else {
+                var promise = this.dataManager.saveChanges(changes, key, null, this.generateQuery().requiresCount());
+                return promise;
+            }
         };
@@ -313,2 +336,46 @@ Data.prototype.getKey = function (keys) {
         };
+        Data.prototype.getState = function () {
+            return this.dataState;
+        };
+        Data.prototype.setState = function (state) {
+            return this.dataState = state;
+        };
+        Data.prototype.getStateEventArgument = function (query) {
+            var adaptr = new ej2_data_1.UrlAdaptor();
+            var dm = new ej2_data_1.DataManager({ url: '', adaptor: new ej2_data_1.UrlAdaptor });
+            var state = adaptr.processQuery(dm, query);
+            return JSON.parse(state.data);
+        };
+        Data.prototype.eventPromise = function (args, query, key) {
+            var _this = this;
+            var state;
+            var dataArgs = args;
+            state = this.getStateEventArgument(query);
+            var def = new ej2_data_1.Deferred();
+            var deff = new ej2_data_1.Deferred();
+            if (args.requestType !== undefined) {
+                state.action = args;
+                if (args.requestType === 'save' || args.requestType === 'delete') {
+                    var editArgs = args;
+                    editArgs.key = key;
+                    editArgs.state = state;
+                    this.setState({ isPending: true, resolver: deff.resolve });
+                    dataArgs.endEdit = deff.resolve;
+                    this.parent.trigger(events.dataSourceChange, editArgs);
+                    deff.promise.then(function (e) {
+                        _this.setState({ isPending: true, resolver: def.resolve, group: state.group });
+                        _this.parent.trigger(events.dataStateChange, state);
+                    });
+                }
+                else {
+                    this.setState({ isPending: true, resolver: def.resolve, group: state.group });
+                    this.parent.trigger(events.dataStateChange, state);
+                }
+            }
+            else {
+                this.setState({});
+                def.resolve(this.parent.dataSource);
+            }
+            return def;
+        };
         return Data;
@@ -315,0 +382,0 @@ }());

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

 import { IGrid } from '../base/interface';
 import { ServiceLocator } from '../services/service-locator';
 /**
- * `DetailRow` module is used to handle Detail Template and Hierarchy Grid operations.
+ * The detail row module is used to handle detail template and hierarchy Grid operations.
  */
@@ -33,3 +33,3 @@ export declare class DetailRow {
     /**
-     * Expands all the detail rows of Grid.
+     * Expands all the detail rows of the Grid.
      * @return {void}
@@ -39,3 +39,3 @@ */
     /**
-     * Collapses all the detail rows of Grid.
+     * Collapses all the detail rows of the Grid.
      * @return {void}
@@ -42,0 +42,0 @@ */

src/grid/actions/edit.d.ts

@@ -51,3 +51,3 @@ import { L10n } from '@syncfusion/ej2-base';
     /**
-     * To edit any particular row by TR element.
+     * Edits any bound record in the Grid by TR element.
      * @param {HTMLTableRowElement} tr - Defines the table row to be edited.
@@ -57,3 +57,3 @@ */
     /**
-     * Cancel edited state.
+     * Cancels edited state.
      */
@@ -63,3 +63,3 @@ closeEdit(): void;
     /**
-     * To add a new row at top of rows with given data. If data is not passed then it will render empty row.
+     * To adds a new row at the top with the given data. When data is not passed, it will add empty rows.
      * > `editSettings.allowEditing` should be true.
@@ -71,10 +71,10 @@ * @param {Object} data - Defines the new add record data.
     /**
-     * Delete a record with Given options. If fieldname and data is not given then grid will delete the selected record.
+     * Deletes a record with the given options. If fieldname and data are not given, the Grid will delete the selected record.
      * > `editSettings.allowDeleting` should be true.
-     * @param {string} fieldname - Defines the primary key field Name of the column.
-     * @param {Object} data - Defines the JSON data of record need to be delete.
+     * @param {string} fieldname - Defines the primary key field name of the column.
+     * @param {Object} data - Defines the JSON data record to be deleted.
      */
     deleteRecord(fieldname?: string, data?: Object): void;
     /**
-     * Delete any visible row by TR element.
+     * Deletes a visible row by TR element.
      * @param {HTMLTableRowElement} tr - Defines the table row element.
@@ -84,29 +84,29 @@ */
     /**
-     * If Grid is in editable state, then you can save a record by invoking endEdit.
+     * If Grid is in editable state, you can save a record by invoking endEdit.
      */
     endEdit(): void;
     /**
-     * To update value of any cell without change into edit mode.
-     * @param {number} rowIndex - Defines the row index.
-     * @param {string} field - Defines the column field.
-     * @param {string | number | boolean | Date} value - Defines the value to change.
+     * Updates the value of any cell without changing the edit mode.
+     * @param {number} rowIndex Defines the row index.
+     * @param {string} field Defines the column field.
+     * @param {string | number | boolean | Date} value - Defines the value to be changed.
      */
     updateCell(rowIndex: number, field: string, value: string | number | boolean | Date): void;
     /**
-     * To update values of a row without changing into edit mode.
-     * @param {number} index - Defines the row index.
-     * @param {Object} data - Defines the data object to update.
+     * Updates values of a row without changing the edit mode.
+     * @param {number} index Defines the row index.
+     * @param {Object} data Defines the data object to be updated.
      */
     updateRow(index: number, data: Object): void;
     /**
-     * To reset added, edited and deleted records in batch mode.
+     * Resets added, edited, and deleted records in the batch mode.
      */
     batchCancel(): void;
     /**
-     * To bulk Save added, edited and deleted records in batch mode.
+     * Bulk saves added, edited, and deleted records in the batch mode.
      */
     batchSave(): void;
     /**
-     * To turn any particular cell into edited state by row index and field name in batch mode.
-     * @param {number} index - Defines row index to edit particular cell.
+     * Changes a particular cell into edited state based on the row index and field name provided in the `batch` mode.
+     * @param {number} index - Defines row index to edit a particular cell.
      * @param {string} field - Defines the field name of the column to perform batch edit.
@@ -116,3 +116,3 @@ */
     /**
-     * To check current status of validation at the time of edited state. If validation passed then it will return true.
+     * Checks the status of validation at the time of editing. If validation is passed, it returns true.
      * @return {boolean}
@@ -122,3 +122,3 @@ */
     /**
-     * To get added, edited and deleted data before bulk save to data source in batch mode.
+     * Gets the added, edited,and deleted data before bulk save to the DataSource in batch mode.
      * @return {Object}
@@ -128,7 +128,7 @@ */
     /**
-     * To get current value of edited component.
+     * Gets the current value of the edited component.
      */
     getCurrentEditCellData(): string;
     /**
-     * To save current edited cell in batch. It does not save value to data source.
+     * Saves the cell that is currently edited. It does not save the value to the DataSource.
      */
@@ -135,0 +135,0 @@ saveCell(): void;

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

@@ -65,6 +65,7 @@ import { FilterSettings } from '../base/grid';
      * filter records with case insensitive(uppercase and lowercase letters treated as same).
+     * @param {boolean} ignoreAccent - If ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.
      * @param {string} secondOperator - Defines the second operator by how to filter records.
      * @param {string | number | Date | boolean} secondValue - Defines the first value which is used to filter records.
      */
-    private filterByColumn(fieldName, firstOperator, firstValue, predicate?, ignoreCase?, secondOperator?, secondValue?);
+    private filterByColumn(fieldName, firstOperator, firstValue, predicate?, ignoreCase?, ignoreAccent?, secondOperator?, secondValue?);
     private renderOperatorUI(column, table, elementID, predicates, isFirst?);
@@ -71,0 +72,0 @@ private dropDownOpen(args);

src/grid/actions/excel-filter.js

@@ -301,6 +301,6 @@ var __extends = (this && this.__extends) || (function () {
             }
-            this.filterByColumn(this.options.field, fOperator.value, fValue.value, predicate, checkBoxValue, sOperator.value, sValue.value);
+            this.filterByColumn(this.options.field, fOperator.value, fValue.value, predicate, checkBoxValue, this.parent.filterSettings.ignoreAccent, sOperator.value, sValue.value);
             this.removeDialog();
         };
-        ExcelFilter.prototype.filterByColumn = function (fieldName, firstOperator, firstValue, predicate, ignoreCase, secondOperator, secondValue) {
+        ExcelFilter.prototype.filterByColumn = function (fieldName, firstOperator, firstValue, predicate, ignoreCase, ignoreAccent, secondOperator, secondValue) {
             var _this = this;
@@ -316,2 +316,3 @@ var col = this.parent.getColumnByField(fieldName);
                     matchcase: ignoreCase,
+                    ignoreAccent: ignoreAccent,
                     operator: firstOperator,
@@ -321,3 +322,3 @@ value: firstValue,
                 });
-                mPredicate = new ej2_data_1.Predicate(field, firstOperator.toLowerCase(), firstValue, ignoreCase);
+                mPredicate = new ej2_data_1.Predicate(field, firstOperator.toLowerCase(), firstValue, ignoreCase, ignoreAccent);
             }
@@ -333,3 +334,3 @@ if (secondValue) {
                 });
-                mPredicate = mPredicate[predicate](field, secondOperator.toLowerCase(), secondValue, ignoreCase);
+                mPredicate = mPredicate[predicate](field, secondOperator.toLowerCase(), secondValue, ignoreCase, ignoreAccent);
             }
@@ -353,2 +354,3 @@ var args = {
                             matchcase: fpred.ignoreCase,
+                            ignoreAccent: fpred.ignoreAccent,
                             operator: fpred.operator,
@@ -355,0 +357,0 @@ value: fpred.value,

src/grid/actions/filter.d.ts

@@ -6,3 +6,3 @@ import { FilterSettings } from '../base/grid';
  *
- * `Filter` module is used to handle filtering action.
+ * The `Filter` module is used to handle filtering action.
  */
@@ -18,2 +18,3 @@ export declare class Filter implements IAction {
     private matchCase;
+    private ignoreAccent;
     private timer;
@@ -47,3 +48,3 @@ private filterStatusMsg;
      */
-    render(): void;
+    render(e?: NotifyArgs): void;
     /**
@@ -85,9 +86,10 @@ * To destroy the filter bar.
     /**
-     * Filters grid row by column name with given options.
+     * Filters the Grid row by fieldName, filterOperator, and filterValue.
      * @param  {string} fieldName - Defines the field name of the filter column.
-     * @param  {string} filterOperator - Defines the operator by how to filter records.
+     * @param  {string} filterOperator - Defines the operator to filter records.
      * @param  {string | number | Date | boolean} filterValue - Defines the value which is used to filter records.
-     * @param  {string} predicate - Defines the relationship between one filter query with another by using AND or OR predicate.
-     * @param  {boolean} matchCase - If match case set to true, then filter records with exact match or else
-     * filter records with case insensitive(uppercase and lowercase letters treated as same).
+     * @param  {string} predicate - Defines the relationship of one filter query with another by using AND or OR predicate.
+     * @param  {boolean} matchCase - If match case is set to true, then the filter records
+     * the exact match or <br> filters records that are case insensitive (uppercase and lowercase letters treated the same).
+     * @param {boolean} ignoreAccent - If ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.
      * @param  {string} actualFilterValue - Defines the actual filter value for the filter column.
@@ -97,6 +99,6 @@ * @param  {string} actualOperator - Defines the actual filter operator for the filter column.
      */
-    filterByColumn(fieldName: string, filterOperator: string, filterValue: string | number | Date | boolean, predicate?: string, matchCase?: boolean, actualFilterValue?: Object, actualOperator?: Object): void;
+    filterByColumn(fieldName: string, filterOperator: string, filterValue: string | number | Date | boolean, predicate?: string, matchCase?: boolean, ignoreAccent?: boolean, actualFilterValue?: Object, actualOperator?: Object): void;
     private onPropertyChanged(e);
     /**
-     * Clears all the filtered rows of Grid.
+     * Clears all the filtered rows of the Grid.
      * @return {void}
@@ -103,0 +105,0 @@ */

src/grid/actions/filter.js

@@ -22,3 +22,6 @@ 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) {
         }
-        Filter.prototype.render = function () {
+        Filter.prototype.render = function (e) {
+            if (ej2_data_1.DataUtil.getObject('args.isFrozen', e)) {
+                return;
+            }
             var gObj = this.parent;
@@ -109,3 +112,3 @@ this.l10n = this.serviceLocator.getService('localization');
                 field: field, operator: this.operator, value: this.value, predicate: this.predicate,
-                matchCase: this.matchCase, actualFilterValue: {}, actualOperator: {}
+                matchCase: this.matchCase, ignoreAccent: this.ignoreAccent, actualFilterValue: {}, actualOperator: {}
             };
@@ -163,3 +166,3 @@ var index = this.getFilteredColsIndexByField(col);
                     var col = _a[_i];
-                    this.filterByColumn(col.field, col.operator, col.value, col.predicate, col.matchCase, col.actualFilterValue, col.actualOperator);
+                    this.filterByColumn(col.field, col.operator, col.value, col.predicate, col.matchCase, col.ignoreAccent, col.actualFilterValue, col.actualOperator);
                 }
@@ -204,3 +207,3 @@ this.updateFilterMsg();
         };
-        Filter.prototype.filterByColumn = function (fieldName, filterOperator, filterValue, predicate, matchCase, actualFilterValue, actualOperator) {
+        Filter.prototype.filterByColumn = function (fieldName, filterOperator, filterValue, predicate, matchCase, ignoreAccent, actualFilterValue, actualOperator) {
             var gObj = this.parent;
@@ -218,3 +221,3 @@ var filterCell;
                     instance: this, handler: this.filterByColumn, arg1: fieldName, arg2: filterOperator, arg3: filterValue, arg4: predicate,
-                    arg5: matchCase, arg6: actualFilterValue, arg7: actualOperator
+                    arg5: matchCase, arg6: ignoreAccent, arg7: actualFilterValue, arg8: actualOperator
                 });
@@ -225,2 +228,3 @@ return;
             this.matchCase = matchCase || false;
+            this.ignoreAccent = this.ignoreAccent = !ej2_base_1.isNullOrUndefined(ignoreAccent) ? ignoreAccent : this.parent.filterSettings.ignoreAccent;
             this.fieldName = fieldName;
@@ -494,3 +498,3 @@ this.predicate = predicate || 'and';
             this.validateFilterValue(this.value);
-            this.filterByColumn(this.column.field, this.operator, this.value, this.predicate, this.matchCase);
+            this.filterByColumn(this.column.field, this.operator, this.value, this.predicate, this.matchCase, this.ignoreAccent);
             filterElement.value = filterValue;
@@ -497,0 +501,0 @@ this.updateFilterMsg();

src/grid/actions/group.d.ts

@@ -49,4 +49,4 @@ import { GroupSettingsModel } from '../base/grid-model';
     /**
-     * Expand or collapse grouped rows by target element.
-     * @param  {Element} target - Defines the target element of grouped row.
+     * Expands or collapses grouped rows by target element.
+     * @param  {Element} target - Defines the target element of the grouped row.
      * @return {void}
@@ -57,3 +57,3 @@ */
     /**
-     * Expands all the grouped rows of Grid.
+     * Expands all the grouped rows of the Grid.
      * @return {void}
@@ -63,3 +63,3 @@ */
     /**
-     * Collapses all the grouped rows of Grid.
+     * Collapses all the grouped rows of the Grid.
      * @return {void}
@@ -117,3 +117,3 @@ */
     /**
-     * Clears all the grouped columns of Grid.
+     * Clears all the grouped columns of the Grid.
      * @return {void}
@@ -120,0 +120,0 @@ */

src/grid/actions/group.js

@@ -152,3 +152,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 gObj = this.parent;
-            if (!this.groupSettings.columns.length) {
+            if (!this.groupSettings.columns.length || ['tab', 'shiftTab'].indexOf(e.action) > -1) {
                 return;
@@ -155,0 +155,0 @@ }

src/grid/actions/normal-edit.js

@@ -14,3 +14,4 @@ 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') || (gObj.frozenRows
+            if ((util_1.parentsUntil(target, 'e-gridcontent') &&
+                util_1.parentsUntil(util_1.parentsUntil(target, 'e-gridcontent'), 'e-grid').id === gObj.element.id) || (gObj.frozenRows
                 && util_1.parentsUntil(target, 'e-headercontent')) && !util_1.parentsUntil(target, 'e-unboundcelldiv')) {
@@ -170,3 +171,2 @@ this.rowIndex = util_1.parentsUntil(target, 'e-rowcell') ? parseInt(target.parentElement.getAttribute('aria-rowindex'), 10) : -1;
             }
-            this.parent.element.focus();
             this.parent.hideSpinner();
@@ -173,0 +173,0 @@ };

src/grid/actions/page.d.ts

@@ -33,3 +33,3 @@ import { PageSettingsModel } from '../models/page-settings-model';
     /**
-     * Refreshes the page count, pager information and external message.
+     * Refreshes the page count, pager information, and external message.
      * @return {void}
@@ -39,3 +39,3 @@ */
     /**
-     * Navigate to target page by given number.
+     * Navigates to the target page according to the given number.
      * @param  {number} pageNo - Defines the page number to navigate.
@@ -63,5 +63,4 @@ * @return {void}
     private keyPressHandler(e);
-    private canSkipAction(action);
     /**
-     * Defines the text of external message.
+     * Defines the text of the external message.
      * @param  {string} message - Defines the message to update.
@@ -68,0 +67,0 @@ * @return {void}

src/grid/actions/page.js

@@ -37,2 +37,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) {
             if (!(this.pageSettings.template)) {
+                var numericContainerNew = ej2_base_2.createElement('div', { className: 'e-numericcontainer' });
+                var pagerContainer = this.element.querySelector('.e-pagercontainer');
+                var frag = document.createDocumentFragment();
                 var numericContainer = this.element.querySelector('.e-numericcontainer');
@@ -43,4 +46,9 @@ var links = numericContainer.querySelectorAll('a');
                         links[i].setAttribute('aria-owns', this.parent.getContentTable().id);
+                        var numericContainerDiv = ej2_base_2.createElement('div');
+                        numericContainerDiv.appendChild(links[i]);
+                        frag.appendChild(numericContainerDiv);
                     }
                 }
+                numericContainerNew.appendChild(frag);
+                pagerContainer.replaceChild(numericContainerNew, numericContainer);
                 var classList = ['.e-mfirst', '.e-mprev', '.e-first', '.e-prev', '.e-next', '.e-last', '.e-mnext', '.e-mlast'];
@@ -110,5 +118,2 @@ classList.forEach(function (value) {
         Page.prototype.keyPressHandler = function (e) {
-            if (this.canSkipAction(e.action)) {
-                return;
-            }
             if (e.action in keyActions) {
@@ -119,14 +124,2 @@ e.preventDefault();
         };
-        Page.prototype.canSkipAction = function (action) {
-            var page = {
-                pageUp: function (el) { return el.scrollTop !== 0; },
-                pageDown: function (el) { return !(el.scrollTop >= el.scrollHeight - el.clientHeight); }
-            };
-            var activeElement = document.activeElement;
-            if (!ej2_base_2.isNullOrUndefined(activeElement) && activeElement.classList.contains('e-content') &&
-                activeElement.isEqualNode(this.parent.getContent().firstElementChild) && ['pageUp', 'pageDown'].indexOf(action) !== -1) {
-                return page[action](this.parent.getContent().firstChild);
-            }
-            return false;
-        };
         Page.prototype.updateExternalMessage = function (message) {
@@ -133,0 +126,0 @@ if (!this.pagerObj.enableExternalMessage) {

src/grid/actions/print.d.ts

@@ -5,6 +5,7 @@ import { IGrid } from '../base/interface';
  *
- * `Print` module is used to handle the print action.
+ * `Print` module is used to handle print action.
  */
 export declare class Print {
     private parent;
+    private printWind;
     private scrollModule;
@@ -20,4 +21,5 @@ private isAsyncPrint;
     /**
-     * By default, it prints all the pages of Grid and hides pager.
-     * > Customize print options using [`printMode`](http://ej2.syncfusion.com/documentation/grid/api-grid.html#printmode-string).
+     * By default, prints all the Grid pages and hides the pager.
+     * > You can customize print options using the
+     * [`printMode`](./api-grid.html#printmode-string).
      * @return {void}
@@ -24,0 +26,0 @@ */

src/grid/actions/print.js

@@ -19,2 +19,5 @@ define(["require", "exports", "@syncfusion/ej2-base", "../base/util", "../base/grid", "../base/constant"], function (require, exports, ej2_base_1, util_1, grid_1, events) {
             this.renderPrintGrid();
+            this.printWind = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');
+            this.printWind.moveTo(0, 0);
+            this.printWind.resizeTo(screen.availWidth, screen.availHeight);
         };
@@ -35,3 +38,5 @@ Print.prototype.onEmpty = function () {
             var printGridModel = {};
-            var element = ej2_base_1.createElement('div', { id: this.parent.element.id + '_print', className: 'e-print-grid' });
+            var element = ej2_base_1.createElement('div', {
+                id: this.parent.element.id + '_print', className: gObj.element.className + ' e-print-grid'
+            });
             document.body.appendChild(element);
@@ -80,3 +85,2 @@ for (var _i = 0, _a = Print.printGridProp; _i < _a.length; _i++) {
         Print.prototype.printGrid = function () {
-            var printWind;
             var gObj = this.parent;
@@ -116,5 +120,2 @@ if (gObj.allowPaging && gObj.printMode === 'currentpage') {
             }
-            printWind = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');
-            printWind.moveTo(0, 0);
-            printWind.resizeTo(screen.availWidth, screen.availHeight);
             if (gObj[this.printing]) {
@@ -124,3 +125,3 @@ ej2_base_1.detach(gObj.element);
             gObj.element.classList.remove('e-print-grid');
-            printWind = ej2_base_1.print(gObj.element, printWind);
+            this.printWind = ej2_base_1.print(gObj.element, this.printWind);
             gObj[this.printing] = false;
@@ -127,0 +128,0 @@ var args = {

src/grid/actions/reorder.d.ts

 import { IGrid, IAction, NotifyArgs } from '../base/interface';
 /**
  *
- * `Reorder` module is used to handle columns reorder.
+ * `Reorder` module is used for reordering columns.
  */
@@ -29,3 +29,3 @@ export declare class Reorder implements IAction {
     /**
-     * Changes the Grid column positions by field names.
+     * Changes the position of the Grid columns by field names.
      * @param  {string} fromFName - Defines the origin field name.
@@ -32,0 +32,0 @@ * @param  {string} toFName - Defines the destination field name.

src/grid/actions/scroll.d.ts

@@ -41,4 +41,4 @@ import { IGrid, IAction } from '../base/interface';
     /**
-     * Refresh makes the Grid to adopt with height of parent container.
-     * > The `height` must be set to 100%.
+     * Refresh makes the Grid adopt the height of the parent container.
+     * > The [`height`]((./api-grid.html#height)) must be set to 100%.
      * @return
@@ -45,0 +45,0 @@ */

src/grid/actions/search.d.ts

 import { IGrid, IAction, NotifyArgs } from '../base/interface';
 /**
- *
  * `Search` module is used to handle search action.
@@ -15,2 +14,4 @@ */
      * Searches Grid records by given key.
+     * > You can customize the default search action by using
+     * [`searchSettings`](./api-grid.html#searchsettings).
      * @param  {string} searchString - Defines the key.
@@ -17,0 +18,0 @@ * @return {void}

src/grid/actions/selection.d.ts

@@ -62,2 +62,5 @@ import { IGrid, IAction, IIndex, ISelectedCell } from '../base/interface';
     private focus;
+    private checkAllRecords;
+    private unSelectRowKey;
+    private isDataSourceMapped;
     /**
@@ -96,3 +99,3 @@ * Constructor for the Grid selection module
     /**
-     * Selects a row by given index.
+     * Selects a row by the given index.
      * @param  {number} index - Defines the row index.
@@ -105,3 +108,3 @@ * @param  {boolean} isToggle - If set to true, then it toggles the selection.
     /**
-     * Selects a range of rows from start and end row index.
+     * Selects a range of rows from start and end row indexes.
      * @param  {number} startIndex - Specifies the start row index.
@@ -113,4 +116,4 @@ * @param  {number} endIndex - Specifies the end row index.
     /**
-     * Selects a collection of rows by indexes.
-     * @param  {number[]} rowIndexes - Specifies the row indexes.
+     * Selects a collection of rows by index.
+     * @param  {number[]} rowIndexes - Specifies the row index.
      * @return {void}
@@ -133,3 +136,3 @@ */
     /**
-     * Deselects the current selected rows and cells.
+     * Deselects the currently selected rows and cells.
      * @return {void}
@@ -139,3 +142,3 @@ */
     /**
-     * Deselects the current selected rows.
+     * Deselects the currently selected rows.
      * @return {void}
@@ -148,4 +151,4 @@ */
     /**
-     * Selects a cell by given index.
-     * @param  {IIndex} cellIndex - Defines the row and column index.
+     * Selects a cell by the given index.
+     * @param  {IIndex} cellIndex - Defines the row and column indexes.
      * @param  {boolean} isToggle - If set to true, then it toggles the selection.
@@ -157,5 +160,5 @@ * @return {void}
     /**
-     * Selects a range of cells from start and end index.
-     * @param  {IIndex} startIndex - Specifies the row and column index of start index.
-     * @param  {IIndex} endIndex - Specifies the row and column index of end index.
+     * Selects a range of cells from start and end indexes.
+     * @param  {IIndex} startIndex - Specifies the row and column indexes of start index.
+     * @param  {IIndex} endIndex - Specifies the row and column indexes of end index.
      * @return {void}
@@ -186,3 +189,3 @@ */
     /**
-     * Deselects the current selected cells.
+     * Deselects the currently selected cells.
      * @return {void}
@@ -215,2 +218,3 @@ */
     private initPerisistSelection();
+    private checkDataSourceMapped();
     private dataSuccess(res);
@@ -217,0 +221,0 @@ private refreshPersistSelection();

src/grid/actions/sort.d.ts

@@ -41,6 +41,6 @@ import { SortSettings } from '../base/grid';
     /**
-     * Sorts a column with given options.
+     * Sorts a column with the given options.
      * @param {string} columnName - Defines the column name to sort.
-     * @param {SortDirection} direction - Defines the direction of sorting for field.
-     * @param {boolean} isMultiSort - Specifies whether the previous sorted columns to be maintained.
+     * @param {SortDirection} direction - Defines the direction of sorting field.
+     * @param {boolean} isMultiSort - Specifies whether the previously sorted columns are to be maintained.
      * @return {void}
@@ -55,3 +55,3 @@ */
     /**
-     * Clears all the sorted columns of Grid.
+     * Clears all the sorted columns of the Grid.
      * @return {void}
@@ -58,0 +58,0 @@ */

src/grid/actions/sort.js

@@ -245,4 +245,4 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/util", "../base/constant", "../services/aria-service"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, util_1, events, aria_service_1) {
                 var target = this.focus.getFocusedElement();
-                if (!target || (target && !target.classList.contains('e-headercell')) ||
-                    (this.parent.getFrozenColumns() || this.parent.frozenRows || ej2_base_2.isNullOrUndefined(target))) {
+                if (ej2_base_2.isNullOrUndefined(target) || !target.classList.contains('e-headercell')
+                    || !target.querySelector('.e-headercelldiv')) {
                     return;
@@ -249,0 +249,0 @@ }

src/grid/actions/toolbar.d.ts

@@ -5,3 +5,3 @@ import { Toolbar as tool } from '@syncfusion/ej2-navigations';
 /**
- * `Toolbar` module used to handle toolbar actions.
+ * `Toolbar` module is used to handle ToolBar actions.
  * @hidden
@@ -23,3 +23,3 @@ */
     /**
-     * Gets the toolbar element of grid.
+     * Gets the toolbar of the Grid.
      * @return {Element}
@@ -30,3 +30,3 @@ * @hidden
     /**
-     * To destroy the toolbar widget of the grid.
+     * Destroys the ToolBar.
      * @method destroy
@@ -42,5 +42,5 @@ * @return {void}
     /**
-     * Enable or disable toolbar items.
-     * @param {string[]} items - Define the collection of itemID of toolbar items.
-     * @param {boolean} isEnable - Define the items to be enable or disable.
+     * Enables or disables ToolBar items.
+     * @param {string[]} items - Defines the collection of itemID of ToolBar items.
+     * @param {boolean} isEnable - Defines the items to be enabled or disabled.
      * @return {void}
@@ -47,0 +47,0 @@ * @hidden

src/grid/actions/toolbar.js

@@ -32,3 +32,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-navigations", "../base/constant", "../base/util", "../services/focus-strategy"], function (require, exports, ej2_base_1, ej2_base_2, ej2_navigations_1, events, util_1, focus_strategy_1) {
             <span id="' + this.gridID + '_searchbutton" class="e-input-group-icon e-search-icon e-icons" \
-            tabindex="-1" aria-label= "search"></span> \
+            tabindex="-1" title="Search In" aria-label= "search"></span> \
             </div>',
@@ -35,0 +35,0 @@ tooltipText: this.l10n.getConstant('Search'), align: 'right', cssClass: 'e-search-wrapper'

src/grid/base/constant.d.ts

@@ -282,1 +282,5 @@ /** @hidden */
 export declare const foreignKeyData: string;
+/** @hidden */
+export declare const dataStateChange: string;
+/** @hidden */
+export declare const dataSourceChange: string;

src/grid/base/constant.js

@@ -143,2 +143,4 @@ define(["require", "exports"], function (require, exports) {
     exports.foreignKeyData = 'foreignKeyData';
+    exports.dataStateChange = 'dataStateChange';
+    exports.dataSourceChange = 'dataSourceChange';
 });

src/grid/base/enum.d.ts

@@ -134,2 +134,3 @@ /**
  * Defines Predefined toolbar items.
+ * @hidden
  */
@@ -136,0 +137,0 @@ export declare type ToolbarItems = 'add' | 'delete' | 'update' | 'cancel' | 'edit' | 'search' | 'columnchooser' | 'print' | 'pdfexport' | 'excelexport' | 'csvexport' | 'wordexport';

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

@@ -1,2 +0,2 @@
-import { Component, ModuleDeclaration, ChildProperty, Browser, closest, extend } from '@syncfusion/ej2-base';import { isNullOrUndefined, setValue } 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, ExcelExportProperties, PdfExportProperties } from './interface';import { ColumnMenuOpenEventArgs, RecordDoubleClickEventArgs } from './interface';import { FailureEventArgs, FilterEventArgs, ColumnDragEventArgs, GroupEventArgs, PrintEventArgs, ICustomOptr } from './interface';import { RowDeselectEventArgs, RowSelectEventArgs, RowSelectingEventArgs, PageEventArgs, RowDragEventArgs } from './interface';import { BeforeBatchAddArgs, BeforeBatchDeleteArgs, BeforeBatchSaveArgs, ResizeArgs, ColumnMenuItemModel } from './interface';import { BatchAddArgs, BatchDeleteArgs, BeginEditArgs, CellEditArgs, CellSaveArgs, BeforeDataBoundArgs, RowInfo } from './interface';import { DetailDataBoundEventArgs, ColumnChooserEventArgs, AddEventArgs, SaveEventArgs, EditEventArgs, DeleteEventArgs } from './interface';import { ExcelExportCompleteArgs, PdfExportCompleteArgs } from './interface';import { SearchEventArgs, SortEventArgs, ISelectedCell, EJ2Intance, BeforeCopyEventArgs, CheckBoxChangeEventArgs } from './interface';import { Render } from '../renderer/render';import { Column, ColumnModel } from '../models/column';import { Action, SelectionType, GridLine, RenderType, SortDirection, SelectionMode, PrintMode, FilterType, FilterBarMode } from './enum';import { WrapMode, ToolbarItems, ContextMenuItem, ColumnMenuItem, ToolbarItem } from './enum';import { Data } from '../actions/data';import { CellRendererFactory } from '../services/cell-render-factory';import { ServiceLocator } from '../services/service-locator';import { ValueFormatter } from '../services/value-formatter';import { RendererFactory } from '../services/renderer-factory';import { ColumnWidthService } from '../services/width-controller';import { AriaService } from '../services/aria-service';import { FocusStrategy } from '../services/focus-strategy';import { PageSettingsModel, AggregateRowModel } from '../models/models';import { PageSettings } from '../models/page-settings';import { Sort } from '../actions/sort';import { Page } from '../actions/page';import { Selection } from '../actions/selection';import { Filter } from '../actions/filter';import { Search } from '../actions/search';import { Resize } from '../actions/resize';import { Reorder } from '../actions/reorder';import { RowDD } from '../actions/row-reorder';import { ShowHide } from '../actions/show-hide';import { Scroll } from '../actions/scroll';import { Group } from '../actions/group';import { Print } from '../actions/print';import { DetailRow } from '../actions/detail-row';import { Toolbar } from '../actions/toolbar';import { AggregateRow } from '../models/aggregate';import { Edit } from '../actions/edit';import { Row } from '../models/row';import { ColumnChooser } from '../actions/column-chooser';import { ExcelExport } from '../actions/excel-export';import { PdfExport } from '../actions/pdf-export';import { Clipboard } from '../actions/clipboard';import { CommandColumn } from '../actions/command-column';import { ContextMenu } from '../actions/context-menu';import { BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-navigations';import { ColumnMenu } from '../actions/column-menu';import { CheckState } from './type';
+import { Component, ModuleDeclaration, ChildProperty, Browser, closest, extend } from '@syncfusion/ej2-base';import { isNullOrUndefined, setValue, getValue } from '@syncfusion/ej2-base';import { createElement, addClass, removeClass, append, remove, classList } from '@syncfusion/ej2-base';import { Property, Collection, Complex, Event, NotifyPropertyChanges, INotifyPropertyChanged, L10n } from '@syncfusion/ej2-base';import { EventHandler, KeyboardEvents, KeyboardEventArgs, EmitType } from '@syncfusion/ej2-base';import { Query, DataManager, DataUtil } from '@syncfusion/ej2-data';import { ItemModel, ClickEventArgs } from '@syncfusion/ej2-navigations';import { createSpinner, hideSpinner, showSpinner, Tooltip } from '@syncfusion/ej2-popups';import { iterateArrayOrObject, prepareColumns, parentsUntil, wrap, templateCompiler, refreshForeignData } from './util';import * as events from '../base/constant';import { IRenderer, IValueFormatter, IFilterOperator, IIndex, RowDataBoundEventArgs, QueryCellInfoEventArgs } from './interface';import { CellDeselectEventArgs, CellSelectEventArgs, CellSelectingEventArgs, ParentDetails, ContextMenuItemModel } from './interface';import { PdfQueryCellInfoEventArgs, ExcelQueryCellInfoEventArgs, ExcelExportProperties, PdfExportProperties } from './interface';import { ColumnMenuOpenEventArgs, RecordDoubleClickEventArgs, DataResult, PendingState } from './interface';import { FailureEventArgs, FilterEventArgs, ColumnDragEventArgs, GroupEventArgs, PrintEventArgs, ICustomOptr } from './interface';import { RowDeselectEventArgs, RowSelectEventArgs, RowSelectingEventArgs, PageEventArgs, RowDragEventArgs } from './interface';import { BeforeBatchAddArgs, BeforeBatchDeleteArgs, BeforeBatchSaveArgs, ResizeArgs, ColumnMenuItemModel } from './interface';import { BatchAddArgs, BatchDeleteArgs, BeginEditArgs, CellEditArgs, CellSaveArgs, BeforeDataBoundArgs, RowInfo } from './interface';import { DetailDataBoundEventArgs, ColumnChooserEventArgs, AddEventArgs, SaveEventArgs, EditEventArgs, DeleteEventArgs } from './interface';import { ExcelExportCompleteArgs, PdfExportCompleteArgs, DataStateChangeEventArgs, DataSourceChangeEventArgs } from './interface';import { SearchEventArgs, SortEventArgs, ISelectedCell, EJ2Intance, BeforeCopyEventArgs, CheckBoxChangeEventArgs } from './interface';import { Render } from '../renderer/render';import { Column, ColumnModel } from '../models/column';import { Action, SelectionType, GridLine, RenderType, SortDirection, SelectionMode, PrintMode, FilterType, FilterBarMode } from './enum';import { WrapMode, ToolbarItems, ContextMenuItem, ColumnMenuItem, ToolbarItem } from './enum';import { Data } from '../actions/data';import { Cell } from '../models/cell';import { RowRenderer } from '../renderer/row-renderer';import { CellRenderer } from '../renderer/cell-renderer';import { CellRendererFactory } from '../services/cell-render-factory';import { ServiceLocator } from '../services/service-locator';import { ValueFormatter } from '../services/value-formatter';import { RendererFactory } from '../services/renderer-factory';import { ColumnWidthService } from '../services/width-controller';import { AriaService } from '../services/aria-service';import { FocusStrategy } from '../services/focus-strategy';import { PageSettingsModel, AggregateRowModel } from '../models/models';import { PageSettings } from '../models/page-settings';import { Sort } from '../actions/sort';import { Page } from '../actions/page';import { Selection } from '../actions/selection';import { Filter } from '../actions/filter';import { Search } from '../actions/search';import { Resize } from '../actions/resize';import { Reorder } from '../actions/reorder';import { RowDD } from '../actions/row-reorder';import { ShowHide } from '../actions/show-hide';import { Scroll } from '../actions/scroll';import { Group } from '../actions/group';import { Print } from '../actions/print';import { DetailRow } from '../actions/detail-row';import { Toolbar } from '../actions/toolbar';import { AggregateRow } from '../models/aggregate';import { Edit } from '../actions/edit';import { Row } from '../models/row';import { ColumnChooser } from '../actions/column-chooser';import { ExcelExport } from '../actions/excel-export';import { PdfExport } from '../actions/pdf-export';import { Clipboard } from '../actions/clipboard';import { CommandColumn } from '../actions/command-column';import { ContextMenu } from '../actions/context-menu';import { BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-navigations';import { ColumnMenu } from '../actions/column-menu';import { CheckState } from './type';
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -11,2 +11,3 @@
      * Defines the field name of sort column. 
+     * @default ''
      */
@@ -17,2 +18,3 @@ field?: string;
      * Defines the direction of sort column. 
+     * @default ''
      */
@@ -31,2 +33,3 @@ direction?: SortDirection;
      * Also user can get current sorted columns. 
+     * @default []
      */
@@ -49,3 +52,4 @@ columns?: SortDescriptorModel[];
     /**
-     * Defines the field name of filter column.  
+     * Defines the field name of the filter column.  
+     * @default ''
      */
@@ -55,3 +59,3 @@ field?: string;
     /**
-     * Defines the operator by how to filter records. The available operators and its supported data types are 
+     * Defines the operator to filter records. The available operators and its supported data types are:
      * <table> 
@@ -66,3 +70,3 @@ * <tr>
      * startswith<br/></td><td colspan=1 rowspan=1> 
-     * Checks whether a value begins with the specified value.<br/></td><td colspan=1 rowspan=1> 
+     * Checks whether the value begins with the specified value.<br/></td><td colspan=1 rowspan=1> 
      * String<br/></td></tr> 
@@ -72,3 +76,3 @@ * <tr>
      * endswith<br/></td><td colspan=1 rowspan=1> 
-     * Checks whether a value ends with specified value.<br/><br/></td><td colspan=1 rowspan=1> 
+     * Checks whether the value ends with the specified value.<br/><br/></td><td colspan=1 rowspan=1> 
      * <br/>String<br/></td></tr> 
@@ -78,3 +82,3 @@ * <tr>
      * contains<br/></td><td colspan=1 rowspan=1> 
-     * Checks whether a value contains with specified value.<br/><br/></td><td colspan=1 rowspan=1> 
+     * Checks whether the value contains the specified value.<br/><br/></td><td colspan=1 rowspan=1> 
      * <br/>String<br/></td></tr> 
@@ -84,3 +88,3 @@ * <tr>
      * equal<br/></td><td colspan=1 rowspan=1> 
-     * Checks whether a value equal to specified value.<br/><br/></td><td colspan=1 rowspan=1> 
+     * Checks whether the value is equal to the specified value.<br/><br/></td><td colspan=1 rowspan=1> 
      * <br/>String | Number | Boolean | Date<br/></td></tr> 
@@ -90,25 +94,26 @@ * <tr>
      * notequal<br/></td><td colspan=1 rowspan=1> 
-     * Checks whether a value not equal to specified value.<br/><br/></td><td colspan=1 rowspan=1> 
+     * Checks for values that are not equal to the specified value.<br/><br/></td><td colspan=1 rowspan=1> 
      * <br/>String | Number | Boolean | Date<br/></td></tr> 
      * <tr> 
      * <td colspan=1 rowspan=1> 
-     * greaterThan<br/></td><td colspan=1 rowspan=1> 
-     * Checks whether a value is greater than with specified value.<br/><br/></td><td colspan=1 rowspan=1> 
+     * greaterthan<br/></td><td colspan=1 rowspan=1> 
+     * Checks whether the value is greater than the specified value.<br/><br/></td><td colspan=1 rowspan=1> 
      * Number | Date<br/></td></tr> 
      * <tr> 
      * <td colspan=1 rowspan=1> 
-     * greaterThanOrEqual<br/></td><td colspan=1 rowspan=1> 
-     * Checks whether a value is greater than or equal with specified value.<br/><br/></td><td colspan=1 rowspan=1> 
+     * greaterthanorequal<br/></td><td colspan=1 rowspan=1> 
+     * Checks whether the value is greater than or equal to the specified value.<br/><br/></td><td colspan=1 rowspan=1> 
      * <br/>Number | Date<br/></td></tr> 
      * <tr> 
      * <td colspan=1 rowspan=1> 
-     * lessThan<br/></td><td colspan=1 rowspan=1> 
-     * Checks whether a value is less than with specified value.<br/><br/></td><td colspan=1 rowspan=1> 
+     * lessthan<br/></td><td colspan=1 rowspan=1> 
+     * Checks whether the value is less than the specified value.<br/><br/></td><td colspan=1 rowspan=1> 
      * <br/>Number | Date<br/></td></tr> 
      * <tr> 
      * <td colspan=1 rowspan=1> 
-     * lessThanOrEqual<br/></td><td colspan=1 rowspan=1> 
-     * Checks whether a value is less than or equal with specified value.<br/><br/></td><td colspan=1 rowspan=1> 
+     * lessthanorequal<br/></td><td colspan=1 rowspan=1> 
+     * Checks whether the value is less than or equal to the specified value.<br/><br/></td><td colspan=1 rowspan=1> 
      * <br/>Number | Date<br/></td></tr> 
      * </table> 
+     * @default null
      */
@@ -118,3 +123,4 @@ operator?: string;
     /**
-     * Defines the value which is used to filter records. 
+     * Defines the value used to filter records. 
+     * @default ''
      */
@@ -126,2 +132,3 @@ value?: string | number | Date | boolean;
      * filter records with case insensitive(uppercase and lowercase letters treated as same).  
+     * @default null
      */
@@ -131,4 +138,10 @@ matchCase?: boolean;
     /**
-     * Defines the relationship between one filter query with another by using AND or OR predicate.   
+     * If ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.
      */
+    ignoreAccent?: boolean;
+
+    /**
+     * Defines the relationship between one filter query and another by using AND or OR predicate.   
+     * @default null
+     */
     predicate?: string;
@@ -180,4 +193,4 @@
     /**
-     * Specifies the columns to filter at initial rendering of Grid.  
-     * Also user can get current filtered columns. 
+     * Specifies the columns to be filtered at initial rendering of the Grid. You can also get the columns that were currently filtered.
+     * @default []
      */
@@ -196,6 +209,6 @@ columns?: PredicateModel[];
     /**
-     * Defines the filter bar modes. The available options are  
-     * * `onenter` - Initiate filter operation after Enter key is pressed. 
-     * * `immediate` -  Initiate filter operation after certain time interval. By default time interval is 1500 ms. 
-     * @default onenter 
+     * Defines the filter bar modes. The available options are,
+     * * `onenter`: Initiates filter operation after Enter key is pressed. 
+     * * `immediate`: Initiates filter operation after a certain time interval. By default, time interval is 1500 ms. 
+     * @default onenter
      */
@@ -205,4 +218,4 @@ mode?: FilterBarMode;
     /**
-     * Shows or hides the filtered status message in the pager.  
-     * @default true 
+     * Shows or hides the filtered status message on the pager.  
+     * @default true
      */
@@ -212,3 +225,3 @@ showFilterBarStatus?: boolean;
     /**
-     * Defines the delay (in milliseconds) to filter records when the `Immediate` mode of filter bar is set. 
+     * Defines the delay (in milliseconds) in filtering records when the `Immediate` mode of filter bar is set. 
      * @default 1500 
@@ -224,2 +237,8 @@ */
 
+    /**
+     * If ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.
+     * @default false
+     */
+    ignoreAccent?: boolean;
+
 }
@@ -233,3 +252,3 @@
     /**
-     * Grid supports row, cell and both(row and cell) selection mode. 
+     * Grid supports row, cell, and both (row and cell) selection mode. 
      * @default row
@@ -241,6 +260,5 @@ */
      * The cell selection modes are flow and box. It requires the selection 
-     * [`mode`](http://ej2.syncfusion.com/documentation/grid/api-selectionSettings.html#mode-selectionmode) 
-     * to be either cell or both.
-     * * `flow` - Select range of cells between the start index and end index which includes in between cells of rows.
-     * * `box` - Select range of cells within the start and end column indexes which includes in between cells of rows within the range.
+     * [`mode`](./api-selectionSettings.html#mode-selectionmode) to be either cell or both.
+     * * `flow`: Selects the range of cells between start index and end index that also includes the other cells of the selected rows.
+     * * `box`: Selects the range of cells within the start and end column indexes that includes in between cells of rows within the range.
      * @default flow
@@ -252,4 +270,4 @@ */
      * Defines options for selection type. They are 
-     * * `single` - Allows user to select only a row or cell. 
-     * * `multiple` - Allows user to select multiple rows or cells. 
+     * * `single`: Allows selection of only a row or a cell. 
+     * * `multiple`: Allows selection of multiple rows or cells. 
      * @default single 
@@ -280,3 +298,4 @@ */
     /**
-     * Specifies the collection of fields which is included in search operation. By default, bounded columns of the Grid are included.  
+     * Specifies the collection of fields included in search operation. By default, bounded columns of the Grid are included.  
+     * @default []
      */
@@ -286,4 +305,5 @@ fields?: string[];
     /**
-     * Specifies the key value to search Grid records at initial rendering.  
-     * Also user can get current search key.
+     * Specifies the key value to search Grid records at initial rendering. 
+     * You can also get the current search key.
+     * @default ''
      */
@@ -293,3 +313,3 @@ key?: string;
     /**
-     * Defines the operator by how to search records. The available operators are 
+     * Defines the operator to search records. The available operators are:
      * <table> 
@@ -302,20 +322,20 @@ * <tr>
      * <td colspan=1 rowspan=1> 
-     * startsWith<br/></td><td colspan=1 rowspan=1> 
-     * Checks whether a string begins with the specified string.<br/></td></tr> 
+     * startswith<br/></td><td colspan=1 rowspan=1> 
+     * Checks whether the string begins with the specified string.<br/></td></tr> 
      * <tr> 
      * <td colspan=1 rowspan=1> 
-     * endsWith<br/></td><td colspan=1 rowspan=1> 
-     * Checks whether a string ends with specified string.<br/></td></tr> 
+     * endswith<br/></td><td colspan=1 rowspan=1> 
+     * Checks whether the string ends with the specified string.<br/></td></tr> 
      * <tr> 
      * <td colspan=1 rowspan=1> 
      * contains<br/></td><td colspan=1 rowspan=1> 
-     * Checks whether a string contains with specified string. <br/></td></tr> 
+     * Checks whether the string contains the specified string. <br/></td></tr> 
      * <tr> 
      * <td colspan=1 rowspan=1> 
      * equal<br/></td><td colspan=1 rowspan=1> 
-     * Checks whether a string equal to specified string.<br/></td></tr> 
+     * Checks whether the string is equal to the specified string.<br/></td></tr> 
      * <tr> 
      * <td colspan=1 rowspan=1> 
-     * notEqual<br/></td><td colspan=1 rowspan=1> 
-     * Checks whether a string not equal to specified string. <br/></td></tr> 
+     * notequal<br/></td><td colspan=1 rowspan=1> 
+     * Checks for strings not equal to the specified string. <br/></td></tr> 
      * </table> 
@@ -327,4 +347,4 @@ * @default contains
     /**
-     * If `ignoreCase` set to false, then search records with exact match or else  
-     * search records with case insensitive(uppercase and lowercase letters treated as same).  
+     * If `ignoreCase` is set to false, searches records that match exactly, else  
+     * searches records that are case insensitive(uppercase and lowercase letters treated the same).  
      * @default true 
@@ -334,2 +354,8 @@ */
 
+    /**
+     * If ignoreAccent set to true, then ignores the diacritic characters or accents when searching.
+     * @default false
+     */
+    ignoreAccent?: boolean;
+
 }
@@ -344,2 +370,3 @@
      * Defines the ID of droppable component on which row drop should occur.   
+     * @default null
      */
@@ -356,6 +383,6 @@ targetID?: string;
     /**
-     * Defines the `wrapMode` of grid. The available modes are   
-     * * `both` - Wraps both header and content. 
-     * * `content` -Wraps  header alone.
-     * * `header` - Wraps  content alone. 
+     * Defines the `wrapMode` of the Grid. The available modes are: 
+     * * `both`: Wraps both the header and content. 
+     * * `content`: Wraps the header alone.
+     * * `header`: Wraps the content alone. 
      * @default both
@@ -373,3 +400,3 @@ */
     /**
-     * If `showDropArea` set to true, then the group drop area element will be visible at the top of Grid.     
+     * If `showDropArea` is set to true, the group drop area element will be visible at the top of the Grid.     
      * @default true 
@@ -387,3 +414,3 @@ */
     /**
-     * If `showGroupedColumn` set to false, then it hides the grouped column after group.  
+     * If `showGroupedColumn` is set to false, it hides the grouped column after grouping.  
      * @default false  
@@ -409,4 +436,5 @@ */
     /**
-     * Specifies the column names to group at initial rendering of Grid.  
-     * Also user can get current grouped columns.     
+     * Specifies the column names to group at initial rendering of the Grid.  
+     * You can also get the currently grouped columns.   
+     * @default []  
      */
@@ -417,2 +445,3 @@ columns?: string[];
      * The Caption Template allows user to display the string or HTML element in group caption.
+     * > It accepts either the [template string](http://ej2.syncfusion.com/documentation/base/template-engine.html) or the HTML element ID.
      */
@@ -429,3 +458,3 @@ captionTemplate?: string;
     /**
-     * If `allowAdding` set to true, then you can able to add new record in grid.     
+     * If `allowAdding` is set to true, new records can be added to the Grid.  
      * @default false 
@@ -436,3 +465,3 @@ */
     /**
-     * If `allowEditing` set to true, then you can able to update values in the existing record.     
+     * If `allowEditing` is set to true, values can be updated in the existing record.  
      * @default false 
@@ -443,3 +472,3 @@ */
     /**
-     * If `allowDeleting` set to true, then the user can able to delete existing record in the Grid.     
+     * If `allowDeleting` is set to true, existing record can be deleted from the Grid.    
      * @default false 
@@ -450,3 +479,3 @@ */
     /**
-     * Defines the mode to perform CRUD operations. The available modes are 
+     * Defines the mode to edit. The available editing modes are:
      * * Inline
@@ -460,3 +489,3 @@ * * Dialog
     /**
-     * If `allowEditOnDblClick` set to false, then Grid will not allow to edit record on double click. 
+     * If `allowEditOnDblClick` is set to false, Grid will not allow editing of a record on double click. 
      * @default true 
@@ -467,3 +496,3 @@ */
     /**
-     * If showConfirmDialog set to false, then the confirm dialog does not show while save or discard the batch changes.
+     * if `showConfirmDialog` is set to false, confirm dialog does not show when batch changes are saved or discarded.
      * @default true 
@@ -474,3 +503,3 @@ */
     /**
-     * If `showDeleteConfirmDialog` set to true, then confirm dialog will show at delete action. you can cancel delete command.
+     * If `showDeleteConfirmDialog` is set to true, confirm dialog will show delete action. You can also cancel delete command.
      * @default false 
@@ -495,3 +524,3 @@ */
     /**
-     * If `enableAltRow` set to true, then grid renders row with alternate row styling.   
+     * If `enableAltRow` is set to true, Grid renders rows with alternate row styling.   
      * @default true     
@@ -502,3 +531,3 @@ */
     /**
-     * If `enableHover` set to true, then the row hover will be enabled in Grid.
+     * If `enableHover` is set to true, the row hover is enabled in the Grid.
      * @default true     
@@ -529,3 +558,3 @@ */
     /**
-     * If `allowPaging` set to true, then the pager renders at the footer of Grid. It is used to handle page navigation in Grid.   
+     * If `allowPaging` is set to true, the pager renders at the footer of the Grid. It is used to handle page navigation in the Grid.   
      * @default false     
@@ -562,3 +591,3 @@ */
     /**
-     * If `allowSorting` set to true, then it will allow the user to sort grid records when click on the column header.  
+     * If `allowSorting` is set to true, it allows sorting of grid records when column header is clicked.  
      * @default false    
@@ -594,3 +623,3 @@ */
     /**
-     * If `allowSelection` set to true, then it will allow the user to select(highlight row) Grid records by click on it.  
+     * If `allowSelection` is set to true, it allows selection of (highlight row) Grid records by clicking it.  
      * @default true        
@@ -601,4 +630,4 @@ */
     /**
-     * `selectedRowIndex` allows the user to select a row at initial rendering. 
-     * Also, user can get the current selected row index.
+     * The `selectedRowIndex` allows you to select a row at initial rendering. 
+     * You can also get the currently selected row index.
      * @default -1        
@@ -623,5 +652,5 @@ */
     /**
-     * If `allowReordering` set to true, then the Grid columns can be reordered. 
-     * Reordering can be done by drag and drop the particular column from one index to another index.
-     * > If Grid rendered with stacked headers, then reordering allows only in same level of column headers.  
+     * If `allowReordering` is set to true, Grid columns can be reordered. 
+     * Reordering can be done by drag and drop of a particular column from one index to another index.  
+     * > If Grid is rendered with stacked headers, reordering is allowed only at the same level as the column headers.
      * @default false    
@@ -632,3 +661,3 @@ */
     /**
-     * If `allowResizing` set to true, then the Grid columns can be resized.      
+     * If `allowResizing` is set to true, Grid columns can be resized.      
      * @default false    
@@ -639,3 +668,3 @@ */
     /**
-     * If `allowRowDragAndDrop` set to true, then it will allow the user to drag grid rows and drop to another grid.    
+     * If `allowRowDragAndDrop` is set to true, you can drag and drop grid rows at another grid.    
      * @default false    
@@ -652,4 +681,4 @@ */
     /**
-     * Configures the filter settings of Grid.  
-     * @default {columns: [], type: 'filterbar', mode: 'immediate', showFilterBarStatus: true, immediateModeDelay: 1500, operators: {}}    
+     * Configures the filter settings of the Grid.  
+     * @default {columns: [], type: 'filterbar', mode: 'immediate', showFilterBarStatus: true, immediateModeDelay: 1500 , operators: {}}    
      */
@@ -691,3 +720,3 @@ filterSettings?: FilterSettingsModel;
     /**
-     * If `showColumnChooser` set to true, then you can dynamically show or hide columns.  
+     * If `showColumnChooser` is set to true, it allows you to dynamically show or hide columns.  
      * @default false    
@@ -704,3 +733,3 @@ */
     /**
-     * Defines the scrollable width of the grid content.    
+     * Defines the scrollable width of the Grid content.    
      * @default auto    
@@ -711,8 +740,8 @@ */
     /**
-     * Defines the grid lines mode. The available modes are   
-     * * `both` - Displays both the horizontal and vertical grid lines. 
-     * * `none` - No grid lines are displayed.
-     * * `horizontal` - Displays the horizontal grid lines only. 
-     * * `vertical` - Displays the vertical grid lines only.
-     * * `default` - Displays grid lines based on the theme.
+     * Defines the mode of grid lines. The available modes are, 
+     * * `both`: Displays both horizontal and vertical grid lines. 
+     * * `none`: No grid lines are displayed.
+     * * `horizontal`: Displays the horizontal grid lines only. 
+     * * `vertical`: Displays the vertical grid lines only.
+     * * `default`: Displays grid lines based on the theme.
      * @default default
@@ -723,5 +752,5 @@ */
     /**
-     * The Row template which renders customized rows from given template. 
+     * The row template that renders customized rows from the given template. 
      * By default, Grid renders a table row for every data source item.
-     * > * It accepts either [template string](http://ej2.syncfusion.com/documentation/base/template-engine.html) or HTML element ID.   
+     * > * It accepts either [template string](../base/template-engine.html) or HTML element ID.   
      * > * The row template must be a table row.  
@@ -732,5 +761,5 @@ */
     /**
-     * The Detail Template allows user to show or hide additional information about a particular row. 
-     * > * It accepts either [template string](http://ej2.syncfusion.com/documentation/base/template-engine.html) or HTML element ID.
-     * > * The Detail Template content cannot be wider than the total width of parent Grid, unless the Detail Template is scrollable.
+     * The detail template allows you to show or hide additional information about a particular row.
+     *  
+     * > It accepts either the [template string](../base/template-engine.html) or the HTML element ID.
      * 
@@ -783,4 +812,4 @@ * ```html
      * Defines Grid options to render child Grid. 
-     * It requires the [`queryString`](http://ej2.syncfusion.com/documentation/grid/api-grid.html#querystring-string) for parent 
-     * and child relationship.
+     * It requires the [`queryString`](./api-grid.html#querystring-string) for parent 
+     * and child relationship. 
      */
@@ -790,3 +819,3 @@ childGrid?: GridModel;
     /**
-     * Defines the relationship between parent and child datasource. It acts as a foreign key for parent datasource.     
+     * Defines the relationship between parent and child datasource. It acts as the foreign key for parent datasource.       
      */
@@ -797,4 +826,4 @@ queryString?: string;
      * Defines the print modes. The available print modes are   
-     * * `allpages` - Print all pages records of the Grid. 
-     * * `currentpage` - Print current page records of the Grid.
+     * * `allpages`: Prints all pages of the Grid. 
+     * * `currentpage`: Prints the current page of the Grid.
      * @default allpages
@@ -807,9 +836,9 @@ */
      * If the `dataSource` is an array of JavaScript objects, 
-     * then Grid will create instance of [`DataManager`](http://ej2.syncfusion.com/documentation/data/api-dataManager.html) 
+     * then Grid will create instance of [`DataManager`](../data/api-dataManager.html) 
      * from this `dataSource`. 
-     * If the `dataSource` is an existing [`DataManager`](http://ej2.syncfusion.com/documentation/data/api-dataManager.html),
+     * If the `dataSource` is an existing [`DataManager`](../data/api-dataManager.html),
      *  the Grid will not initialize a new one. 
      * @default []    
      */
-    dataSource?: Object | DataManager;
+    dataSource?: Object | DataManager | DataResult;
 
@@ -823,4 +852,4 @@ /**
     /**
-     * Defines the external [`Query`](http://ej2.syncfusion.com/documentation/data/api-query.html) 
-     * which will execute along with data processing.    
+     * Defines the external [`Query`](../data/api-query.html) 
+     * that will be executed along with data processing.    
      * @default null    
@@ -837,14 +866,15 @@ */
     /**
-     * `toolbar` defines toolbar items for grid. It contains built-in and custom toolbar items. 
-     * If a string value is assigned to the `toolbar` option, it will be considered as a template for the whole Grid Toolbar.
-     * If an Array value is assigned, it will be considered as the list of built-in and custom toolbar items in the Grid's Toolbar.  
+     * `toolbar` defines the ToolBar items of the Grid. 
+     * It contains built-in and custom toolbar items. 
+     * If a string value is assigned to the `toolbar` option, it is considered as the template for the whole Grid ToolBar. 
+     * If an array value is assigned, it is considered as the list of built-in and custom toolbar items in the Grid's Toolbar. 
      * <br><br>     
-     * The available built-in toolbar items are
-     * * add - Add a new record.
-     * * edit - Edit the selected record.
-     * * update - Update the edited record.
-     * * delete - Delete the selected record.
-     * * cancel - Cancel the edit state.
-     * * search - Searches records by given key.
-     * * print - Print the Grid.
+     * The available built-in ToolBar items are:
+     * * add: Adds a new record.
+     * * edit: Edits the selected record.
+     * * update: Updates the edited record.
+     * * delete: Deletes the selected record.
+     * * cancel: Cancels the edit state.
+     * * search: Searches records by the given key.
+     * * print: Prints the Grid.
      * * excelexport - Export the Grid to Excel(excelExport() method manually to make export.)
@@ -878,3 +908,3 @@ * * pdfexport - Export the Grid to PDF(pdfExport() method manually to make export.)
      * <br><br> 
-     * The available default items are   
+     * The available built-in items are,  
      * * `autoFitAll` - Auto fit the size of all columns. 
@@ -905,3 +935,3 @@ * * `autoFit` - Auto fit the current column.
      * <br><br> 
-     * The available default items are   
+     * The available built-in items are,
      * * `autoFitAll` - Auto fit the size of all columns. 
@@ -933,3 +963,3 @@ * * `autoFit` - Auto fit the current column.
     /**
-     * Defines the frozen rows for the grid content
+     * Gets or sets the number of frozen rows.
      * @default 0
@@ -940,3 +970,3 @@ */
     /**
-     * Defines the frozen columns for the grid content
+     * Gets or sets the number of frozen columns.
      * @default 0
@@ -965,3 +995,3 @@ */
     /**
-     * Triggered every time a request is made to access row information, element and data. 
+     * Triggered every time a request is made to access row information, element, or data. 
      * This will be triggered before the row element is appended to the Grid element.
@@ -973,3 +1003,3 @@ * @event
     /**
-     * Triggered every time a request is made to access cell information, element and data.
+     * Triggered every time a request is made to access cell information, element, or data.
      * This will be triggered before the cell element is appended to the Grid element.
@@ -981,3 +1011,3 @@ * @event
     /**
-     * Triggers when Grid actions such as Sorting, Filtering, Paging and Grouping etc., starts. 
+     * Triggers when Grid actions such as sorting, filtering, paging, grouping etc., starts. 
      * @event
@@ -988,3 +1018,3 @@ */
     /**
-     * Triggers when Grid actions such as Sorting, Filtering, Paging and Grouping etc., completed. 
+     * Triggers when Grid actions such as sorting, filtering, paging, grouping etc. are completed. 
      * @event 
@@ -995,3 +1025,3 @@ */
     /**
-     * Triggers when any Grid actions failed to achieve desired results. 
+     * Triggers when any Grid action failed to achieve the desired results. 
      * @event 
@@ -1014,3 +1044,3 @@ */
     /**
-     * Triggers before any row selection occurs.
+     * Triggers before row selection occurs.
      * @event 
@@ -1021,3 +1051,3 @@ */
     /**
-     * Triggers after any row is selected.
+     * Triggers after a row is selected.
      * @event 
@@ -1028,3 +1058,3 @@ */
     /**
-     * Triggers before any particular selected row is deselecting.
+     * Triggers before deselecting the selected row.
      * @event 
@@ -1035,3 +1065,3 @@ */
     /**
-     * Triggers when any particular selected row is deselected.
+     * Triggers when a selected row is deselected.
      * @event 
@@ -1048,3 +1078,3 @@ */
     /**
-     * Triggers after any cell is selected.
+     * Triggers after a cell is selected.
      * @event 
@@ -1055,3 +1085,3 @@ */
     /**
-     * Triggers before any particular selected cell is deselecting.
+     * Triggers before the selected cell is deselecting.
      * @event 
@@ -1062,3 +1092,3 @@ */
     /**
-     * Triggers when any particular selected cell is deselected.
+     * Triggers when a particular selected cell is deselected.
      * @event 
@@ -1069,3 +1099,3 @@ */
     /**
-     * Triggers when a column header element is drag(move) started. 
+     * Triggers when column header element drag (move) starts. 
      * @event  
@@ -1076,3 +1106,3 @@ */
     /**
-     * Triggers when a column header element is dragged (moved) continuously. 
+     * Triggers when column header element is dragged (moved) continuously. 
      * @event  
@@ -1083,3 +1113,3 @@ */
     /**
-     * Triggers when a column header element is dropped on target column. 
+     * Triggers when a column header element is dropped on the target column. 
      * @event  
@@ -1090,3 +1120,3 @@ */
     /**
-     * Triggers after print action completed.  
+     * Triggers after print action is completed.  
      * @event 
@@ -1103,3 +1133,3 @@ */
     /**
-     * Triggers before exporting each cell to PDF document.
+     * Triggers before exporting each cell to PDF document. You can also customize the PDF cells.
      * @event 
@@ -1111,2 +1141,3 @@ */
      * Triggers before exporting each cell to Excel file.
+     * You can also customize the Excel cells.
      * @event
@@ -1137,4 +1168,4 @@ */
     /**
-     * Triggers after detail row expanded.
-     * > This event triggers at initial expand. 
+     * Triggers after detail row expands.
+     * > This event triggers at initial expand.  
      * @event 
@@ -1145,3 +1176,3 @@ */
     /**
-     * Triggers when row elements is drag(move) started. 
+     * Triggers when row element's drag(move) starts. 
      * @event  
@@ -1152,3 +1183,3 @@ */
     /**
-     * Triggers when row elements is dragged (moved) continuously. 
+     * Triggers when row elements are dragged (moved) continuously. 
      * @event  
@@ -1159,3 +1190,3 @@ */
     /**
-     * Triggers when row elements is dropped on target row. 
+     * Triggers when row elements are dropped on the target row. 
      * @event  
@@ -1178,3 +1209,3 @@ */
     /**
-     * Triggers when record added in batch mode.    
+     * Triggers when records are added in batch mode.   
      * @event
@@ -1185,3 +1216,3 @@ */
     /**
-     * Triggers when record deleted in batch mode.
+     * Triggers when records are deleted in batch mode.
      * @event
@@ -1192,3 +1223,3 @@ */
     /**
-     * Triggers before record add in batch mode.
+     * Triggers before records are added in batch mode.
      * @event
@@ -1199,3 +1230,3 @@ */
     /**
-     * Triggers before record delete in batch mode.
+     * Triggers before records are deleted in batch mode.
      * @event
@@ -1206,3 +1237,3 @@ */
     /**
-     * Triggers before records save in batch mode.
+     * Triggers before records are saved in batch mode.
      * @event
@@ -1213,3 +1244,3 @@ */
     /**
-     * Triggers before the record is going to be edit.
+     * Triggers before the record is to be edit.
      * @event
@@ -1220,3 +1251,3 @@ */
     /**
-     * Triggers when cell edit.
+     * Triggers when the cell is being edited.
      * @event
@@ -1227,3 +1258,3 @@ */
     /**
-     * Triggers when record cell save.
+     * Triggers when cell is saved.
      * @event
@@ -1240,3 +1271,3 @@ */
     /**
-     * Triggers while column resizing
+     * Triggers on column resizing.
      * @event
@@ -1247,3 +1278,3 @@ */
     /**
-     * Triggers when column resize ends
+     * Triggers when column resize ends.
      * @event
@@ -1254,3 +1285,3 @@ */
     /**
-     * Triggers before data bound to Grid.
+     * Triggers before data is bound to Grid.
      * @event
@@ -1296,2 +1327,16 @@ */
 
+    /**
+     * Triggers when the grid actions such as Sorting, Paging, Grouping etc., are done.
+     * In this event,the current view data and total record count should be assigned to the `dataSource` based on the action performed.
+     * @event
+     */
+    dataStateChange?: EmitType<DataStateChangeEventArgs>;
+
+    /**
+     * Triggers when the grid data is added, deleted and updated.
+     * Invoke the done method from the argument to start render after edit operation.
+     * @event
+     */
+    dataSourceChange?: EmitType<DataSourceChangeEventArgs>;
+
 }

src/grid/base/interface.d.ts

 import { Component, NumberFormatOptions, DateFormatOptions, EmitType, KeyboardEventArgs, L10n } from '@syncfusion/ej2-base';
-import { Query, DataManager } from '@syncfusion/ej2-data';
+import { Query, DataManager, Group } from '@syncfusion/ej2-data';
 import { ItemModel, MenuItemModel, BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-navigations';
@@ -359,2 +359,5 @@ import { ButtonModel } from '@syncfusion/ej2-buttons';
     getForeignKeyColumns?(): Column[];
+    setCellValue(key: string | number, field: string, value: string | number | boolean | Date): void;
+    setRowData(key: string | number, rowData?: Object): void;
+    getState?(): Object;
 }
@@ -382,2 +385,3 @@ /** @hidden */
     getRowInfo?(target: Element): RowInfo;
+    getState?(): Object;
 }
@@ -536,2 +540,3 @@ /**
     isFrozen?: boolean;
+    args?: NotifyArgs;
 }
@@ -605,9 +610,9 @@ /**
 export interface FailureEventArgs {
-    /** Defines the error information */
+    /** Defines the error information. */
     error?: Error;
 }
 export interface FilterEventArgs extends ActionEventArgs {
-    /** Defines the current filtered object. */
+    /** Defines the object that is currently filtered. */
     currentFilterObject?: PredicateModel;
-    /** Defines the current filtered column name. */
+    /** Defines the column name that is currently filtered. */
     currentFilteringColumn?: string;
@@ -618,3 +623,3 @@ /** Defines the collection of filtered columns. */
 export interface GroupEventArgs extends ActionEventArgs {
-    /** Defines the field name of current grouped column. */
+    /** Defines the field name of the currently grouped columns. */
     columnName?: string;
@@ -629,3 +634,3 @@ }
 export interface SortEventArgs extends ActionEventArgs {
-    /** Defines the field name of current sorted column. */
+    /** Defines the field name of currently sorted column. */
     columnName?: string;
@@ -642,3 +647,3 @@ /** Defines the direction of sort column. */
     element?: Element;
-    /** Defines the current selected rows. */
+    /** Defines the currently selected rows. */
     selectedRows?: NodeListOf<Element>;
@@ -648,4 +653,4 @@ /** Cancel the print action */
 }
-export interface DetailDataBoundEventArgs extends ActionEventArgs {
-    /** Defines the Details row element. */
+export interface DetailDataBoundEventArgs {
+    /** Defines the details row element. */
     detailElement?: Element;
@@ -710,11 +715,11 @@ /** Defines the selected row data. */
 export interface CellDeselectEventArgs {
-    /** Defines the current selected/deselected row data. */
+    /** Defines the currently selected/deselected row data. */
     data?: Object;
-    /** Defines the current selected/deselected cell indexes. */
+    /** Defines the indexes of the current selected/deselected cells. */
     cellIndexes?: ISelectedCell[];
-    /** Defines the current selected/deselected cells. */
+    /** Defines the currently selected/deselected cells. */
     cells?: Element[];
 }
 export interface CellSelectEventArgs extends CellDeselectEventArgs {
-    /** Defines the current selected cell index. */
+    /** Defines the index of the current selected cell. */
     cellIndex?: IIndex;
@@ -729,13 +734,13 @@ /** Defines the previously selected cell index. */
 export interface CellSelectingEventArgs extends CellSelectEventArgs {
-    /** Defines whether CTRL key is pressed. */
+    /** Defines whether the CTRL key is pressed or not. */
     isCtrlPressed?: boolean;
-    /** Defines whether SHIFT key is pressed. */
+    /** Defines whether the SHIFT key is pressed or not. */
     isShiftPressed?: boolean;
 }
 export interface ColumnDragEventArgs {
-    /** Defines the target element from which drag starts. */
+    /** Defines the target element from which the drag starts. */
     target?: Element;
     /** Defines the type of the element dragged. */
     draggableType?: string;
-    /** Defines the column object which is dragged. */
+    /** Defines the column object that is dragged. */
     column?: Column;
@@ -928,7 +933,7 @@ }
 export interface RowDragEventArgs {
-    /** Defines the selected rows element. */
+    /** Defines the selected row's element. */
     rows?: Element;
     /** Defines the target element from which drag starts. */
     target?: Element;
-    /** Defines the type of the element dragged. */
+    /** Defines the type of element dragged. */
     draggableType?: string;
@@ -1217,5 +1222,8 @@ /** Defines the selected row data. */
 }
+/**
+ * Defines options for custom command buttons.
+ */
 export interface CommandButtonOptions extends ButtonModel {
     /**
-     * Define handler for click event.
+     * Defines handler for the click event.
      */
@@ -1238,2 +1246,73 @@ click?: EmitType<Event>;
 /**
+ * Defines the pending state for Custom Service Data
+ */
+export interface PendingState {
+    /**
+     * The function for resolving
+     */
+    resolver?: Function;
+    /**
+     * The state of pending state.
+     */
+    isPending?: Boolean;
+    /**
+     * Grouping property for Custom data service
+     */
+    group?: string[];
+}
+/**
+ * Sorting property for Custom data Service
+ */
+export interface Sorts {
+    /** Defines the field to be sorted */
+    name?: string;
+    /** Defines the direction of sorting */
+    direction?: string;
+}
+/** Custom data service event types */
+export interface DataStateChangeEventArgs {
+    /** Defines the skip count */
+    skip?: number;
+    /** Defines the page size */
+    take?: number;
+    /** Defines the filter criteria  */
+    where?: PredicateModel[];
+    /** Defines the sorted field and direction */
+    sorted?: Sorts[];
+    /** Defines the grouped field names */
+    group?: string[];
+    /** Defines the search criteria */
+    search?: PredicateModel[];
+    /** Defines the grid action details performed by paging, grouping, filtering, searching, sorting */
+    action?: PageEventArgs | GroupEventArgs | FilterEventArgs | SearchEventArgs | SortEventArgs;
+    /** Defines the table name */
+    table?: string;
+    /** Defines the selected field names */
+    select?: string[];
+    /** Defines that the count is required */
+    count?: boolean;
+}
+export interface DataSourceChangeEventArgs {
+    /** Defines the current action. */
+    requestType?: string;
+    /** Defines the current action. */
+    action?: string;
+    /** Defines the primary column field */
+    key?: string | string[];
+    /** Defines the state of the performed action */
+    state?: DataStateChangeEventArgs;
+    /** Defines the selected row data. */
+    data?: Object | Object[];
+    /** Defines the primary key value */
+    primaryKeyValues?: Object[];
+    /** Defines the index value */
+    index?: number;
+    /** Defines the end of editing function */
+    endEdit?: Function;
+    /** Defines the changes made in batch editing */
+    changes?: Object;
+    /** Defines the query */
+    query?: Query;
+}
+/**
  * @hidden
@@ -1266,2 +1345,3 @@ */
     getFocusInfo?: () => FocusInfo;
+    getFocusable?: (element: HTMLElement) => HTMLElement;
     selector?: (row: Row<Column>, cell: Cell<Column>) => boolean;
@@ -1272,2 +1352,3 @@ generateRows?: (rows: Row<Column>[], optionals?: Object) => void;
     getNextCurrent?: (previous: number[], swap?: SwapInfo, active?: IFocus, action?: string) => number[];
+    preventDefault?: (e: KeyboardEventArgs, info: FocusInfo) => void;
 }
@@ -1282,2 +1363,3 @@ /**
     class?: string;
+    skipAction?: boolean;
 }
@@ -1321,2 +1403,11 @@ /**
 }
+/**
+ * @hidden
+ */
+export interface SwapInfo {
+    swap?: boolean;
+    toHeader?: boolean;
+    toFrozen?: boolean;
+    current?: number[];
+}
 export interface ContextMenuItemModel extends MenuItemModel {
@@ -1525,1 +1616,5 @@ target?: string;
 }
+export interface DataResult {
+    result: Object[] | Group[];
+    count: number;
+}

src/grid/models/aggregate-model.d.ts

@@ -33,4 +33,4 @@ import { compile } from '@syncfusion/ej2-base';import { getEnumValue } from '@syncfusion/ej2-base';import { CustomSummaryType } from '../base/type';import { AggregateType, CellType } from '../base/enum';import { Property, Collection, ChildProperty, NumberFormatOptions, DateFormatOptions } from '@syncfusion/ej2-base';import { ValueFormatter } from '../services/value-formatter';
     /**
-     * Defines the column name to display the aggregate value.
-     * If `columnName` is not defined, then `field` name value will be assigned to the `columnName` property.
+     * Defines the column name to display the aggregate value. If `columnName` is not defined,
+     * then `field` name value will be assigned to the `columnName` property.
      * @default null
@@ -41,6 +41,6 @@ */
     /**
-     * The format is applied to the calculated value before it is displayed. 
-     * Gets the format from the user which can be standard or custom 
-     * [`number`](http://ej2.syncfusion.com/documentation/base/intl.html#number-formatter-and-parser) 
-     * and [`date`](http://ej2.syncfusion.com/documentation/base/intl.html#date-formatter-and-parser) formats.  
+     * Format is applied to a calculated value before it is displayed.
+     * Gets the format from the user, which can be standard or custom
+     * [`number`](../base/intl.html#number-formatter-and-parser)
+     * and [`date`](../base/intl.html#date-formatter-and-parser) formats.
      * @default null    
@@ -52,23 +52,5 @@ */
      * Defines the footer cell template as a string for the aggregate column.
-     * The `type` name must be used to access aggregate values inside the template.
-     * ```html 
-     * <div id="Grid"></div>
-     * <script>  
-     *  var gridObj = new Grid({
-     *                  dataSource: filterData, 
-     *                  columns: [ 
-     *                      { field: 'OrderID', headerText: 'Order ID' }, 
-     *                      { field: 'Freight', format: 'c2' }
-     *                  ],
-     *                  aggregates: [{
-     *                       columns: [{ 
-     *                           type: ['min', 'max'], 
-     *                           field: 'Freight', 
-     *                           footerTemplate: 'Min: ${min} Max: ${max}'
-     *                      }]
-     *                  }]
-     *  }); 
-     *  gridObj.appendTo('#Grid'); 
-     * </script>
-     * ```
+     * The `type` name should be used to access aggregate values inside the template.
+     * 
+     * {% codeBlock src="grid/footer-template-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -80,27 +62,8 @@ */
      * Defines the group footer cell template as a string for the aggregate column. 
-     * The `type` name must be used to access aggregate values inside the template.
+     * The `type` name should be used to access aggregate values inside the template.
      * Additionally, the following fields can be accessed in the template.
-     * * **field**  - The current grouped field.
-     * * **key**    - The current grouped value.
-     * ```html 
-     * <div id="Grid"></div>   
-     * <script>
-     *  var gridObj = new Grid({
-     *                  dataSource: filterData, 
-     *                  allowGrouping: true,
-     *                  columns: [ 
-     *                      { field: 'OrderID', headerText: 'Order ID' }, 
-     *                      { field: 'Freight', format: 'c2' }
-     *                  ],
-     *                  aggregates: [{
-     *                       columns: [{ 
-     *                           type: ['min', 'max'], 
-     *                           field: 'Freight', 
-     *                           groupFooterTemplate: '${field} - Min: ${min} Max: ${max}'
-     *                      }]
-     *                  }]
-     *  }); 
-     *  gridObj.appendTo('#Grid'); 
-     * </script>
-     * ```
+     * * **field**: The current grouped field.
+     * * **key**: The current grouped value.
+     * 
+     * {% codeBlock src="grid/group-footer-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -112,27 +75,8 @@ */
      * Defines the group caption cell template as a string for the aggregate column.
-     * The `type` name must be used to access aggregate values inside the template.
+     * The `type` name should be used to access aggregate values inside the template.
      * Additionally, the following fields can be accessed in the template.
-     * * **field**  - The current grouped field name.
-     * * **key**    - The current grouped field value.
-     * ```html 
-     * <div id="Grid"></div>
-     * <script>  
-     *  var gridObj = new Grid({
-     *                  dataSource: filterData, 
-     *                  allowGrouping: true,
-     *                  columns: [ 
-     *                      { field: 'OrderID', headerText: 'Order ID' }, 
-     *                      { field: 'Freight', format: 'c2' }
-     *                  ],
-     *                  aggregates: [{
-     *                       columns: [{ 
-     *                           type: ['min', 'max'], 
-     *                           field: 'Freight', 
-     *                           groupCaptionTemplate: '${field} - Min: ${min} Max: ${max}'
-     *                      }]
-     *                  }]
-     *  }); 
-     *  gridObj.appendTo('#Grid'); 
-     * </script>
-     * ```
+     * * **field**: The current grouped field name.
+     * * **key**: The current grouped field value.
+     * 
+     * {% codeBlock src="grid/group-caption-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -143,30 +87,6 @@ */
     /**
-     * Defines a function to calculate custom aggregate value.
-     * The `type` value should be set as `custom` to use custom aggregation.
-     * To use custom aggregate value in the template, we need to use the key as `${custom}`.      
-     * * **Total aggregation** - the custom function will be called with whole data and the current `AggregateColumn` object.
-     * * **Group aggregation** - it will be called with current group details and the `AggregateColumn` object.
-     * ```html 
-     * <div id="Grid"></div>  
-     * <script>
-     *  var customFn = function(data, column){ return data.length };
-     *  var gridObj = new Grid({ 
-     *                  dataSource: filterData, 
-     *                  allowGrouping: true,
-     *                  columns: [ 
-     *                      { field: 'OrderID', headerText: 'Order ID' }, 
-     *                      { field: 'Freight', format: 'c2' }
-     *                  ],
-     *                  aggregates: [{
-     *                      columns: [{ 
-     *                          type: 'custom', 
-     *                          columnName: 'OrderID', 
-     *                          customAggregate: customFn, 
-     *                          footerTemplate: 'Total count: ${custom}' 
-     *                      }]
-     *                  }]   
-     *  }); 
-     *  gridObj.appendTo('#Grid'); 
-     * </script>
-     * ```
+     * Defines a function to calculate custom aggregate value. The `type` value should be set to `custom`.
+     * To use custom aggregate value in the template, use the key as `${custom}`.
+     * **Total aggregation**: The custom function will be called with the whole data and the current `AggregateColumn` object.
+     * **Group aggregation**: This will be called with the current group details and the `AggregateColumn` object.
      * 
@@ -173,0 +93,0 @@ * @default null

src/grid/models/aggregate.d.ts

@@ -6,3 +6,3 @@ import { CustomSummaryType } from '../base/type';
 /**
- * Configures the Grid aggregate column.
+ * Configures the Grid's aggregate column.
  */
@@ -35,4 +35,4 @@ export declare class AggregateColumn extends ChildProperty<AggregateColumn> {
     /**
-     * Defines the column name to display the aggregate value.
-     * If `columnName` is not defined, then `field` name value will be assigned to the `columnName` property.
+     * Defines the column name to display the aggregate value. If `columnName` is not defined,
+     * then `field` name value will be assigned to the `columnName` property.
      * @default null
@@ -42,6 +42,6 @@ */
     /**
-     * The format is applied to the calculated value before it is displayed.
-     * Gets the format from the user which can be standard or custom
-     * [`number`](http://ej2.syncfusion.com/documentation/base/intl.html#number-formatter-and-parser)
-     * and [`date`](http://ej2.syncfusion.com/documentation/base/intl.html#date-formatter-and-parser) formats.
+     * Format is applied to a calculated value before it is displayed.
+     * Gets the format from the user, which can be standard or custom
+     * [`number`](../base/intl.html#number-formatter-and-parser)
+     * and [`date`](../base/intl.html#date-formatter-and-parser) formats.
      * @default null
@@ -52,23 +52,5 @@ */
      * Defines the footer cell template as a string for the aggregate column.
-     * The `type` name must be used to access aggregate values inside the template.
-     * ```html
-     * <div id="Grid"></div>
-     * <script>
-     *  var gridObj = new Grid({
-     *                  dataSource: filterData,
-     *                  columns: [
-     *                      { field: 'OrderID', headerText: 'Order ID' },
-     *                      { field: 'Freight', format: 'c2' }
-     *                  ],
-     *                  aggregates: [{
-     *                       columns: [{
-     *                           type: ['min', 'max'],
-     *                           field: 'Freight',
-     *                           footerTemplate: 'Min: ${min} Max: ${max}'
-     *                      }]
-     *                  }]
-     *  });
-     *  gridObj.appendTo('#Grid');
-     * </script>
-     * ```
+     * The `type` name should be used to access aggregate values inside the template.
+     *
+     * {% codeBlock src="grid/footer-template-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -79,27 +61,8 @@ */
      * Defines the group footer cell template as a string for the aggregate column.
-     * The `type` name must be used to access aggregate values inside the template.
+     * The `type` name should be used to access aggregate values inside the template.
      * Additionally, the following fields can be accessed in the template.
-     * * **field**  - The current grouped field.
-     * * **key**    - The current grouped value.
-     * ```html
-     * <div id="Grid"></div>
-     * <script>
-     *  var gridObj = new Grid({
-     *                  dataSource: filterData,
-     *                  allowGrouping: true,
-     *                  columns: [
-     *                      { field: 'OrderID', headerText: 'Order ID' },
-     *                      { field: 'Freight', format: 'c2' }
-     *                  ],
-     *                  aggregates: [{
-     *                       columns: [{
-     *                           type: ['min', 'max'],
-     *                           field: 'Freight',
-     *                           groupFooterTemplate: '${field} - Min: ${min} Max: ${max}'
-     *                      }]
-     *                  }]
-     *  });
-     *  gridObj.appendTo('#Grid');
-     * </script>
-     * ```
+     * * **field**: The current grouped field.
+     * * **key**: The current grouped value.
+     *
+     * {% codeBlock src="grid/group-footer-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -110,27 +73,8 @@ */
      * Defines the group caption cell template as a string for the aggregate column.
-     * The `type` name must be used to access aggregate values inside the template.
+     * The `type` name should be used to access aggregate values inside the template.
      * Additionally, the following fields can be accessed in the template.
-     * * **field**  - The current grouped field name.
-     * * **key**    - The current grouped field value.
-     * ```html
-     * <div id="Grid"></div>
-     * <script>
-     *  var gridObj = new Grid({
-     *                  dataSource: filterData,
-     *                  allowGrouping: true,
-     *                  columns: [
-     *                      { field: 'OrderID', headerText: 'Order ID' },
-     *                      { field: 'Freight', format: 'c2' }
-     *                  ],
-     *                  aggregates: [{
-     *                       columns: [{
-     *                           type: ['min', 'max'],
-     *                           field: 'Freight',
-     *                           groupCaptionTemplate: '${field} - Min: ${min} Max: ${max}'
-     *                      }]
-     *                  }]
-     *  });
-     *  gridObj.appendTo('#Grid');
-     * </script>
-     * ```
+     * * **field**: The current grouped field name.
+     * * **key**: The current grouped field value.
+     *
+     * {% codeBlock src="grid/group-caption-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -140,30 +84,6 @@ */
     /**
-     * Defines a function to calculate custom aggregate value.
-     * The `type` value should be set as `custom` to use custom aggregation.
-     * To use custom aggregate value in the template, we need to use the key as `${custom}`.
-     * * **Total aggregation** - the custom function will be called with whole data and the current `AggregateColumn` object.
-     * * **Group aggregation** - it will be called with current group details and the `AggregateColumn` object.
-     * ```html
-     * <div id="Grid"></div>
-     * <script>
-     *  var customFn = function(data, column){ return data.length };
-     *  var gridObj = new Grid({
-     *                  dataSource: filterData,
-     *                  allowGrouping: true,
-     *                  columns: [
-     *                      { field: 'OrderID', headerText: 'Order ID' },
-     *                      { field: 'Freight', format: 'c2' }
-     *                  ],
-     *                  aggregates: [{
-     *                      columns: [{
-     *                          type: 'custom',
-     *                          columnName: 'OrderID',
-     *                          customAggregate: customFn,
-     *                          footerTemplate: 'Total count: ${custom}'
-     *                      }]
-     *                  }]
-     *  });
-     *  gridObj.appendTo('#Grid');
-     * </script>
-     * ```
+     * Defines a function to calculate custom aggregate value. The `type` value should be set to `custom`.
+     * To use custom aggregate value in the template, use the key as `${custom}`.
+     * **Total aggregation**: The custom function will be called with the whole data and the current `AggregateColumn` object.
+     * **Group aggregation**: This will be called with the current group details and the `AggregateColumn` object.
      *
@@ -198,3 +118,3 @@ * @default null
 /**
- * Configures the aggregate row.
+ * Configures the aggregate rows.
  */
@@ -201,0 +121,0 @@ export declare class AggregateRow extends ChildProperty<AggregateRow> {

src/grid/models/column.d.ts

@@ -19,3 +19,3 @@ import { NumberFormatOptions, DateFormatOptions } from '@syncfusion/ej2-base';
     /**
-     * Gets the unique identifier value of column. It is used to get column object.
+     * Gets the unique identifier value of the column. It is used to get the column object.
      * @default undefined
@@ -31,3 +31,3 @@ */
     /**
-     * Defines the width of column in pixels or percentage.
+     * Defines the width of the column in pixels or percentage.
      * @default undefined
@@ -37,3 +37,3 @@ */
     /**
-     * Defines the minimum Width of column in pixels or percentage.
+     * Defines the minimum Width of the column in pixels or percentage.
      * @default undefined
@@ -43,3 +43,3 @@ */
     /**
-     * Defines the maximum width of column in pixels or percentage.
+     * Defines the maximum width of the column in pixels or percentage.
      * @default undefined
@@ -49,3 +49,3 @@ */
     /**
-     * Define the alignment of column in both header and content cells.
+     * Defines the alignment of the column in both header and content cells.
      * @default left
@@ -70,3 +70,3 @@ */
     /**
-     * If `disableHtmlEncode` set to true, then it encodes the html of header and content cells.
+     * If `disableHtmlEncode` is set to true, it encodes the HTML of the header and content cells.
      * @default false
@@ -76,3 +76,3 @@ */
     /**
-     * Defines the data type of column.
+     * Defines the data type of the column.
      * @default null
@@ -84,4 +84,4 @@ */
      * Gets the format from the user which can be standard or custom
-     * [`number`](http://ej2.syncfusion.com/documentation/base/intl.html#number-formatter-and-parser)
-     * and [`date`](http://ej2.syncfusion.com/documentation/base/intl.html#date-formatter-and-parser) formats.
+     * [`number`](../base/intl.html#number-formatter-and-parser)
+     * and [`date`](../base/intl.html#date-formatter-and-parser) formats.
      * @default null
@@ -91,3 +91,3 @@ */
     /**
-     * If `visible` set to false, then hide the particular column. By default all columns are displayed.
+     * If `visible` is set to false, hides the particular column. By default, columns are displayed.
      * @default true
@@ -97,3 +97,3 @@ */
     /**
-     * Defines the column template as string or HTML element ID which is used to add customized element in each cells of the column.
+     * Defines the column template as a string or HTML element ID that is used to add customized element in each column.
      * @default null
@@ -119,4 +119,4 @@ */
     /**
-     * If `allowResizing` set to false, then it disables resize option of a particular column.
-     * By default all columns can be resized.
+     * If `allowResizing` is set to false, it disables resize option of a particular column.
+     * By default all the columns can be resized.
      * @default true
@@ -155,3 +155,3 @@ */
     /**
-     * User can customize css styles and attributes of the content cells of a particular column.
+     * The CSS styles and attributes of the content cells of a particular column can be customized.
      *
@@ -182,3 +182,3 @@ * ```html
     /**
-     * If `displayAsCheckBox` set as true, then it displays column value as check box instead of boolean values.
+     * If `displayAsCheckBox` is set to true, it displays the column value as a check box instead of Boolean value.
      * @default true
@@ -188,3 +188,3 @@ */
     /**
-     * Defines the `dataSource` of the column which is used to bind the foreign key data source.
+     * Defines the column data source  which will act as foreign data source.
      * @default null
@@ -221,3 +221,3 @@ */
     /**
-     * Defines the method which is used to apply custom cell values from external function and display this on each cells of render.
+     * Defines the method used to apply custom cell values from external function and display this on each cell rendered.
      *
@@ -246,4 +246,4 @@ * ```html
      * It have create and read functions.
-     * * create – It is used for creating custom components.
-     * * read – It is used to perform custom filter action.
+     * * create: It is used for creating custom components.
+     * * read: It is used to perform custom filter action.
      *
@@ -343,3 +343,3 @@ * ```html
     /**
-     * It is used to render multiple header rows(stacked headers) on the Grid header.
+     * Used to render multiple header rows(stacked headers) on the Grid header.
      * @default null
@@ -355,3 +355,3 @@ */
     /**
-     * If `isPrimaryKey` set to true, then consider this column as primary key constraint.
+     * If `isPrimaryKey` is set to true, considers this column as the primary key constraint.
      * @default false
@@ -378,3 +378,3 @@ */
     /**
-     * Defines rules to validate data before create and update.
+     * Defines rules to validate data before creating and updating.
      * @default null
@@ -384,3 +384,3 @@ */
     /**
-     * Defines the default values for component while adding a new record to the Grid.
+     * Defines default values for the component when adding a new record to the Grid.
      * @default null
@@ -400,3 +400,3 @@ */
     /**
-     * Defines the value to bind the field which is in foreign column datasource based on the foreignKeyField.
+     * Defines the display column name from the foreign data source which will be obtained from comparing local and foreign data.
      * @default null
@@ -406,3 +406,4 @@ */
     /**
-     * To define foreign key field name of the grid datasource.
+     * Defines the mapping column name of the foreign data source.
+     * If it is not defined then the `columns.field` will be considered as mapping column name
      * @default null
@@ -468,6 +469,10 @@ */
      * Defines the custom sort comparer function.
+     * The sort comparer function has the same functionality like
+     * [`Array.sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) sort comparer.
+     * {% codeBlock src="grid/sort-comparer-api/index.ts" %}{% endcodeBlock %}
      */
     sortComparer: (x: number | string, y: number | string) => number;
     /**
-     * Gets the column is foreign key column or not.
+     * @hidden
+     * It defines the column is foreign key column or not.
      */
@@ -504,3 +509,3 @@ isForeignColumn(): boolean;
     /**
-     * Gets the unique identifier value of column. It is used to get column object.
+     * Gets the unique identifier value of the column. It is used to get the object.
      * @default undefined
@@ -516,3 +521,3 @@ */
     /**
-     * Defines the width of column in pixels or percentage.
+     * Defines the width of the column in pixels or percentage.
      * @default undefined
@@ -522,3 +527,3 @@ */
     /**
-     * Defines the minimum width of column in pixels or percentage.
+     * Defines the minimum width of the column in pixels or percentage.
      * @default undefined
@@ -528,3 +533,3 @@ */
     /**
-     * Defines the maximum width of column in pixels or percentage.
+     * Defines the maximum width of the column in pixels or percentage.
      * @default undefined
@@ -534,3 +539,3 @@ */
     /**
-     * Define the alignment of column in both header and content cells.
+     * Defines the alignment of the column in both header and content cells.
      * @default left
@@ -555,3 +560,3 @@ */
     /**
-     * If `disableHtmlEncode` set to true, then it encodes the html of header and content cells.
+     * If `disableHtmlEncode` is set to true, it encodes the HTML of the header and content cells.
      * @default false
@@ -561,3 +566,3 @@ */
     /**
-     * Defines the data type of column.
+     * Defines the data type of the column.
      * @default null
@@ -569,4 +574,4 @@ */
      * Gets the format from the user which can be standard or custom
-     * [`number`](http://ej2.syncfusion.com/documentation/base/intl.html#number-formatter-and-parser)
-     * and [`date`](http://ej2.syncfusion.com/documentation/base/intl.html#date-formatter-and-parser) formats.
+     * [`number`](../base/intl.html#number-formatter-and-parser)
+     * and [`date`](../base/intl.html#date-formatter-and-parser) formats.
      * @default null
@@ -576,3 +581,3 @@ */
     /**
-     * If `visible` set to false, then hide the particular column. By default all columns are displayed.
+     * If `visible` is set to false, hides the particular column. By default, all columns are displayed.
      * @default true
@@ -582,3 +587,3 @@ */
     /**
-     * Defines the column template as string or HTML element ID which is used to add customized element in each cells of the column.
+     * Defines the column template as a string or HTML element ID that is used to add customized element in each column.
      * @default null
@@ -605,3 +610,3 @@ */
     /**
-     * If `allowResizing` set to false, then it disables resize option of a particular column.
+     * If `allowResizing` set to false, it disables resize option of a particular column.
      * @default true
@@ -641,3 +646,3 @@ */
     /**
-     * User can customize css styles and attributes of the content cells of a particular column.
+     * The CSS styles and attributes of the content cells of a particular column can be customized.
      *
@@ -668,3 +673,3 @@ * ```html
     /**
-     * If `displayAsCheckBox` set as true, then it displays column value as check box instead of boolean values.
+     * If `displayAsCheckBox` is set to true, it displays the column value as a check box instead of Boolean value.
      * @default true
@@ -674,3 +679,3 @@ */
     /**
-     * Defines the data source of the column which is used to bind the foreign key data source.
+     * Defines the column data source  which will act as foreign data source.
      * @default null
@@ -707,3 +712,3 @@ */
     /**
-     * Defines the method which is used to apply custom cell values from external function and display this on each cells of render.
+     * Defines the method used to apply custom cell values from external function and display this on each cell rendered.
      *
@@ -732,4 +737,4 @@ * ```html
      * It have create and read functions.
-     * * create – It is used for creating custom components.
-     * * read – It is used to perform custom filter action.
+     * * create: It is used for creating custom components.
+     * * read: It is used to perform custom filter action.
      *
@@ -774,3 +779,3 @@ * ```html
     /**
-     * It is used to render multiple header rows(stacked headers) on the Grid header.
+     * Used to render multiple header rows(stacked headers) on the Grid header.
      * @default null
@@ -786,3 +791,3 @@ */
     /**
-     * If `isPrimaryKey` set to true, then consider this column as primary key constraint.
+     * If `isPrimaryKey` is set to true, considers this column as the primary key constraint.
      * @default false
@@ -792,3 +797,3 @@ */
     /**
-     * Defines the type of component for editable.
+     * Defines the type of component for editing.
      * @default stringedit
@@ -798,3 +803,3 @@ */
     /**
-     * Defines rules to validate data before create and update.
+     * Defines rules to validate data before creating and updating.
      * @default null
@@ -804,3 +809,3 @@ */
     /**
-     * Defines the default values for component while adding a new record to the Grid.
+     * Defines default values for the component when adding a new record to the Grid.
      * @default null
@@ -820,3 +825,4 @@ */
     /**
-     * To define foreign key field name of the grid datasource.
+     * Defines the mapping column name of the foreign data source.
+     * If it is not defined then the `columns.field` will be considered as mapping column name
      * @default null
@@ -826,3 +832,3 @@ */
     /**
-     * Defines the value to bind the field which is in foreign column datasource based on the foreignKeyField.
+     * Defines the display column name from the foreign data source which will be obtained from comparing local and foreign data
      * @default null
@@ -885,2 +891,3 @@ */
     /**
+     * @hidden
      * It defines the column is foreign key column or not.
@@ -887,0 +894,0 @@ */

src/grid/models/page-settings-model.d.ts

@@ -9,3 +9,3 @@ import { Property, ChildProperty } from '@syncfusion/ej2-base';
     /**
-     * Defines the number of records displayed per page.
+     * Defines the number of records to be displayed per page.
      * @default 12
@@ -16,3 +16,3 @@ */
     /**
-     * Defines the number of pages to display in pager container.  
+     * Defines the number of pages to be displayed in the pager container.  
      * @default 8 
@@ -23,3 +23,3 @@ */
     /**
-     * Defines the current page number of pager.
+     * Defines the current page number of the pager.
      * @default 1
@@ -26,0 +26,0 @@ */

src/grid/models/page-settings.d.ts

 import { ChildProperty } from '@syncfusion/ej2-base';
 /**
- * Configures the paging behavior of Grid.
+ * Configures the paging behavior of the Grid.
  */
 export declare class PageSettings extends ChildProperty<PageSettings> {
     /**
-     * Defines the number of records displayed per page.
+     * Defines the number of records to be displayed per page.
      * @default 12
@@ -12,3 +12,3 @@ */
     /**
-     * Defines the number of pages to display in pager container.
+     * Defines the number of pages to be displayed in the pager container.
      * @default 8
@@ -18,3 +18,3 @@ */
     /**
-     * Defines the current page number of pager.
+     * Defines the current page number of the pager.
      * @default 1
@@ -21,0 +21,0 @@ */

src/grid/renderer/cell-renderer.js

@@ -89,3 +89,6 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/util", "@syncfusion/ej2-buttons", "../base/constant"], function (require, exports, ej2_base_1, ej2_base_2, util_1, ej2_buttons_1, constant_1) {
             innerHtml = !ej2_base_1.isNullOrUndefined(column.formatter) ? ej2_base_1.isNullOrUndefined(fromFormatter) ? '' : fromFormatter.toString() : innerHtml;
-            node.setAttribute('aria-label', innerHtml + ' column header ' + cell.column.headerText);
+            node.setAttribute('aria-label', (innerHtml === '' ? 'empty' : innerHtml) + ' column header ' + cell.column.headerText);
+            if (!ej2_base_1.isNullOrUndefined(cell.column.headerText)) {
+                node.setAttribute('aria-label', innerHtml + ' column header ' + cell.column.headerText);
+            }
             if (this.evaluate(node, cell, data, attributes, fData) && column.type !== 'checkbox') {
@@ -96,3 +99,3 @@ this.appendHtml(node, innerHtml, column.getDomSetter ? column.getDomSetter() : 'innerHTML');
                 node.classList.add('e-gridchkbox');
-                node.setAttribute('aria-label', 'column header ' + cell.column.headerText);
+                node.setAttribute('aria-label', 'checkbox');
                 if (this.parent.selectionSettings.persistSelection) {
@@ -118,2 +121,3 @@ value = value === 'true';
                 obj.appendTo(node.firstElementChild);
+                node.setAttribute('aria-label', obj.checked + ' column header ' + cell.column.headerText);
             }
@@ -120,0 +124,0 @@ return node;

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

@@ -53,3 +53,4 @@ var __extends = (this && this.__extends) || (function () {
             var button = this.buttonElement.cloneNode();
-            ej2_base_1.attributes(button, { 'id': this.parent.element.id + (buttonOption.type || '') + '_' + index, 'type': 'button' });
+            ej2_base_1.attributes(button, { 'id': this.parent.element.id + (buttonOption.type || '') + '_' + index, 'type': 'button',
+                title: buttonOption.buttonOption.content || buttonOption.type });
             button.onclick = buttonOption.buttonOption.click;
@@ -56,0 +57,0 @@ node.firstElementChild.appendChild(new ej2_buttons_1.Button(buttonOption.buttonOption, button).element);

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

@@ -44,3 +44,3 @@ import { IRenderer, IGrid, NotifyArgs, IModelGenerator } from '../base/interface';
      */
-    createContentTable(): Element;
+    createContentTable(id: String): Element;
     private splitRows(idx);
@@ -47,0 +47,0 @@ /**

src/grid/renderer/content-renderer.js

@@ -57,5 +57,2 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/util", "../base/constant", "./row-renderer", "./cell-merge-renderer", "../services/row-model-generator", "../services/group-model-generator", "../base/util"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, util_1, events, row_renderer_1, cell_merge_renderer_1, row_model_generator_1, group_model_generator_1, util_2) {
             });
-            if (!ej2_base_1.Browser.isDevice) {
-                innerDiv.setAttribute('tabindex', '0');
-            }
             this.ariaService.setOptions(innerDiv, { busy: false });
@@ -68,3 +65,3 @@ div.appendChild(innerDiv);
             var contentDiv = this.getPanel();
-            contentDiv.appendChild(this.createContentTable());
+            contentDiv.appendChild(this.createContentTable('_content_table'));
             this.setTable(contentDiv.querySelector('.e-table'));
@@ -79,3 +76,3 @@ this.ariaService.setOptions(this.getTable(), {
         };
-        ContentRender.prototype.createContentTable = function () {
+        ContentRender.prototype.createContentTable = function (id) {
             var innerDiv = this.getPanel().firstChild;
@@ -85,3 +82,3 @@ var table = ej2_base_3.createElement('table', {
                     cellspacing: '0.25px', role: 'grid',
-                    id: this.parent.element.id + '_content_table'
+                    id: this.parent.element.id + id
                 }
@@ -298,4 +295,4 @@ });
             if (this.getColGroup()) {
-                var colGroup = this.getColGroup();
-                colGroup.innerHTML = this.parent.element.querySelector('.e-gridheader').querySelector('colgroup').innerHTML;
+                var colGroup = this.parent.element.querySelector('.e-gridheader').querySelector('colgroup').cloneNode(true);
+                this.getTable().replaceChild(colGroup, this.getColGroup());
                 this.setColGroup(colGroup);
@@ -302,0 +299,0 @@ }

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

@@ -13,2 +13,4 @@ import { IRenderer, IGrid } from '../base/interface';
     private aggregates;
+    private freezeContentRender;
+    private freezeTable;
     constructor(gridModule?: IGrid, serviceLocator?: ServiceLocator);
@@ -23,3 +25,3 @@ /**
     renderTable(): void;
-    private renderSummaryContent(e?);
+    private renderSummaryContent(e?, table?, cStart?, cEnd?);
     refresh(e?: {
@@ -26,0 +28,0 @@ aggregates?: Object;

src/grid/renderer/footer-renderer.js

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/constant", "./content-renderer", "./row-renderer", "../services/summary-model-generator"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, constant_1, content_renderer_1, row_renderer_1, summary_model_generator_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/constant", "./content-renderer", "./row-renderer", "../services/summary-model-generator", "../base/enum"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, constant_1, content_renderer_1, row_renderer_1, summary_model_generator_1, enum_1) {
     "use strict";
@@ -23,2 +23,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
             _this.modelGenerator = new summary_model_generator_1.SummaryModelGenerator(_this.parent);
+            _this.freezeContentRender = serviceLocator.getService('rendererFactory').getRenderer(enum_1.RenderType.Content);
             _this.addEventListener();
@@ -30,2 +31,13 @@ return _this;
             var innerDiv = ej2_base_1.createElement('div', { className: 'e-summarycontent' });
+            if (this.parent.getFrozenColumns()) {
+                var fDiv = ej2_base_1.createElement('div', { className: 'e-frozenfootercontent' });
+                var mDiv = ej2_base_1.createElement('div', { className: 'e-movablefootercontent' });
+                innerDiv.appendChild(fDiv);
+                innerDiv.appendChild(mDiv);
+                this.freezeContentRender.setFrozenContent(fDiv);
+                this.freezeContentRender.setMovableContent(mDiv);
+                if (ej2_base_3.Browser.isDevice) {
+                    mDiv.style.overflowX = 'scroll';
+                }
+            }
             if (ej2_base_3.Browser.isDevice) {
@@ -45,13 +57,24 @@ innerDiv.style.overflowX = 'scroll';
             var contentDiv = this.getPanel();
-            var innerDiv = this.createContentTable();
+            var innerDiv = this.createContentTable('_footer_table');
             var table = innerDiv.querySelector('.e-table');
             var tFoot = ej2_base_1.createElement('tfoot');
             table.appendChild(tFoot);
+            if (this.parent.getFrozenColumns()) {
+                var freezeTable = table.cloneNode(true);
+                this.freezeContentRender.getFrozenContent().appendChild(freezeTable);
+                this.freezeTable = freezeTable;
+                this.freezeContentRender.getMovableContent().appendChild(table);
+                ej2_base_1.remove(table.querySelector('colgroup'));
+                var colGroup = ((this.parent.getHeaderContent().querySelector('.e-movableheader').querySelector('colgroup')).cloneNode(true));
+                table.insertBefore(colGroup, table.querySelector('tbody'));
+            }
             this.setTable(table);
         };
-        FooterRenderer.prototype.renderSummaryContent = function (e) {
+        FooterRenderer.prototype.renderSummaryContent = function (e, table, cStart, cEnd) {
             var input = this.parent.dataSource instanceof Array ? this.parent.dataSource : this.parent.currentViewData;
             var summaries = this.modelGenerator.getData();
-            var dummies = this.modelGenerator.getColumns();
-            var rows = this.modelGenerator.generateRows(input, e || this.aggregates);
+            var dummies = ej2_base_1.isNullOrUndefined(cStart) ? this.modelGenerator.getColumns() :
+                this.modelGenerator.getColumns(cStart, cEnd);
+            var rows = ej2_base_1.isNullOrUndefined(cStart) ? this.modelGenerator.generateRows(input, e || this.aggregates) :
+                this.modelGenerator.generateRows(input, e || this.aggregates, cStart, cEnd);
             var fragment = document.createDocumentFragment();
@@ -68,12 +91,18 @@ var rowrenderer = new row_renderer_1.RowRenderer(this.locator, null, this.parent);
             }
-            this.getTable().tFoot.appendChild(fragment);
+            table.tFoot.appendChild(fragment);
             this.aggregates = e;
         };
         FooterRenderer.prototype.refresh = function (e) {
+            if (this.parent.getFrozenColumns()) {
+                this.freezeTable.tFoot.innerHTML = '';
+                this.renderSummaryContent(e, this.freezeTable, 0, this.parent.getFrozenColumns());
+            }
             this.getTable().tFoot.innerHTML = '';
-            this.renderSummaryContent(e);
+            this.renderSummaryContent(e, this.getTable(), this.parent.getFrozenColumns());
             this.onScroll();
         };
         FooterRenderer.prototype.refreshCol = function () {
-            var headerCol = this.parent.element.querySelector('.e-gridheader').querySelector('colgroup').cloneNode(true);
+            var headerCol = this.parent.getFrozenColumns() ? ((this.parent.getHeaderContent().querySelector('.e-movableheader').
+                querySelector('colgroup')).cloneNode(true)) :
+                this.parent.element.querySelector('.e-gridheader').querySelector('colgroup').cloneNode(true);
             this.getTable().replaceChild(headerCol, this.getColGroup());
@@ -80,0 +109,0 @@ this.setColGroup(headerCol);

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

@@ -15,2 +15,3 @@ import { IRenderer, IGrid } from '../base/interface';
     private colgroup;
+    private caption;
     protected colDepth: number;
@@ -17,0 +18,0 @@ private column;

src/grid/renderer/header-renderer.js

@@ -155,2 +155,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/enum", "./row-renderer", "../models/cell", "../models/row", "../base/constant", "@syncfusion/ej2-base", "../base/util"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, enum_1, row_renderer_1, cell_1, row_1, events, ej2_base_4, util_1) {
             var tbody = ej2_base_2.createElement('tbody', { className: this.parent.frozenRows ? '' : 'e-hide' });
+            this.caption = ej2_base_2.createElement('caption', { innerHTML: this.parent.element.id + '_header_table', className: 'e-hide' });
             var colGroup = ej2_base_2.createElement('colgroup');
@@ -176,2 +177,3 @@ var rowBody = ej2_base_2.createElement('tr');
             table.appendChild(tbody);
+            table.appendChild(this.caption);
             this.ariaService.setOptions(table, { colcount: gObj.getColumns().length.toString() });
@@ -178,0 +180,0 @@ return table;

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

 import { KeyboardEventArgs } from '@syncfusion/ej2-base';
-import { IGrid, IFocus, FocusInfo, FocusedContainer, IIndex, SwapInfo } from '../base/interface';
+import { IGrid, IFocus, FocusInfo, FocusedContainer, IIndex, CellFocusArgs, SwapInfo } from '../base/interface';
 import { Row } from '../models/row';
@@ -22,2 +22,3 @@ import { Cell } from '../models/cell';
     private skipFocus;
+    private passiveHandler;
     private prevIndexes;
@@ -27,2 +28,4 @@ constructor(parent: IGrid);
     protected onFocus(): void;
+    protected passiveFocus(e: FocusEvent): void;
+    protected onBlur(e?: FocusEvent): void;
     onClick(e: Event | {
@@ -38,3 +41,3 @@ target: Element;
     focus(e?: KeyboardEventArgs): void;
-    protected removeFocus(): void;
+    protected removeFocus(e?: FocusEvent): void;
     protected addFocus(info: FocusInfo, e?: KeyboardEventArgs): void;
@@ -47,5 +50,7 @@ protected refreshMatrix(content?: boolean): Function;
     clearOutline(): void;
+    clearIndicator(): void;
     getPrevIndexes(): IIndex;
     forgetPrevious(): void;
     setActiveByKey(action: string, active: IFocus): void;
+    internalCellFocus(e: CellFocusArgs): void;
 }
@@ -80,11 +85,10 @@ /**
     getTable(): HTMLTableElement;
-    onKeyPress(e: KeyboardEventArgs): void;
+    onKeyPress(e: KeyboardEventArgs): void | boolean;
     getCurrentFromAction(action: string, navigator?: number[], isPresent?: boolean, e?: KeyboardEventArgs): number[];
     onClick(e: Event, force?: boolean): void | boolean;
     getFocusInfo(): FocusInfo;
-    protected getFocusable(element: HTMLElement): HTMLElement;
+    getFocusable(element: HTMLElement): HTMLElement;
     selector(row: Row<Column>, cell: Cell<Column>): boolean;
     jump(action: string, current: number[]): SwapInfo;
     getNextCurrent(previous?: number[], swap?: SwapInfo, active?: IFocus, action?: string): number[];
-    protected getCurrent(previous?: number[], swap?: SwapInfo, active?: IFocus, action?: string, isHeader?: boolean): number[];
     generateRows(rows?: Row<Column>[], optionals?: Object): void;
@@ -94,3 +98,2 @@ getInfo(e?: KeyboardEventArgs): FocusedContainer;
     protected shouldFocusChange(e: KeyboardEventArgs): boolean;
-    protected isFocusChange(e: KeyboardEventArgs, index: number[], table: HTMLTableElement, isHeader?: boolean): boolean;
 }
@@ -113,5 +116,2 @@ /**
 }
-/**
- * @hidden
- */
 export declare class FixedContentFocus extends ContentFocus {
@@ -122,5 +122,2 @@ getTable(): HTMLTableElement;
 }
-/**
- * @hidden
- */
 export declare class FixedHeaderFocus extends HeaderFocus {
@@ -127,0 +124,0 @@ jump(action: string, current: number[]): SwapInfo;

src/grid/services/focus-strategy.js

@@ -20,3 +20,3 @@ var __extends = (this && this.__extends) || (function () {
             this.forget = true;
-            this.skipFocus = false;
+            this.skipFocus = true;
             this.prevIndexes = {};
@@ -28,3 +28,5 @@ this.parent = parent;
             var target = e.target;
-            this.skipFocus = ej2_base_1.closest(target, 'e-pager') !== null;
+            this.skipFocus = ej2_base_1.closest(target, '.e-pager') === null && !target.classList.contains('e-grid') &&
+                !target.classList.contains('e-content') && !target.classList.contains('e-gridheader')
+                && !target.classList.contains('e-movablecontent');
         };
@@ -35,3 +37,3 @@ FocusStrategy.prototype.onFocus = function () {
             }
-            this.setActive(true);
+            this.setActive(this.parent.frozenRows === 0, this.parent.frozenColumns !== 0);
             var current = this.getContent().matrix.get(0, -1, [0, 1], null, this.getContent().validator());
@@ -44,4 +46,25 @@ this.getContent().matrix.select(current[0], current[1]);
         };
+        FocusStrategy.prototype.passiveFocus = function (e) {
+            if (this.parent.isDestroyed) {
+                return;
+            }
+            if (e.target && e.target.classList.contains('e-detailcell')) {
+                this.currentInfo.skipAction = false;
+                ej2_base_1.addClass([this.currentInfo.element], ['e-focused', 'e-focus']);
+            }
+        };
+        FocusStrategy.prototype.onBlur = function (e) {
+            if ((e && (!e.relatedTarget || ej2_base_1.closest(e.relatedTarget, '.e-grid')))) {
+                return;
+            }
+            this.removeFocus();
+            this.skipFocus = false;
+            this.currentInfo.skipAction = false;
+            this.onFocus();
+            this.getContent().getFocusInfo().elementToFocus.tabIndex = 0;
+        };
         FocusStrategy.prototype.onClick = function (e, force) {
             var isContent = !ej2_base_1.isNullOrUndefined(ej2_base_1.closest(e.target, '.e-gridcontent'));
+            var isHeader = !ej2_base_1.isNullOrUndefined(ej2_base_1.closest(e.target, '.e-gridheader'));
+            isContent = isContent && isHeader ? !isContent : isContent;
             var isFrozen = !ej2_base_1.isNullOrUndefined(ej2_base_1.closest(e.target, '.e-frozencontent')) ||
@@ -55,2 +78,3 @@ !ej2_base_1.isNullOrUndefined(ej2_base_1.closest(e.target, '.e-frozenheader'));
                 e.target.classList.contains('e-filtermenudiv')) {
+                this.clearOutline();
                 return;
@@ -91,4 +115,8 @@ }
             this.setActiveByKey(e.action, this.getContent());
+            var returnVal = this.getContent().onKeyPress(e);
+            if (returnVal === false) {
+                this.clearIndicator();
+                return;
+            }
             e.preventDefault();
-            this.getContent().onKeyPress(e);
             this.focus(e);
@@ -101,2 +129,6 @@ };
             }
+            if (this.currentInfo.skipAction) {
+                this.clearIndicator();
+                return true;
+            }
             return (this.parent.editSettings.mode !== 'batch' && (this.parent.isEdit || ['insert', 'f2', 'delete'].indexOf(e.action) > -1)
@@ -127,3 +159,3 @@ || (ej2_base_1.closest(document.activeElement, '.e-filterbarcell') !== null && ['enter', 'leftArrow', 'rightArrow'].indexOf(e.action) > -1)
         };
-        FocusStrategy.prototype.removeFocus = function () {
+        FocusStrategy.prototype.removeFocus = function (e) {
             if (!this.currentInfo.element) {
@@ -133,3 +165,3 @@ return;
             ej2_base_1.removeClass([this.currentInfo.element, this.currentInfo.elementToFocus], ['e-focused', 'e-focus']);
-            this.currentInfo.elementToFocus.tabIndex = -1;
+            this.currentInfo.element.tabIndex = -1;
         };
@@ -205,2 +237,4 @@ FocusStrategy.prototype.addFocus = function (info, e) {
             ej2_base_1.EventHandler.add(this.parent.element, 'focus', this.onFocus, this);
+            this.parent.element.addEventListener('focus', this.passiveHandler = function (e) { return _this.passiveFocus(e); }, true);
+            ej2_base_1.EventHandler.add(this.parent.element, 'focusout', this.onBlur, this);
             this.parent.on(event.keyPressed, this.onKeyPress, this);
@@ -212,2 +246,3 @@ this.parent.on(event.click, this.onClick, this);
             ['start-edit', 'start-add'].forEach(function (evt) { return _this.parent.on(evt, _this.clearOutline, _this); });
+            ['sorting'].forEach(function (action) { return _this.parent.on(action + "-complete", _this.restoreFocus, _this); });
             this.parent.on(event.batchAdd, this.refreshMatrix(true), this);
@@ -217,2 +252,3 @@ this.parent.on(event.batchDelete, this.refreshMatrix(true), this);
             this.parent.on(event.onEmpty, this.refreshMatrix(true), this);
+            this.parent.on(event.cellFocused, this.internalCellFocus, this);
         };
@@ -226,2 +262,4 @@ FocusStrategy.prototype.removeEventListener = function () {
             ej2_base_1.EventHandler.remove(this.parent.element, 'focus', this.onFocus);
+            ej2_base_1.EventHandler.remove(this.parent.element, 'focusout', this.onBlur);
+            this.parent.element.removeEventListener('focus', this.passiveHandler, true);
             this.parent.off(event.keyPressed, this.onKeyPress);
@@ -233,2 +271,3 @@ this.parent.off(event.click, this.onClick);
             ['start-edit', 'start-add'].forEach(function (evt) { return _this.parent.off(evt, _this.clearOutline); });
+            ['sorting'].forEach(function (action) { return _this.parent.off(action + "-complete", _this.restoreFocus); });
             this.parent.off(event.batchAdd, this.refreshMatrix(true));
@@ -238,2 +277,3 @@ this.parent.off(event.batchDelete, this.refreshMatrix(true));
             this.parent.off(event.onEmpty, this.refreshMatrix(true));
+            this.parent.off(event.cellFocused, this.internalCellFocus);
         };
@@ -247,3 +287,6 @@ FocusStrategy.prototype.destroy = function () {
         FocusStrategy.prototype.clearOutline = function () {
-            this.getContent().matrix.current = this.getContent().matrix.get(this.parent.frozenRows ? 1 : 0, -1, [0, 1], 'downArrow', this.getContent().validator());
+            this.getContent().matrix.current = this.getContent().matrix.get(0, -1, [0, 1], 'downArrow', this.getContent().validator());
+            this.clearIndicator();
+        };
+        FocusStrategy.prototype.clearIndicator = function () {
             if (!this.currentInfo.element || !this.currentInfo.elementToFocus) {
@@ -264,3 +307,3 @@ return;
             var _this = this;
-            if (this.parent.getFrozenColumns() === 0 && this.parent.frozenRows === 0) {
+            if (this.parent.frozenColumns === 0 && this.parent.frozenRows === 0) {
                 return;
@@ -272,3 +315,3 @@ }
                 'end': function () { return ({ toHeader: !info.isContent, toFrozen: false }); },
-                'ctrlHome': function () { return ({ toHeader: true, toFrozen: _this.parent.getFrozenColumns() !== 0 }); },
+                'ctrlHome': function () { return ({ toHeader: true, toFrozen: _this.parent.frozenColumns !== 0 }); },
                 'ctrlEnd': function () { return ({ toHeader: false, toFrozen: false }); }
@@ -284,2 +327,13 @@ };
         };
+        FocusStrategy.prototype.internalCellFocus = function (e) {
+            if (!(e.byKey && e.container.isContent && e.keyArgs.action === 'enter'
+                && (e.parent.classList.contains('e-detailcell') ||
+                    e.parent.classList.contains('e-unboundcell') || e.parent.classList.contains('e-templatecell')))) {
+                return;
+            }
+            this.clearIndicator();
+            var focusEle = this.getContent().getFocusable(this.getFocusedElement());
+            this.setFocusedElement(focusEle);
+            this.currentInfo.skipAction = true;
+        };
         return FocusStrategy;
@@ -306,2 +360,5 @@ }());
             columnIndex = Math.max(0, Math.min(columnIndex + navigator[1], this.matrix[rowIndex].length - 1));
+            if (tmp + navigator[1] > this.matrix[rowIndex].length - 1 && validator(rowIndex, columnIndex, action)) {
+                return [rowIndex, tmp];
+            }
             var first = this.first(this.matrix[rowIndex], columnIndex, navigator, true, action);
@@ -375,3 +432,3 @@ columnIndex = first === null ? tmp : first;
         ContentFocus.prototype.getTable = function () {
-            return (this.parent.getFrozenColumns() ? this.parent.getContent().querySelector('.e-movablecontent .e-table') :
+            return (this.parent.frozenColumns ? this.parent.getContent().querySelector('.e-movablecontent .e-table') :
                 this.parent.getContentTable());
@@ -385,2 +442,8 @@ };
             }
+            if ((['tab', 'shiftTab'].indexOf(e.action) > -1 && this.matrix.current || []).toString() === current.toString()) {
+                if (current.toString() === [this.matrix.rows, this.matrix.columns].toString() ||
+                    current.toString() === [0, 0].toString()) {
+                    return false;
+                }
+            }
             this.matrix.select(current[0], current[1]);
@@ -402,3 +465,5 @@ };
             var target = e.target;
-            target = (target.classList.contains('e-rowcell') ? target : ej2_base_1.closest(target, 'td.e-rowcell'));
+            target = (target.classList.contains('e-rowcell') ? target : ej2_base_1.closest(target, 'td'));
+            target = target ? target : ej2_base_1.closest(e.target, 'td.e-detailrowcollapse')
+                || ej2_base_1.closest(e.target, 'td.e-detailrowexpand');
             if (!target) {
@@ -420,4 +485,5 @@ return;
             info.element = this.getTable().rows[rowIndex].cells[cellIndex];
-            info.elementToFocus = this.getFocusable(info.element);
-            info.outline = !info.element.classList.contains('e-detailcell');
+            info.elementToFocus = !info.element.classList.contains('e-unboundcell') && !info.element.classList.contains('e-detailcell')
+                && !info.element.classList.contains('e-templatecell') ? this.getFocusable(info.element) : info.element;
+            info.outline = true;
             return info;
@@ -438,7 +504,8 @@ };
                 || (!row.isDataRow && types.indexOf(cell.cellType) > -1)
-                || (cell.column && cell.column.type === 'checkbox'))
+                || (cell.column && cell.column.type === 'checkbox')
+                || (cell.cellType === enum_1.CellType.CommandColumn))
                 && !(row.edit === 'delete' && row.isDirty);
         };
         ContentFocus.prototype.jump = function (action, current) {
-            var frozenSwap = this.parent.getFrozenColumns() > 0 &&
+            var frozenSwap = this.parent.frozenColumns > 0 &&
                 ((action === 'leftArrow' || action === 'shiftTab') && current[1] === 0);
@@ -466,18 +533,6 @@ var enterFrozen = this.parent.frozenRows !== 0 && action === 'shiftEnter';
         };
-        ContentFocus.prototype.getCurrent = function (previous, swap, active, action, isHeader) {
-            if (previous === void 0) { previous = []; }
-            var current = [];
-            if (action === 'leftArrow' || action === 'shiftTab') {
-                current[0] = previous[0];
-                current[1] = active.matrix.columns + 1;
-            }
-            else if (action === (isHeader ? 'upArrow' : 'downArrow') || action === (isHeader ? 'shiftEnter' : 'enter')) {
-                current[0] = isHeader ? this.matrix.matrix.length : -1;
-                current[1] = previous[1];
-            }
-            return current;
-        };
         ContentFocus.prototype.generateRows = function (rows, optionals) {
             var matrix = optionals.matrix, handlerInstance = optionals.handlerInstance;
-            var defaultLen = this.parent.allowFiltering && this.parent.filterSettings.type === 'filterbar' ? 2 : 1;
+            var len = handlerInstance.matrix.matrix.length;
+            var defaultLen = this.parent.allowFiltering && this.parent.filterSettings.type === 'filterbar' ? len + 1 : len;
             handlerInstance.matrix.matrix = handlerInstance.matrix.matrix.slice(0, defaultLen);
@@ -518,14 +573,12 @@ handlerInstance.matrix.rows = defaultLen;
             var _a = this.matrix.current, _b = _a[0], rIndex = _b === void 0 ? -1 : _b, _c = _a[1], cIndex = _c === void 0 ? -1 : _c;
-            return this.isFocusChange(e, [rIndex, cIndex], this.getTable());
-        };
-        ContentFocus.prototype.isFocusChange = function (e, index, table, isHeader) {
-            if (index[0] < 0 || index[1] < 0) {
+            if (rIndex < 0 || cIndex < 0) {
                 return true;
             }
-            var cell = ej2_base_1.getValue(index[0] + ".cells." + index[1], table.rows);
+            var cell = ej2_base_1.getValue(rIndex + ".cells." + cIndex, this.getTable().rows);
             if (!cell) {
                 return true;
             }
-            return e.action === 'enter' || e.action === (isHeader ? 'altDownArrow' : 'shiftEnter')
-                ? isHeader ? !cell.classList.contains('e-headercell') : cell.classList.contains('e-rowcell') : true;
+            return e.action === 'enter' || e.action === 'shiftEnter' ?
+                cell.classList.contains('e-rowcell') && !cell.classList.contains('e-unboundcell')
+                    && !cell.classList.contains('e-templatecell') && !cell.classList.contains('e-detailcell') : true;
         };
@@ -541,4 +594,4 @@ return ContentFocus;
         HeaderFocus.prototype.getTable = function () {
-            return (this.parent.getFrozenColumns()
-                ? this.parent.getHeaderContent().querySelector('.e-movableheader .e-table') : this.parent.getHeaderTable());
+            return (this.parent.frozenColumns ? this.parent.getHeaderContent().querySelector('.e-movableheader .e-table') :
+                this.parent.getHeaderTable());
         };
@@ -571,6 +624,7 @@ HeaderFocus.prototype.onClick = function (e) {
         HeaderFocus.prototype.selector = function (row, cell) {
-            return (cell.visible && (cell.column.field !== undefined || cell.isTemplate)) || cell.column.type === 'checkbox';
+            return (cell.visible && (cell.column.field !== undefined || cell.isTemplate)) || cell.column.type === 'checkbox' ||
+                cell.cellType === enum_1.CellType.StackedHeader;
         };
         HeaderFocus.prototype.jump = function (action, current) {
-            var frozenSwap = this.parent.getFrozenColumns() > 0 &&
+            var frozenSwap = this.parent.frozenColumns > 0 &&
                 (action === 'leftArrow' || action === 'shiftTab') && current[1] === 0;
@@ -616,3 +670,10 @@ var enterFrozen = this.parent.frozenRows !== 0 && action === 'enter';
             var _a = this.matrix.current, rIndex = _a[0], cIndex = _a[1];
-            return this.isFocusChange(e, [rIndex, cIndex], this.getTable(), true);
+            if (rIndex < 0 || cIndex < 0) {
+                return true;
+            }
+            var cell = ej2_base_1.getValue(rIndex + ".cells." + cIndex, this.getTable().rows);
+            if (!cell) {
+                return true;
+            }
+            return e.action === 'enter' || e.action === 'altDownArrow' ? !cell.classList.contains('e-headercell') : true;
         };
@@ -641,3 +702,12 @@ return HeaderFocus;
             if (previous === void 0) { previous = []; }
-            return this.getCurrent(previous, swap, active, action);
+            var current = [];
+            if (action === 'leftArrow' || action === 'shiftTab') {
+                current[0] = previous[0];
+                current[1] = active.matrix.columns + 1;
+            }
+            else if (action === 'downArrow' || action === 'enter') {
+                current[0] = -1;
+                current[1] = previous[1];
+            }
+            return current;
         };
@@ -666,3 +736,12 @@ return FixedContentFocus;
             if (previous === void 0) { previous = []; }
-            return this.getCurrent(previous, swap, active, action, true);
+            var current = [];
+            if (action === 'leftArrow' || action === 'shiftTab') {
+                current[0] = previous[0];
+                current[1] = active.matrix.columns + 1;
+            }
+            else if (action === 'upArrow' || action === 'shiftEnter') {
+                current[0] = this.matrix.matrix.length;
+                current[1] = previous[1];
+            }
+            return current;
         };
@@ -669,0 +748,0 @@ return FixedHeaderFocus;

src/grid/services/summary-model-generator.d.ts

@@ -21,5 +21,5 @@ import { IModelGenerator, IGrid } from '../base/interface';
     columnSelector(column: AggregateColumnModel): boolean;
-    getColumns(): Column[];
-    generateRows(input: Object[] | Group, args?: Object): Row<AggregateColumnModel>[];
-    getGeneratedRow(summaryRow: AggregateRowModel, data: Object, raw: number): Row<AggregateColumnModel>;
+    getColumns(start?: number, end?: number): Column[];
+    generateRows(input: Object[] | Group, args?: Object, start?: number, end?: number): Row<AggregateColumnModel>[];
+    getGeneratedRow(summaryRow: AggregateRowModel, data: Object, raw: number, start: number, end: number): Row<AggregateColumnModel>;
     getGeneratedCell(column: Column, summaryRow: AggregateRowModel, cellType?: CellType, indent?: string): Cell<AggregateColumnModel>;
@@ -26,0 +26,0 @@ private buildSummaryData(data, args?);

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

@@ -35,3 +35,3 @@ var __extends = (this && this.__extends) || (function () {
         };
-        SummaryModelGenerator.prototype.getColumns = function () {
+        SummaryModelGenerator.prototype.getColumns = function (start, end) {
             var columns = [];
@@ -45,5 +45,5 @@ if (this.parent.allowGrouping) {
             columns.push.apply(columns, this.parent.getColumns());
-            return columns;
+            return ej2_base_1.isNullOrUndefined(start) ? columns : columns.slice(start, end);
         };
-        SummaryModelGenerator.prototype.generateRows = function (input, args) {
+        SummaryModelGenerator.prototype.generateRows = function (input, args, start, end) {
             var _this = this;
@@ -56,7 +56,7 @@ if (this.parent.currentViewData.length === 0) {
             this.getData().forEach(function (row, index) {
-                rows.push(_this.getGeneratedRow(row, data[index], args ? args.level : undefined));
+                rows.push(_this.getGeneratedRow(row, data[index], args ? args.level : undefined, start, end));
             });
             return rows;
         };
-        SummaryModelGenerator.prototype.getGeneratedRow = function (summaryRow, data, raw) {
+        SummaryModelGenerator.prototype.getGeneratedRow = function (summaryRow, data, raw, start, end) {
             var _this = this;
@@ -66,6 +66,6 @@ var tmp = [];
             var indentLength = this.parent.groupSettings.columns.length + (this.parent.detailTemplate ? 1 : 0);
-            this.getColumns().forEach(function (value, index) { return tmp.push(_this.getGeneratedCell(value, summaryRow, index >= indentLength ? _this.getCellType() : enum_1.CellType.Indent, indents[index])); });
+            this.getColumns(start, end).forEach(function (value, index) { return tmp.push(_this.getGeneratedCell(value, summaryRow, index >= indentLength ? _this.getCellType() : enum_1.CellType.Indent, indents[index])); });
             var row = new row_1.Row({ data: data, attributes: { class: 'e-summaryrow' } });
             row.cells = tmp;
-            row.visible = tmp.some(function (cell) { return cell.isDataCell && cell.visible; });
+            row.visible = tmp.some(function (cell) { return cell.isDataCell && cell.visible; }) || !!this.parent.getFrozenColumns();
             return row;
@@ -72,0 +72,0 @@ };

src/pager/numeric-container.js

@@ -30,3 +30,4 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3) {
                     className: 'e-link e-numericitem e-spacing e-pager-default',
-                    attrs: { role: 'link', tabindex: '-1', 'aria-label': 'Goto Page ' + i }
+                    attrs: { role: 'link', tabindex: '-1', 'aria-label': 'Goto Page ' + i,
+                        href: 'javascript:void(0);', name: 'Goto page' + i }
                 });
@@ -81,2 +82,3 @@ if (pagerObj.currentPage === i) {
         NumericContainer.prototype.renderPrevPagerSet = function (pagerContainer) {
+            var prevPager = ej2_base_3.createElement('div');
             this.PP = ej2_base_3.createElement('a', {
@@ -87,8 +89,12 @@ className: 'e-link e-pp e-spacing', innerHTML: '...',
                     'aria-label': this.pagerModule.getLocalizedLabel('previousPagerTooltip'),
-                    tabindex: '-1'
+                    tabindex: '-1',
+                    name: this.pagerModule.getLocalizedLabel('previousPagerTooltip'),
+                    href: 'javascript:void(0);'
                 }
             });
-            pagerContainer.appendChild(this.PP);
+            prevPager.appendChild(this.PP);
+            pagerContainer.appendChild(prevPager);
         };
         NumericContainer.prototype.renderNextPagerSet = function (pagerContainer) {
+            var nextPager = ej2_base_3.createElement('div');
             this.NP = ej2_base_3.createElement('a', {
@@ -99,6 +105,9 @@ className: 'e-link e-np e-spacing',
                     'aria-label': this.pagerModule.getLocalizedLabel('nextPagerTooltip'),
-                    tabindex: '-1'
+                    tabindex: '-1',
+                    name: this.pagerModule.getLocalizedLabel('nextPagerTooltip'),
+                    href: 'javascript:void(0);'
                 }
             });
-            pagerContainer.appendChild(this.NP);
+            nextPager.appendChild(this.NP);
+            pagerContainer.appendChild(nextPager);
         };
@@ -160,2 +169,3 @@ NumericContainer.prototype.renderNextNLast = function (pagerContainer) {
                 else {
+                    this.links[i].innerHTML = !pagerObj.customText ? pageNo.toString() : pagerObj.customText + pageNo;
                     this.links[i].style.display = 'none';
@@ -162,0 +172,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

23936647

increased by9.6%

Number of package files

280

increased by2.94%

Lines of code

240270

increased by20.26%

Dependency changes

• Updated@syncfusion/ej2-inputs@^15.4.28

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