@syncfusion/ej2-grids - npm Package Compare versions

Comparing version 15.4.29 to 15.4.30

CHANGELOG.md

@@ -9,2 +9,11 @@ # Changelog
 
+- Exporting is working fine with template column.
+- Aggregate with frozen columns scroller is working fine
+
+## 15.4.29-preview (2018-02-07)
+
+### Grid
+
+#### Bug Fixes
+
 - Renamed event `dataSourceChange` to `dataSourceChanged`.
@@ -11,0 +20,0 @@

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 15.4.28
+*  version : 15.4.29
 *  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.29",
+  "version": "15.4.30",
   "description": "Essential JS 2 Grid Component",
@@ -12,4 +12,4 @@ "author": "Syncfusion Inc.",
     "@syncfusion/ej2-base": "^15.4.23",
-    "@syncfusion/ej2-data": "^15.4.23",
-    "@syncfusion/ej2-navigations": "^15.4.27",
+    "@syncfusion/ej2-data": "^15.4.30",
+    "@syncfusion/ej2-navigations": "^15.4.30",
     "@syncfusion/ej2-inputs": "^15.4.29",
@@ -19,6 +19,6 @@ "@syncfusion/ej2-calendars": "^15.4.26",
     "@syncfusion/ej2-popups": "^15.4.27",
-    "@syncfusion/ej2-buttons": "^15.4.27",
+    "@syncfusion/ej2-buttons": "^15.4.30",
     "@syncfusion/ej2-lists": "^15.4.26",
-    "@syncfusion/ej2-excel-export": "^15.4.26",
-    "@syncfusion/ej2-pdf-export": "^15.4.29",
+    "@syncfusion/ej2-excel-export": "^15.4.30",
+    "@syncfusion/ej2-pdf-export": "^15.4.30",
     "@syncfusion/ej2-file-utils": "^15.4.26",
@@ -25,0 +25,0 @@ "@syncfusion/ej2-compression": "^15.4.26"

ReadMe.md

@@ -0,0 +0,0 @@ # Grid Overview

src/grid/actions/batch-edit.js

@@ -565,2 +565,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/enum", "../base/util", "../base/constant", "../renderer/row-renderer", "../renderer/cell-renderer", "../models/cell", "../services/row-model-generator"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, enum_1, util_1, events, row_renderer_1, cell_renderer_1, cell_1, row_model_generator_1) {
         BatchEdit.prototype.getColIndex = function (cells, index) {
+            var hiddencol = this.parent.groupSettings.columns.length;
             var indentCells = 0;
@@ -572,4 +573,4 @@ for (var m = 0; m < cells.length; m++) {
                 }
-                if (colIndex === index) {
-                    return m - indentCells;
+                if (colIndex === index - hiddencol) {
+                    return m - indentCells + hiddencol;
                 }
@@ -576,0 +577,0 @@ }

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

@@ -35,2 +35,3 @@ import { L10n } from '@syncfusion/ej2-base';
     protected foreignKeyData: Object[];
+    protected filterState: boolean;
     protected defaultConstants: Object;
@@ -94,7 +95,5 @@ protected values: Object;
     static getDistinct(json: Object[], field: string, column?: Column, foreignKeyData?: Object[]): Object;
-    static setDateObject(filterObject: PredicateModel): PredicateModel;
     static getPredicate(columns: PredicateModel[]): Predicate;
     private static generatePredicate(cols);
     private static getCaseValue(filter);
-    private static getDatePredicate(predicate);
     private static updateDateFilter(filter);
@@ -101,0 +100,0 @@ /**

src/grid/actions/checkbox-filter.js

@@ -7,2 +7,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) {
             this.existingPredicate = {};
+            this.filterState = true;
             this.defaultConstants = {
@@ -120,3 +121,3 @@ Search: 'Search',
                 this.sIcon = ej2_base_2.createElement('span', {
-                    className: 'e-searchclear e-search-icon e-icons', attrs: {
+                    className: 'e-searchclear e-search-icon e-icons e-input-group-icon', attrs: {
                         type: 'text', placeholder: this.getLocalizedLabel('Search')
@@ -154,3 +155,3 @@ }
                 width: (!ej2_base_1.isNullOrUndefined(util_1.parentsUntil(options.target, 'e-bigger')))
-                    || this.parent.element.classList.contains('e-device') ? 260 : 250,
+                    || this.parent.element.classList.contains('e-device') ? 260 : 255,
                 target: this.parent.element, animationSettings: { effect: 'None' },
@@ -178,3 +179,3 @@ buttons: [{
             if (!ej2_base_1.Browser.isDevice) {
-                util_3.getFilterMenuPostion(this.options.target, this.dialogObj);
+                util_3.getFilterMenuPostion(this.options.target, this.dialogObj, this.parent);
             }
@@ -204,16 +205,29 @@ else {
         CheckBoxFilter.prototype.btnClick = function (e) {
-            var text;
-            if (e.target.classList.contains('e-searchinput')) {
-                text = e.target.value;
+            if (this.filterState) {
+                if (e.target.tagName.toLowerCase() === 'input') {
+                    var args = {
+                        action: 'filtering', filterCollection: {
+                            field: this.options.field,
+                            operator: this.options.column.type === 'date' || this.options.column.type === 'datetime' ? 'equal' : 'contains',
+                            value: e.target.value, matchCase: false, type: this.options.column.type
+                        },
+                        field: this.options.field
+                    };
+                    e.target.value ? this.options.handler(args) : this.closeDialog();
+                }
+                else {
+                    var text = e.target.firstChild.textContent.toLowerCase();
+                    if (this.getLocalizedLabel(this.isExcel ? 'OK' : 'Filter').toLowerCase() === text) {
+                        this.fltrBtnHandler();
+                    }
+                    else if (this.getLocalizedLabel('Clear').toLowerCase() === text) {
+                        this.clearFilter();
+                    }
+                }
+                this.closeDialog();
             }
-            else {
-                text = e.target.firstChild.textContent.toLowerCase();
-            }
-            if (this.getLocalizedLabel(this.isExcel ? 'OK' : 'Filter').toLowerCase() === text) {
-                this.fltrBtnHandler();
-            }
-            else if (this.getLocalizedLabel('Clear').toLowerCase() === text) {
+            else if (!(e.target.tagName.toLowerCase() === 'input')) {
                 this.clearFilter();
+                this.closeDialog();
             }
-            this.closeDialog();
         };
@@ -227,3 +241,3 @@ CheckBoxFilter.prototype.fltrBtnHandler = function () {
                 field: this.options.field, predicate: 'or',
-                operator: optr, matchcase: caseSen, ignoreAccent: this.parent.filterSettings.ignoreAccent
+                operator: optr, matchCase: caseSen, ignoreAccent: this.parent.filterSettings.ignoreAccent
             };
@@ -240,11 +254,17 @@ var isNotEqual = this.itemsCnt !== checked.length && this.itemsCnt - checked.length < checked.length;
             var coll = [];
-            for (var i = 0; i < checked.length; i++) {
-                value = this.values[util_1.parentsUntil(checked[i], 'e-ftrchk').getAttribute('uid')];
-                fObj = ej2_base_1.extend({}, { value: value }, defaults);
-                if (value && !value.toString().length) {
-                    fObj.operator = isNotEqual ? 'notequal' : 'equal';
+            var searchInput = this.searchBox.querySelector('.e-searchinput');
+            if (checked.length !== this.itemsCnt || (searchInput.value && searchInput.value !== '')) {
+                for (var i = 0; i < checked.length; i++) {
+                    value = this.values[util_1.parentsUntil(checked[i], 'e-ftrchk').getAttribute('uid')];
+                    fObj = ej2_base_1.extend({}, { value: value }, defaults);
+                    if (value && !value.toString().length) {
+                        fObj.operator = isNotEqual ? 'notequal' : 'equal';
+                    }
+                    coll.push(fObj);
                 }
-                coll.push(this.options.type === 'date' ? CheckBoxFilter.setDateObject(fObj) : fObj);
+                this.initiateFilter(coll);
             }
-            this.initiateFilter(coll);
+            else {
+                this.clearFilter();
+            }
         };
@@ -274,6 +294,6 @@ CheckBoxFilter.prototype.initiateFilter = function (fColl) {
             var operator = 'contains';
-            var matchcase = true;
+            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, ignoreAccent);
+            var predicte;
             if (this.options.type === 'boolean') {
@@ -288,4 +308,4 @@ if (parsed !== undefined &&
                 }
-                predicte = new ej2_data_1.Predicate(this.options.field, operator, parsed, matchcase, ignoreAccent);
             }
+            predicte = new ej2_data_1.Predicate(this.options.field, operator, parsed, matchCase, ignoreAccent);
             if (this.options.type === 'date' || this.options.type === 'datetime') {
@@ -298,3 +318,3 @@ parsed = this.valueFormatter.fromView(val, this.options.parserFn, this.options.type);
                 predicte = util_1.getDatePredicate({
-                    field: this.options.field, operator: operator, value: parsed, matchCase: matchcase,
+                    field: this.options.field, operator: operator, value: parsed, matchCase: matchCase,
                     ignoreAccent: ignoreAccent
@@ -371,2 +391,3 @@ });
             this.processDataSource(null, true);
+            this.dialogObj.element.querySelector('.e-searchinput').focus();
             var args = {
@@ -467,2 +488,3 @@ requestType: events.filterAfterOpen,
             }
+            this.filterState = !btn.disabled;
             btn.dataBind();
@@ -474,2 +496,3 @@ ej2_base_1.removeClass([elem], ['e-check', 'e-stop', 'e-uncheck']);
             var cBoxes = ej2_base_2.createElement('div');
+            var btn = this.dlg.querySelector('.e-footer-content').querySelector('.e-btn').ej2_instances[0];
             this.itemsCnt = data.length;
@@ -493,2 +516,3 @@ if (data.length) {
                 this.updateIndeterminatenBtn();
+                btn.disabled = false;
             }
@@ -498,3 +522,6 @@ else {
                 this.cBox.innerHTML = cBoxes.innerHTML;
+                btn.disabled = true;
             }
+            this.filterState = !btn.disabled;
+            btn.dataBind();
             var args = { requestType: events.filterChoiceRequest, filterModel: this, dataSource: data };
@@ -535,29 +562,2 @@ this.parent.trigger(events.actionComplete, args);
         };
-        CheckBoxFilter.setDateObject = function (filterObject) {
-            var prevObj = ej2_base_1.extend({}, util_2.getActualProperties(filterObject));
-            var nextObj = ej2_base_1.extend({}, util_2.getActualProperties(filterObject));
-            var value = new Date(filterObject.value);
-            var prevDate = new Date(value.setDate(value.getDate() - 1));
-            var nextDate = new Date(value.setDate(value.getDate() + 2));
-            prevObj.value = prevDate;
-            nextObj.value = nextDate;
-            if (filterObject.operator === 'equal') {
-                nextObj.operator = 'lessthan';
-                nextObj.predicate = 'and';
-                prevObj.operator = 'greaterthan';
-                prevObj.predicate = 'and';
-            }
-            else if (filterObject.operator === 'notequal') {
-                nextObj.operator = 'greaterthanorequal';
-                nextObj.predicate = 'or';
-                prevObj.operator = 'lessthanorequal';
-                prevObj.predicate = 'or';
-            }
-            var predicateSt = new ej2_data_1.Predicate(prevObj.field, prevObj.operator, prevObj.value, false);
-            var predicateEnd = new ej2_data_1.Predicate(nextObj.field, nextObj.operator, nextObj.value, false);
-            filterObject.ejpredicate = filterObject.operator === 'equal' ? predicateSt.and(predicateEnd) :
-                predicateSt.or(predicateEnd);
-            filterObject.type = 'date';
-            return filterObject;
-        };
         CheckBoxFilter.getPredicate = function (columns) {
@@ -582,7 +582,7 @@ var cols = CheckBoxFilter.getDistinct(columns, 'field').records;
             if (first.type === 'date' || first.type === 'datetime') {
-                predicate = CheckBoxFilter.getDatePredicate(first);
+                predicate = util_1.getDatePredicate(first);
             }
             else {
                 predicate = first.ejpredicate ? first.ejpredicate :
-                    new ej2_data_1.Predicate(first.field, first.operator, first.value, CheckBoxFilter.getCaseValue(first), first.ignoreAccent);
+                    new ej2_data_1.Predicate(first.field, first.operator, first.value, !CheckBoxFilter.getCaseValue(first), first.ignoreAccent);
             }
@@ -593,6 +593,6 @@ for (var p = 1; p < len; p++) {
                     if (cols[p].type === 'date' || cols[p].type === 'datetime') {
-                        predicate.predicates.push(CheckBoxFilter.getDatePredicate(cols[p]));
+                        predicate.predicates.push(util_1.getDatePredicate(cols[p]));
                     }
                     else {
-                        predicate.predicates.push(new ej2_data_1.Predicate(cols[p].field, cols[p].operator, cols[p].value, CheckBoxFilter.getCaseValue(cols[p]), cols[p].ignoreAccent));
+                        predicate.predicates.push(new ej2_data_1.Predicate(cols[p].field, cols[p].operator, cols[p].value, !CheckBoxFilter.getCaseValue(cols[p]), cols[p].ignoreAccent));
                     }
@@ -602,3 +602,3 @@ }
                     if (cols[p].type === 'date' || cols[p].type === 'datetime') {
-                        predicate = predicate[(cols[p].predicate)](CheckBoxFilter.getDatePredicate(cols[p]), cols[p].ignoreAccent);
+                        predicate = predicate[(cols[p].predicate)](util_1.getDatePredicate(cols[p]), cols[p].ignoreAccent);
                     }
@@ -615,24 +615,14 @@ else {
         CheckBoxFilter.getCaseValue = function (filter) {
-            if (ej2_base_1.isNullOrUndefined(filter.ignoreCase) && ej2_base_1.isNullOrUndefined(filter.matchCase)) {
-                return false;
+            if (ej2_base_1.isNullOrUndefined(filter.matchCase)) {
+                return true;
             }
-            else if (ej2_base_1.isNullOrUndefined(filter.ignoreCase)) {
-                return !filter.matchCase;
-            }
             else {
-                return filter.ignoreCase;
+                return filter.matchCase;
             }
         };
-        CheckBoxFilter.getDatePredicate = function (predicate) {
-            if (predicate.value instanceof Date) {
-                predicate.ignoreCase = (['equal', 'notequal'].indexOf(predicate.operator) === -1) ? false : true;
-            }
-            return new ej2_data_1.Predicate(predicate.field, predicate.operator, predicate.value, predicate.ignoreCase);
-        };
         CheckBoxFilter.updateDateFilter = function (filter) {
-            if (filter.type !== 'date' && !(filter.value instanceof Date)) {
-                return filter;
+            if ((filter.type === 'date' || filter.type === 'datetime' || filter.value instanceof Date)) {
+                filter.type = filter.type || 'date';
             }
-            return ['equal', 'notequal'].indexOf(filter.operator) === -1 ? filter :
-                CheckBoxFilter.setDateObject(filter);
+            return filter;
         };
@@ -639,0 +629,0 @@ CheckBoxFilter.prototype.getModuleName = function () {

src/grid/actions/clipboard.d.ts

 import { IGrid, IAction } from '../base/interface';
 /**
- * `Clipboard` module is used to handle clipboard copy action.
+ * The `Clipboard` module is used to handle clipboard copy action.
  */
@@ -43,2 +43,3 @@ export declare class Clipboard implements IAction {
     destroy(): void;
+    private checkBoxSelection();
 }

src/grid/actions/clipboard.js

@@ -44,4 +44,5 @@ define(["require", "exports", "@syncfusion/ej2-base", "../base/constant"], function (require, exports, ej2_base_1, events) {
                 this.clipBoardTextArea.value = this.copyContent = '';
+                var rows = this.parent.getRows();
                 if (this.parent.selectionSettings.mode !== 'cell') {
-                    var rows = this.parent.getRows();
+                    var rows_1 = this.parent.getRows();
                     var selectedIndexes = this.parent.getSelectedRowIndexes().sort(function (a, b) { return a - b; });
@@ -56,7 +57,26 @@ if (withHeader) {
                         }
-                        this.getCopyData([].slice.call(rows[selectedIndexes[i]].querySelectorAll('.e-rowcell')), false, '\t', withHeader);
+                        this.getCopyData([].slice.call(rows_1[selectedIndexes[i]].querySelectorAll('.e-rowcell')), false, '\t', withHeader);
                     }
                 }
                 else {
-                    this.getCopyData([].slice.call(this.parent.element.querySelectorAll('.e-cellselectionbackground')), true, '\n', withHeader);
+                    var obj = this.checkBoxSelection();
+                    if (obj.status) {
+                        if (withHeader) {
+                            var headers = [];
+                            for (var i = 0; i < obj.colIndexes.length; i++) {
+                                headers.push(this.parent.getColumnHeaderByIndex(obj.colIndexes[i]));
+                            }
+                            this.getCopyData(headers, false, '\t', withHeader);
+                            this.copyContent += '\n';
+                        }
+                        for (var i = 0; i < obj.rowIndexes.length; i++) {
+                            if (i > 0) {
+                                this.copyContent += '\n';
+                            }
+                            this.getCopyData([].slice.call(rows[obj.rowIndexes[i]].querySelectorAll('.e-cellselectionbackground')), false, '\t', withHeader);
+                        }
+                    }
+                    else {
+                        this.getCopyData([].slice.call(this.parent.element.querySelectorAll('.e-cellselectionbackground')), true, '\n', withHeader);
+                    }
                 }
@@ -110,2 +130,31 @@ var args = {
         };
+        Clipboard.prototype.checkBoxSelection = function () {
+            var gridObj = this.parent;
+            var obj = { status: false };
+            if (gridObj.selectionSettings.mode === 'cell') {
+                var rowCellIndxes = gridObj.getSelectedRowCellIndexes();
+                var str = void 0;
+                var isBox = void 0;
+                var rowIndexes = [];
+                var i = void 0;
+                for (i = 0; i < rowCellIndxes.length; i++) {
+                    if (rowCellIndxes[i].cellIndexes.length) {
+                        rowIndexes.push(rowCellIndxes[i].rowIndex);
+                    }
+                    if (rowCellIndxes[i].cellIndexes.length) {
+                        if (!str) {
+                            str = JSON.stringify(rowCellIndxes[i].cellIndexes.sort());
+                        }
+                        if (str !== JSON.stringify(rowCellIndxes[i].cellIndexes.sort())) {
+                            break;
+                        }
+                    }
+                }
+                rowIndexes.sort();
+                if (i === rowCellIndxes.length && rowIndexes[rowIndexes.length - 1] - rowIndexes[0] === rowIndexes.length - 1) {
+                    obj = { status: true, rowIndexes: rowIndexes, colIndexes: rowCellIndxes[0].cellIndexes };
+                }
+            }
+            return obj;
+        };
         return Clipboard;
@@ -112,0 +161,0 @@ }());

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

@@ -39,2 +39,3 @@ import { ServiceLocator } from '../services/service-locator';
     private destroy();
+    private rtlUpdate();
     /**
@@ -41,0 +42,0 @@ * @hidden

src/grid/actions/column-chooser.js

@@ -37,2 +37,10 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "@syncfusion/ej2-base", "../base/constant", "@syncfusion/ej2-popups", "../base/util", "@syncfusion/ej2-buttons", "../services/focus-strategy"], function (require, exports, ej2_base_1, ej2_data_1, ej2_base_2, events, ej2_popups_1, util_1, ej2_buttons_1, focus_strategy_1) {
         };
+        ColumnChooser.prototype.rtlUpdate = function () {
+            if (this.parent.enableRtl) {
+                ej2_base_1.addClass(this.innerDiv.querySelectorAll('.e-checkbox-wrapper'), ['e-rtl']);
+            }
+            else {
+                ej2_base_1.removeClass(this.innerDiv.querySelectorAll('.e-checkbox-wrapper'), ['e-rtl']);
+            }
+        };
         ColumnChooser.prototype.addEventListener = function () {
@@ -47,2 +55,3 @@ if (this.parent.isDestroyed) {
             this.parent.on(events.destroy, this.destroy, this);
+            this.parent.on(events.rtlUpdated, this.rtlUpdate, this);
         };
@@ -56,2 +65,4 @@ ColumnChooser.prototype.removeEventListener = function () {
             this.parent.off(events.destroy, this.destroy);
+            this.parent.off(events.uiUpdate, this.enableAfterRenderEle);
+            this.parent.off(events.rtlUpdated, this.rtlUpdate);
         };
@@ -58,0 +69,0 @@ ColumnChooser.prototype.render = function () {

src/grid/actions/column-menu.js

@@ -168,5 +168,6 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-navigations", "../base/util", "../base/constant", "@syncfusion/ej2-popups", "@syncfusion/ej2-buttons", "../actions/group", "../actions/sort", "../actions/filter", "../actions/resize"], function (require, exports, ej2_base_1, ej2_base_2, ej2_navigations_1, util_1, events, ej2_popups_1, ej2_buttons_1, group_1, sort_1, filter_1, resize_1) {
         ColumnMenu.prototype.columnMenuBeforeClose = function (args) {
+            var colChooser = args.event ? ej2_base_1.closest(args.event.target, '.e-menu-item') : null;
             if (!ej2_base_1.isNullOrUndefined(args.parentItem) &&
                 this.getKeyFromId(args.parentItem.id) === 'columnChooser' &&
-                ej2_base_1.closest(args.event.target, '.e-menu-parent')) {
+                colChooser && this.isChooserItem(colChooser)) {
                 args.cancel = true;
@@ -270,6 +271,6 @@ }
                         checkbox.classList.remove('e-check');
-                        this.parent.hideColumn(key, 'field');
+                        this.parent.hideColumns(key, 'field');
                     }
                     else if (checkbox) {
-                        this.parent.showColumn(key, 'field');
+                        this.parent.showColumns(key, 'field');
                         checkbox.classList.add('e-check');
@@ -412,3 +413,3 @@ }
             if (filterPopup) {
-                filterPopup.style.display = isClose ? 'none' : 'block';
+                filterPopup.style.display = !ej2_base_1.Browser.isDevice && isClose ? 'none' : 'block';
             }
@@ -415,0 +416,0 @@ else {

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

@@ -9,2 +9,3 @@ import { ContextMenu as Menu } from '@syncfusion/ej2-navigations';
     edit: string;
+    batchEdit: string;
     editIcon: string;
@@ -11,0 +12,0 @@ pager: string;

src/grid/actions/context-menu.js

@@ -8,2 +8,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-navigations", "../base/constant", "../actions/resize", "../actions/page", "../base/util", "../actions/group", "../actions/sort", "../actions/pdf-export", "../actions/excel-export"], function (require, exports, ej2_base_1, ej2_base_2, ej2_navigations_1, events, resize_1, page_1, util_1, group_1, sort_1, pdf_export_1, excel_export_1) {
         edit: '.e-inline-edit',
+        batchEdit: '.e-editedbatchcell',
         editIcon: 'e-edit',
@@ -232,3 +233,4 @@ pager: '.e-gridpager',
                         }
-                        if (args.event && this.ensureTarget(args.event.target, exports.menuClass.edit)) {
+                        if (args.event && (this.ensureTarget(args.event.target, exports.menuClass.edit) ||
+                            this.ensureTarget(args.event.target, exports.menuClass.batchEdit))) {
                             if (key !== 'save' && key !== 'cancel') {
@@ -300,3 +302,3 @@ this.hiddenItems.push(item.text);
                 case 'cancel':
-                    if (!this.parent.editModule) {
+                    if (!this.parent.editModule || (this.parent.getDataRows().length === 0)) {
                         status = true;
@@ -482,3 +484,3 @@ }
             this.cell = e.target;
-            this.row = ej2_base_1.closest(e.target, 'tr.e-row');
+            this.row = ej2_base_1.closest(e.target, 'tr.e-row') || this.row;
             if (this.row && isSelectable) {
@@ -485,0 +487,0 @@ this.parent.selectRow(this.parent.getDataRows().indexOf(this.row));

src/grid/actions/data.js

@@ -115,3 +115,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) {
                         else {
-                            predicateList.push(new ej2_data_1.Predicate(column.field, sSettings.operator, sSettings.key, sSettings.ignoreCase, sSettings.ignoreAccent));
+                            predicateList.push(new ej2_data_1.Predicate(column.field, sSettings.operator, sSettings.key, sSettings.ignoreCase, _this.parent.filterSettings.ignoreAccent));
                         }
@@ -122,3 +122,3 @@ });
                 else {
-                    query.search(sSettings.key, fields, sSettings.operator, sSettings.ignoreCase, sSettings.ignoreAccent);
+                    query.search(sSettings.key, fields, sSettings.operator, sSettings.ignoreCase, this.parent.filterSettings.ignoreAccent);
                 }
@@ -125,0 +125,0 @@ }

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

 import { IGrid } from '../base/interface';
 import { ServiceLocator } from '../services/service-locator';
 /**
- * The detail row module is used to handle detail template and hierarchy Grid operations.
+ * The `DetailRow` module is used to handle detail template and hierarchy Grid operations.
  */
@@ -6,0 +6,0 @@ export declare class DetailRow {

src/grid/actions/edit.d.ts

@@ -8,3 +8,3 @@ import { L10n } from '@syncfusion/ej2-base';
 /**
- * `Edit` module is used to handle editing actions.
+ * The `Edit` module is used to handle editing actions.
  */
@@ -25,3 +25,2 @@ export declare class Edit implements IAction {
     private alertDObj;
-    private tapped;
     private actionBeginFunction;
@@ -51,3 +50,2 @@ private actionCompleteFunction;
     private getUserAgent();
-    private timeoutHandler();
     /**
@@ -87,3 +85,3 @@ * Edits any bound record in the Grid by TR element.
     /**
-     * Updates the value of any cell without changing the edit mode.
+     * To update the specified cell by given value without changing into edited state.
      * @param {number} rowIndex Defines the row index.
@@ -95,3 +93,3 @@ * @param {string} field Defines the column field.
     /**
-     * Updates values of a row without changing the edit mode.
+     * To update the specified row by given values without changing into edited state.
      * @param {number} index Defines the row index.
@@ -187,1 +185,5 @@ * @param {Object} data Defines the data object to be updated.
 }
+/** @hidden */
+export declare namespace Global {
+    let timer: Object;
+}

src/grid/actions/edit.js

@@ -11,3 +11,2 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/constant", "../renderer/edit-renderer", "../renderer/boolean-edit-cell", "../renderer/dropdown-edit-cell", "../renderer/numeric-edit-cell", "../renderer/default-edit-cell", "./inline-edit", "./batch-edit", "./dialog-edit", "@syncfusion/ej2-popups", "../base/util", "@syncfusion/ej2-inputs", "../renderer/datepicker-edit-cell", "@syncfusion/ej2-popups"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, ej2_base_4, events, edit_renderer_1, boolean_edit_cell_1, dropdown_edit_cell_1, numeric_edit_cell_1, default_edit_cell_1, inline_edit_1, batch_edit_1, dialog_edit_1, ej2_popups_1, util_1, ej2_inputs_1, datepicker_edit_cell_1, ej2_popups_2) {
             this.editType = { 'inline': inline_edit_1.InlineEdit, 'normal': inline_edit_1.InlineEdit, 'batch': batch_edit_1.BatchEdit, 'dialog': dialog_edit_1.DialogEdit };
-            this.tapped = false;
             this.parent = parent;
@@ -73,9 +72,11 @@ this.serviceLocator = serviceLocator;
             if (this.getUserAgent()) {
-                if (!this.tapped) {
-                    this.tapped = setTimeout(this.timeoutHandler(), 300);
+                if (!Global.timer) {
+                    Global.timer = setTimeout(function () {
+                        Global.timer = null;
+                    }, 300);
                 }
                 else {
-                    clearTimeout(this.tapped);
+                    clearTimeout(Global.timer);
+                    Global.timer = null;
                     this.parent.notify(events.doubleTap, e);
-                    this.tapped = null;
                 }
@@ -88,5 +89,2 @@ }
         };
-        Edit.prototype.timeoutHandler = function () {
-            this.tapped = null;
-        };
         Edit.prototype.startEdit = function (tr) {
@@ -145,7 +143,7 @@ var gObj = this.parent;
                 }
-                if (gObj.editSettings.showDeleteConfirmDialog) {
-                    this.showDialog('ConfirmDelete', this.dialogObj);
-                    return;
-                }
             }
+            if (gObj.editSettings.showDeleteConfirmDialog) {
+                this.showDialog('ConfirmDelete', this.dialogObj);
+                return;
+            }
             this.editModule.deleteRecord(fieldname, data);
@@ -393,3 +391,5 @@ };
                 case 'delete':
-                    this.deleteRecord();
+                    if (e.target.tagName !== 'INPUT' && !document.querySelector('.e-popup-open')) {
+                        this.deleteRecord();
+                    }
                     break;
@@ -471,3 +471,3 @@ case 'f2':
                 isFHdr = (this.parent.frozenRows && this.parent.frozenRows
-                    > (parseInt(inputElement.closest('.e-row').getAttribute('aria-rowindex'), 10) || 0));
+                    > (parseInt(ej2_base_1.closest(inputElement, '.e-row').getAttribute('aria-rowindex'), 10) || 0));
             }
@@ -497,3 +497,3 @@ return this.parent.editSettings.mode !== 'dialog' ? isFHdr ? this.parent.getHeaderTable() : this.parent.getContentTable() :
                 isFHdr = (this.parent.frozenRows && this.parent.frozenRows
-                    > (parseInt(element.closest('.e-row').getAttribute('aria-rowindex'), 10) || 0));
+                    > (parseInt(ej2_base_1.closest(element, '.e-row').getAttribute('aria-rowindex'), 10) || 0));
             }
@@ -542,2 +542,6 @@ var fCont = this.parent.getContent().querySelector('.e-frozencontent');
     exports.Edit = Edit;
+    var Global;
+    (function (Global) {
+        Global.timer = null;
+    })(Global = exports.Global || (exports.Global = {}));
 });

src/grid/actions/excel-export.js

@@ -309,3 +309,3 @@ define(["require", "exports", "../base/constant", "@syncfusion/ej2-excel-export", "@syncfusion/ej2-base", "../actions/data", "./export-helper", "../services/summary-model-generator", "../base/enum", "@syncfusion/ej2-data"], function (require, exports, events, ej2_excel_export_1, ej2_base_1, data_1, export_helper_1, summary_model_generator_1, enum_1, ej2_data_1) {
                 for (var c = 0, len = headerRow.columns.length; c < len; c++) {
-                    var value = ej2_base_1.getValue(headerRow.columns[c].field, record[r]);
+                    var value = !ej2_base_1.isNullOrUndefined(headerRow.columns[c].field) ? ej2_base_1.getValue(headerRow.columns[c].field, record[r]) : '';
                     var column = headerRow.columns[c];
@@ -312,0 +312,0 @@ var foreignKeyData = void 0;

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

@@ -46,2 +46,3 @@ import { FilterSettings } from '../base/grid';
     private hoverHandler(e);
+    private preventClose(args);
     private getContextBounds(context);
@@ -64,3 +65,3 @@ private getCMenuYPosition(target, context);
      * @param  {string} predicate - Defines the relationship between one filter query with another by using AND or OR predicate.
-     * @param {boolean} ignoreCase - If ignore case set to true, then filter records with exact match or else
+     * @param {boolean} matchCase - If ignore case set to true, then filter records with exact match or else
      * filter records with case insensitive(uppercase and lowercase letters treated as same).
@@ -71,3 +72,3 @@ * @param {boolean} ignoreAccent - If ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.
      */
-    private filterByColumn(fieldName, firstOperator, firstValue, predicate?, ignoreCase?, ignoreAccent?, secondOperator?, secondValue?);
+    private filterByColumn(fieldName, firstOperator, firstValue, predicate?, matchCase?, ignoreAccent?, secondOperator?, secondValue?);
     private renderOperatorUI(column, table, elementID, predicates, isFirst?);
@@ -74,0 +75,0 @@ private dropDownOpen(args);

src/grid/actions/excel-filter.js

@@ -90,2 +90,8 @@ var __extends = (this && this.__extends) || (function () {
             this.menu = ej2_base_1.createElement('div', { className: 'e-contextmenu-wrapper' });
+            if (this.parent.enableRtl) {
+                this.menu.classList.add('e-rtl');
+            }
+            else {
+                this.menu.classList.remove('e-rtl');
+            }
             var ul = ej2_base_1.createElement('ul');
@@ -172,3 +178,5 @@ var icon = isFiltered ? 'e-excl-filter-icon e-filtered' : 'e-excl-filter-icon';
                     select: this.selectHandler.bind(this),
-                    onClose: this.destroyCMenu.bind(this)
+                    onClose: this.destroyCMenu.bind(this),
+                    enableRtl: this.parent.enableRtl,
+                    beforeClose: this.preventClose
                 };
@@ -192,2 +200,7 @@ this.parent.element.appendChild(this.cmenu);
         };
+        ExcelFilter.prototype.preventClose = function (args) {
+            if (args.event instanceof MouseEvent && args.event.target.classList.contains('e-submenu')) {
+                args.cancel = true;
+            }
+        };
         ExcelFilter.prototype.getContextBounds = function (context) {
@@ -307,3 +320,3 @@ var elementVisible = this.menuObj.element.style.display;
         };
-        ExcelFilter.prototype.filterByColumn = function (fieldName, firstOperator, firstValue, predicate, ignoreCase, ignoreAccent, secondOperator, secondValue) {
+        ExcelFilter.prototype.filterByColumn = function (fieldName, firstOperator, firstValue, predicate, matchCase, ignoreAccent, secondOperator, secondValue) {
             var _this = this;
@@ -314,19 +327,19 @@ var col = this.parent.getColumnByField(fieldName);
             var mPredicate;
-            if (firstValue) {
-                fColl.push({
-                    field: field,
-                    predicate: 'or',
-                    matchcase: ignoreCase,
-                    ignoreAccent: ignoreAccent,
-                    operator: firstOperator,
-                    value: firstValue,
-                    type: this.options.type
-                });
-                mPredicate = new ej2_data_1.Predicate(field, firstOperator.toLowerCase(), firstValue, ignoreCase, ignoreAccent);
-            }
+            fColl.push({
+                field: field,
+                predicate: predicate,
+                matchCase: matchCase,
+                ignoreAccent: ignoreAccent,
+                operator: firstOperator,
+                value: firstValue,
+                type: this.options.type
+            });
+            mPredicate = new ej2_data_1.Predicate(field, firstOperator.toLowerCase(), firstValue, !matchCase, ignoreAccent);
             if (secondValue) {
+                secondOperator = !ej2_base_2.isNullOrUndefined(secondOperator) ? secondOperator : 'equal';
                 fColl.push({
                     field: field,
                     predicate: predicate,
-                    matchcase: ignoreCase,
+                    matchCase: matchCase,
+                    ignoreAccent: ignoreAccent,
                     operator: secondOperator,
@@ -336,3 +349,3 @@ value: secondValue,
                 });
-                mPredicate = mPredicate[predicate](field, secondOperator.toLowerCase(), secondValue, ignoreCase, ignoreAccent);
+                mPredicate = mPredicate[predicate](field, secondOperator.toLowerCase(), secondValue, !matchCase, ignoreAccent);
             }
@@ -355,3 +368,3 @@ var args = {
                             predicate: 'or',
-                            matchcase: fpred.ignoreCase,
+                            matchCase: fpred.ignoreCase,
                             ignoreAccent: fpred.ignoreAccent,
@@ -504,3 +517,3 @@ operator: fpred.operator,
             var flValue = predicates && predicates.length > 0 ?
-                (predicates && predicates.length === 2 ? predicates[1].matchcase : predicates[0].matchcase) :
+                (predicates && predicates.length === 2 ? predicates[1].matchCase : predicates[0].matchCase) :
                 false;
@@ -555,2 +568,4 @@ var checkbox = new ej2_buttons_1.CheckBox({ label: 'Match Case', enableRtl: this.parent.enableRtl, checked: flValue });
                         true;
+                    actObj.filterType = !ej2_base_2.isNullOrUndefined(actObj.filterType) ? actObj.filterType :
+                        'equal';
                 },
@@ -557,0 +572,0 @@ placeholder: this.getLocalizedLabel('CustomFilterPlaceHolder'),

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

@@ -5,3 +5,3 @@ import { Column } from './../models/column';
 import { Data } from '../actions/data';
-import { Grid } from '../../index';
+import { Grid } from '../base/grid';
 /**
@@ -8,0 +8,0 @@ * @hidden

src/grid/actions/filter.d.ts

@@ -21,3 +21,2 @@ import { FilterSettings } from '../base/grid';
     private currentFilterObject;
-    private lastFilterElement;
     private isRemove;
@@ -91,3 +90,3 @@ private contentRefresh;
      * 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 {boolean} ignoreAccent - If ignoreAccent set to true, then filter ignores the diacritic characters or accents while filtering.
      * @param  {string} actualFilterValue - Defines the actual filter value for the filter column.
@@ -121,5 +120,5 @@ * @param  {string} actualOperator - Defines the actual filter operator for the filter column.
     private keyUpHandler(e);
-    private updateSpanClass(e);
     private updateCrossIcon(element);
     private updateFilterMsg();
+    private setFormatForFlColumn(value, column);
     private checkForSkipInput(column, value);
@@ -126,0 +125,0 @@ private processFilter(e);

src/grid/actions/filter.js

@@ -143,9 +143,5 @@ 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.wireEvents = function () {
-            ej2_base_1.EventHandler.add(this.parent.getHeaderContent(), 'mousedown', this.updateSpanClass, this);
-            ej2_base_1.EventHandler.add(this.parent.element, 'focusin', this.updateSpanClass, this);
             ej2_base_1.EventHandler.add(this.parent.getHeaderContent(), 'keyup', this.keyUpHandler, this);
         };
         Filter.prototype.unWireEvents = function () {
-            ej2_base_1.EventHandler.remove(this.parent.element, 'focusin', this.updateSpanClass);
-            ej2_base_1.EventHandler.remove(this.parent.getHeaderContent(), 'mousedown', this.updateSpanClass);
             ej2_base_1.EventHandler.remove(this.parent.getHeaderContent(), 'keyup', this.keyUpHandler);
@@ -244,3 +240,10 @@ };
             }
-            this.values[this.column.field] = filterValue;
+            if (!ej2_base_1.isNullOrUndefined(this.column.format)) {
+                var getFlvalue = (this.column.type === 'date' || this.column.type === 'datetime') ?
+                    new Date(filterValue) : parseFloat(filterValue);
+                this.values[this.column.field] = this.setFormatForFlColumn(getFlvalue, this.column);
+            }
+            else {
+                this.values[this.column.field] = filterValue;
+            }
             this.updateModel();
@@ -383,3 +386,2 @@ };
                 }
-                this.updateCrossIcon(target);
                 if ((this.filterSettings.mode === 'immediate' || e.keyCode === 13) && e.keyCode !== 9) {
@@ -391,23 +393,2 @@ this.value = target.value.trim();
         };
-        Filter.prototype.updateSpanClass = function (e) {
-            var target = e.target;
-            if (e.type === 'mousedown' && target.classList.contains('e-cancel')) {
-                var targetText = target.previousElementSibling;
-                targetText.value = '';
-                target.classList.add('e-hide');
-                targetText.focus();
-                e.preventDefault();
-            }
-            if (e.type === 'focusin' && target.classList.contains('e-filtertext') && !target.disabled) {
-                if (this.lastFilterElement) {
-                    this.lastFilterElement.nextElementSibling.classList.add('e-hide');
-                }
-                this.updateCrossIcon(target);
-                this.lastFilterElement = target;
-            }
-            if (e.type === 'focusin' && !target.classList.contains('e-filtertext') && this.lastFilterElement) {
-                this.lastFilterElement.nextElementSibling.classList.add('e-hide');
-            }
-            return false;
-        };
         Filter.prototype.updateCrossIcon = function (element) {
@@ -436,3 +417,12 @@ if (element.value.length) {
                         }
-                        this.filterStatusMsg += column.headerText + ': ' + this.values[column.field];
+                        if (!ej2_base_1.isNullOrUndefined(column.format)) {
+                            var flValue = (column.type === 'date' || column.type === 'datetime') ?
+                                new Date(this.values[column.field]) :
+                                this.values[column.field];
+                            var getFormatFlValue = this.setFormatForFlColumn(flValue, column);
+                            this.filterStatusMsg += column.headerText + ': ' + getFormatFlValue;
+                        }
+                        else {
+                            this.filterStatusMsg += column.headerText + ': ' + this.values[column.field];
+                        }
                     }
@@ -446,2 +436,6 @@ }
         };
+        Filter.prototype.setFormatForFlColumn = function (value, column) {
+            var formater = this.serviceLocator.getService('valueFormatter');
+            return formater.toView(value, column.getFormatter()).toString();
+        };
         Filter.prototype.checkForSkipInput = function (column, value) {
@@ -596,9 +590,2 @@ var isSkip;
             }
-            var filterCells = [].slice.call(this.parent.getHeaderContent().querySelectorAll('.e-filterbarcell'));
-            filterCells.splice(e.toIndex, 0, filterCells.splice(e.fromIndex, 1)[0]);
-            this.element.innerHTML = '';
-            for (var _i = 0, filterCells_1 = filterCells; _i < filterCells_1.length; _i++) {
-                var cell = filterCells_1[_i];
-                this.element.appendChild(cell);
-            }
         };
@@ -608,14 +595,15 @@ Filter.prototype.getLocalizedCustomOperators = function () {
                 { value: 'equal', text: this.l10n.getConstant('Equal') },
-                { value: 'greaterThan', text: this.l10n.getConstant('GreaterThan') },
-                { value: 'greaterThanOrEqual', text: this.l10n.getConstant('GreaterThanOrEqual') },
-                { value: 'lessThan', text: this.l10n.getConstant('LessThan') },
-                { value: 'lessThanOrEqual', text: this.l10n.getConstant('LessThanOrEqual') },
-                { value: 'notEqual', text: this.l10n.getConstant('NotEqual') }
+                { value: 'greaterthan', text: this.l10n.getConstant('GreaterThan') },
+                { value: 'greaterthanorequal', text: this.l10n.getConstant('GreaterThanOrEqual') },
+                { value: 'lessthan', text: this.l10n.getConstant('LessThan') },
+                { value: 'lessthanorequal', text: this.l10n.getConstant('LessThanOrEqual') },
+                { value: 'notequal', text: this.l10n.getConstant('NotEqual') }
             ];
             this.customOperators = {
                 stringOperator: [
-                    { value: 'startsWith', text: this.l10n.getConstant('StartsWith') },
-                    { value: 'endsWith', text: this.l10n.getConstant('EndsWith') },
+                    { value: 'startswith', text: this.l10n.getConstant('StartsWith') },
+                    { value: 'endswith', text: this.l10n.getConstant('EndsWith') },
                     { value: 'contains', text: this.l10n.getConstant('Contains') },
-                    { value: 'equal', text: this.l10n.getConstant('Equal') }, { value: 'notEqual', text: this.l10n.getConstant('NotEqual') }
+                    { value: 'equal', text: this.l10n.getConstant('Equal') },
+                    { value: 'notequal', text: this.l10n.getConstant('NotEqual') }
                 ],
@@ -626,3 +614,4 @@ numberOperator: numOptr,
                 booleanOperator: [
-                    { value: 'equal', text: this.l10n.getConstant('Equal') }, { value: 'notEqual', text: this.l10n.getConstant('NotEqual') }
+                    { value: 'equal', text: this.l10n.getConstant('Equal') },
+                    { value: 'notequal', text: this.l10n.getConstant('NotEqual') }
                 ]
@@ -652,3 +641,3 @@ };
         Filter.prototype.clickHandler = function (e) {
-            if (this.parent.filterSettings.type === 'menu' ||
+            if (this.filterSettings.mode === 'immediate' || this.parent.filterSettings.type === 'menu' ||
                 this.parent.filterSettings.type === 'checkbox' || this.parent.filterSettings.type === 'excel') {
@@ -667,2 +656,6 @@ var gObj = this.parent;
                 }
+                if (this.filterSettings.mode === 'immediate' && target.classList.contains('e-clear-icon')) {
+                    var targetText = target.previousElementSibling;
+                    this.removeFilteredColsByField(targetText.id.slice(0, -14));
+                }
             }
@@ -669,0 +662,0 @@ };

src/grid/actions/foreign-key.js

@@ -62,3 +62,5 @@ var __extends = (this && this.__extends) || (function () {
             }).catch(function (e) {
-                args.promise.reject(e);
+                if (args.promise && args.promise.reject) {
+                    args.promise.reject(e);
+                }
                 return e;
@@ -65,0 +67,0 @@ });

src/grid/actions/group.d.ts

@@ -6,3 +6,3 @@ import { GroupSettingsModel } from '../base/grid-model';
  *
- * `Group` module is used to handle group action.
+ * The `Group` module is used to handle group action.
  */
@@ -9,0 +9,0 @@ export declare class Group implements IAction {

src/grid/actions/group.js

@@ -521,4 +521,6 @@ 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) {
         Group.prototype.removeColFromGroupDrop = function (field) {
-            ej2_base_2.remove(this.getGHeaderCell(field));
-            this.updateGroupDropArea();
+            if (!ej2_base_3.isNullOrUndefined(field)) {
+                ej2_base_2.remove(this.getGHeaderCell(field));
+                this.updateGroupDropArea();
+            }
         };
@@ -525,0 +527,0 @@ Group.prototype.onPropertyChanged = function (e) {

src/grid/actions/normal-edit.js

@@ -14,5 +14,5 @@ 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') &&
-                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')) {
+            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')) {
                 this.rowIndex = util_1.parentsUntil(target, 'e-rowcell') ? parseInt(target.parentElement.getAttribute('aria-rowindex'), 10) : -1;
@@ -207,2 +207,5 @@ if (gObj.isEdit) {
             gObj.trigger(events.actionBegin, args);
+            if (this.parent.editSettings.mode === 'dialog') {
+                this.parent.notify(events.dialogDestroy, {});
+            }
             gObj.isEdit = false;
@@ -209,0 +212,0 @@ this.stopEditStatus();

src/grid/actions/page.d.ts

 import { PageSettingsModel } from '../models/page-settings-model';
 import { IGrid, IAction, NotifyArgs } from '../base/interface';
 /**
- * `Page` module is used to render pager and handle paging action.
+ * The `Page` module is used to render pager and handle paging action.
  */
@@ -6,0 +6,0 @@ export declare class Page implements IAction {

src/grid/actions/pdf-export.js

@@ -134,2 +134,3 @@ define(["require", "exports", "../base/constant", "@syncfusion/ej2-pdf-export", "@syncfusion/ej2-pdf-export", "@syncfusion/ej2-pdf-export", "@syncfusion/ej2-pdf-export", "@syncfusion/ej2-pdf-export", "@syncfusion/ej2-pdf-export", "./export-helper", "../actions/data", "../services/summary-model-generator", "@syncfusion/ej2-base", "../base/enum", "@syncfusion/ej2-data", "@syncfusion/ej2-base"], function (require, exports, events, ej2_pdf_export_1, ej2_pdf_export_2, ej2_pdf_export_3, ej2_pdf_export_4, ej2_pdf_export_5, ej2_pdf_export_6, export_helper_1, data_1, summary_model_generator_1, ej2_base_1, enum_1, ej2_data_1, ej2_base_2) {
                 }
+                this.pdfDocument.destroy();
             }
@@ -662,3 +663,3 @@ };
                 for (var j = 0; j < columns.length; j++) {
-                    var value = ej2_base_2.getValue(columns[j].field, items) || '';
+                    var value = (!ej2_base_1.isNullOrUndefined(columns[j].field) && ej2_base_2.getValue(columns[j].field, items)) || '';
                     var column = columns[j];
@@ -665,0 +666,0 @@ var foreignKeyData = void 0;

src/grid/actions/print.d.ts

@@ -5,3 +5,3 @@ import { IGrid } from '../base/interface';
  *
- * `Print` module is used to handle print action.
+ * The `Print` module is used to handle print action.
  */
@@ -8,0 +8,0 @@ export declare class Print {

src/grid/actions/print.js

@@ -158,5 +158,5 @@ define(["require", "exports", "@syncfusion/ej2-base", "../base/util", "../base/grid", "../base/constant"], function (require, exports, ej2_base_1, util_1, grid_1, events) {
             'allowTextWrap', 'childGrid', 'columns', 'currentViewData', 'dataSource', 'detailTemplate', 'enableAltRow',
-            'enableColumnVirtualization', 'filterSettings', 'frozenColumns', 'frozenRows', 'gridLines',
+            'enableColumnVirtualization', 'filterSettings', 'gridLines',
             'groupSettings', 'height', 'locale', 'pageSettings', 'printMode', 'query', 'queryString',
-            'rowHeight', 'rowTemplate', 'sortSettings', 'textWrapSettings', 'width', 'allowPaging',
+            'rowHeight', 'rowTemplate', 'sortSettings', 'textWrapSettings', 'allowPaging',
             events.beforePrint, events.printComplete
@@ -163,0 +163,0 @@ ];

src/grid/actions/reorder.d.ts

 import { IGrid, IAction, NotifyArgs } from '../base/interface';
 /**
  *
- * `Reorder` module is used for reordering columns.
+ * The `Reorder` module is used for reordering columns.
  */
@@ -6,0 +6,0 @@ export declare class Reorder implements IAction {

src/grid/actions/reorder.js

@@ -21,4 +21,4 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/util", "../base/constant"], function (require, exports, ej2_base_1, ej2_base_2, util_1, events) {
             return (srcElem.parentElement.isEqualNode(destElem.parentElement) || (this.parent.getFrozenColumns()
-                && Array.prototype.indexOf.call(srcElem.closest('thead').children, srcElem.parentElement)
-                    === Array.prototype.indexOf.call(destElem.closest('thead').children, destElem.parentElement)))
+                && Array.prototype.indexOf.call(ej2_base_2.closest(srcElem, 'thead').children, srcElem.parentElement)
+                    === Array.prototype.indexOf.call(ej2_base_2.closest(destElem, 'thead').children, destElem.parentElement)))
                 && this.targetParentContainerIndex(srcElem, destElem) > -1;
@@ -25,0 +25,0 @@ };

src/grid/actions/resize.js

@@ -59,3 +59,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "../services/width-controller", "../base/constant", "../base/util"], function (require, exports, ej2_base_1, width_controller_1, events, util_1) {
                 headerTextClone = headerTable.querySelectorAll('th')[columnIndex].cloneNode(true);
-                contentTextClone = contentTable.querySelectorAll("td:nth-child(" + (columnIndex + 1) + ")");
+                contentTextClone = contentTable.querySelectorAll("td:nth-child(" + (columnIndex + 1) + "):not(.e-groupcaption)");
             }
@@ -62,0 +62,0 @@ var indentWidthClone = headerTable.querySelector('tr').querySelectorAll('.e-grouptopleftcell');

src/grid/actions/scroll.d.ts

 import { IGrid, IAction } from '../base/interface';
 /**
- * `Scroll` module is used to handle scrolling behaviour.
+ * The `Scroll` module is used to handle scrolling behaviour.
  */
@@ -41,4 +41,5 @@ export declare class Scroll implements IAction {
     /**
-     * Refresh makes the Grid adopt the height of the parent container.
-     * > The [`height`]((./api-grid.html#height)) must be set to 100%.
+     * Refresh makes the Grid adoptable with the height of parent container.
+     *
+     * > The [`height`](./api-grid.html#height) must be set to 100%.
      * @return
@@ -45,0 +46,0 @@ */

src/grid/actions/search.d.ts

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

src/grid/actions/search.js

@@ -17,3 +17,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "../base/constant", "../base/util"], function (require, exports, ej2_base_1, events, util_1) {
             if (searchString !== gObj.searchSettings.key) {
-                gObj.searchSettings.key = searchString;
+                gObj.searchSettings.key = searchString.toString();
                 gObj.dataBind();
@@ -20,0 +20,0 @@ }

src/grid/actions/selection.d.ts

@@ -5,3 +5,3 @@ import { IGrid, IAction, IIndex, ISelectedCell } from '../base/interface';
 /**
- * `Selection` module is used to handle cell and row selection.
+ * The `Selection` module is used to handle cell and row selection.
  */
@@ -40,4 +40,6 @@ export declare class Selection implements IAction {
     private startIndex;
+    private startCellIndex;
     private currentIndex;
     private isDragged;
+    private isCellDrag;
     private x;
@@ -66,3 +68,2 @@ private y;
     private unSelectRowKey;
-    private isDataSourceMapped;
     /**
@@ -117,3 +118,3 @@ * Constructor for the Grid selection module
      * Selects a collection of rows by index.
-     * @param  {number[]} rowIndexes - Specifies the row index.
+     * @param  {number[]} rowIndexes - Specifies an array of row indexes.
      * @return {void}
@@ -158,4 +159,4 @@ */
      * 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.
+     * @param  {IIndex} startIndex - Specifies the row and column's start index.
+     * @param  {IIndex} endIndex - Specifies the row and column's end index.
      * @return {void}
@@ -166,3 +167,3 @@ */
      * Selects a collection of cells by row and column indexes.
-     * @param  {{ rowIndex: number, cellIndexes: number[] }[]} rowCellIndexes - Specifies the row and column indexes.
+     * @param  {ISelectedCell[]} rowCellIndexes - Specifies the row and column indexes.
      * @return {void}
@@ -193,2 +194,3 @@ */
     private mouseMoveHandler(e);
+    private selectLikeExcel(rowIndex, cellIndex);
     private mouseUpHandler(e);
@@ -216,3 +218,3 @@ private mouseDownHandler(e);
     private initPerisistSelection();
-    private checkDataSourceMapped();
+    private ensureCheckboxFieldSelection();
     private dataSuccess(res);
@@ -241,2 +243,3 @@ private refreshPersistSelection();
     ctrlPlusA(): void;
+    private applySpaceSelection(target);
     private applyDownUpKey(rowIndex?, cellIndex?);
@@ -243,0 +246,0 @@ private applyUpDown(rowIndex);

src/grid/actions/show-hide.d.ts

 import { Column } from '../models/column';
 import { IGrid } from '../base/interface';
 /**
- * `ShowHide` module is used to control column visibility.
+ * The `ShowHide` module is used to control column visibility.
  */
@@ -27,3 +27,2 @@ export declare class ShowHide {
     hide(columnName: string | string[], hideBy?: string): void;
-    private batchChanges(handler, columnName, showHide?);
     private getToggleFields(key);
@@ -30,0 +29,0 @@ private getColumns(keys, getKeyBy?);

src/grid/actions/show-hide.js

@@ -9,5 +9,2 @@ define(["require", "exports", "@syncfusion/ej2-base", "../base/util", "../base/constant"], function (require, exports, ej2_base_1, util_1, events) {
         ShowHide.prototype.show = function (columnName, showBy) {
-            if (this.batchChanges(this.show, columnName, showBy)) {
-                return;
-            }
             var keys = this.getToggleFields(columnName);
@@ -21,7 +18,5 @@ var columns = this.getColumns(keys, showBy);
         ShowHide.prototype.hide = function (columnName, hideBy) {
-            if (this.batchChanges(this.hide, columnName, hideBy)) {
-                return;
-            }
             var keys = this.getToggleFields(columnName);
             var columns = this.getColumns(keys, hideBy);
+            this.parent.notify(events.tooltipDestroy, { module: 'edit' });
             columns.forEach(function (value) {
@@ -32,12 +27,2 @@ value.visible = false;
         };
-        ShowHide.prototype.batchChanges = function (handler, columnName, showHide) {
-            if (util_1.isActionPrevent(this.parent)) {
-                this.parent.notify(events.preventBatch, {
-                    instance: this, handler: handler,
-                    arg1: columnName, arg2: showHide
-                });
-                return true;
-            }
-            return false;
-        };
         ShowHide.prototype.getToggleFields = function (key) {
@@ -66,3 +51,13 @@ var finalized = [];
         ShowHide.prototype.setVisible = function (columns) {
+            if (util_1.isActionPrevent(this.parent)) {
+                this.parent.notify(events.preventBatch, {
+                    instance: this, handler: this.setVisible,
+                    arg1: columns
+                });
+                return;
+            }
             columns = ej2_base_1.isNullOrUndefined(columns) ? this.parent.getColumns() : columns;
+            if (this.parent.getSelectedRecords().length) {
+                this.parent.clearSelection();
+            }
             this.parent.notify(events.columnVisibilityChanged, columns);
@@ -69,0 +64,0 @@ };

src/grid/actions/sort.d.ts

@@ -7,3 +7,3 @@ import { SortSettings } from '../base/grid';
  *
- * `Sort` module is used to handle sorting action.
+ * The `Sort` module is used to handle sorting action.
  */
@@ -10,0 +10,0 @@ export declare class Sort implements IAction {

src/grid/actions/toolbar.d.ts

@@ -5,3 +5,3 @@ import { Toolbar as tool } from '@syncfusion/ej2-navigations';
 /**
- * `Toolbar` module is used to handle ToolBar actions.
+ * The `Toolbar` module is used to handle ToolBar actions.
  * @hidden
@@ -8,0 +8,0 @@ */

src/grid/actions/toolbar.js

@@ -0,0 +0,0 @@ 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) {

src/grid/base/constant.d.ts

@@ -286,1 +286,3 @@ /** @hidden */
 export declare const dataSourceChanged: string;
+/** @hidden */
+export declare const rtlUpdated: string;

src/grid/base/constant.js

@@ -145,2 +145,3 @@ define(["require", "exports"], function (require, exports) {
     exports.dataSourceChanged = 'dataSourceChanged';
+    exports.rtlUpdated = 'rtl-updated';
 });

src/grid/base/enum.d.ts

@@ -163,2 +163,3 @@ /**
  * Defines Predefined toolbar items.
+ * @hidden
  */
@@ -165,0 +166,0 @@ export declare enum ToolbarItem {

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

@@ -1,2 +0,2 @@
-import { Component, ModuleDeclaration, ChildProperty, Browser, closest, extend } from '@syncfusion/ej2-base';import { isNullOrUndefined, setValue, getValue } from '@syncfusion/ej2-base';import { createElement, addClass, removeClass, append, remove, classList } from '@syncfusion/ej2-base';import { Property, Collection, Complex, Event, NotifyPropertyChanges, INotifyPropertyChanged, L10n } from '@syncfusion/ej2-base';import { EventHandler, KeyboardEvents, KeyboardEventArgs, EmitType } from '@syncfusion/ej2-base';import { Query, DataManager, DataUtil } from '@syncfusion/ej2-data';import { ItemModel, ClickEventArgs } from '@syncfusion/ej2-navigations';import { createSpinner, hideSpinner, showSpinner, Tooltip } from '@syncfusion/ej2-popups';import { iterateArrayOrObject, prepareColumns, parentsUntil, wrap, templateCompiler, refreshForeignData } from './util';import * as events from '../base/constant';import { IRenderer, IValueFormatter, IFilterOperator, IIndex, RowDataBoundEventArgs, QueryCellInfoEventArgs } from './interface';import { CellDeselectEventArgs, CellSelectEventArgs, CellSelectingEventArgs, ParentDetails, ContextMenuItemModel } from './interface';import { PdfQueryCellInfoEventArgs, ExcelQueryCellInfoEventArgs, ExcelExportProperties, PdfExportProperties } from './interface';import { ColumnMenuOpenEventArgs, RecordDoubleClickEventArgs, DataResult, PendingState } from './interface';import { FailureEventArgs, FilterEventArgs, ColumnDragEventArgs, GroupEventArgs, PrintEventArgs, ICustomOptr } from './interface';import { RowDeselectEventArgs, RowSelectEventArgs, RowSelectingEventArgs, PageEventArgs, RowDragEventArgs } from './interface';import { BeforeBatchAddArgs, BeforeBatchDeleteArgs, BeforeBatchSaveArgs, ResizeArgs, ColumnMenuItemModel } from './interface';import { BatchAddArgs, BatchDeleteArgs, BeginEditArgs, CellEditArgs, CellSaveArgs, BeforeDataBoundArgs, RowInfo } from './interface';import { DetailDataBoundEventArgs, ColumnChooserEventArgs, AddEventArgs, SaveEventArgs, EditEventArgs, DeleteEventArgs } from './interface';import { ExcelExportCompleteArgs, PdfExportCompleteArgs, DataStateChangeEventArgs, DataSourceChangedEventArgs } from './interface';import { SearchEventArgs, SortEventArgs, ISelectedCell, EJ2Intance, BeforeCopyEventArgs, CheckBoxChangeEventArgs } from './interface';import { Render } from '../renderer/render';import { Column, ColumnModel } from '../models/column';import { Action, SelectionType, GridLine, RenderType, SortDirection, SelectionMode, PrintMode, FilterType, FilterBarMode } from './enum';import { WrapMode, ToolbarItems, ContextMenuItem, ColumnMenuItem, ToolbarItem } from './enum';import { Data } from '../actions/data';import { Cell } from '../models/cell';import { RowRenderer } from '../renderer/row-renderer';import { CellRenderer } from '../renderer/cell-renderer';import { CellRendererFactory } from '../services/cell-render-factory';import { ServiceLocator } from '../services/service-locator';import { ValueFormatter } from '../services/value-formatter';import { RendererFactory } from '../services/renderer-factory';import { ColumnWidthService } from '../services/width-controller';import { AriaService } from '../services/aria-service';import { FocusStrategy } from '../services/focus-strategy';import { PageSettingsModel, AggregateRowModel } from '../models/models';import { PageSettings } from '../models/page-settings';import { Sort } from '../actions/sort';import { Page } from '../actions/page';import { Selection } from '../actions/selection';import { Filter } from '../actions/filter';import { Search } from '../actions/search';import { Resize } from '../actions/resize';import { Reorder } from '../actions/reorder';import { RowDD } from '../actions/row-reorder';import { ShowHide } from '../actions/show-hide';import { Scroll } from '../actions/scroll';import { Group } from '../actions/group';import { Print } from '../actions/print';import { DetailRow } from '../actions/detail-row';import { Toolbar } from '../actions/toolbar';import { AggregateRow } from '../models/aggregate';import { Edit } from '../actions/edit';import { Row } from '../models/row';import { ColumnChooser } from '../actions/column-chooser';import { ExcelExport } from '../actions/excel-export';import { PdfExport } from '../actions/pdf-export';import { Clipboard } from '../actions/clipboard';import { CommandColumn } from '../actions/command-column';import { ContextMenu } from '../actions/context-menu';import { BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-navigations';import { ColumnMenu } from '../actions/column-menu';import { CheckState } from './type';
+import { Component, ModuleDeclaration, ChildProperty, Browser, closest, extend } from '@syncfusion/ej2-base';
import { isNullOrUndefined, setValue, getValue } from '@syncfusion/ej2-base';
import { createElement, addClass, removeClass, append, remove, classList } from '@syncfusion/ej2-base';
import { Property, Collection, Complex, Event, NotifyPropertyChanges, INotifyPropertyChanged, L10n } from '@syncfusion/ej2-base';
import { EventHandler, KeyboardEvents, KeyboardEventArgs, EmitType } from '@syncfusion/ej2-base';
import { Query, DataManager, DataUtil } from '@syncfusion/ej2-data';
import { ItemModel, ClickEventArgs } from '@syncfusion/ej2-navigations';
import { createSpinner, hideSpinner, showSpinner, Tooltip } from '@syncfusion/ej2-popups';
import { iterateArrayOrObject, prepareColumns, parentsUntil, wrap, templateCompiler, refreshForeignData } from './util';
import * as events from '../base/constant';
import { IRenderer, IValueFormatter, IFilterOperator, IIndex, RowDataBoundEventArgs, QueryCellInfoEventArgs } from './interface';
import { CellDeselectEventArgs, CellSelectEventArgs, CellSelectingEventArgs, ParentDetails, ContextMenuItemModel } from './interface';
import { PdfQueryCellInfoEventArgs, ExcelQueryCellInfoEventArgs, ExcelExportProperties, PdfExportProperties } from './interface';
import { ColumnMenuOpenEventArgs, RecordDoubleClickEventArgs, DataResult, PendingState } from './interface';
import { FailureEventArgs, FilterEventArgs, ColumnDragEventArgs, GroupEventArgs, PrintEventArgs, ICustomOptr } from './interface';
import { RowDeselectEventArgs, RowSelectEventArgs, RowSelectingEventArgs, PageEventArgs, RowDragEventArgs } from './interface';
import { BeforeBatchAddArgs, BeforeBatchDeleteArgs, BeforeBatchSaveArgs, ResizeArgs, ColumnMenuItemModel } from './interface';
import { BatchAddArgs, BatchDeleteArgs, BeginEditArgs, CellEditArgs, CellSaveArgs, BeforeDataBoundArgs, RowInfo } from './interface';
import { DetailDataBoundEventArgs, ColumnChooserEventArgs, AddEventArgs, SaveEventArgs, EditEventArgs, DeleteEventArgs } from './interface';
import { ExcelExportCompleteArgs, PdfExportCompleteArgs, DataStateChangeEventArgs, DataSourceChangedEventArgs } from './interface';
import { SearchEventArgs, SortEventArgs, ISelectedCell, EJ2Intance, BeforeCopyEventArgs, CheckBoxChangeEventArgs } from './interface';
import { Render } from '../renderer/render';
import { Column, ColumnModel } from '../models/column';
import { Action, SelectionType, GridLine, RenderType, SortDirection, SelectionMode, PrintMode, FilterType, FilterBarMode } from './enum';
import { WrapMode, ToolbarItems, ContextMenuItem, ColumnMenuItem, ToolbarItem } 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';
@@ -36,3 +36,3 @@
     /**
-     * If set to false the user can not get the grid in unsorted state by clicking the sorted column header.
+     * If `allowUnsort` set to false the user can not get the grid in unsorted state by clicking the sorted column header.
      * @default true
@@ -127,3 +127,3 @@ */
     /**
-     * If ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.
+     * If ignoreAccent is set to true, then filter ignores the diacritic characters or accents while filtering.
      */
@@ -162,14 +162,2 @@ ignoreAccent?: boolean;
 
-    /**
-     * @hidden 
-     * Defines the matchcase of filter column.  
-     */
-    matchcase?: boolean;
-
-    /**
-     * @hidden 
-     * Defines the ignoreCase of filter column.  
-     */
-    ignoreCase?: boolean;
-
 }
@@ -212,3 +200,3 @@
     /**
-     * Defines the delay (in milliseconds) in filtering records when the `Immediate` mode of filter bar is set. 
+     * Defines the time delay (in milliseconds) in filtering records when the `Immediate` mode of filter bar is set. 
      * @default 1500 
@@ -219,4 +207,7 @@ */
     /**
-     * Defines the custom operator for Menu filter.
+     * The `operators` is used to override the default operators in filter menu. This should be defined by type wise
+     * (string, number, date and boolean). Based on the column type, this customize operator list will render in filter menu.
      * @default null
+     * 
+     * > Check the [`Filter Menu Operator`](./how-to.html#customizing-filter-menu-operators-list) customization.
      */
@@ -226,4 +217,6 @@ operators?: ICustomOptr;
     /**
-     * If ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.
+     * If ignoreAccent set to true, then filter ignores the diacritic characters or accents while filtering.
      * @default false
+     * 
+     * > Check the [`Diacritics`](./filtering.html/#diacritics) filtering.
      */
@@ -263,3 +256,5 @@ ignoreAccent?: boolean;
     /**
-     * If 'checkboxOnly' set to true, then the Grid selection is allowed only through checkbox when checkbox type column has been enabled.
+     * If 'checkboxOnly' set to true, then the Grid selection is allowed only through checkbox.
+     * 
+     * > To enable checkboxOnly selection, should specify the column type as`checkbox`.
      * @default false 
@@ -271,3 +266,3 @@ */
      * If 'persistSelection' set to true, then the Grid selection is persisted on all operations.
-     * For persisting selection on the Grid, any one of the column should be enabled as a primary key.
+     * For persisting selection in the Grid, any one of the column should be enabled as a primary key.
      * @default false 
@@ -336,8 +331,2 @@ */
 
-    /**
-     * If ignoreAccent set to true, then ignores the diacritic characters or accents when searching.
-     * @default false
-     */
-    ignoreAccent?: boolean;
-
 }
@@ -423,2 +412,3 @@
      * > It accepts either the [template string](http://ej2.syncfusion.com/documentation/base/template-engine.html) or the HTML element ID.
+     * @default ''
      */
@@ -456,3 +446,3 @@ captionTemplate?: string;
      * * Dialog
-     * * Batch        
+     * * Batch  
      * @default normal 
@@ -495,4 +485,5 @@ */
     /**
-     * If `enableAltRow` is set to true, Grid renders rows with alternate row styling.   
+     * If `enableAltRow` is set to true, the grid will render with `e-altrow` CSS class to the alternative tr elements.
      * @default true     
+     * > Check the [`AltRow`](./row.html#styling-alternate-rows) to customize the styles of alternative rows.
      */
@@ -528,3 +519,5 @@ enableAltRow?: boolean;
     /**
-     * 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.   
+     * 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.
+     * 
+     * > Check the [`Paging`](./paging.html) to configure the grid pager.
      * @default false     
@@ -562,2 +555,4 @@ */
      * If `allowSorting` is set to true, it allows sorting of grid records when column header is clicked.  
+     * 
+     * > Check the [`Sorting`](./sorting.html) to customize its default behavior.
      * @default false    
@@ -576,2 +571,4 @@ */
      * If `allowExcelExport` set to true, then it will allow the user to export grid to Excel file.
+     * 
+     * > Check the [`ExcelExport`](./excel-exporting.html) to configure exporting document.
      * @default false    
@@ -583,2 +580,4 @@ */
      * If `allowPdfExport` set to true, then it will allow the user to export grid to Pdf file.
+     * 
+     * > Check the [`Pdfexport`](./pdf-exporting.html) to configure the exporting document.
      * @default false    
@@ -616,3 +615,5 @@ */
      * If set to false the filter bar will not be displayed. 
-     * Filter bar allows the user to filter grid records with required criteria.        
+     * Filter bar allows the user to filter grid records with required criteria.   
+     * 
+     * > Check the [`Filtering`](./filtering.html) to customize its default behavior.     
      * @default false    
@@ -657,2 +658,4 @@ */
      * Grouping can be done by drag and drop columns from column header to group drop area. 
+     * 
+     * > Check the [`Grouping`](./grouping.html) to customize its default behavior.
      * @default false    
@@ -663,3 +666,5 @@ */
     /**
-     * If `showColumnMenu` set to true, then it will enable the column menu options in each columns.  
+     * If `showColumnMenu` set to true, then it will enable the column menu options in each columns.
+     * 
+     * > Check the [`Column menu`](./columns.html#column-menu) for its configuration.
      * @default false    
@@ -684,2 +689,3 @@ */
      * Configures the Grid aggregate rows.
+     * > Check the [`Aggregates`](./aggregates.html) for its configuration.
      * @default []
@@ -691,2 +697,4 @@ */
      * If `showColumnChooser` is set to true, it allows you to dynamically show or hide columns.  
+     * 
+     * > Check the [`ColumnChooser`](./columns.html#column-chooser) for its configuration.
      * @default false    
@@ -703,3 +711,3 @@ */
     /**
-     * Defines the scrollable width of the Grid content.    
+     * Defines the Grid width.    
      * @default auto    
@@ -725,2 +733,4 @@ */
      * > * The row template must be a table row.  
+     * 
+     * > Check the [`Row Template`](./row.html) customization.
      */
@@ -734,43 +744,3 @@ rowTemplate?: string;
      * 
-     * ```html 
-     * <script id='detailTemplate'>
-     *    <table width="100%" >
-     *        <tbody>
-     *            <tr>
-     *                <td>
-     *                    <span style="font-weight: 500;">First Name: </span> ${FirstName}
-     *                </td>
-     *                <td>
-     *                    <span style="font-weight: 500;">Postal Code: </span> ${PostalCode}
-     *                </td>
-     *            </tr>
-     *            <tr>                  
-     *                <td>
-     *                    <span style="font-weight: 500;">Last Name: </span> ${LastName}
-     *                </td>
-     *                <td>
-     *                    <span style="font-weight: 500;">City: </span> ${City}
-     *                </td>
-     *            </tr>
-     *        </tbody>
-     *    </table>
-     *  </script>  
-     * 
-     * <div id="Grid"></div>  
-     * ``` 
-     * 
-     * ```typescript   
-     * let grid: Grid = new Grid({
-     *  dataSource: employeeData,
-     *  detailTemplate: '#detailTemplate',
-     *  columns: [
-     *   { field: 'FirstName', headerText: 'First Name', width: 110 },
-     *   { field: 'LastName', headerText: 'Last Name', width: 110 },
-     *   { field: 'Title', headerText: 'Title', width: 150 },
-     *   { field: 'Country', headerText: 'Country', width: 110 }
-     *  ],
-     *  height: 315
-     * });
-     * grid.appendTo('#Grid');
-     * ```               
+     * {% codeBlock src="grid/detail-template-api/index.ts" %}{% endcodeBlock %}
      */
@@ -783,2 +753,4 @@ detailTemplate?: string;
      * and child relationship. 
+     * 
+     * > Check the [`Child Grid`](./hierarchy-grid.html) for its configuration.
      */
@@ -807,2 +779,4 @@ childGrid?: GridModel;
      *  the Grid will not initialize a new one. 
+     * 
+     * > Check the available [`Adaptors`](../data/adaptors.html) to customize the data operation.
      * @default []    
@@ -813,3 +787,3 @@ */
     /**
-     * Defines the row height for Grid rows.
+     * Defines the height of Grid rows.
      * @default null
@@ -850,19 +824,6 @@ */
      * The following code example implements the custom toolbar items.
-     * ```html
-     * <style type="text/css" class="cssStyles">
-     * .refreshicon:before
-     * {
-     *    content:"\e898";
-     * }
-     * </style>
-     * <div id="grid"></div>
-     * <script>
-     * var gridObj = new Grid({
-     * datasource: window.gridData,
-     * toolbar : ['Expand', {text: 'Refresh', tooltipText: 'Refresh', prefixIcon: 'refreshicon'}]});
-     * //Expand - To display button with Expand label
-     * //Refresh - To display button with prefixIcon and text
-     * gridObj.appendTo("#grid");
-     * </script>
-     * ```
+     * 
+     *  > Check the [`Toolbar`](./toolbar.html#custom-toolbar-items) to customize its default items.
+     * 
+     * {% codeBlock src="grid/toolbar-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -894,2 +855,3 @@ */
      * * `nextPage` - Go to the next page.
+     * 
      * @default null
@@ -909,3 +871,3 @@ */
      * * `sortDescending` - Sort the current column in descending order.
-     * * `filter` - Filter options will show based on filterSettings property like checkbox filter, excel filter
+     * * `filter` - Filter options will show based on filterSettings property like checkbox filter, excel filter, menu filter.
      * @default null
@@ -954,3 +916,3 @@ */
     /**
-     * This allows any customization of Grid properties before rendering. 
+     * This event allows customization of Grid properties before rendering.
      * @event 
@@ -1097,2 +1059,3 @@ */
      * Triggers before Grid data is exported to Excel file.
+     * @event
      */
@@ -1103,2 +1066,3 @@ beforeExcelExport?: EmitType<Object>;
      * Triggers after Grid data is exported to Excel file.
+     * @event
      */
@@ -1109,2 +1073,3 @@ excelExportComplete?: EmitType<ExcelExportCompleteArgs>;
      * Triggers before Grid data is exported to PDF document.
+     * @event
      */
@@ -1115,2 +1080,3 @@ beforePdfExport?: EmitType<Object>;
      * Triggers after Grid data is exported to PDF document.
+     * @event
      */
@@ -1253,3 +1219,3 @@ pdfExportComplete?: EmitType<PdfExportCompleteArgs>;
     /**
-     * Triggers when the check box in checkbox type column is changed.
+     * Triggers when the check box state change in checkbox column.
      * @event
@@ -1256,0 +1222,0 @@ */

src/grid/base/interface.d.ts

@@ -336,4 +336,2 @@ import { Component, NumberFormatOptions, DateFormatOptions, EmitType, KeyboardEventArgs, L10n } from '@syncfusion/ej2-base';
     getFrozenColumns(): number;
-    showColumn(columnName: string | string[], showBy?: string): void;
-    hideColumn(columnName: string | string[], hideBy?: string): void;
     print(): void;
@@ -656,5 +654,5 @@ excelExport(exportProperties?: any, isMultipleExport?: boolean, workbook?: any): Promise<any>;
     element?: Element;
-    /** Defines the  display columns of column chooser. */
+    /** Defines the display columns of column chooser. */
     columns?: Column[];
-    /** Defines the selected row data. */
+    /** Specifies the instance of column chooser dialog. */
     dialogInstance?: Object;
@@ -858,22 +856,2 @@ }
 }
-export interface ThemeStyle {
-    /** Defines the font color of theme style */
-    fontColor?: string;
-    /** Defines the font name of theme style */
-    fontName?: string;
-    /** Defines the font size of theme style */
-    fontSize?: number;
-    /** Defines the bold of theme style */
-    bold?: boolean;
-    /** Defines the borders of theme style */
-    borders?: Border;
-}
-export interface Theme {
-    /** Defines the style of header content */
-    header?: ThemeStyle;
-    /** Defines the theme style of record content */
-    record?: ThemeStyle;
-    /** Defines the theme style of caption content */
-    caption?: ThemeStyle;
-}
 export interface ExcelCell {
@@ -930,3 +908,5 @@ /** Defines the index for the cell */
     target?: Element;
-    /** Defines the type of element dragged. */
+    /** Defines the type of the element to be dragged.
+     * @hidden
+     */
     draggableType?: string;
@@ -1087,11 +1067,13 @@ /** Defines the selected row data. */
 export interface AddEventArgs {
-    /** Defines the cancel option value. */
+    /** If `cancel` is set to true, then the current action will stopped. */
     cancel?: boolean;
     /** Defines the request type. */
     requestType?: string;
-    /** Defines the foreign key record object (JSON). @hidden */
+    /** Defines the foreign key record object.
+     * @hidden
+     */
     foreignKeyData?: Object;
     /** Defines the record objects. */
     data?: Object;
-    /** Defines the name of the event. */
+    /** Defines the event name. */
     type?: string;
@@ -1243,7 +1225,7 @@ /** Defines the previous data. */
     /**
-     * The function for resolving
+     * The function which resolves the current action's promise.
      */
     resolver?: Function;
     /**
-     * The state of pending state.
+     * Defines the current state of the action.
      */
@@ -1267,3 +1249,3 @@ isPending?: Boolean;
 export interface DataStateChangeEventArgs {
-    /** Defines the skip count */
+    /** Defines the skip count in datasource record */
     skip?: number;
@@ -1282,11 +1264,11 @@ /** Defines the page size */
     action?: PageEventArgs | GroupEventArgs | FilterEventArgs | SearchEventArgs | SortEventArgs;
-    /** Defines the table name */
+    /** Defines the remote table name */
     table?: string;
     /** Defines the selected field names */
     select?: string[];
-    /** Defines that the count is required */
+    /** If `count` is set true, then the remote service needs to return records and count */
     count?: boolean;
 }
 export interface DataSourceChangedEventArgs {
-    /** Defines the current action. */
+    /** Defines the current action type. */
     requestType?: string;
@@ -1305,3 +1287,3 @@ /** Defines the current action. */
     index?: number;
-    /** Defines the end of editing function */
+    /** Defines the end of editing function. */
     endEdit?: Function;
@@ -1467,33 +1449,27 @@ /** Defines the changes made in batch editing */
 export interface Theme {
-    /** Defines the style of header content */
+    /** Defines the style of header content. */
     header?: ThemeStyle;
-    /** Defines the theme style of record content */
+    /** Defines the theme style of record content. */
     record?: ThemeStyle;
-    /** Defines the theme style of caption content */
+    /** Defines the theme style of caption content. */
     caption?: ThemeStyle;
 }
 export interface ThemeStyle {
-    /** Defines the font color of theme style */
+    /** Defines the font color of theme style. */
     fontColor?: string;
-    /** Defines the font name of theme style */
+    /** Defines the font name of theme style. */
     fontName?: string;
-    /** Defines the font size of theme style */
+    /** Defines the font size of theme style. */
     fontSize?: number;
-    /** Defines the bold of theme style */
+    /** Defines the bold of theme style. */
     bold?: boolean;
-    /** Defines the borders of theme style */
+    /** Defines the borders of theme style. */
     borders?: Border;
 }
-export interface Border {
-    /** Defines the color of border */
-    color?: string;
-    /** Defines the line style of border */
-    lineStyle?: BorderLineStyle;
-}
 export interface PdfHeader {
     /** Defines the header content distance from top. */
     fromTop?: number;
-    /** Defines the height of header content . */
+    /** Defines the height of header content. */
     height?: number;
-    /** Defines the header contents */
+    /** Defines the header contents. */
     contents?: PdfHeaderFooterContent[];
@@ -1500,0 +1476,0 @@ }

src/grid/base/util.d.ts

@@ -88,3 +88,3 @@ import { IPosition, IGrid, IRow } from './interface';
 /** @hidden */
-export declare function getFilterMenuPostion(target: Element, dialogObj: Dialog): void;
+export declare function getFilterMenuPostion(target: Element, dialogObj: Dialog, grid: IGrid): void;
 /** @hidden */
@@ -129,1 +129,5 @@ export declare function getZIndexCalcualtion(args: {
 export declare function getDatePredicate(filterObject: PredicateModel): Predicate;
+/**
+ * @hidden
+ */
+export declare function renderMovable(ele: Element, frzCols: number): Element;

src/grid/base/util.js

@@ -360,15 +360,30 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "../models/column", "@syncfusion/ej2-popups"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, ej2_data_1, column_1, ej2_popups_1) {
     exports.distinctStringValues = distinctStringValues;
-    function getFilterMenuPostion(target, dialogObj) {
+    function getFilterMenuPostion(target, dialogObj, grid) {
         var elementVisible = dialogObj.element.style.display;
         dialogObj.element.style.display = 'block';
         var dlgWidth = dialogObj.width;
-        var newpos = ej2_popups_1.calculateRelativeBasedPosition(target, dialogObj.element);
-        dialogObj.element.style.display = elementVisible;
-        dialogObj.element.style.top = (newpos.top + target.getBoundingClientRect().height) - 5 + 'px';
-        var leftPos = ((newpos.left - dlgWidth) + target.clientWidth);
-        if (leftPos < 1) {
-            dialogObj.element.style.left = (dlgWidth + leftPos) - 16 + 'px';
+        var newpos;
+        if (!grid.enableRtl) {
+            newpos = ej2_popups_1.calculateRelativeBasedPosition(target, dialogObj.element);
+            dialogObj.element.style.display = elementVisible;
+            dialogObj.element.style.top = (newpos.top + target.getBoundingClientRect().height) - 5 + 'px';
+            var leftPos = ((newpos.left - dlgWidth) + target.clientWidth);
+            if (leftPos < 1) {
+                dialogObj.element.style.left = (dlgWidth + leftPos) - 16 + 'px';
+            }
+            else {
+                dialogObj.element.style.left = leftPos + -4 + 'px';
+            }
         }
         else {
-            dialogObj.element.style.left = leftPos + -4 + 'px';
+            newpos = ej2_popups_1.calculatePosition(target, 'left', 'bottom');
+            dialogObj.element.style.top = (newpos.top + target.getBoundingClientRect().height) - 35 + 'px';
+            dialogObj.element.style.display = elementVisible;
+            var leftPos = ((newpos.left - dlgWidth) + target.clientWidth);
+            if (leftPos < 1) {
+                dialogObj.element.style.left = (dlgWidth + leftPos) + -16 + 'px';
+            }
+            else {
+                dialogObj.element.style.left = leftPos - 16 + 'px';
+            }
         }
@@ -446,4 +461,4 @@ }
         if (filterObject.operator === 'equal' || filterObject.operator === 'notequal') {
-            prevDate = new Date(value.setDate(value.getDate() - 1));
-            nextDate = new Date(value.setDate(value.getDate() + 2));
+            prevDate = new Date(value.setHours(0) - 1);
+            nextDate = new Date(value.setHours(24));
             prevObj.value = prevDate;
@@ -470,5 +485,17 @@ nextObj.value = nextDate;
         }
+        filterObject.ejpredicate = datePredicate;
         return datePredicate;
     }
     exports.getDatePredicate = getDatePredicate;
+    function renderMovable(ele, frzCols) {
+        var mEle = ele.cloneNode(true);
+        for (var i = 0; i < frzCols; i++) {
+            mEle.removeChild(mEle.children[0]);
+        }
+        for (var i = frzCols, len = ele.childElementCount; i < len; i++) {
+            ele.removeChild(ele.children[ele.childElementCount - 1]);
+        }
+        return mEle;
+    }
+    exports.renderMovable = renderMovable;
 });

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

@@ -1,2 +0,2 @@
-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';
+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';
 
@@ -3,0 +3,0 @@ /**

src/grid/models/column.d.ts

@@ -40,3 +40,3 @@ import { NumberFormatOptions, DateFormatOptions } from '@syncfusion/ej2-base';
     /**
-     * Defines the maximum width of the column in pixels or percentage.
+     * Defines the maximum width of the column in pixel or percentage, which will restrict resizing beyond this pixel or percentage.
      * @default undefined
@@ -89,3 +89,4 @@ */
     /**
-     * Defines the column template as a string or HTML element ID that is used to add customized element in each column.
+     * Defines the column template that renders customized element in each cell of the column.
+     * It accepts either [template string](../base/template-engine.html) or HTML element ID.
      * @default null
@@ -100,3 +101,3 @@ */
     /**
-     * If `isFrozen` set to true, then the column will be in frozen state.
+     * You can use this property to freeze selected columns in grid
      * @default false
@@ -149,20 +150,3 @@ */
      *
-     * ```html
-     * <div id="Grid"></div>
-     * ```
-     * ```typescript
-     * let gridObj: Grid = new Grid({
-     * dataSource: filterData,
-     * columns: [
-     *    { field: 'OrderID', headerText: 'Order ID' },
-     *    {
-     *        field: 'EmployeeID', headerText: 'Employee ID', customAttributes: {
-     *           class: 'employeeid',
-     *           type: 'employee-id-cell'
-     *      }
-     *   }]
-     * });
-     * gridObj.appendTo('#Grid');
-     * ```
-     *
+     * {% codeBlock src="grid/custom-attribute-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -179,3 +163,3 @@ */
     /**
-     * Defines the column data source  which will act as foreign data source.
+     * Defines the column data source which will act as foreign data source.
      * @default null
@@ -187,21 +171,3 @@ */
      * This function triggers before rendering of each cell.
-     *
-     * ```html
-     * <div id="Grid"></div>
-     * ```
-     * ```typescript
-     * class ExtendedFormatter implements ICellFormatter {
-     * public getValue(column: Column, data: Object): Object {
-     *   return '<span style="color:' + (data['Verified'] ? 'green' : 'red') + '"><i>' + data['Verified'] + '</i><span>';
-     * }
-     * }
-     * let gridObj: Grid = new Grid({
-     *     dataSource: filterData,
-     *     columns: [
-     *         { field: 'ShipName', headerText: 'Ship Name' },
-     *         { field: 'Verified', headerText: 'Verified Status', formatter: ExtendedFormatter }]
-     * });
-     * gridObj.appendTo('#Grid');
-     * ```
-     *
+     * {% codeBlock src="grid/formatter-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -215,17 +181,3 @@ */
      *
-     * ```html
-     * <div id="Grid"></div>
-     * ```
-     * ```typescript
-     * let gridObj: Grid = new Grid({
-     * dataSource: [{ EmployeeID: 1, EmployeeName: ['John', 'M'] }, { EmployeeID: 2, EmployeeName: ['Peter', 'A'] }],
-     * columns: [
-     *     { field: 'EmployeeID', headerText: 'Employee ID' },
-     *     { field: 'EmployeeName', headerText: 'Employee First Name',
-     *       valueAccessor: (field: string, data: Object, column: Column) => {
-     *             return data['EmployeeName'][0];
-     *         },
-     *     }]
-     * });
-     * ```
+     * {% codeBlock src="grid/value-accessor-api/index.ts" %}{% endcodeBlock %}
      *
@@ -241,31 +193,3 @@ * @default null
      *
-     * ```html
-     * <div id="Grid"></div>
-     * ```
-     * ```typescript
-     * let gridObj: Grid = new Grid({
-     * dataSource: filterData,
-     * columns: [
-     *   { field: 'OrderID', headerText: 'Order ID' },
-     *   {
-     *      field: 'EmployeeID', filterBarTemplate: {
-     *         create: (args: { element: Element, column: Column }) => {
-     *              let input: HTMLInputElement = document.createElement('input');
-     *              input.id = 'EmployeeID';
-     *              input.type = 'text';
-     *              return input;
-     *         },
-     *         write: (args: { element: Element, column: Column }) => {
-     *             args.element.addEventListener('input', args.column.filterBarTemplate.read as EventListener);
-     *         },
-     *         read: (args: { element: HTMLInputElement, columnIndex: number, column: Column }) => {
-     *             gridObj.filterByColumn(args.element.id, 'equal', args.element.value);
-     *        }
-     *     }
-     *  }],
-     *   allowFiltering: true
-     * });
-     * gridObj.appendTo('#Grid');
-     * ```
-     *
+     * {% codeBlock src="grid/filter-template-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -278,55 +202,8 @@ */
      * * ui - to render custom component for specific column it has following functions.
-     * * create – It is used for creating custom components.
-     * * read -  It is used for read the value from the component.
-     * * write - It is used to apply component model as dynamically.
+     * * ui.create – It is used for creating custom components.
+     * * ui.read -  It is used for read the value from the component.
+     * * ui.write - It is used to apply component model as dynamically.
+     * {% codeBlock src="grid/filter-menu-api/index.ts" %}{% endcodeBlock %}
      *
-     *  ``` html
-     * <div id="Grid"></div>
-     * ```
-     * ```typescript
-     * let gridObj: Grid = new Grid({
-     * dataSource: filterData,
-     * allowFiltering: true,
-     * filterSettings: { type: 'menu'},
-     *  columns: [
-     *      {
-     *          field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'right', filter: {
-     *              ui: {
-     *                  create: (args: { target: Element, column: Object }) => {
-     *                      let db: Object = new DataManager(data);
-     *                      let flValInput: HTMLElement = createElement('input', { className: 'flm-input' });
-     *                      args.target.appendChild(flValInput);
-     *                      this.dropInstance = new DropDownList({
-     *                          dataSource: new DataManager(data),
-     *                          fields: { text: 'OrderID', value: 'OrderID' },
-     *                          placeholder: 'Select a value',
-     *                          popupHeight: '200px'
-     *                      });
-     *                      this.dropInstance.appendTo(flValInput);
-     *                  },
-     *                  write: (args: {
-     *                      column: Object, target: Element, parent: any,
-     *                      filteredValue: number | string
-     *                  }) => {
-     *                      this.dropInstance.value = args.filteredValue;
-     *                  },
-     *                  read: (args: { target: Element, column: any, operator: string, fltrObj: Filter }) => {
-     *                      args.fltrObj.filterByColumn(args.column.field, args.operator, this.dropInstance.value);
-     *
-     *                  }
-     *              }
-     *          }
-     *      },
-     *      { field: 'CustomerID', headerText: 'Customer Name', width: 150 },
-     *      { field: 'EmployeeID', headerText: 'Employee ID', width: 150 },
-     *      {
-     *          field: 'ShipCountry', headerText: 'Ship Country', filter: {
-     *              type: 'checkbox'
-     *          }, width: 150
-     *      }
-     *  ]
-     * });
-     * gridObj.appendTo('#Grid');
-     * ```
-     *
+     * > Check the [`Filter UI`](./filtering.html#custom-component-in-filter-menu) for its customization.
      *  @default null
@@ -412,23 +289,3 @@ */
      * * cancel - Cancel the edit state.
-     *
-     * The following code example implements the custom command column.
-     * ```html
-     * <style type="text/css" class="cssStyles">
-     * .details-icon:before
-     * {
-     *    content:"\e74d";
-     * }
-     * </style>
-     * <div id="Grid"></div>
-     * ```
-     * ```typescript
-     * var gridObj = new Grid({
-     * datasource: window.gridData,
-     * columns : [
-     *  { field: 'CustomerID', headerText: 'Customer ID' },
-     *  { field: 'CustomerName', headerText: 'Customer Name' },
-     *  {commands: [{buttonOption:{content: 'Details', click: onClick, cssClass: details-icon}}], headerText: 'Customer Details'}
-     * ]
-     * gridObj.appendTo("#Grid");
-     * ```
+     * {% codeBlock src="grid/command-column-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -517,3 +374,3 @@ */
     /**
-     * Defines the maximum width of the column in pixels or percentage.
+     * Defines the maximum width of the column in pixel or percentage, which will restrict resizing beyond this pixel or percentage.
      * @default undefined
@@ -566,3 +423,4 @@ */
     /**
-     * Defines the column template as a string or HTML element ID that is used to add customized element in each column.
+     * Defines the column template that renders customized element in each cell of the column.
+     * It accepts either [template string](../base/template-engine.html) or HTML element ID.
      * @default null
@@ -578,3 +436,3 @@ */
     /**
-     * If `isFrozen` set to true, then the column will be in frozen state.
+     * You can use this property to freeze selected columns in grid.
      * @default false
@@ -581,0 +439,0 @@ */

src/grid/models/column.js

@@ -46,2 +46,13 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-data", "../services/value-formatter", "../base/util"], function (require, exports, ej2_base_1, ej2_data_1, value_formatter_1, util_1) {
             }
+            if (this.sortComparer) {
+                var a_1 = this.sortComparer;
+                this.sortComparer = function comparer(x, y) {
+                    if (this.sortDirection === 'descending') {
+                        var z = x;
+                        x = y;
+                        y = z;
+                    }
+                    return a_1(x, y);
+                };
+            }
             if (!this.sortComparer && this.isForeignColumn()) {
@@ -48,0 +59,0 @@ this.sortComparer = function (x, y) {

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

@@ -47,3 +47,4 @@ import { Property, ChildProperty } from '@syncfusion/ej2-base';
     /**
-     * Defines the template as string or HTML element ID which renders customized elements in pager instead of default elements.    
+     * Defines the template which renders customized elements in pager instead of default elements.     
+     * It accepts either [template string](../base/template-engine.html) or HTML element ID.   
      * @default null    
@@ -50,0 +51,0 @@ */

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

@@ -39,3 +39,4 @@ import { ChildProperty } from '@syncfusion/ej2-base';
     /**
-     * Defines the template as string or HTML element ID which renders customized elements in pager instead of default elements.
+     * Defines the template which renders customized elements in pager instead of default elements.
+     * It accepts either [template string](../base/template-engine.html) or HTML element ID.
      * @default null
@@ -42,0 +43,0 @@ */

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

@@ -47,2 +47,3 @@ var __extends = (this && this.__extends) || (function () {
             node.setAttribute('aria-label', node.innerHTML + ' is groupcaption cell');
+            node.setAttribute('title', node.innerHTML);
             return node;
@@ -49,0 +50,0 @@ };

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

@@ -40,3 +40,3 @@ define(["require", "exports", "@syncfusion/ej2-calendars", "@syncfusion/ej2-base", "@syncfusion/ej2-base"], function (require, exports, ej2_calendars_1, ej2_base_1, ej2_base_2) {
         DateFilterUI.prototype.openPopup = function (args) {
-            args.popupElement.element.style.zIndex = (this.dialogObj.zIndex + 1).toString();
+            args.popup.element.style.zIndex = (this.dialogObj.zIndex + 1).toString();
         };
@@ -43,0 +43,0 @@ return DateFilterUI;

src/grid/renderer/edit-renderer.js

@@ -54,9 +54,11 @@ define(["require", "exports", "@syncfusion/ej2-base", "./inline-edit-renderer", "./batch-edit-renderer", "./dialog-edit-renderer", "@syncfusion/ej2-base", "../base/enum", "../services/row-model-generator"], function (require, exports, ej2_base_1, inline_edit_renderer_1, batch_edit_renderer_1, dialog_edit_renderer_1, ej2_base_2, enum_1, row_model_generator_1) {
                 var temp = col.edit.write;
-                col.edit.write({
-                    rowData: args.rowData, element: cell, column: col, requestType: args.requestType, row: args.row,
-                    foreignKeyData: col.isForeignColumn() && ej2_base_1.getValue(col.field, args.foreignKeyData)
-                });
-                if (!isFocused && !cell.getAttribute('disabled')) {
-                    this.focusElement(cell, args.type);
-                    isFocused = true;
+                if (!ej2_base_1.isNullOrUndefined(cell)) {
+                    col.edit.write({
+                        rowData: args.rowData, element: cell, column: col, requestType: args.requestType, row: args.row,
+                        foreignKeyData: col.isForeignColumn() && ej2_base_1.getValue(col.field, args.foreignKeyData)
+                    });
+                    if (!isFocused && !cell.getAttribute('disabled')) {
+                        this.focusElement(cell, args.type);
+                        isFocused = true;
+                    }
                 }
@@ -63,0 +65,0 @@ }

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

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "./cell-renderer"], function (require, exports, ej2_base_1, ej2_base_2, cell_renderer_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "./cell-renderer", "@syncfusion/ej2-inputs"], function (require, exports, ej2_base_1, ej2_base_2, cell_renderer_1, ej2_inputs_1) {
     "use strict";
@@ -77,6 +77,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
                     innerDIV.appendChild(input);
-                    innerDIV.appendChild(ej2_base_2.createElement('span', {
-                        className: 'e-cancel e-hide e-icons e-icon-hide',
-                        attrs: { 'aria-label': 'clear filter cell', tabindex: '-1' }
-                    }));
+                    ej2_inputs_1.Input.createInput({
+                        element: input, floatLabelType: 'Never',
+                        properties: {
+                            enableRtl: this.parent.enableRtl, showClearButton: true
+                        }
+                    });
                 }
@@ -83,0 +85,0 @@ if (column.allowFiltering === false || column.field === '' || ej2_base_1.isNullOrUndefined(column.field)) {

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

@@ -70,3 +70,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-popups", "./filter-menu-operator", "./string-filter-ui", "./number-filter-ui", "./boolean-filter-ui", "./date-filter-ui", "../base/util", "../base/constant"], function (require, exports, ej2_base_1, ej2_base_2, ej2_popups_1, filter_menu_operator_1, string_filter_ui_1, number_filter_ui_1, boolean_filter_ui_1, date_filter_ui_1, util_1, events) {
             if (!ej2_base_2.Browser.isDevice) {
-                util_1.getFilterMenuPostion(target, this.dlgObj);
+                util_1.getFilterMenuPostion(target, this.dlgObj, this.parent);
             }
@@ -175,2 +175,3 @@ this.renderFilterUI(target, column);
         FilterMenuRenderer.prototype.destroy = function () {
+            this.closeDialog();
         };
@@ -177,0 +178,0 @@ return FilterMenuRenderer;

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

@@ -31,2 +31,3 @@ import { IRenderer, IGrid } from '../base/interface';
     private onScroll(e?);
+    getColFromIndex(index?: number): HTMLElement;
     private columnVisibilityChanged();
@@ -33,0 +34,0 @@ addEventListener(): void;

src/grid/renderer/footer-renderer.js

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/constant", "./content-renderer", "./row-renderer", "../services/summary-model-generator", "../base/enum"], 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) {
+define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/constant", "./content-renderer", "./row-renderer", "../services/summary-model-generator", "../base/enum", "../base/util"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, constant_1, content_renderer_1, row_renderer_1, summary_model_generator_1, enum_1, util_1) {
     "use strict";
@@ -30,2 +30,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
             var innerDiv = ej2_base_1.createElement('div', { className: 'e-summarycontent' });
+            var movableContent = innerDiv;
             if (this.parent.getFrozenColumns()) {
@@ -38,8 +39,6 @@ var fDiv = ej2_base_1.createElement('div', { className: 'e-frozenfootercontent' });
                 this.freezeContentRender.setMovableContent(mDiv);
-                if (ej2_base_3.Browser.isDevice) {
-                    mDiv.style.overflowX = 'scroll';
-                }
+                movableContent = mDiv;
             }
             if (ej2_base_3.Browser.isDevice) {
-                innerDiv.style.overflowX = 'scroll';
+                movableContent.style.overflowX = 'scroll';
             }
@@ -69,2 +68,3 @@ div.appendChild(innerDiv);
                 table.insertBefore(colGroup, table.querySelector('tbody'));
+                this.setColGroup(colGroup);
             }
@@ -96,2 +96,5 @@ this.setTable(table);
             if (this.parent.getFrozenColumns()) {
+                ej2_base_1.remove(this.getPanel());
+                this.renderPanel();
+                this.renderTable();
                 this.freezeTable.tFoot.innerHTML = '';
@@ -102,13 +105,22 @@ this.renderSummaryContent(e, this.freezeTable, 0, this.parent.getFrozenColumns());
             this.renderSummaryContent(e, this.getTable(), this.parent.getFrozenColumns());
+            if (this.parent.getFrozenColumns()) {
+                var frozenDiv = this.freezeContentRender.getFrozenContent();
+                if (!frozenDiv.offsetHeight) {
+                    frozenDiv.style.height = this.getTable().offsetHeight + 'px';
+                }
+            }
             this.onScroll();
         };
         FooterRenderer.prototype.refreshCol = function () {
-            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());
-            this.setColGroup(headerCol);
+            var mheaderCol;
+            var fheaderCol = mheaderCol = this.parent.element.querySelector('.e-gridheader').querySelector('colgroup').cloneNode(true);
+            if (this.parent.getFrozenColumns()) {
+                mheaderCol = util_1.renderMovable(fheaderCol, this.parent.getFrozenColumns());
+                this.freezeTable.replaceChild(fheaderCol, this.freezeTable.querySelector('colGroup'));
+            }
+            this.getTable().replaceChild(mheaderCol, this.getColGroup());
+            this.setColGroup(mheaderCol);
         };
         FooterRenderer.prototype.onWidthChange = function (args) {
-            this.getColGroup().children[args.index].style.width = ej2_base_2.formatUnit(args.width);
+            this.getColFromIndex(args.index).style.width = ej2_base_2.formatUnit(args.width);
             if (this.parent.allowResizing && args.module === 'resize') {
@@ -120,4 +132,11 @@ this.updateFooterTableWidth(this.getTable());
             if (e === void 0) { e = { left: this.parent.getContent().firstChild.scrollLeft }; }
-            this.getPanel().firstChild.scrollLeft = e.left;
+            this.getTable().parentElement.scrollLeft = e.left;
         };
+        FooterRenderer.prototype.getColFromIndex = function (index) {
+            var fCol = this.parent.getFrozenColumns();
+            if (fCol && fCol > index) {
+                return this.freezeTable.querySelector('colGroup').children[index];
+            }
+            return this.getColGroup().children[index - fCol];
+        };
         FooterRenderer.prototype.columnVisibilityChanged = function () {
@@ -124,0 +143,0 @@ this.refresh();

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

@@ -43,3 +43,2 @@ import { IGrid, IRenderer, IModelGenerator } from '../base/interface';
     private updateColgroup();
-    private renderMovable(ele);
 }

src/grid/renderer/freeze-renderer.js

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "@syncfusion/ej2-base", "./header-renderer", "./content-renderer", "../services/freeze-row-model-generator", "../base/constant"], function (require, exports, ej2_base_1, header_renderer_1, content_renderer_1, freeze_row_model_generator_1, events) {
+define(["require", "exports", "@syncfusion/ej2-base", "./header-renderer", "./content-renderer", "../services/freeze-row-model-generator", "../base/constant", "../base/util"], function (require, exports, ej2_base_1, header_renderer_1, content_renderer_1, freeze_row_model_generator_1, events, util_1) {
     "use strict";
@@ -100,3 +100,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
             this.updateColgroup();
-            this.renderMovable(this.parent.getContentTable().querySelector('colgroup'));
+            util_1.renderMovable(this.parent.getContentTable().querySelector('colgroup'), this.parent.getFrozenColumns());
             this.initializeHeaderDrag();
@@ -115,3 +115,3 @@ this.parent.notify(events.headerRefreshed, { rows: this.rows, args: { isFrozen: false } });
                     this.getMovableHeader().querySelector('thead')
-                        .appendChild(this.renderMovable(filterRow));
+                        .appendChild(util_1.renderMovable(filterRow, this.parent.getFrozenColumns()));
                 }
@@ -233,15 +233,4 @@ }
             ej2_base_1.remove(this.getMovableHeader().querySelector('colgroup'));
-            mTable.insertBefore(this.renderMovable(this.getFrozenHeader().querySelector('colgroup')), mTable.querySelector('thead'));
+            mTable.insertBefore(util_1.renderMovable(this.getFrozenHeader().querySelector('colgroup'), this.parent.getFrozenColumns()), mTable.querySelector('thead'));
         };
-        FreezeRender.prototype.renderMovable = function (ele) {
-            var frzCols = this.parent.getFrozenColumns();
-            var mEle = ele.cloneNode(true);
-            for (var i = 0; i < frzCols; i++) {
-                mEle.removeChild(mEle.children[0]);
-            }
-            for (var i = frzCols, len = ele.childElementCount; i < len; i++) {
-                ele.removeChild(ele.children[ele.childElementCount - 1]);
-            }
-            return mEle;
-        };
         return FreezeRender;
@@ -248,0 +237,0 @@ }(header_renderer_1.HeaderRender));

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

@@ -32,2 +32,4 @@ define(["require", "exports", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1) {
                 mTbody.insertBefore(mEle, mTbody.firstChild);
+                args.row.querySelector('.e-normaledit').setAttribute('colspan', this.parent.getFrozenColumns() + '');
+                mEle.setAttribute('colspan', '' + (this.parent.getColumns().length - this.parent.getFrozenColumns()));
             }
@@ -34,0 +36,0 @@ };

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

@@ -16,3 +16,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-inputs", "../base/util"], function (require, exports, ej2_base_1, ej2_base_2, ej2_inputs_1, util_1) {
         NumericEditCell.prototype.read = function (element) {
-            element.ej2_instances[0].focusOut();
+            element.ej2_instances[0].focusOut(event);
             return element.ej2_instances[0].value;
@@ -19,0 +19,0 @@ };

src/grid/renderer/row-renderer.js

@@ -39,2 +39,5 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/constant", "../base/util", "../base/enum", "./cell-merge-renderer"], function (require, exports, ej2_base_1, ej2_base_2, constant_1, util_1, enum_1, cell_merge_renderer_1) {
                 row.isSelected = true;
+                if (this.parent.getSelectedRowIndexes().indexOf(row.index) === -1) {
+                    this.parent.getSelectedRowIndexes().push(row.index);
+                }
             }
@@ -50,3 +53,3 @@ this.buildAttributeFromRow(tr, row);
                 var attrs = { 'index': !ej2_base_1.isNullOrUndefined(row.index) ? row.index.toString() : '' };
-                if (row.isExpand) {
+                if (row.isExpand && row.cells[i].cellType === enum_1.CellType.DetailExpand) {
                     attrs['class'] = 'e-detailrowexpand';
@@ -53,0 +56,0 @@ }

src/grid/services/focus-strategy.js

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "@syncfusion/ej2-base", "../base/enum", "../base/constant"], function (require, exports, ej2_base_1, enum_1, event) {
+define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/enum", "../base/constant"], function (require, exports, ej2_base_1, ej2_base_2, enum_1, event) {
     "use strict";
@@ -28,8 +28,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
             var target = e.target;
-            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');
+            this.skipFocus = target.classList.contains('e-grid');
         };
         FocusStrategy.prototype.onFocus = function () {
-            if (this.parent.isDestroyed) {
+            if (this.parent.isDestroyed || ej2_base_2.Browser.isDevice || this.parent.enableVirtualization) {
                 return;
@@ -51,3 +49,3 @@ }
                 this.currentInfo.skipAction = false;
-                ej2_base_1.addClass([this.currentInfo.element], ['e-focused', 'e-focus']);
+                ej2_base_2.addClass([this.currentInfo.element], ['e-focused', 'e-focus']);
             }
@@ -62,3 +60,2 @@ };
             this.currentInfo.skipAction = false;
-            this.onFocus();
             this.getContent().getFocusInfo().elementToFocus.tabIndex = 0;
@@ -83,3 +80,3 @@ };
             this.parent.notify(event.beforeCellFocused, beforeArgs);
-            if (beforeArgs.cancel) {
+            if (beforeArgs.cancel || ej2_base_1.closest(e.target, '.e-inline-edit')) {
                 return;
@@ -133,3 +130,6 @@ }
             return (this.parent.editSettings.mode !== 'batch' && (this.parent.isEdit || ['insert', 'f2', 'delete'].indexOf(e.action) > -1)
-                || (ej2_base_1.closest(document.activeElement, '.e-filterbarcell') !== null && ['enter', 'leftArrow', 'rightArrow'].indexOf(e.action) > -1)
+                || (ej2_base_1.closest(document.activeElement, '.e-filterbarcell') !== null ||
+                    ej2_base_1.closest(document.activeElement, '#' + this.parent.element.id + '_searchbar') !== null
+                        && ['enter', 'leftArrow', 'rightArrow',
+                            'shiftLeft', 'shiftRight', 'ctrlPlusA'].indexOf(e.action) > -1)
                 || (ej2_base_1.closest(target, '.e-gridcontent') === null && ej2_base_1.closest(target, '.e-gridheader') === null)
@@ -162,3 +162,3 @@ || (e.action === 'space' && (!target.classList.contains('e-gridchkbox') && ej2_base_1.closest(target, '.e-gridchkbox') === null
             }
-            ej2_base_1.removeClass([this.currentInfo.element, this.currentInfo.elementToFocus], ['e-focused', 'e-focus']);
+            ej2_base_2.removeClass([this.currentInfo.element, this.currentInfo.elementToFocus], ['e-focused', 'e-focus']);
             this.currentInfo.element.tabIndex = -1;
@@ -177,5 +177,5 @@ };
             if (this.currentInfo.outline) {
-                ej2_base_1.addClass([info.element], ['e-focused']);
+                ej2_base_2.addClass([info.element], ['e-focused']);
             }
-            ej2_base_1.addClass([info.elementToFocus], ['e-focus']);
+            ej2_base_2.addClass([info.elementToFocus], ['e-focus']);
             info.element.tabIndex = 0;
@@ -222,7 +222,2 @@ if (!isFocused) {
                 cFocus.generateRows(updateRow, { matrix: matrix, handlerInstance: (e.args && e.args.isFrozen) ? _this.fHeader : _this.header });
-                var actions = ['paging', 'grouping'];
-                if (e.args && actions.indexOf(e.args.requestType) > -1 && !e.args.virtualInfo) {
-                    _this.skipFocus = true;
-                    _this.onFocus();
-                }
             };
@@ -244,3 +239,3 @@ };
             this.parent.on('close-edit', this.restoreFocus, this);
-            ['start-edit', 'start-add'].forEach(function (evt) { return _this.parent.on(evt, _this.clearOutline, _this); });
+            ['start-edit', 'start-add'].forEach(function (evt) { return _this.parent.on(evt, _this.clearIndicator, _this); });
             ['sorting'].forEach(function (action) { return _this.parent.on(action + "-complete", _this.restoreFocus, _this); });
@@ -289,3 +284,3 @@ this.parent.on(event.batchAdd, this.refreshMatrix(true), this);
             }
-            ej2_base_1.removeClass([this.currentInfo.element, this.currentInfo.elementToFocus], ['e-focus', 'e-focused']);
+            ej2_base_2.removeClass([this.currentInfo.element, this.currentInfo.elementToFocus], ['e-focus', 'e-focused']);
         };
@@ -423,3 +418,4 @@ FocusStrategy.prototype.getPrevIndexes = function () {
         ContentFocus.prototype.getTable = function () {
-            return (this.parent.frozenColumns ? this.parent.getContent().querySelector('.e-movablecontent .e-table') :
+            return (this.parent.frozenColumns ?
+                this.parent.getContent().querySelector('.e-movablecontent .e-table') :
                 this.parent.getContentTable());
@@ -458,4 +454,6 @@ };
                 || ej2_base_1.closest(e.target, 'td.e-detailrowexpand');
+            target = ej2_base_1.closest(e.target, 'td.e-detailcell') ?
+                ej2_base_1.isNullOrUndefined(ej2_base_1.closest(ej2_base_1.closest(e.target, '.e-grid'), 'td.e-detailcell')) ? null : target : target;
             if (!target) {
-                return;
+                return false;
             }
@@ -543,3 +541,2 @@ var _a = [target.parentElement.rowIndex, target.cellIndex], rowIndex = _a[0], cellIndex = _a[1];
             var table = this.getTable();
-            table = (this.parent.isEdit && table.rows[0].querySelector('table')) ? table.rows[0].cells[0].querySelector('table') : table;
             return function (rowIndex, cellIndex, action) {
@@ -648,3 +645,3 @@ var cell = table.rows[rowIndex].cells[cellIndex];
         HeaderFocus.prototype.getInfo = function (e) {
-            return ej2_base_1.extend(_super.prototype.getInfo.call(this, e), { isContent: false, isHeader: true });
+            return ej2_base_2.extend(_super.prototype.getInfo.call(this, e), { isContent: false, isHeader: true });
         };
@@ -651,0 +648,0 @@ HeaderFocus.prototype.validator = function () {

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

@@ -66,3 +66,3 @@ var __extends = (this && this.__extends) || (function () {
             row.cells = tmp;
-            row.visible = tmp.some(function (cell) { return cell.isDataCell && cell.visible; }) || !!this.parent.getFrozenColumns();
+            row.visible = tmp.some(function (cell) { return cell.isDataCell && cell.visible; });
             return row;
@@ -69,0 +69,0 @@ };

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

@@ -53,3 +53,9 @@ define(["require", "exports", "@syncfusion/ej2-base", "../services/row-model-generator", "../services/group-model-generator"], function (require, exports, ej2_base_1, row_model_generator_1, group_model_generator_1) {
             info.blockIndexes = loadedBlocks;
-            this.parent.currentViewData = result.map(function (m) { return m.data; });
+            var grouping = 'records';
+            if (this.parent.allowGrouping) {
+                this.parent.currentViewData[grouping] = result.map(function (m) { return m.data; });
+            }
+            else {
+                this.parent.currentViewData = result.map(function (m) { return m.data; });
+            }
             return result;
@@ -56,0 +62,0 @@ };

src/pager/pager-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, ModuleDeclaration, L10n, EmitType, Browser } from '@syncfusion/ej2-base';import { createElement, remove, classList, compile as templateCompiler } from '@syncfusion/ej2-base';import { isNullOrUndefined } from '@syncfusion/ej2-base';import { Property, Event, NotifyPropertyChanges, INotifyPropertyChanged } from '@syncfusion/ej2-base';import { PagerDropDown } from './pager-dropdown';import { NumericContainer } from './numeric-container';import { PagerMessage } from './pager-message';import { ExternalMessage } from './external-message';import { appendChildren } from '../grid/base/util';
+import { Component, ModuleDeclaration, L10n, EmitType, Browser } from '@syncfusion/ej2-base';
import { createElement, remove, classList, compile as templateCompiler } from '@syncfusion/ej2-base';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { Property, Event, NotifyPropertyChanges, INotifyPropertyChanged } from '@syncfusion/ej2-base';
import { PagerDropDown } from './pager-dropdown';
import { NumericContainer } from './numeric-container';
import { PagerMessage } from './pager-message';
import { ExternalMessage } from './external-message';
import { appendChildren } from '../grid/base/util';
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -3,0 +3,0 @@

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Lines of code

250047

increased by2.01%

Worsened metrics

Total package byte prevSize

24143707

decreased by-0.81%

Dependency changes

• Updated@syncfusion/ej2-buttons@^15.4.30

• Updated@syncfusion/ej2-data@^15.4.30

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

• Updated@syncfusion/ej2-navigations@^15.4.30

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