@syncfusion/ej2-grids 18.3.44 → 18.3.50-85492

package/dist/es6/ej2-grids.es5.js

@@ -1,4 +1,4 @@
-import { Browser, ChildProperty, Collection, Complex, Component, Draggable, Droppable, Event, EventHandler, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Observer, Property, addClass, append, attributes, blazorTemplates, classList, closest, compile, createElement, debounce, detach, extend, formatUnit, getEnumValue, getValue, isBlazor, isNullOrUndefined, isObject, isUndefined, matches, merge, print, remove, removeClass, resetBlazorTemplate, setCulture, setStyleAttribute, setValue, updateBlazorTemplate } from '@syncfusion/ej2-base';
+import { Browser, ChildProperty, Collection, Complex, Component, Draggable, Droppable, Event, EventHandler, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Observer, Property, addClass, append, attributes, blazorTemplates, classList, closest, compile, createElement, debounce, detach, extend, formatUnit, getEnumValue, getValue, isBlazor, isNullOrUndefined, isObject, isUndefined, matches, merge, print, remove, removeClass, resetBlazorTemplate, select, selectAll, setCulture, setStyleAttribute, setValue, updateBlazorTemplate } from '@syncfusion/ej2-base';
 import { DataManager, DataUtil, Deferred, Predicate, Query, UrlAdaptor } from '@syncfusion/ej2-data';
 import { Dialog, Tooltip, calculatePosition, calculateRelativeBasedPosition, createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 import { Button, CheckBox, RadioButton, Switch, createCheckBox } from '@syncfusion/ej2-buttons';
@@ -13,7 +13,7 @@ import { PdfBitmap, PdfBorders, PdfColor, PdfCompositeField, PdfDocument, PdfFon
  * ValueFormatter class to globalize the value.
  * @hidden
  */
-var ValueFormatter = /** @__PURE__ @class */ (function () {
+var ValueFormatter = /** @class */ (function () {
     function ValueFormatter(cultureName) {
         this.intl = new Internationalization();
         if (!isNullOrUndefined(cultureName)) {
@@ -67,16 +67,16 @@ var ValueFormatter = /** @__PURE__ @class */ (function () {
     return ValueFormatter;
 }());
 
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 /**
  * Represents Grid `Column` model class.
  */
-var Column = /** @__PURE__ @class */ (function () {
+var Column = /** @class */ (function () {
     function Column(options) {
         var _this = this;
         /**
@@ -330,7 +330,7 @@ var Column = /** @__PURE__ @class */ (function () {
 /**
  * Define options for custom command buttons.
  */
-var CommandColumnModel = /** @__PURE__ @class */ (function () {
+var CommandColumnModel = /** @class */ (function () {
     function CommandColumnModel() {
     }
     __decorate([
@@ -796,6 +796,8 @@ var groupCollapse = 'group-collapse';
 var beforeCheckboxRenderer = 'beforeCheckboxRenderer';
 /** @hidden */
 var refreshHandlers = 'refreshResizeHandlers';
+/** @hidden */
+var beforeRefreshOnDataChange = 'before-refresh-on-data-change';
 
 /**
  * Defines types of Cell
@@ -889,7 +891,7 @@ var AggregateTemplateType;
  * Grid data module is used to generate query and data source.
  * @hidden
  */
-var Data = /** @__PURE__ @class */ (function () {
+var Data = /** @class */ (function () {
     /**
      * Constructor for data module.
      * @hidden
@@ -1480,7 +1482,7 @@ var Data = /** @__PURE__ @class */ (function () {
  * Row
  * @hidden
  */
-var Row = /** @__PURE__ @class */ (function () {
+var Row = /** @class */ (function () {
     function Row(options, parent) {
         merge(this, options);
         this.parent = parent;
@@ -1530,7 +1532,7 @@ var Row = /** @__PURE__ @class */ (function () {
  * Cell
  * @hidden
  */
-var Cell = /** @__PURE__ @class */ (function () {
+var Cell = /** @class */ (function () {
     function Cell(options) {
         this.isSpanned = false;
         this.isRowSpanned = false;
@@ -1548,7 +1550,7 @@ var Cell = /** @__PURE__ @class */ (function () {
  * `CellMergeRender` module.
  * @hidden
  */
-var CellMergeRender = /** @__PURE__ @class */ (function () {
+var CellMergeRender = /** @class */ (function () {
     function CellMergeRender(serviceLocator, parent) {
         this.serviceLocator = serviceLocator;
         this.parent = parent;
@@ -1669,7 +1671,7 @@ var CellMergeRender = /** @__PURE__ @class */ (function () {
  * RowRenderer class which responsible for building row content.
  * @hidden
  */
-var RowRenderer = /** @__PURE__ @class */ (function () {
+var RowRenderer = /** @class */ (function () {
     function RowRenderer(serviceLocator, cellType, parent) {
         this.isSpan = false;
         this.cellType = cellType;
@@ -1863,7 +1865,7 @@ var RowRenderer = /** @__PURE__ @class */ (function () {
  * RowModelGenerator is used to generate grid data rows.
  * @hidden
  */
-var RowModelGenerator = /** @__PURE__ @class */ (function () {
+var RowModelGenerator = /** @class */ (function () {
     /**
      * Constructor for header renderer module
      */
@@ -1873,7 +1875,7 @@ var RowModelGenerator = /** @__PURE__ @class */ (function () {
     RowModelGenerator.prototype.generateRows = function (data, args) {
         var rows = [];
         var startIndex = this.parent.enableVirtualization && args ? args.startIndex : 0;
-        startIndex = this.parent.enableInfiniteScrolling ? this.getInfiniteIndex(args) : startIndex;
+        startIndex = this.parent.enableInfiniteScrolling && args ? this.getInfiniteIndex(args) : startIndex;
         for (var i = 0, len = Object.keys(data).length; i < len; i++, startIndex++) {
             rows[i] = this.generateRow(data[i], startIndex);
         }
@@ -1976,24 +1978,24 @@ var RowModelGenerator = /** @__PURE__ @class */ (function () {
     return RowModelGenerator;
 }());
 
-var __extends$2 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$2 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * Summary row model generator
  * @hidden
  */
-var SummaryModelGenerator = /** @__PURE__ @class */ (function () {
+var SummaryModelGenerator = /** @class */ (function () {
     /**
      * Constructor for Summary row model generator
      */
@@ -2143,7 +2145,7 @@ var SummaryModelGenerator = /** @__PURE__ @class */ (function () {
     };
     return SummaryModelGenerator;
 }());
-var GroupSummaryModelGenerator = /** @__PURE__ @class */ (function (_super) {
+var GroupSummaryModelGenerator = /** @class */ (function (_super) {
     __extends$2(GroupSummaryModelGenerator, _super);
     function GroupSummaryModelGenerator() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -2160,7 +2162,7 @@ var GroupSummaryModelGenerator = /** @__PURE__ @class */ (function (_super) {
     };
     return GroupSummaryModelGenerator;
 }(SummaryModelGenerator));
-var CaptionSummaryModelGenerator = /** @__PURE__ @class */ (function (_super) {
+var CaptionSummaryModelGenerator = /** @class */ (function (_super) {
     __extends$2(CaptionSummaryModelGenerator, _super);
     function CaptionSummaryModelGenerator() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -2184,24 +2186,24 @@ var CaptionSummaryModelGenerator = /** @__PURE__ @class */ (function (_super) {
     return CaptionSummaryModelGenerator;
 }(SummaryModelGenerator));
 
-var __extends$1 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$1 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * GroupModelGenerator is used to generate group caption rows and data rows.
  * @hidden
  */
-var GroupModelGenerator = /** @__PURE__ @class */ (function (_super) {
+var GroupModelGenerator = /** @class */ (function (_super) {
     __extends$1(GroupModelGenerator, _super);
     function GroupModelGenerator(parent) {
         var _this = _super.call(this, parent) || this;
@@ -2409,7 +2411,7 @@ var GroupModelGenerator = /** @__PURE__ @class */ (function (_super) {
  * Content module is used to render grid content
  * @hidden
  */
-var ContentRender = /** @__PURE__ @class */ (function () {
+var ContentRender = /** @class */ (function () {
     /**
      * Constructor for content renderer module
      */
@@ -3468,6 +3470,12 @@ var ContentRender = /** @__PURE__ @class */ (function () {
                 var currentLen = dataSource.length;
                 if (prevLen === currentLen) {
                     for (var i = 0; i < currentLen; i++) {
+                        if (this.parent.editSettings.mode === 'Batch'
+                            && trs[i].classList.contains('e-insertedrow')) {
+                            trs.splice(i, 1);
+                            --i;
+                            continue;
+                        }
                         newKeys[dataSource[i][key]] = oldKeys[this.prevCurrentView[i][key]] = i;
                         newIndexes[i] = dataSource[i][key];
                         oldRowElements[oldRowObjs[i].uid] = trs[i];
@@ -3480,6 +3488,12 @@ var ContentRender = /** @__PURE__ @class */ (function () {
                         newIndexes[i] = dataSource[i][key];
                     }
                     for (var i = 0; i < prevLen; i++) {
+                        if (this.parent.editSettings.mode === 'Batch'
+                            && trs[i].classList.contains('e-insertedrow')) {
+                            trs.splice(i, 1);
+                            --i;
+                            continue;
+                        }
                         oldRowElements[oldRowObjs[i].uid] = trs[i];
                         oldKeys[this.prevCurrentView[i][key]] = i;
                         oldIndexes[i] = this.prevCurrentView[i][key];
@@ -3494,7 +3508,7 @@ var ContentRender = /** @__PURE__ @class */ (function () {
                         isEqual = this.objectEqualityChecker(this.prevCurrentView[i], dataSource[i]);
                     }
                     var tr = oldRowElements[oldRowObjs[oldIndex].uid];
-                    newRowObjs.push(gObj.getRowsObject()[oldIndex]);
+                    newRowObjs.push(oldRowObjs[oldIndex]);
                     if (this.rowElements[i] && this.rowElements[i].getAttribute('data-uid') === newRowObjs[i].uid
                         && ((hasBatch && isNullOrUndefined(batchChangeKeys[newIndexes[i]]))
                             || (!hasBatch && (isEqual || this.prevCurrentView[i] === dataSource[i])))) {
@@ -3572,6 +3586,9 @@ var ContentRender = /** @__PURE__ @class */ (function () {
     ContentRender.prototype.refreshImmutableContent = function (index, tr, row) {
         row.isAltRow = this.parent.enableAltRow ? index % 2 !== 0 : false;
         row.isAltRow ? tr.classList.add('e-altrow') : tr.classList.remove('e-altrow');
+        row.index = index;
+        row.edit = undefined;
+        row.isDirty = false;
         tr.setAttribute('aria-rowindex', index.toString());
         this.updateCellIndex(tr, index);
     };
@@ -3587,7 +3604,7 @@ var ContentRender = /** @__PURE__ @class */ (function () {
  * Content module is used to render grid content
  * @hidden
  */
-var HeaderRender = /** @__PURE__ @class */ (function () {
+var HeaderRender = /** @class */ (function () {
     /**
      * Constructor for header renderer module
      */
@@ -4281,7 +4298,7 @@ var HeaderRender = /** @__PURE__ @class */ (function () {
  * CellRenderer class which responsible for building cell content.
  * @hidden
  */
-var CellRenderer = /** @__PURE__ @class */ (function () {
+var CellRenderer = /** @class */ (function () {
     function CellRenderer(parent, locator) {
         this.localizer = locator.getService('localization');
         this.formatter = locator.getService('valueFormatter');
@@ -4550,7 +4567,7 @@ var CellRenderer = /** @__PURE__ @class */ (function () {
  * AriaService
  * @hidden
  */
-var AriaService = /** @__PURE__ @class */ (function () {
+var AriaService = /** @class */ (function () {
     function AriaService() {
     }
     AriaService.prototype.setOptions = function (target, options) {
@@ -4605,24 +4622,24 @@ var config = {
     rowcount: 'aria-rowcount'
 };
 
-var __extends$3 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$3 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * HeaderCellRenderer class which responsible for building header cell content.
  * @hidden
  */
-var HeaderCellRenderer = /** @__PURE__ @class */ (function (_super) {
+var HeaderCellRenderer = /** @class */ (function (_super) {
     __extends$3(HeaderCellRenderer, _super);
     function HeaderCellRenderer() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
@@ -4819,24 +4836,24 @@ var HeaderCellRenderer = /** @__PURE__ @class */ (function (_super) {
     return HeaderCellRenderer;
 }(CellRenderer));
 
-var __extends$4 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$4 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * StackedHeaderCellRenderer class which responsible for building stacked header cell content.
  * @hidden
  */
-var StackedHeaderCellRenderer = /** @__PURE__ @class */ (function (_super) {
+var StackedHeaderCellRenderer = /** @class */ (function (_super) {
     __extends$4(StackedHeaderCellRenderer, _super);
     function StackedHeaderCellRenderer() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
@@ -4897,24 +4914,24 @@ var StackedHeaderCellRenderer = /** @__PURE__ @class */ (function (_super) {
     return StackedHeaderCellRenderer;
 }(CellRenderer));
 
-var __extends$5 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$5 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * IndentCellRenderer class which responsible for building group indent cell.
  * @hidden
  */
-var IndentCellRenderer = /** @__PURE__ @class */ (function (_super) {
+var IndentCellRenderer = /** @class */ (function (_super) {
     __extends$5(IndentCellRenderer, _super);
     function IndentCellRenderer() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
@@ -4934,24 +4951,24 @@ var IndentCellRenderer = /** @__PURE__ @class */ (function (_super) {
     return IndentCellRenderer;
 }(CellRenderer));
 
-var __extends$6 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$6 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * GroupCaptionCellRenderer class which responsible for building group caption cell.
  * @hidden
  */
-var GroupCaptionCellRenderer = /** @__PURE__ @class */ (function (_super) {
+var GroupCaptionCellRenderer = /** @class */ (function (_super) {
     __extends$6(GroupCaptionCellRenderer, _super);
     function GroupCaptionCellRenderer() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
@@ -4988,6 +5005,9 @@ var GroupCaptionCellRenderer = /** @__PURE__ @class */ (function (_super) {
                     templateCompiler(gObj.groupSettings.captionTemplate)(data, this.parent, 'captionTemplate', tempID, null, null, node);
                     this.parent.renderTemplates();
                 }
+                else if (this.parent.isVue) {
+                    result = templateCompiler(gObj.groupSettings.captionTemplate)(data, this.parent);
+                }
                 else {
                     result = templateCompiler(gObj.groupSettings.captionTemplate)(data);
                 }
@@ -5016,7 +5036,7 @@ var GroupCaptionCellRenderer = /** @__PURE__ @class */ (function (_super) {
  * GroupCaptionEmptyCellRenderer class which responsible for building group caption empty cell.
  * @hidden
  */
-var GroupCaptionEmptyCellRenderer = /** @__PURE__ @class */ (function (_super) {
+var GroupCaptionEmptyCellRenderer = /** @class */ (function (_super) {
     __extends$6(GroupCaptionEmptyCellRenderer, _super);
     function GroupCaptionEmptyCellRenderer() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
@@ -5037,24 +5057,24 @@ var GroupCaptionEmptyCellRenderer = /** @__PURE__ @class */ (function (_super) {
     return GroupCaptionEmptyCellRenderer;
 }(CellRenderer));
 
-var __extends$7 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$7 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * ExpandCellRenderer class which responsible for building group expand cell.
  * @hidden
  */
-var ExpandCellRenderer = /** @__PURE__ @class */ (function (_super) {
+var ExpandCellRenderer = /** @class */ (function (_super) {
     __extends$7(ExpandCellRenderer, _super);
     function ExpandCellRenderer() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -5081,24 +5101,24 @@ var ExpandCellRenderer = /** @__PURE__ @class */ (function (_super) {
     return ExpandCellRenderer;
 }(IndentCellRenderer));
 
-var __extends$8 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$8 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * HeaderIndentCellRenderer class which responsible for building header indent cell.
  * @hidden
  */
-var HeaderIndentCellRenderer = /** @__PURE__ @class */ (function (_super) {
+var HeaderIndentCellRenderer = /** @class */ (function (_super) {
     __extends$8(HeaderIndentCellRenderer, _super);
     function HeaderIndentCellRenderer() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
@@ -5118,24 +5138,24 @@ var HeaderIndentCellRenderer = /** @__PURE__ @class */ (function (_super) {
     return HeaderIndentCellRenderer;
 }(CellRenderer));
 
-var __extends$9 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$9 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * DetailHeaderIndentCellRenderer class which responsible for building detail header indent cell.
  * @hidden
  */
-var DetailHeaderIndentCellRenderer = /** @__PURE__ @class */ (function (_super) {
+var DetailHeaderIndentCellRenderer = /** @class */ (function (_super) {
     __extends$9(DetailHeaderIndentCellRenderer, _super);
     function DetailHeaderIndentCellRenderer() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
@@ -5155,24 +5175,24 @@ var DetailHeaderIndentCellRenderer = /** @__PURE__ @class */ (function (_super)
     return DetailHeaderIndentCellRenderer;
 }(CellRenderer));
 
-var __extends$10 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$10 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * ExpandCellRenderer class which responsible for building group expand cell.
  * @hidden
  */
-var DetailExpandCellRenderer = /** @__PURE__ @class */ (function (_super) {
+var DetailExpandCellRenderer = /** @class */ (function (_super) {
     __extends$10(DetailExpandCellRenderer, _super);
     function DetailExpandCellRenderer() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
@@ -5200,24 +5220,24 @@ var DetailExpandCellRenderer = /** @__PURE__ @class */ (function (_super) {
     return DetailExpandCellRenderer;
 }(CellRenderer));
 
-var __extends$11 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$11 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * ExpandCellRenderer class which responsible for building group expand cell.
  * @hidden
  */
-var RowDragDropRenderer = /** @__PURE__ @class */ (function (_super) {
+var RowDragDropRenderer = /** @class */ (function (_super) {
     __extends$11(RowDragDropRenderer, _super);
     function RowDragDropRenderer() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
@@ -5244,24 +5264,24 @@ var RowDragDropRenderer = /** @__PURE__ @class */ (function (_super) {
     return RowDragDropRenderer;
 }(CellRenderer));
 
-var __extends$12 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$12 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * DetailHeaderIndentCellRenderer class which responsible for building detail header indent cell.
  * @hidden
  */
-var RowDragDropHeaderRenderer = /** @__PURE__ @class */ (function (_super) {
+var RowDragDropHeaderRenderer = /** @class */ (function (_super) {
     __extends$12(RowDragDropHeaderRenderer, _super);
     function RowDragDropHeaderRenderer() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
@@ -5285,7 +5305,7 @@ var RowDragDropHeaderRenderer = /** @__PURE__ @class */ (function (_super) {
  * Content module is used to render grid content
  * @hidden
  */
-var Render = /** @__PURE__ @class */ (function () {
+var Render = /** @class */ (function () {
     /**
      * Constructor for render module
      */
@@ -5677,7 +5697,6 @@ var Render = /** @__PURE__ @class */ (function () {
         e.actionArgs = args;
         var isInfiniteDelete = this.parent.enableInfiniteScrolling && !this.parent.infiniteScrollSettings.enableCache
             && (args.requestType === 'delete' || (args.requestType === 'save' && this.parent.infiniteScrollModule.requestType === 'add'));
-        this.parent.getDataModule().isQueryInvokedFromData = false;
         // tslint:disable-next-line:max-func-body-length
         gObj.trigger(beforeDataBound, e, function (dataArgs) {
             if (dataArgs.cancel) {
@@ -5794,6 +5813,7 @@ var Render = /** @__PURE__ @class */ (function () {
             }
             _this.parent.notify(toolbarRefresh, {});
             _this.setRowCount(_this.parent.getCurrentViewRecords().length);
+            _this.parent.getDataModule().isQueryInvokedFromData = false;
         });
     };
     /** @hidden */
@@ -5980,7 +6000,7 @@ var Render = /** @__PURE__ @class */ (function () {
  * CellRendererFactory
  * @hidden
  */
-var CellRendererFactory = /** @__PURE__ @class */ (function () {
+var CellRendererFactory = /** @class */ (function () {
     function CellRendererFactory() {
         this.cellRenderMap = {};
     }
@@ -6006,7 +6026,7 @@ var CellRendererFactory = /** @__PURE__ @class */ (function () {
  * ServiceLocator
  * @hidden
  */
-var ServiceLocator = /** @__PURE__ @class */ (function () {
+var ServiceLocator = /** @class */ (function () {
     function ServiceLocator() {
         this.services = {};
     }
@@ -6028,7 +6048,7 @@ var ServiceLocator = /** @__PURE__ @class */ (function () {
  * RendererFactory
  * @hidden
  */
-var RendererFactory = /** @__PURE__ @class */ (function () {
+var RendererFactory = /** @class */ (function () {
     function RendererFactory() {
         this.rendererMap = {};
     }
@@ -6054,7 +6074,7 @@ var RendererFactory = /** @__PURE__ @class */ (function () {
  * ColumnWidthService
  * @hidden
  */
-var ColumnWidthService = /** @__PURE__ @class */ (function () {
+var ColumnWidthService = /** @class */ (function () {
     function ColumnWidthService(parent) {
         this.parent = parent;
     }
@@ -6343,24 +6363,24 @@ var ColumnWidthService = /** @__PURE__ @class */ (function () {
     return ColumnWidthService;
 }());
 
-var __extends$13 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$13 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * FocusStrategy class
  * @hidden
  */
-var FocusStrategy = /** @__PURE__ @class */ (function () {
+var FocusStrategy = /** @class */ (function () {
     function FocusStrategy(parent) {
         this.currentInfo = {};
         this.oneTime = true;
@@ -6570,7 +6590,7 @@ var FocusStrategy = /** @__PURE__ @class */ (function () {
         this.addFocus(this.getContent().getFocusInfo(), e);
     };
     FocusStrategy.prototype.removeFocus = function (e) {
-        if (!this.currentInfo.element) {
+        if (!this.currentInfo.element || !this.currentInfo.elementToFocus) {
             return;
         }
         removeClass([this.currentInfo.element, this.currentInfo.elementToFocus], ['e-focused', 'e-focus']);
@@ -6602,7 +6622,7 @@ var FocusStrategy = /** @__PURE__ @class */ (function () {
     FocusStrategy.prototype.addFocus = function (info, e) {
         this.currentInfo = info;
         this.currentInfo.outline = info.outline && !isNullOrUndefined(e);
-        if (!info.element) {
+        if (!info.element || !info.elementToFocus) {
             return;
         }
         var isFocused = info.elementToFocus.classList.contains('e-focus');
@@ -6859,7 +6879,7 @@ var FocusStrategy = /** @__PURE__ @class */ (function () {
  * Create matrix from row collection which act as mental model for cell navigation
  * @hidden
  */
-var Matrix = /** @__PURE__ @class */ (function () {
+var Matrix = /** @class */ (function () {
     function Matrix() {
         this.matrix = [];
         this.current = [];
@@ -6938,7 +6958,7 @@ var Matrix = /** @__PURE__ @class */ (function () {
 /**
  * @hidden
  */
-var ContentFocus = /** @__PURE__ @class */ (function () {
+var ContentFocus = /** @class */ (function () {
     function ContentFocus(parent) {
         var _this = this;
         this.matrix = new Matrix();
@@ -7023,6 +7043,7 @@ var ContentFocus = /** @__PURE__ @class */ (function () {
     };
     ContentFocus.prototype.onClick = function (e, force) {
         var target = e.target;
+        this.target = target;
         target = (target.classList.contains('e-rowcell') ? target : closest(target, 'td'));
         target = target ? target : closest(e.target, 'td.e-detailrowcollapse')
             || closest(e.target, 'td.e-detailrowexpand');
@@ -7056,7 +7077,9 @@ var ContentFocus = /** @__PURE__ @class */ (function () {
         return info;
     };
     ContentFocus.prototype.getFocusable = function (element) {
+        var _this = this;
         var query = 'button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])';
+        var isTemplate = !isNullOrUndefined(closest(element, '.e-templatecell'));
         if (this.parent.isEdit) {
             query = 'input:not([type="hidden"]), select:not([aria-hidden="true"]), textarea';
         }
@@ -7065,7 +7088,14 @@ var ContentFocus = /** @__PURE__ @class */ (function () {
          * if no child found then select the cell itself.
          * if Grid is in editable state, check for editable control inside child.
          */
-        return child.length ? child[0] : element;
+        if (isTemplate && child.length && child.length > 1) {
+            setTimeout(function () {
+                return _this.target;
+            }, 10);
+        }
+        else {
+            return child.length ? child[0] : element;
+        }
     };
     ContentFocus.prototype.selector = function (row, cell, isRowTemplate) {
         var types = [CellType.Expand, CellType.GroupCaption, CellType.CaptionSummary, CellType.GroupSummary];
@@ -7184,7 +7214,7 @@ var ContentFocus = /** @__PURE__ @class */ (function () {
 /**
  * @hidden
  */
-var HeaderFocus = /** @__PURE__ @class */ (function (_super) {
+var HeaderFocus = /** @class */ (function (_super) {
     __extends$13(HeaderFocus, _super);
     function HeaderFocus(parent) {
         return _super.call(this, parent) || this;
@@ -7304,7 +7334,7 @@ var HeaderFocus = /** @__PURE__ @class */ (function (_super) {
     };
     return HeaderFocus;
 }(ContentFocus));
-var FixedContentFocus = /** @__PURE__ @class */ (function (_super) {
+var FixedContentFocus = /** @class */ (function (_super) {
     __extends$13(FixedContentFocus, _super);
     function FixedContentFocus() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -7340,7 +7370,7 @@ var FixedContentFocus = /** @__PURE__ @class */ (function (_super) {
     };
     return FixedContentFocus;
 }(ContentFocus));
-var FixedHeaderFocus = /** @__PURE__ @class */ (function (_super) {
+var FixedHeaderFocus = /** @class */ (function (_super) {
     __extends$13(FixedHeaderFocus, _super);
     function FixedHeaderFocus() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -7375,7 +7405,7 @@ var FixedHeaderFocus = /** @__PURE__ @class */ (function (_super) {
     return FixedHeaderFocus;
 }(HeaderFocus));
 /** @hidden */
-var SearchBox = /** @__PURE__ @class */ (function () {
+var SearchBox = /** @class */ (function () {
     function SearchBox(searchBox) {
         this.searchBox = searchBox;
     }
@@ -7400,29 +7430,29 @@ var SearchBox = /** @__PURE__ @class */ (function () {
     return SearchBox;
 }());
 
-var __extends$14 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends$14 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 /**
  * Configures the paging behavior of the Grid.
  */
-var PageSettings = /** @__PURE__ @class */ (function (_super) {
+var PageSettings = /** @class */ (function (_super) {
     __extends$14(PageSettings, _super);
     function PageSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -7451,29 +7481,29 @@ var PageSettings = /** @__PURE__ @class */ (function (_super) {
     return PageSettings;
 }(ChildProperty));
 
-var __extends$15 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends$15 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 /**
  * Configures the column chooser behavior of the Grid.
  */
-var ColumnChooserSettings = /** @__PURE__ @class */ (function (_super) {
+var ColumnChooserSettings = /** @class */ (function (_super) {
     __extends$15(ColumnChooserSettings, _super);
     function ColumnChooserSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -7484,21 +7514,21 @@ var ColumnChooserSettings = /** @__PURE__ @class */ (function (_super) {
     return ColumnChooserSettings;
 }(ChildProperty));
 
-var __assign = (undefined && undefined.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 /**
  * The `Selection` module is used to handle cell and row selection.
  */
-var Selection = /** @__PURE__ @class */ (function () {
+var Selection = /** @class */ (function () {
     /**
      * Constructor for the Grid selection module
      * @hidden
@@ -7727,8 +7757,6 @@ var Selection = /** @__PURE__ @class */ (function () {
             _this.removed = isRemoved;
             if (isRowSelected && _this.selectionSettings.persistSelection && !(_this.selectionSettings.checkboxMode === 'ResetOnRowClick')) {
                 _this.clearSelectedRow(index);
-                isRemoved = true;
-                _this.removed = isRemoved;
                 _this.selectRowCallBack();
             }
             else if (!isRowSelected && _this.selectionSettings.persistSelection &&
@@ -7738,7 +7766,8 @@ var Selection = /** @__PURE__ @class */ (function () {
             if (_this.selectionSettings.checkboxMode === 'ResetOnRowClick') {
                 _this.clearSelection();
             }
-            if (!_this.selectionSettings.persistSelection || _this.selectionSettings.checkboxMode === 'ResetOnRowClick') {
+            if (!_this.selectionSettings.persistSelection || _this.selectionSettings.checkboxMode === 'ResetOnRowClick' ||
+                (!_this.parent.isCheckBoxSelection && _this.selectionSettings.persistSelection)) {
                 _this.selectRowCheck = true;
                 _this.clearRow();
             }
@@ -7922,7 +7951,7 @@ var Selection = /** @__PURE__ @class */ (function () {
         var selectedMovableRow = !this.isSingleSel() ? this.getSelectedMovableRow(rowIndexes[0]) :
             this.getSelectedMovableRow(rowIndexes[rowIndexes.length - 1]);
         var frzCols = gObj.getFrozenColumns();
-        if (!this.isRowType() || this.isEditing()) {
+        if ((!this.isRowType() || this.isEditing()) && !this.selectionSettings.checkboxOnly) {
             return;
         }
         var args;
@@ -8053,12 +8082,13 @@ var Selection = /** @__PURE__ @class */ (function () {
         }
     };
     Selection.prototype.clearSelectedRow = function (index) {
-        if (this.target) {
-            var selectedEle = this.target.parentElement;
+        if (this.toggle) {
+            var selectedEle = this.parent.getRowByIndex(index);
             if (!this.disableUI) {
                 selectedEle.removeAttribute('aria-selected');
                 this.addRemoveClassesForRow(selectedEle, false, true, 'e-selectionbackground', 'e-active');
             }
+            this.removed = true;
             this.updatePersistCollection(selectedEle, false);
             this.updateCheckBoxes(selectedEle);
             this.selectedRowIndexes.splice(this.selectedRowIndexes.indexOf(index), 1);
@@ -9402,9 +9432,9 @@ var Selection = /** @__PURE__ @class */ (function () {
             if (rindex < this.parent.frozenRows) {
                 isFrozenRow = true;
             }
-            if (!parentsUntil(this.target, 'e-table').querySelector('#' + this.parent.element.id + '_autofill')) {
-                if (this.parent.element.querySelector('#' + this.parent.element.id + '_autofill')) {
-                    this.parent.element.querySelector('#' + this.parent.element.id + '_autofill').remove();
+            if (!select('#' + this.parent.element.id + '_autofill', parentsUntil(this.target, 'e-table'))) {
+                if (select('#' + this.parent.element.id + '_autofill', this.parent.element)) {
+                    select('#' + this.parent.element.id + '_autofill', this.parent.element).remove();
                 }
                 this.autofill = createElement('div', { className: 'e-autofill', id: this.parent.element.id + '_autofill' });
                 this.autofill.style.display = 'none';
@@ -10508,6 +10538,7 @@ var Selection = /** @__PURE__ @class */ (function () {
         this.onDataBoundFunction = this.onDataBound.bind(this);
         this.parent.addEventListener(dataBound, this.onDataBoundFunction);
         this.parent.on(contentReady, this.checkBoxSelectionChanged, this);
+        this.parent.on(beforeRefreshOnDataChange, this.initPerisistSelection, this);
         this.parent.on(onEmpty, this.setCheckAllForEmptyGrid, this);
         this.actionCompleteFunc = this.actionCompleteHandler.bind(this);
         this.parent.addEventListener(actionComplete, this.actionCompleteFunc);
@@ -10525,6 +10556,7 @@ var Selection = /** @__PURE__ @class */ (function () {
         this.parent.removeEventListener(actionComplete, this.actionCompleteFunc);
         this.parent.off(onEmpty, this.setCheckAllForEmptyGrid);
         this.parent.off(click, this.clickHandler);
+        this.parent.off(beforeRefreshOnDataChange, this.initPerisistSelection);
     };
     Selection.prototype.setCheckAllForEmptyGrid = function () {
         var checkAllBox = this.getCheckAllBox();
@@ -10565,7 +10597,7 @@ var Selection = /** @__PURE__ @class */ (function () {
 /**
  * The `Search` module is used to handle search action.
  */
-var Search = /** @__PURE__ @class */ (function () {
+var Search = /** @class */ (function () {
     /**
      * Constructor for Grid search module.
      * @hidden
@@ -10683,7 +10715,7 @@ var Search = /** @__PURE__ @class */ (function () {
 /**
  * The `ShowHide` module is used to control column visibility.
  */
-var ShowHide = /** @__PURE__ @class */ (function () {
+var ShowHide = /** @class */ (function () {
     /**
      * Constructor for the show hide module.
      * @hidden
@@ -10798,7 +10830,7 @@ var ShowHide = /** @__PURE__ @class */ (function () {
 /**
  * The `Scroll` module is used to handle scrolling behaviour.
  */
-var Scroll = /** @__PURE__ @class */ (function () {
+var Scroll = /** @class */ (function () {
     /**
      * Constructor for the Grid scrolling.
      * @hidden
@@ -11192,29 +11224,29 @@ var Scroll = /** @__PURE__ @class */ (function () {
     return Scroll;
 }());
 
-var __extends$16 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends$16 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 /**
  * Configures the Grid's aggregate column.
  */
-var AggregateColumn = /** @__PURE__ @class */ (function (_super) {
+var AggregateColumn = /** @class */ (function (_super) {
     __extends$16(AggregateColumn, _super);
     function AggregateColumn() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
@@ -11292,7 +11324,7 @@ var AggregateColumn = /** @__PURE__ @class */ (function (_super) {
 /**
  * Configures the aggregate rows.
  */
-var AggregateRow = /** @__PURE__ @class */ (function (_super) {
+var AggregateRow = /** @class */ (function (_super) {
     __extends$16(AggregateRow, _super);
     function AggregateRow() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -11306,7 +11338,7 @@ var AggregateRow = /** @__PURE__ @class */ (function (_super) {
 /**
  * The `Clipboard` module is used to handle clipboard copy action.
  */
-var Clipboard = /** @__PURE__ @class */ (function () {
+var Clipboard = /** @class */ (function () {
     /**
      * Constructor for the Grid clipboard module
      * @hidden
@@ -11637,7 +11669,7 @@ var gridObserver = new Observer();
  * BlazorAction is used for performing Blazor related Grid Actions.
  * @hidden
  */
-var BlazorAction = /** @__PURE__ @class */ (function () {
+var BlazorAction = /** @class */ (function () {
     function BlazorAction(parent) {
         this.aria = new AriaService();
         this.actionArgs = {};
@@ -12011,29 +12043,29 @@ var BlazorAction = /** @__PURE__ @class */ (function () {
     return BlazorAction;
 }());
 
-var __extends = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 /**
  * Represents the field name and direction of sort column.
  */
-var SortDescriptor = /** @__PURE__ @class */ (function (_super) {
+var SortDescriptor = /** @class */ (function (_super) {
     __extends(SortDescriptor, _super);
     function SortDescriptor() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -12052,7 +12084,7 @@ var SortDescriptor = /** @__PURE__ @class */ (function (_super) {
 /**
  * Configures the sorting behavior of Grid.
  */
-var SortSettings = /** @__PURE__ @class */ (function (_super) {
+var SortSettings = /** @class */ (function (_super) {
     __extends(SortSettings, _super);
     function SortSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -12068,7 +12100,7 @@ var SortSettings = /** @__PURE__ @class */ (function (_super) {
 /**
  * Represents the predicate for the filter column.
  */
-var Predicate$1 = /** @__PURE__ @class */ (function (_super) {
+var Predicate$1 = /** @class */ (function (_super) {
     __extends(Predicate$$1, _super);
     function Predicate$$1() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -12114,7 +12146,7 @@ var Predicate$1 = /** @__PURE__ @class */ (function (_super) {
 /**
  * Configures the infinite scroll behavior of Grid.
  */
-var InfiniteScrollSettings = /** @__PURE__ @class */ (function (_super) {
+var InfiniteScrollSettings = /** @class */ (function (_super) {
     __extends(InfiniteScrollSettings, _super);
     function InfiniteScrollSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -12133,7 +12165,7 @@ var InfiniteScrollSettings = /** @__PURE__ @class */ (function (_super) {
 /**
  * Configures the filtering behavior of the Grid.
  */
-var FilterSettings = /** @__PURE__ @class */ (function (_super) {
+var FilterSettings = /** @class */ (function (_super) {
     __extends(FilterSettings, _super);
     function FilterSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -12170,7 +12202,7 @@ var FilterSettings = /** @__PURE__ @class */ (function (_super) {
 /**
  * Configures the selection behavior of the Grid.
  */
-var SelectionSettings = /** @__PURE__ @class */ (function (_super) {
+var SelectionSettings = /** @class */ (function (_super) {
     __extends(SelectionSettings, _super);
     function SelectionSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -12204,7 +12236,7 @@ var SelectionSettings = /** @__PURE__ @class */ (function (_super) {
 /**
  * Configures the search behavior of the Grid.
  */
-var SearchSettings = /** @__PURE__ @class */ (function (_super) {
+var SearchSettings = /** @class */ (function (_super) {
     __extends(SearchSettings, _super);
     function SearchSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -12229,7 +12261,7 @@ var SearchSettings = /** @__PURE__ @class */ (function (_super) {
 /**
  * Configures the row drop settings of the Grid.
  */
-var RowDropSettings = /** @__PURE__ @class */ (function (_super) {
+var RowDropSettings = /** @class */ (function (_super) {
     __extends(RowDropSettings, _super);
     function RowDropSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -12242,7 +12274,7 @@ var RowDropSettings = /** @__PURE__ @class */ (function (_super) {
 /**
  * Configures the text wrap settings of the Grid.
  */
-var TextWrapSettings = /** @__PURE__ @class */ (function (_super) {
+var TextWrapSettings = /** @class */ (function (_super) {
     __extends(TextWrapSettings, _super);
     function TextWrapSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -12255,7 +12287,7 @@ var TextWrapSettings = /** @__PURE__ @class */ (function (_super) {
 /**
  * Configures the resize behavior of the Grid.
  */
-var ResizeSettings = /** @__PURE__ @class */ (function (_super) {
+var ResizeSettings = /** @class */ (function (_super) {
     __extends(ResizeSettings, _super);
     function ResizeSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -12268,7 +12300,7 @@ var ResizeSettings = /** @__PURE__ @class */ (function (_super) {
 /**
  * Configures the group behavior of the Grid.
  */
-var GroupSettings = /** @__PURE__ @class */ (function (_super) {
+var GroupSettings = /** @class */ (function (_super) {
     __extends(GroupSettings, _super);
     function GroupSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -12305,7 +12337,7 @@ var GroupSettings = /** @__PURE__ @class */ (function (_super) {
 /**
  * Configures the edit behavior of the Grid.
  */
-var EditSettings = /** @__PURE__ @class */ (function (_super) {
+var EditSettings = /** @class */ (function (_super) {
     __extends(EditSettings, _super);
     function EditSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -12361,7 +12393,7 @@ var EditSettings = /** @__PURE__ @class */ (function (_super) {
  * </script>
  * ```
  */
-var Grid = /** @__PURE__ @class */ (function (_super) {
+var Grid = /** @class */ (function (_super) {
     __extends(Grid, _super);
     /**
      * Constructor for creating the component
@@ -12977,6 +13009,9 @@ var Grid = /** @__PURE__ @class */ (function (_super) {
             return;
         }
         this.log('module_missing');
+        if (this.isEllipsisTooltip()) {
+            this.toolTipObj.close();
+        }
         var properties = Object.keys(newProp);
         if (properties.indexOf('columns') > -1) {
             this.updateColumnObject();
@@ -13226,6 +13261,9 @@ var Grid = /** @__PURE__ @class */ (function (_super) {
                     this.notify(dataSourceModified, {});
                     if (!requireGridRefresh) {
                         this.renderModule.refresh();
+                        if (this.isCheckBoxSelection) {
+                            this.notify(beforeRefreshOnDataChange, {});
+                        }
                     }
                 }
                 this.scrollRefresh();
@@ -15102,7 +15140,8 @@ var Grid = /** @__PURE__ @class */ (function (_super) {
             parentsUntil(e.target, 'e-gridheader'))) && e.touches) {
             return;
         }
-        if (parentsUntil(e.target, 'e-gridheader') && this.allowRowDragAndDrop) {
+        if (parentsUntil(e.target, 'e-gridheader') && this.allowRowDragAndDrop &&
+            !(parentsUntil(e.target, 'e-filterbarcell'))) {
             e.preventDefault();
         }
         var args = this.getRowInfo(e.target);
@@ -15297,12 +15336,14 @@ var Grid = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Grid.prototype.keyActionHandler = function (e) {
-        this.keyPress = e.action !== 'space';
         if (this.isChildGrid(e) ||
             (this.isEdit && e.action !== 'escape' && e.action !== 'enter' && e.action !== 'shiftEnter'
                 && e.action !== 'tab' && e.action !== 'shiftTab')) {
             return;
         }
+        else {
+            this.keyPress = true;
+        }
         if (this.allowKeyboard) {
             if (e.action === 'ctrlPlusP') {
                 e.preventDefault();
@@ -16535,7 +16576,7 @@ function getCloneProperties() {
  *
  * The `Print` module is used to handle print action.
  */
-var Print = /** @__PURE__ @class */ (function () {
+var Print = /** @class */ (function () {
     /**
      * Constructor for the Grid print module
      * @hidden
@@ -16705,13 +16746,13 @@ var Print = /** @__PURE__ @class */ (function () {
         if (!depth) {
             return;
         }
-        var groupCaption = element.querySelectorAll(id + "captioncell.e-groupcaption");
+        var groupCaption = selectAll(id + "captioncell.e-groupcaption", element);
         var colSpan = groupCaption[depth - 1].getAttribute('colspan');
         for (var i = 0; i < groupCaption.length; i++) {
             groupCaption[i].setAttribute('colspan', colSpan);
         }
-        var colGroups = element.querySelectorAll("colgroup" + id + "colGroup");
-        var contentColGroups = element.querySelector('.e-content').querySelectorAll('colgroup');
+        var colGroups = selectAll("colgroup" + id + "colGroup", element);
+        var contentColGroups = selectAll('.e-content colgroup', element);
         this.hideColGroup(colGroups, depth);
         this.hideColGroup(contentColGroups, depth);
     };
@@ -17237,9 +17278,9 @@ function isEditable(col, type, elem) {
 }
 /** @hidden */
 function isActionPrevent(inst) {
-    var dlg = inst.element.querySelector('#' + inst.element.id + 'EditConfirm');
+    var dlg = select('#' + inst.element.id + 'EditConfirm', inst.element);
     return inst.editSettings.mode === 'Batch' &&
-        (inst.element.querySelectorAll('.e-updatedtd').length) && inst.editSettings.showConfirmDialog &&
+        (selectAll('.e-updatedtd', inst.element).length) && inst.editSettings.showConfirmDialog &&
         (dlg ? dlg.classList.contains('e-popup-close') : true);
 }
 /** @hidden */
@@ -17820,7 +17861,7 @@ function setRowElements(gObj) {
  * @hidden
  * `CheckBoxFilterBase` module is used to handle filtering action.
  */
-var CheckBoxFilterBase = /** @__PURE__ @class */ (function () {
+var CheckBoxFilterBase = /** @class */ (function () {
     /**
      * Constructor for checkbox filtering module
      * @hidden
@@ -18509,9 +18550,9 @@ var CheckBoxFilterBase = /** @__PURE__ @class */ (function () {
             this.searchBoxClick(e);
         }
         if (elem) {
-            var selectAll = elem.querySelector('.e-selectall');
-            if (selectAll) {
-                this.updateAllCBoxes(!selectAll.classList.contains('e-check'));
+            var selectAll$$1 = elem.querySelector('.e-selectall');
+            if (selectAll$$1) {
+                this.updateAllCBoxes(!selectAll$$1.classList.contains('e-check'));
             }
             else {
                 toogleCheckbox(elem.parentElement);
@@ -18612,9 +18653,9 @@ var CheckBoxFilterBase = /** @__PURE__ @class */ (function () {
         if (data.length && !this.renderEmpty) {
             var selectAllValue = this.getLocalizedLabel('SelectAll');
             var checkBox = this.createCheckbox(selectAllValue, false, (_a = {}, _a[this.options.field] = selectAllValue, _a));
-            var selectAll = createCboxWithWrap(getUid('cbox'), checkBox, 'e-ftrchk');
-            selectAll.querySelector('.e-frame').classList.add('e-selectall');
-            cBoxes.appendChild(selectAll);
+            var selectAll$$1 = createCboxWithWrap(getUid('cbox'), checkBox, 'e-ftrchk');
+            selectAll$$1.querySelector('.e-frame').classList.add('e-selectall');
+            cBoxes.appendChild(selectAll$$1);
             var predicate = new Predicate('field', 'equal', this.options.field);
             if (this.options.foreignKeyValue) {
                 predicate = predicate.or('field', 'equal', this.options.foreignKeyValue);
@@ -18773,24 +18814,24 @@ var CheckBoxFilterBase = /** @__PURE__ @class */ (function () {
     return CheckBoxFilterBase;
 }());
 
-var __extends$17 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$17 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * @hidden
  * `ExcelFilter` module is used to handle filtering action.
  */
-var ExcelFilterBase = /** @__PURE__ @class */ (function (_super) {
+var ExcelFilterBase = /** @class */ (function (_super) {
     __extends$17(ExcelFilterBase, _super);
     /**
      * Constructor for excel filtering module
@@ -19560,7 +19601,7 @@ var ExcelFilterBase = /** @__PURE__ @class */ (function (_super) {
  *
  * The `Sort` module is used to handle sorting action.
  */
-var Sort = /** @__PURE__ @class */ (function () {
+var Sort = /** @class */ (function () {
     /**
      * Constructor for Grid sorting module
      * @hidden
@@ -20040,7 +20081,7 @@ var Sort = /** @__PURE__ @class */ (function () {
 /**
  * `NumericContainer` module handles rendering and refreshing numeric container.
  */
-var NumericContainer = /** @__PURE__ @class */ (function () {
+var NumericContainer = /** @class */ (function () {
     /**
      * Constructor for numericContainer module
      * @hidden
@@ -20330,7 +20371,7 @@ var NumericContainer = /** @__PURE__ @class */ (function () {
 /**
  * `PagerMessage` module is used to display pager information.
  */
-var PagerMessage = /** @__PURE__ @class */ (function () {
+var PagerMessage = /** @class */ (function () {
     /**
      * Constructor for externalMessage module
      * @hidden
@@ -20362,7 +20403,7 @@ var PagerMessage = /** @__PURE__ @class */ (function () {
         }
         else {
             this.pageNoMsgElem.textContent = this.format(pagerObj.getLocalizedLabel('currentPageInfo'), [pagerObj.totalRecordsCount === 0 ? 0 :
-                    pagerObj.currentPage, pagerObj.totalPages || 0]) + ' ';
+                    pagerObj.currentPage, pagerObj.totalPages || 0, pagerObj.totalRecordsCount || 0]) + ' ';
             this.pageCountMsgElem.textContent = this.format(pagerObj.getLocalizedLabel(pagerObj.totalRecordsCount <= 1 ? 'totalItemInfo' : 'totalItemsInfo'), [pagerObj.totalRecordsCount || 0]);
         }
         this.pageNoMsgElem.parentElement.setAttribute('aria-label', this.pageNoMsgElem.textContent + this.pageCountMsgElem.textContent);
@@ -20408,25 +20449,25 @@ var PagerMessage = /** @__PURE__ @class */ (function () {
     return PagerMessage;
 }());
 
-var __extends$18 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends$18 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 /**
  * Represents the `Pager` component.
  * ```html
@@ -20439,7 +20480,7 @@ var __decorate$5 = (undefined && undefined.__decorate) || function (decorators,
  * </script>
  * ```
  */
-var Pager = /** @__PURE__ @class */ (function (_super) {
+var Pager = /** @class */ (function (_super) {
     __extends$18(Pager, _super);
     /**
      * Constructor for creating the component.
@@ -20906,7 +20947,7 @@ var Pager = /** @__PURE__ @class */ (function (_super) {
 /**
  * `PagerDropDown` module handles selected pageSize from DropDownList.
  */
-var PagerDropDown = /** @__PURE__ @class */ (function () {
+var PagerDropDown = /** @class */ (function () {
     /**
      * Constructor for pager module
      * @hidden
@@ -21001,7 +21042,7 @@ var PagerDropDown = /** @__PURE__ @class */ (function () {
     PagerDropDown.prototype.convertValue = function (pageSizeValue) {
         var item = pageSizeValue;
         for (var i = 0; i < item.length; i++) {
-            item[i] = typeof item[i] === 'number' ? item[i].toString() : item[i];
+            item[i] = parseInt(item[i], 10) ? item[i].toString() : this.pagerModule.getLocalizedLabel(item[i]);
         }
         return item;
     };
@@ -21035,7 +21076,7 @@ var PagerDropDown = /** @__PURE__ @class */ (function () {
 /**
  * `ExternalMessage` module is used to display user provided message.
  */
-var ExternalMessage = /** @__PURE__ @class */ (function () {
+var ExternalMessage = /** @class */ (function () {
     /**
      * Constructor for externalMessage module
      * @param  {Pager} pagerModule?
@@ -21102,7 +21143,7 @@ var ExternalMessage = /** @__PURE__ @class */ (function () {
 /**
  * The `Page` module is used to render pager and handle paging action.
  */
-var Page = /** @__PURE__ @class */ (function () {
+var Page = /** @class */ (function () {
     /**
      * Constructor for the Grid paging module
      * @hidden
@@ -21333,7 +21374,9 @@ var Page = /** @__PURE__ @class */ (function () {
         if (this.parent.isDestroyed) {
             return;
         }
-        this.parent.addEventListener('created', this.handlers.created.bind(this));
+        if (this.parent.isReact) {
+            this.parent.addEventListener('created', this.handlers.created.bind(this));
+        }
         this.parent.on(initialLoad, this.handlers.load, this);
         this.parent.on(initialEnd, this.handlers.end, this); //For initial rendering
         this.parent.on(dataReady, this.handlers.ready, this);
@@ -21373,7 +21416,9 @@ var Page = /** @__PURE__ @class */ (function () {
         if (this.parent.isDestroyed) {
             return;
         }
-        this.parent.removeEventListener('created', this.handlers.created);
+        if (this.parent.isReact) {
+            this.parent.removeEventListener('created', this.handlers.created);
+        }
         this.parent.off('pager-refresh', this.renderReactPagerTemplate);
         this.parent.off(initialLoad, this.handlers.load);
         this.parent.off(initialEnd, this.handlers.end); //For initial rendering
@@ -21415,24 +21460,24 @@ var keyActions = {
     altPageDown: '.e-np'
 };
 
-var __extends$19 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$19 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * FilterCellRenderer class which responsible for building filter cell.
  * @hidden
  */
-var FilterCellRenderer = /** @__PURE__ @class */ (function (_super) {
+var FilterCellRenderer = /** @class */ (function (_super) {
     __extends$19(FilterCellRenderer, _super);
     function FilterCellRenderer() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
@@ -21623,7 +21668,7 @@ var FilterCellRenderer = /** @__PURE__ @class */ (function (_super) {
  * `filter operators` render boolean column.
  * @hidden
  */
-var FlMenuOptrUI = /** @__PURE__ @class */ (function () {
+var FlMenuOptrUI = /** @class */ (function () {
     function FlMenuOptrUI(parent, customFltrOperators, serviceLocator, filterSettings) {
         this.parent = parent;
         this.serviceLocator = serviceLocator;
@@ -21695,7 +21740,7 @@ var FlMenuOptrUI = /** @__PURE__ @class */ (function () {
  * `string filterui` render string column.
  * @hidden
  */
-var StringFilterUI = /** @__PURE__ @class */ (function () {
+var StringFilterUI = /** @class */ (function () {
     function StringFilterUI(parent, serviceLocator, filterSettings) {
         this.parent = parent;
         this.serLocator = serviceLocator;
@@ -21775,7 +21820,7 @@ var StringFilterUI = /** @__PURE__ @class */ (function () {
  * `numberfilterui` render number column.
  * @hidden
  */
-var NumberFilterUI = /** @__PURE__ @class */ (function () {
+var NumberFilterUI = /** @class */ (function () {
     function NumberFilterUI(parent, serviceLocator, filterSettings) {
         this.filterSettings = filterSettings;
         this.parent = parent;
@@ -21810,7 +21855,7 @@ var NumberFilterUI = /** @__PURE__ @class */ (function () {
  * `boolfilterui` render boolean column.
  * @hidden
  */
-var BooleanFilterUI = /** @__PURE__ @class */ (function () {
+var BooleanFilterUI = /** @class */ (function () {
     function BooleanFilterUI(parent, serviceLocator, filterSettings) {
         this.parent = parent;
         this.serviceLocator = serviceLocator;
@@ -21860,7 +21905,7 @@ var BooleanFilterUI = /** @__PURE__ @class */ (function () {
  * `datefilterui` render date column.
  * @hidden
  */
-var DateFilterUI = /** @__PURE__ @class */ (function () {
+var DateFilterUI = /** @class */ (function () {
     function DateFilterUI(parent, serviceLocator, filterSettings) {
         this.parent = parent;
         this.locator = serviceLocator;
@@ -21916,7 +21961,7 @@ var DateFilterUI = /** @__PURE__ @class */ (function () {
  * `filter menu` render boolean column.
  * @hidden
  */
-var FilterMenuRenderer = /** @__PURE__ @class */ (function () {
+var FilterMenuRenderer = /** @class */ (function () {
     function FilterMenuRenderer(parent, filterSettings, serviceLocator, customFltrOperators, fltrObj) {
         this.isDialogOpen = false;
         this.colTypes = {
@@ -22185,7 +22230,7 @@ var FilterMenuRenderer = /** @__PURE__ @class */ (function () {
  * @hidden
  * `CheckBoxFilter` module is used to handle filtering action.
  */
-var CheckBoxFilter = /** @__PURE__ @class */ (function () {
+var CheckBoxFilter = /** @class */ (function () {
     /**
      * Constructor for checkbox filtering module
      * @hidden
@@ -22254,24 +22299,24 @@ var CheckBoxFilter = /** @__PURE__ @class */ (function () {
     return CheckBoxFilter;
 }());
 
-var __extends$20 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$20 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * @hidden
  * `ExcelFilter` module is used to handle filtering action.
  */
-var ExcelFilter = /** @__PURE__ @class */ (function (_super) {
+var ExcelFilter = /** @class */ (function (_super) {
     __extends$20(ExcelFilter, _super);
     /**
      * Constructor for excelbox filtering module
@@ -22326,7 +22371,7 @@ var ExcelFilter = /** @__PURE__ @class */ (function (_super) {
  *
  * The `Filter` module is used to handle filtering action.
  */
-var Filter = /** @__PURE__ @class */ (function () {
+var Filter = /** @class */ (function () {
     /**
      * Constructor for Grid filtering module
      * @hidden
@@ -23427,7 +23472,7 @@ var resizeClassList = {
  * @hidden
  * @private
  */
-var Resize = /** @__PURE__ @class */ (function () {
+var Resize = /** @class */ (function () {
     /**
      * Constructor for the Grid resize module
      * @hidden
@@ -24096,9 +24141,12 @@ var Resize = /** @__PURE__ @class */ (function () {
         };
     };
     Resize.prototype.doubleTapEvent = function (e) {
+        var _this = this;
         if (this.getUserAgent() && this.isDblClk) {
             if (!this.tapped) {
-                this.tapped = setTimeout(this.timeoutHandler(), 300);
+                this.tapped = setTimeout(function () {
+                    _this.tapped = null;
+                }, 300);
             }
             else {
                 clearTimeout(this.tapped);
@@ -24121,7 +24169,7 @@ var Resize = /** @__PURE__ @class */ (function () {
  *
  * The `Reorder` module is used for reordering columns.
  */
-var Reorder = /** @__PURE__ @class */ (function () {
+var Reorder = /** @class */ (function () {
     /**
      * Constructor for the Grid reorder module
      * @hidden
@@ -24655,7 +24703,7 @@ var Reorder = /** @__PURE__ @class */ (function () {
  * Reorder module is used to handle row reordering.
  * @hidden
  */
-var RowDD = /** @__PURE__ @class */ (function () {
+var RowDD = /** @class */ (function () {
     /**
      * Constructor for the Grid print module
      * @hidden
@@ -25097,7 +25145,7 @@ var RowDD = /** @__PURE__ @class */ (function () {
     RowDD.prototype.removeFirstRowBorder = function (element) {
         if (this.parent.element.getElementsByClassName('e-firstrow-dragborder').length > 0 && element &&
             element.rowIndex !== 0) {
-            this.parent.element.getElementsByClassName('e-firstrow-dragborder')[0].remove();
+            remove(this.parent.element.getElementsByClassName('e-firstrow-dragborder')[0]);
         }
     };
     RowDD.prototype.removeLastRowBorder = function (element) {
@@ -25105,7 +25153,7 @@ var RowDD = /** @__PURE__ @class */ (function () {
             this.parent.getRowByIndex(this.parent.getCurrentViewRecords().length - 1).getAttribute('data-uid') !==
                 element.getAttribute('data-uid');
         if (this.parent.element.getElementsByClassName('e-lastrow-dragborder').length > 0 && element && islastRowIndex) {
-            this.parent.element.getElementsByClassName('e-lastrow-dragborder')[0].remove();
+            remove(this.parent.element.getElementsByClassName('e-lastrow-dragborder')[0]);
         }
     };
     RowDD.prototype.removeBorder = function (element) {
@@ -25308,7 +25356,7 @@ var RowDD = /** @__PURE__ @class */ (function () {
  *
  * The `Group` module is used to handle group action.
  */
-var Group = /** @__PURE__ @class */ (function () {
+var Group = /** @class */ (function () {
     /**
      * Constructor for Grid group module
      * @hidden
@@ -26142,7 +26190,7 @@ var Group = /** @__PURE__ @class */ (function () {
                             };
                         }
                         else {
-                            args = { requestType: 'ungrouping', type: actionBegin };
+                            args = { columnName: this.colName, requestType: 'ungrouping', type: actionBegin };
                         }
                         if (!this.groupSettings.showGroupedColumn) {
                             var columns = e.oldProperties[prop];
@@ -26387,7 +26435,7 @@ var Group = /** @__PURE__ @class */ (function () {
 /**
  * The `DetailRow` module is used to handle detail template and hierarchy Grid operations.
  */
-var DetailRow = /** @__PURE__ @class */ (function () {
+var DetailRow = /** @class */ (function () {
     /**
      * Constructor for the Grid detail template module
      * @hidden
@@ -26697,7 +26745,7 @@ var DetailRow = /** @__PURE__ @class */ (function () {
  * The `Toolbar` module is used to handle ToolBar actions.
  * @hidden
  */
-var Toolbar$1 = /** @__PURE__ @class */ (function () {
+var Toolbar$1 = /** @class */ (function () {
     function Toolbar$$1(parent, serviceLocator) {
         this.predefinedItems = {};
         this.items = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'Print', 'Search',
@@ -26762,7 +26810,7 @@ var Toolbar$1 = /** @__PURE__ @class */ (function () {
         }
     };
     Toolbar$$1.prototype.bindSearchEvents = function () {
-        this.searchElement = this.element.querySelector('#' + this.gridID + '_searchbar');
+        this.searchElement = select('#' + this.gridID + '_searchbar', this.element);
         this.wireEvent();
         this.refreshToolbarItems();
         if (this.parent.searchSettings) {
@@ -26771,11 +26819,11 @@ var Toolbar$1 = /** @__PURE__ @class */ (function () {
     };
     Toolbar$$1.prototype.toolbarCreated = function () {
         if (this.element.querySelector('.e-search-wrapper')) {
-            this.element.querySelector('.e-search-wrapper').innerHTML = '<div class="e-input-group e-search" role="search">\
-        <input id="' + this.gridID + '_searchbar" class="e-input" name="input" type="search" \
-        placeholder= \"' + this.l10n.getConstant('Search') + '\"/>\
-        <span id="' + this.gridID + '_searchbutton" class="e-input-group-icon e-search-icon e-icons" \
-        tabindex="-1" title="' + this.l10n.getConstant('Search') + '" aria-label= "search"></span> \
+            this.element.querySelector('.e-search-wrapper').innerHTML = '<div class="e-input-group e-search" role="search">\
+        <input id="' + this.gridID + '_searchbar" class="e-input" name="input" type="search" \
+        placeholder= \"' + this.l10n.getConstant('Search') + '\"/>\
+        <span id="' + this.gridID + '_searchbutton" class="e-input-group-icon e-search-icon e-icons" \
+        tabindex="-1" title="' + this.l10n.getConstant('Search') + '" aria-label= "search"></span> \
         </div>';
         }
         this.bindSearchEvents();
@@ -26908,7 +26956,7 @@ var Toolbar$1 = /** @__PURE__ @class */ (function () {
     Toolbar$$1.prototype.enableItems = function (items, isEnable) {
         for (var _i = 0, items_2 = items; _i < items_2.length; _i++) {
             var item = items_2[_i];
-            var element = this.element.querySelector('#' + item);
+            var element = select('#' + item, this.element);
             if (element) {
                 this.toolbar.enableItems(element.parentElement, isEnable);
             }
@@ -27044,24 +27092,24 @@ var Toolbar$1 = /** @__PURE__ @class */ (function () {
     return Toolbar$$1;
 }());
 
-var __extends$21 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$21 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * Footer module is used to render grid content
  * @hidden
  */
-var FooterRenderer = /** @__PURE__ @class */ (function (_super) {
+var FooterRenderer = /** @class */ (function (_super) {
     __extends$21(FooterRenderer, _super);
     function FooterRenderer(gridModule, serviceLocator) {
         var _this = _super.call(this, gridModule, serviceLocator) || this;
@@ -27333,24 +27381,24 @@ var FooterRenderer = /** @__PURE__ @class */ (function (_super) {
     return FooterRenderer;
 }(ContentRender));
 
-var __extends$22 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$22 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * SummaryCellRenderer class which responsible for building summary cell content.
  * @hidden
  */
-var SummaryCellRenderer = /** @__PURE__ @class */ (function (_super) {
+var SummaryCellRenderer = /** @class */ (function (_super) {
     __extends$22(SummaryCellRenderer, _super);
     function SummaryCellRenderer() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
@@ -27419,7 +27467,7 @@ var SummaryCellRenderer = /** @__PURE__ @class */ (function (_super) {
 /**
  * Summary Action controller.
  */
-var Aggregate = /** @__PURE__ @class */ (function () {
+var Aggregate = /** @class */ (function () {
     function Aggregate(parent, locator) {
         this.parent = parent;
         this.locator = locator;
@@ -27546,7 +27594,7 @@ function summaryIterator(aggregates, callback) {
  * InterSectionObserver - class watch whether it enters the viewport.
  * @hidden
  */
-var InterSectionObserver = /** @__PURE__ @class */ (function () {
+var InterSectionObserver = /** @class */ (function () {
     function InterSectionObserver(element, options) {
         var _this = this;
         this.fromWheel = false;
@@ -27640,7 +27688,7 @@ var InterSectionObserver = /** @__PURE__ @class */ (function () {
 /**
  * Content module is used to render grid content
  */
-var VirtualRowModelGenerator = /** @__PURE__ @class */ (function () {
+var VirtualRowModelGenerator = /** @class */ (function () {
     function VirtualRowModelGenerator(parent) {
         this.cOffsets = {};
         this.cache = {};
@@ -27903,24 +27951,24 @@ var VirtualRowModelGenerator = /** @__PURE__ @class */ (function () {
     return VirtualRowModelGenerator;
 }());
 
-var __extends$23 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$23 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * VirtualContentRenderer
  * @hidden
  */
-var VirtualContentRenderer = /** @__PURE__ @class */ (function (_super) {
+var VirtualContentRenderer = /** @class */ (function (_super) {
     __extends$23(VirtualContentRenderer, _super);
     function VirtualContentRenderer(parent, locator) {
         var _this = _super.call(this, parent, locator) || this;
@@ -28959,7 +29007,7 @@ var VirtualContentRenderer = /** @__PURE__ @class */ (function (_super) {
 /**
  * @hidden
  */
-var VirtualHeaderRenderer = /** @__PURE__ @class */ (function (_super) {
+var VirtualHeaderRenderer = /** @class */ (function (_super) {
     __extends$23(VirtualHeaderRenderer, _super);
     function VirtualHeaderRenderer(parent, locator) {
         var _this = _super.call(this, parent, locator) || this;
@@ -29085,7 +29133,7 @@ var VirtualHeaderRenderer = /** @__PURE__ @class */ (function (_super) {
 /**
  * @hidden
  */
-var VirtualElementHandler = /** @__PURE__ @class */ (function () {
+var VirtualElementHandler = /** @class */ (function () {
     function VirtualElementHandler() {
     }
     VirtualElementHandler.prototype.renderWrapper = function (height) {
@@ -29131,7 +29179,7 @@ var VirtualElementHandler = /** @__PURE__ @class */ (function () {
 /**
  * Virtual Scrolling class
  */
-var VirtualScroll = /** @__PURE__ @class */ (function () {
+var VirtualScroll = /** @class */ (function () {
     function VirtualScroll(parent, locator) {
         this.parent = parent;
         this.locator = locator;
@@ -29193,7 +29241,7 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
  * Edit render module is used to render grid edit row.
  * @hidden
  */
-var InlineEditRender = /** @__PURE__ @class */ (function () {
+var InlineEditRender = /** @class */ (function () {
     /**
      * Constructor for render module
      */
@@ -29487,7 +29535,7 @@ var InlineEditRender = /** @__PURE__ @class */ (function () {
  * Edit render module is used to render grid edit row.
  * @hidden
  */
-var BatchEditRender = /** @__PURE__ @class */ (function () {
+var BatchEditRender = /** @class */ (function () {
     /**
      * Constructor for render module
      */
@@ -29534,7 +29582,7 @@ var BatchEditRender = /** @__PURE__ @class */ (function () {
  * Edit render module is used to render grid edit row.
  * @hidden
  */
-var DialogEditRender = /** @__PURE__ @class */ (function () {
+var DialogEditRender = /** @class */ (function () {
     /**
      * Constructor for render module
      */
@@ -29665,7 +29713,8 @@ var DialogEditRender = /** @__PURE__ @class */ (function () {
         var tbody = this.parent.createElement('tbody');
         var cols = gObj.getColumns();
         for (var i = 0; i < cols.length; i++) {
-            if (this.parent.editModule.checkColumnIsGrouped(cols[i]) || cols[i].commands || cols[i].commandsTemplate) {
+            if (this.parent.editModule.checkColumnIsGrouped(cols[i]) || cols[i].commands || cols[i].commandsTemplate ||
+                cols[i].type === 'checkbox') {
                 continue;
             }
             var tr = this.parent.createElement('tr');
@@ -29699,7 +29748,7 @@ var DialogEditRender = /** @__PURE__ @class */ (function () {
  * Edit render module is used to render grid edit row.
  * @hidden
  */
-var EditRender = /** @__PURE__ @class */ (function () {
+var EditRender = /** @class */ (function () {
     /**
      * Constructor for render module
      */
@@ -29731,7 +29780,7 @@ var EditRender = /** @__PURE__ @class */ (function () {
         var fForm;
         var frzCols = gObj.getFrozenColumns();
         var form = gObj.editSettings.mode === 'Dialog' ?
-            document.querySelector('#' + gObj.element.id + '_dialogEdit_wrapper').querySelector('.e-gridform') :
+            select('#' + gObj.element.id + '_dialogEdit_wrapper .e-gridform', document) :
             gObj.element.querySelector('.e-gridform');
         if (frzCols && gObj.editSettings.mode === 'Normal') {
             var rowIndex = parseInt(args.row.getAttribute('aria-rowindex'), 10);
@@ -29922,7 +29971,7 @@ var EditRender = /** @__PURE__ @class */ (function () {
  * `BooleanEditCell` is used to handle boolean cell type editing.
  * @hidden
  */
-var BooleanEditCell = /** @__PURE__ @class */ (function () {
+var BooleanEditCell = /** @class */ (function () {
     function BooleanEditCell(parent) {
         this.activeClasses = ['e-selectionbackground', 'e-active'];
         this.parent = parent;
@@ -30000,7 +30049,7 @@ var BooleanEditCell = /** @__PURE__ @class */ (function () {
  * `DropDownEditCell` is used to handle dropdown cell type editing.
  * @hidden
  */
-var DropDownEditCell = /** @__PURE__ @class */ (function () {
+var DropDownEditCell = /** @class */ (function () {
     function DropDownEditCell(parent) {
         //constructor
         this.parent = parent;
@@ -30061,7 +30110,7 @@ var DropDownEditCell = /** @__PURE__ @class */ (function () {
     DropDownEditCell.prototype.dropDownOpen = function (args) {
         var dlgElement = parentsUntil(this.obj.element, 'e-dialog');
         if (this.parent.editSettings.mode === 'Dialog' && !isNullOrUndefined(dlgElement)) {
-            var dlgObj = document.querySelector('#' + dlgElement.id).ej2_instances[0];
+            var dlgObj = select('#' + dlgElement.id, document).ej2_instances[0];
             args.popup.element.style.zIndex = (dlgObj.zIndex + 1).toString();
         }
     };
@@ -30077,7 +30126,7 @@ var DropDownEditCell = /** @__PURE__ @class */ (function () {
  * `NumericEditCell` is used to handle numeric cell type editing.
  * @hidden
  */
-var NumericEditCell = /** @__PURE__ @class */ (function () {
+var NumericEditCell = /** @class */ (function () {
     function NumericEditCell(parent) {
         this.parent = parent;
     }
@@ -30130,7 +30179,7 @@ var NumericEditCell = /** @__PURE__ @class */ (function () {
  * `DefaultEditCell` is used to handle default cell type editing.
  * @hidden
  */
-var DefaultEditCell = /** @__PURE__ @class */ (function () {
+var DefaultEditCell = /** @class */ (function () {
     function DefaultEditCell(parent) {
         this.parent = parent;
     }
@@ -30170,7 +30219,7 @@ var DefaultEditCell = /** @__PURE__ @class */ (function () {
  * `NormalEdit` module is used to handle normal('inline, dialog, external') editing actions.
  * @hidden
  */
-var NormalEdit = /** @__PURE__ @class */ (function () {
+var NormalEdit = /** @class */ (function () {
     function NormalEdit(parent, serviceLocator, renderer) {
         this.args = {};
         this.currentVirtualData = {};
@@ -30363,7 +30412,7 @@ var NormalEdit = /** @__PURE__ @class */ (function () {
             previousData: this.previousData, selectedRow: gObj.selectedRowIndex, foreignKeyData: {}
         });
         var isDlg = gObj.editSettings.mode === 'Dialog';
-        var dlgWrapper = document.querySelector('#' + gObj.element.id + '_dialogEdit_wrapper');
+        var dlgWrapper = select('#' + gObj.element.id + '_dialogEdit_wrapper', document);
         var dlgForm = isDlg ? dlgWrapper.querySelector('.e-gridform') : gObj.element.querySelector('.e-gridform');
         var data = { virtualData: {}, isAdd: false };
         this.parent.notify(getVirtualData, data);
@@ -30498,7 +30547,7 @@ var NormalEdit = /** @__PURE__ @class */ (function () {
             this.parent.notify(toolbarRefresh, {});
         }
         if (!(this.parent.isCheckBoxSelection || this.parent.selectionSettings.type === 'Multiple')
-            || (!this.parent.isPersistSelection)) {
+            || (!this.parent.isPersistSelection) && !this.parent.selectionSettings.checkboxOnly) {
             if (this.parent.editSettings.mode !== 'Dialog') {
                 if (isBlazor() && this.parent.isServerRendered) {
                     var rowIndex = 'editRowIndex';
@@ -30799,24 +30848,24 @@ var NormalEdit = /** @__PURE__ @class */ (function () {
     return NormalEdit;
 }());
 
-var __extends$24 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$24 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * `InlineEdit` module is used to handle inline editing actions.
  * @hidden
  */
-var InlineEdit = /** @__PURE__ @class */ (function (_super) {
+var InlineEdit = /** @class */ (function (_super) {
     __extends$24(InlineEdit, _super);
     function InlineEdit(parent, serviceLocator, renderer) {
         var _this = _super.call(this, parent, serviceLocator) || this;
@@ -30850,7 +30899,7 @@ var InlineEdit = /** @__PURE__ @class */ (function (_super) {
  * `BatchEdit` module is used to handle batch editing actions.
  * @hidden
  */
-var BatchEdit = /** @__PURE__ @class */ (function () {
+var BatchEdit = /** @class */ (function () {
     function BatchEdit(parent, serviceLocator, renderer) {
         this.cellDetails = {};
         this.originalCell = {};
@@ -31702,7 +31751,7 @@ var BatchEdit = /** @__PURE__ @class */ (function () {
             }
             _this.renderer.update(cellEditArgs);
             _this.parent.notify(batchEditFormRendered, cellEditArgs);
-            _this.form = gObj.element.querySelector('#' + gObj.element.id + 'EditForm');
+            _this.form = select('#' + gObj.element.id + 'EditForm', gObj.element);
             gObj.editModule.applyFormValidation([col]);
             _this.parent.element.querySelector('.e-gridpopup').style.display = 'none';
         });
@@ -32046,24 +32095,24 @@ var BatchEdit = /** @__PURE__ @class */ (function () {
     return BatchEdit;
 }());
 
-var __extends$25 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$25 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * `DialogEdit` module is used to handle dialog editing actions.
  * @hidden
  */
-var DialogEdit = /** @__PURE__ @class */ (function (_super) {
+var DialogEdit = /** @class */ (function (_super) {
     __extends$25(DialogEdit, _super);
     function DialogEdit(parent, serviceLocator, renderer) {
         var _this = 
@@ -32103,7 +32152,7 @@ var DialogEdit = /** @__PURE__ @class */ (function (_super) {
  * `DatePickerEditCell` is used to handle datepicker cell type editing.
  * @hidden
  */
-var DatePickerEditCell = /** @__PURE__ @class */ (function () {
+var DatePickerEditCell = /** @class */ (function () {
     function DatePickerEditCell(parent) {
         this.parent = parent;
     }
@@ -32158,7 +32207,7 @@ function dateanddatetimerender(args, mode, rtl) {
  * `TemplateEditCell` is used to handle template cell.
  * @hidden
  */
-var TemplateEditCell = /** @__PURE__ @class */ (function () {
+var TemplateEditCell = /** @class */ (function () {
     function TemplateEditCell(parent) {
         this.parent = parent;
     }
@@ -32177,7 +32226,7 @@ var TemplateEditCell = /** @__PURE__ @class */ (function () {
 /**
  * The `Edit` module is used to handle editing actions.
  */
-var Edit = /** @__PURE__ @class */ (function () {
+var Edit = /** @class */ (function () {
     /**
      * Constructor for the Grid editing module
      * @hidden
@@ -32865,7 +32914,7 @@ var Edit = /** @__PURE__ @class */ (function () {
         var frzCols = gObj.getFrozenColumns();
         var form = this.parent.editSettings.mode !== 'Dialog' ?
             gObj.element.querySelector('.e-gridform') :
-            document.querySelector('#' + gObj.element.id + '_dialogEdit_wrapper').querySelector('.e-gridform');
+            select('#' + gObj.element.id + '_dialogEdit_wrapper .e-gridform', document);
         var mForm = gObj.element.querySelectorAll('.e-gridform')[1];
         var rules = {};
         var mRules = {};
@@ -32937,7 +32986,7 @@ var Edit = /** @__PURE__ @class */ (function () {
                 > (parseInt(closest(inputElement, '.e-row').getAttribute('aria-rowindex'), 10) || 0));
         }
         return this.parent.editSettings.mode !== 'Dialog' ? isFHdr ? this.parent.getHeaderTable() : this.parent.getContentTable() :
-            document.querySelector('#' + this.parent.element.id + '_dialogEdit_wrapper');
+            select('#' + this.parent.element.id + '_dialogEdit_wrapper', document);
     };
     Edit.prototype.validationComplete = function (args) {
         if (this.parent.isEdit) {
@@ -32993,7 +33042,7 @@ var Edit = /** @__PURE__ @class */ (function () {
         }
         var table = isInline ?
             (isFHdr ? this.parent.getHeaderTable() : this.parent.getContentTable()) :
-            document.querySelector('#' + this.parent.element.id + '_dialogEdit_wrapper').querySelector('.e-dlg-content');
+            select('#' + this.parent.element.id + '_dialogEdit_wrapper .e-dlg-content', document);
         var client = table.getBoundingClientRect();
         var left = isInline ?
             this.parent.element.getBoundingClientRect().left : client.left;
@@ -33107,7 +33156,7 @@ var Edit = /** @__PURE__ @class */ (function () {
 /**
  * The `ColumnChooser` module is used to show or hide columns dynamically.
  */
-var ColumnChooser = /** @__PURE__ @class */ (function () {
+var ColumnChooser = /** @class */ (function () {
     /**
      * Constructor for the Grid ColumnChooser module
      * @hidden
@@ -33487,8 +33536,8 @@ var ColumnChooser = /** @__PURE__ @class */ (function () {
         this.clearActions();
         this.parent.notify(columnChooserCancelBtnClick, { dialog: this.dlgObj });
     };
-    ColumnChooser.prototype.checkstatecolumn = function (isChecked, coluid, selectAll) {
-        if (selectAll === void 0) { selectAll = false; }
+    ColumnChooser.prototype.checkstatecolumn = function (isChecked, coluid, selectAll$$1) {
+        if (selectAll$$1 === void 0) { selectAll$$1 = false; }
         if (isChecked) {
             if (this.hideColumn.indexOf(coluid) !== -1) {
                 this.hideColumn.splice(this.hideColumn.indexOf(coluid), 1);
@@ -33505,7 +33554,7 @@ var ColumnChooser = /** @__PURE__ @class */ (function () {
                 this.hideColumn.push(coluid);
             }
         }
-        if (selectAll) {
+        if (selectAll$$1) {
             if (!isChecked) {
                 this.changedColumns.push(coluid);
             }
@@ -33586,8 +33635,8 @@ var ColumnChooser = /** @__PURE__ @class */ (function () {
         var checkstate;
         var elem = parentsUntil(e.target, 'e-checkbox-wrapper');
         if (elem) {
-            var selectAll = elem.querySelector('.e-selectall');
-            if (selectAll) {
+            var selectAll$$1 = elem.querySelector('.e-selectall');
+            if (selectAll$$1) {
                 this.updateSelectAll(!elem.querySelector('.e-check'));
             }
             else {
@@ -33685,12 +33734,12 @@ var ColumnChooser = /** @__PURE__ @class */ (function () {
         this.ulElement = this.parent.createElement('ul', { className: 'e-ccul-ele e-cc' });
         var selectAllValue = this.l10n.getConstant('SelectAll');
         var cclist = this.parent.createElement('li', { className: 'e-cclist e-cc e-cc-selectall' });
-        var selectAll = this.createCheckBox(selectAllValue, false, 'grid-selectAll');
+        var selectAll$$1 = this.createCheckBox(selectAllValue, false, 'grid-selectAll');
         if (gdCol.length) {
-            selectAll.querySelector('.e-checkbox-wrapper').firstElementChild.classList.add('e-selectall');
-            selectAll.querySelector('.e-frame').classList.add('e-selectall');
-            this.checkState(selectAll.querySelector('.e-icons'), true);
-            cclist.appendChild(selectAll);
+            selectAll$$1.querySelector('.e-checkbox-wrapper').firstElementChild.classList.add('e-selectall');
+            selectAll$$1.querySelector('.e-frame').classList.add('e-selectall');
+            this.checkState(selectAll$$1.querySelector('.e-icons'), true);
+            cclist.appendChild(selectAll$$1);
             this.ulElement.appendChild(cclist);
         }
         for (var i = 0; i < gdCol.length; i++) {
@@ -33815,7 +33864,7 @@ var ColumnChooser = /** @__PURE__ @class */ (function () {
  * @hidden
  * `ExportHelper` for `PdfExport` & `ExcelExport`
  */
-var ExportHelper = /** @__PURE__ @class */ (function () {
+var ExportHelper = /** @class */ (function () {
     function ExportHelper(parent) {
         this.hideColumnInclude = false;
         this.foreignKeyData = {};
@@ -34069,7 +34118,7 @@ var ExportHelper = /** @__PURE__ @class */ (function () {
  * @hidden
  * `ExportValueFormatter` for `PdfExport` & `ExcelExport`
  */
-var ExportValueFormatter = /** @__PURE__ @class */ (function () {
+var ExportValueFormatter = /** @class */ (function () {
     function ExportValueFormatter(culture) {
         this.valueFormatter = new ValueFormatter(culture);
         this.internationalization = new Internationalization(culture);
@@ -34150,7 +34199,7 @@ var ExportValueFormatter = /** @__PURE__ @class */ (function () {
  * @hidden
  * `ExcelExport` module is used to handle the Excel export action.
  */
-var ExcelExport = /** @__PURE__ @class */ (function () {
+var ExcelExport = /** @class */ (function () {
     /**
      * Constructor for the Grid Excel Export module.
      * @hidden
@@ -34854,8 +34903,17 @@ var ExcelExport = /** @__PURE__ @class */ (function () {
     ExcelExport.prototype.getAggreateValue = function (cellType, template, cell, row) {
         var templateFn = {};
         templateFn[getEnumValue(CellType, cell.cellType)] = compile(template);
-        /* tslint:disable-next-line:max-line-length */
-        var txt = (templateFn[getEnumValue(CellType, cell.cellType)](row.data[cell.column.field ? cell.column.field : cell.column.columnName]));
+        var txt;
+        var data = row.data[cell.column.field ? cell.column.field : cell.column.columnName];
+        if (this.parent.isReact || this.parent.isVue) {
+            txt = (templateFn[getEnumValue(CellType, cell.cellType)](data, this.parent));
+            if (this.parent.isReact) {
+                this.parent.renderTemplates();
+            }
+        }
+        else {
+            txt = (templateFn[getEnumValue(CellType, cell.cellType)](data));
+        }
         return txt[0].textContent;
     };
     ExcelExport.prototype.mergeOptions = function (JSON1, JSON2) {
@@ -35099,7 +35157,7 @@ var ExcelExport = /** @__PURE__ @class */ (function () {
  * `PDF Export` module is used to handle the exportToPDF action.
  * @hidden
  */
-var PdfExport = /** @__PURE__ @class */ (function () {
+var PdfExport = /** @class */ (function () {
     /**
      * Constructor for the Grid PDF Export module
      * @hidden
@@ -35819,7 +35877,7 @@ var PdfExport = /** @__PURE__ @class */ (function () {
         }
         documentHeader.graphics.drawLine(pen, x1, y1, x2, y2);
     };
-    /* tslint:disable-next-line:no-any */ /* tslint:disable-next-line:max-line-length */
+    /* tslint:disable-next-line:no-any */ /* tslint:disable-next-line:max-line-length */ /* tslint:disable-next-line:max-func-body-length */
     PdfExport.prototype.processAggregates = function (sRows, pdfGrid, border, font, brush, backgroundBrush, isCaption, captionRow, groupIndex, isGroupedFooter) {
         for (var _i = 0, sRows_1 = sRows; _i < sRows_1.length; _i++) {
             var row = sRows_1[_i];
@@ -35876,8 +35934,17 @@ var PdfExport = /** @__PURE__ @class */ (function () {
                         var result = this.getTemplateFunction(templateFn, i, leastCaptionSummaryIndex, cell);
                         templateFn = result.templateFunction;
                         leastCaptionSummaryIndex = result.leastCaptionSummaryIndex;
-                        /* tslint:disable-next-line:max-line-length */
-                        var txt = (templateFn[getEnumValue(CellType, cell.cellType)](row.data[cell.column.field ? cell.column.field : cell.column.columnName]));
+                        var txt = void 0;
+                        var data = row.data[cell.column.field ? cell.column.field : cell.column.columnName];
+                        if (this.parent.isReact || this.parent.isVue) {
+                            txt = (templateFn[getEnumValue(CellType, cell.cellType)](data, this.parent));
+                            if (this.parent.isReact) {
+                                this.parent.renderTemplates();
+                            }
+                        }
+                        else {
+                            txt = (templateFn[getEnumValue(CellType, cell.cellType)](data));
+                        }
                         value.push(txt[0].textContent);
                         isEmpty = false;
                     }
@@ -36440,24 +36507,24 @@ var PdfExport = /** @__PURE__ @class */ (function () {
     return PdfExport;
 }());
 
-var __extends$26 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$26 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * `CommandColumn` used to render command column in grid
  * @hidden
  */
-var CommandColumnRenderer = /** @__PURE__ @class */ (function (_super) {
+var CommandColumnRenderer = /** @class */ (function (_super) {
     __extends$26(CommandColumnRenderer, _super);
     function CommandColumnRenderer(parent, locator) {
         var _this = _super.call(this, parent, locator) || this;
@@ -36540,7 +36607,7 @@ var CommandColumnRenderer = /** @__PURE__ @class */ (function (_super) {
  * `CommandColumn` used to handle the command column actions.
  * @hidden
  */
-var CommandColumn = /** @__PURE__ @class */ (function () {
+var CommandColumn = /** @class */ (function () {
     function CommandColumn(parent, locator) {
         this.parent = parent;
         this.locator = locator;
@@ -36700,7 +36767,7 @@ var menuClass = {
 /**
  * The `ContextMenu` module is used to handle context menu actions.
  */
-var ContextMenu$1 = /** @__PURE__ @class */ (function () {
+var ContextMenu$1 = /** @class */ (function () {
     function ContextMenu$$1(parent, serviceLocator) {
         this.defaultItems = {};
         this.disableItems = [];
@@ -37273,7 +37340,7 @@ var ContextMenu$1 = /** @__PURE__ @class */ (function () {
  * FreezeRowModelGenerator is used to generate grid data rows with freeze row and column.
  * @hidden
  */
-var FreezeRowModelGenerator = /** @__PURE__ @class */ (function () {
+var FreezeRowModelGenerator = /** @class */ (function () {
     function FreezeRowModelGenerator(parent) {
         this.isFrzLoad = 1;
         this.parent = parent;
@@ -37306,24 +37373,24 @@ var FreezeRowModelGenerator = /** @__PURE__ @class */ (function () {
     return FreezeRowModelGenerator;
 }());
 
-var __extends$27 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$27 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * Freeze module is used to render grid content with frozen rows and columns
  * @hidden
  */
-var FreezeContentRender = /** @__PURE__ @class */ (function (_super) {
+var FreezeContentRender = /** @class */ (function (_super) {
     __extends$27(FreezeContentRender, _super);
     function FreezeContentRender(parent, locator) {
         return _super.call(this, parent, locator) || this;
@@ -37395,7 +37462,7 @@ var FreezeContentRender = /** @__PURE__ @class */ (function (_super) {
     };
     return FreezeContentRender;
 }(ContentRender));
-var FreezeRender = /** @__PURE__ @class */ (function (_super) {
+var FreezeRender = /** @class */ (function (_super) {
     __extends$27(FreezeRender, _super);
     function FreezeRender(parent, locator) {
         var _this = _super.call(this, parent, locator) || this;
@@ -37711,24 +37778,24 @@ var FreezeRender = /** @__PURE__ @class */ (function (_super) {
     return FreezeRender;
 }(HeaderRender));
 
-var __extends$28 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$28 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * VirtualFreezeRenderer is used to render the virtual table within the frozen table
  * @hidden
  */
-var VirtualFreezeRenderer = /** @__PURE__ @class */ (function (_super) {
+var VirtualFreezeRenderer = /** @class */ (function (_super) {
     __extends$28(VirtualFreezeRenderer, _super);
     function VirtualFreezeRenderer(parent, locator) {
         var _this = _super.call(this, parent, locator) || this;
@@ -37880,7 +37947,7 @@ var VirtualFreezeRenderer = /** @__PURE__ @class */ (function (_super) {
     };
     return VirtualFreezeRenderer;
 }(FreezeContentRender));
-var VirtualFreezeHdrRenderer = /** @__PURE__ @class */ (function (_super) {
+var VirtualFreezeHdrRenderer = /** @class */ (function (_super) {
     __extends$28(VirtualFreezeHdrRenderer, _super);
     function VirtualFreezeHdrRenderer(parent, locator) {
         var _this = _super.call(this, parent, locator) || this;
@@ -37928,7 +37995,7 @@ var VirtualFreezeHdrRenderer = /** @__PURE__ @class */ (function (_super) {
  * `Freeze` module is used to handle Frozen rows and columns.
  * @hidden
  */
-var Freeze = /** @__PURE__ @class */ (function () {
+var Freeze = /** @class */ (function () {
     function Freeze(parent, locator) {
         this.parent = parent;
         this.locator = locator;
@@ -37971,7 +38038,7 @@ var Freeze = /** @__PURE__ @class */ (function () {
  * 'column menu module used to handle column menu actions'
  * @hidden
  */
-var ColumnMenu = /** @__PURE__ @class */ (function () {
+var ColumnMenu = /** @class */ (function () {
     function ColumnMenu(parent, serviceLocator) {
         this.defaultItems = {};
         this.localeText = this.setLocaleKey();
@@ -38533,23 +38600,23 @@ var ColumnMenu = /** @__PURE__ @class */ (function () {
     return ColumnMenu;
 }());
 
-var __extends$29 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$29 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * `ForeignKey` module is used to handle foreign key column's actions.
  */
-var ForeignKey = /** @__PURE__ @class */ (function (_super) {
+var ForeignKey = /** @class */ (function (_super) {
     __extends$29(ForeignKey, _super);
     function ForeignKey(parent, serviceLocator) {
         var _this = _super.call(this, parent, serviceLocator) || this;
@@ -38727,7 +38794,7 @@ var DOC_URL = 'https://ej2.syncfusion.com/documentation/';
 var WARNING = '[EJ2Grid.Warning]';
 var ERROR = '[EJ2Grid.Error]';
 var INFO = '[EJ2Grid.Info]';
-var Logger = /** @__PURE__ @class */ (function () {
+var Logger = /** @class */ (function () {
     function Logger(parent) {
         this.parent = parent;
         this.parent.on('initial-end', this.patchadaptor, this);
@@ -39121,8 +39188,9 @@ var ajaxErrorHandler = function (args, parent) {
 
 /**
  * Infinite Scrolling class
+ * @hidden
  */
-var InfiniteScroll = /** @__PURE__ @class */ (function () {
+var InfiniteScroll = /** @class */ (function () {
     /**
      * Constructor for the Grid infinite scrolling.
      * @hidden
@@ -40002,24 +40070,24 @@ var InfiniteScroll = /** @__PURE__ @class */ (function () {
     return InfiniteScroll;
 }());
 
-var __extends$30 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends$30 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 /**
  * GroupLazyLoadRenderer is used to perform lazy load grouping
  * @hidden
  */
-var GroupLazyLoadRenderer = /** @__PURE__ @class */ (function (_super) {
+var GroupLazyLoadRenderer = /** @class */ (function (_super) {
     __extends$30(GroupLazyLoadRenderer, _super);
     function GroupLazyLoadRenderer(parent, locator) {
         var _this = _super.call(this, parent, locator) || this;
@@ -41148,7 +41216,7 @@ var GroupLazyLoadRenderer = /** @__PURE__ @class */ (function (_super) {
 /**
  * Group lazy load class
  */
-var LazyLoadGroup = /** @__PURE__ @class */ (function () {
+var LazyLoadGroup = /** @class */ (function () {
     /**
      * Constructor for Grid group lazy load module
      * @hidden
@@ -41213,7 +41281,7 @@ var LazyLoadGroup = /** @__PURE__ @class */ (function () {
  * `AutoCompleteEditCell` is used to handle autocomplete cell type editing.
  * @hidden
  */
-var AutoCompleteEditCell = /** @__PURE__ @class */ (function () {
+var AutoCompleteEditCell = /** @class */ (function () {
     function AutoCompleteEditCell(parent) {
         //constructor
         this.parentObj = parent;
@@ -41270,7 +41338,7 @@ var AutoCompleteEditCell = /** @__PURE__ @class */ (function () {
  * `ComboBoxEditCell` is used to handle ComboBoxEdit cell type editing.
  * @hidden
  */
-var ComboboxEditCell = /** @__PURE__ @class */ (function () {
+var ComboboxEditCell = /** @class */ (function () {
     function ComboboxEditCell(parentObject) {
         //constructor
         this.parent = parentObject;
@@ -41322,7 +41390,7 @@ var ComboboxEditCell = /** @__PURE__ @class */ (function () {
  * `MultiSelectEditCell` is used to handle multiselect dropdown cell type editing.
  * @hidden
  */
-var MultiSelectEditCell = /** @__PURE__ @class */ (function () {
+var MultiSelectEditCell = /** @class */ (function () {
     function MultiSelectEditCell(parentObj) {
         //constructor
         this.parent = parentObj;
@@ -41365,7 +41433,7 @@ var MultiSelectEditCell = /** @__PURE__ @class */ (function () {
  * `TimePickerEditCell` is used to handle Timepicker cell type editing.
  * @hidden
  */
-var TimePickerEditCell = /** @__PURE__ @class */ (function () {
+var TimePickerEditCell = /** @class */ (function () {
     function TimePickerEditCell(grid) {
         this.parent = grid;
     }
@@ -41407,7 +41475,7 @@ var TimePickerEditCell = /** @__PURE__ @class */ (function () {
  * `ToggleEditCell` is used to handle boolean cell type editing.
  * @hidden
  */
-var ToggleEditCell = /** @__PURE__ @class */ (function () {
+var ToggleEditCell = /** @class */ (function () {
     function ToggleEditCell(parentObject) {
         this.activeClasses = ['e-selectionbackground', 'e-active'];
         this.parent = parentObject;
@@ -41482,7 +41550,7 @@ var ToggleEditCell = /** @__PURE__ @class */ (function () {
  * `MaskedTextBoxCellEdit` is used to handle masked input cell type editing.
  * @hidden
  */
-var MaskedTextBoxCellEdit = /** @__PURE__ @class */ (function () {
+var MaskedTextBoxCellEdit = /** @class */ (function () {
     function MaskedTextBoxCellEdit(parentInstance) {
         //constructor
         this.parent = parentInstance;
@@ -41540,5 +41608,5 @@ var MaskedTextBoxCellEdit = /** @__PURE__ @class */ (function () {
  * Export Grid components
  */
 
-export { CheckBoxFilterBase, ExcelFilterBase, SortDescriptor, SortSettings, Predicate$1 as Predicate, InfiniteScrollSettings, FilterSettings, SelectionSettings, SearchSettings, RowDropSettings, TextWrapSettings, ResizeSettings, GroupSettings, EditSettings, Grid, CellType, RenderType, ToolbarItem, AggregateTemplateType, doesImplementInterface, valueAccessor, headerValueAccessor, getUpdateUsingRaf, isExportColumns, updateColumnTypeForExportColumns, updatecloneRow, getCollapsedRowsCount, recursive, iterateArrayOrObject, iterateExtend, templateCompiler, setStyleAndAttributes, extend$1 as extend, setColumnIndex, prepareColumns, setCssInGridPopUp, getActualProperties, parentsUntil, getElementIndex, inArray, getActualPropFromColl, removeElement, getPosition, getUid, appendChildren, parents, calculateAggregate, getScrollBarWidth, getRowHeight, isComplexField, getComplexFieldID, setComplexFieldID, isEditable, isActionPrevent, wrap, setFormatter, addRemoveActiveClasses, distinctStringValues, getFilterMenuPostion, getZIndexCalcualtion, toogleCheckbox, setChecked, createCboxWithWrap, removeAddCboxClasses, refreshForeignData, getForeignData, getColumnByForeignKeyValue, getDatePredicate, renderMovable, isGroupAdaptive, getObject, getCustomDateFormat, getExpandedState, getPrintGridModel, extendObjWithFn, measureColumnDepth, checkDepth, refreshFilteredColsUid, Global, getTransformValues, applyBiggerTheme, alignFrozenEditForm, ensureLastRow, ensureFirstRow, isRowEnteredInGrid, getEditedDataIndex, eventPromise, getStateEventArgument, ispercentageWidth, resetRowIndex, compareChanges, setRowElements, created, destroyed, load, rowDataBound, queryCellInfo, headerCellInfo, actionBegin, actionComplete, actionFailure, dataBound, rowSelecting, rowSelected, rowDeselecting, rowDeselected, cellSelecting, cellSelected, cellDeselecting, cellDeselected, columnDragStart, columnDrag, columnDrop, rowDragStartHelper, rowDragStart, rowDrag, rowDrop, beforePrint, printComplete, detailDataBound, toolbarClick, batchAdd, batchCancel, batchDelete, beforeBatchAdd, beforeBatchDelete, beforeBatchSave, beginEdit, cellEdit, cellSave, cellSaved, endAdd, endDelete, endEdit, recordDoubleClick, recordClick, beforeDataBound, beforeOpenColumnChooser, resizeStart, onResize, resizeStop, checkBoxChange, beforeCopy, beforePaste, beforeAutoFill, filterChoiceRequest, filterAfterOpen, filterBeforeOpen, filterSearchBegin, commandClick, exportGroupCaption, lazyLoadGroupExpand, lazyLoadGroupCollapse, initialLoad, initialEnd, dataReady, contentReady, uiUpdate, onEmpty, inBoundModelChanged, modelChanged, colGroupRefresh, headerRefreshed, pageBegin, pageComplete, sortBegin, sortComplete, filterBegin, filterComplete, searchBegin, searchComplete, reorderBegin, reorderComplete, rowDragAndDropBegin, rowDragAndDropComplete, groupBegin, groupComplete, ungroupBegin, ungroupComplete, groupAggregates, refreshFooterRenderer, refreshAggregateCell, refreshAggregates, rowSelectionBegin, rowSelectionComplete, columnSelectionBegin, columnSelectionComplete, cellSelectionBegin, cellSelectionComplete, beforeCellFocused, cellFocused, keyPressed, click, destroy, columnVisibilityChanged, scroll, columnWidthChanged, columnPositionChanged, rowDragAndDrop, rowsAdded, rowsRemoved, columnDragStop, headerDrop, dataSourceModified, refreshComplete, refreshVirtualBlock, dblclick, toolbarRefresh, bulkSave, autoCol, tooltipDestroy, updateData, editBegin, editComplete, addBegin, addComplete, saveComplete, deleteBegin, deleteComplete, preventBatch, dialogDestroy, crudAction, addDeleteAction, destroyForm, doubleTap, beforeExcelExport, excelExportComplete, excelQueryCellInfo, excelHeaderQueryCellInfo, exportDetailDataBound, beforePdfExport, pdfExportComplete, pdfQueryCellInfo, pdfHeaderQueryCellInfo, accessPredicate, contextMenuClick, freezeRender, freezeRefresh, contextMenuOpen, columnMenuClick, columnMenuOpen, filterOpen, filterDialogCreated, filterMenuClose, initForeignKeyColumn, getForeignKeyData, generateQuery, showEmptyGrid, foreignKeyData, columnDataStateChange, dataStateChange, dataSourceChanged, rtlUpdated, beforeFragAppend, frozenHeight, textWrapRefresh, recordAdded, cancelBegin, editNextValCell, hierarchyPrint, expandChildGrid, printGridInit, exportRowDataBound, exportDataBound, rowPositionChanged, columnChooserOpened, batchForm, beforeStartEdit, beforeBatchCancel, batchEditFormRendered, partialRefresh, beforeCustomFilterOpen, selectVirtualRow, columnsPrepared, cBoxFltrBegin, cBoxFltrComplete, fltrPrevent, beforeFltrcMenuOpen, valCustomPlacement, filterCboxValue, componentRendered, restoreFocus, detailStateChange, detailIndentCellInfo, virtaulKeyHandler, virtaulCellFocus, virtualScrollEditActionBegin, virtualScrollEditSuccess, virtualScrollEditCancel, virtualScrollEdit, refreshVirtualCache, editReset, virtualScrollAddActionBegin, getVirtualData, refreshInfiniteModeBlocks, resetInfiniteBlocks, infiniteScrollHandler, infinitePageQuery, infiniteShowHide, appendInfiniteContent, removeInfiniteRows, setInfiniteCache, infiniteEditHandler, initialCollapse, getAggregateQuery, closeFilterDialog, columnChooserCancelBtnClick, getFilterBarOperator, resetColumns, pdfAggregateQueryCellInfo, excelAggregateQueryCellInfo, setGroupCache, lazyLoadScrollHandler, groupCollapse, beforeCheckboxRenderer, refreshHandlers, Data, Sort, Page, Selection, Filter, Search, Scroll, resizeClassList, Resize, Reorder, RowDD, Group, getCloneProperties, Print, DetailRow, Toolbar$1 as Toolbar, Aggregate, summaryIterator, VirtualScroll, Edit, BatchEdit, InlineEdit, NormalEdit, DialogEdit, ColumnChooser, ExcelExport, PdfExport, ExportHelper, ExportValueFormatter, Clipboard, CommandColumn, CheckBoxFilter, menuClass, ContextMenu$1 as ContextMenu, Freeze, ColumnMenu, ExcelFilter, ForeignKey, Logger, detailLists, gridObserver, BlazorAction, InfiniteScroll, LazyLoadGroup, Column, CommandColumnModel, Row, Cell, HeaderRender, ContentRender, RowRenderer, CellRenderer, HeaderCellRenderer, FilterCellRenderer, StackedHeaderCellRenderer, Render, IndentCellRenderer, GroupCaptionCellRenderer, GroupCaptionEmptyCellRenderer, BatchEditRender, DialogEditRender, InlineEditRender, EditRender, BooleanEditCell, DefaultEditCell, DropDownEditCell, NumericEditCell, DatePickerEditCell, CommandColumnRenderer, FreezeContentRender, FreezeRender, StringFilterUI, NumberFilterUI, DateFilterUI, BooleanFilterUI, FlMenuOptrUI, AutoCompleteEditCell, ComboboxEditCell, MultiSelectEditCell, TimePickerEditCell, ToggleEditCell, MaskedTextBoxCellEdit, VirtualContentRenderer, VirtualHeaderRenderer, VirtualElementHandler, GroupLazyLoadRenderer, CellRendererFactory, ServiceLocator, RowModelGenerator, GroupModelGenerator, FreezeRowModelGenerator, ValueFormatter, VirtualRowModelGenerator, InterSectionObserver, Pager, ExternalMessage, NumericContainer, PagerMessage, PagerDropDown };
+export { CheckBoxFilterBase, ExcelFilterBase, SortDescriptor, SortSettings, Predicate$1 as Predicate, InfiniteScrollSettings, FilterSettings, SelectionSettings, SearchSettings, RowDropSettings, TextWrapSettings, ResizeSettings, GroupSettings, EditSettings, Grid, CellType, RenderType, ToolbarItem, AggregateTemplateType, doesImplementInterface, valueAccessor, headerValueAccessor, getUpdateUsingRaf, isExportColumns, updateColumnTypeForExportColumns, updatecloneRow, getCollapsedRowsCount, recursive, iterateArrayOrObject, iterateExtend, templateCompiler, setStyleAndAttributes, extend$1 as extend, setColumnIndex, prepareColumns, setCssInGridPopUp, getActualProperties, parentsUntil, getElementIndex, inArray, getActualPropFromColl, removeElement, getPosition, getUid, appendChildren, parents, calculateAggregate, getScrollBarWidth, getRowHeight, isComplexField, getComplexFieldID, setComplexFieldID, isEditable, isActionPrevent, wrap, setFormatter, addRemoveActiveClasses, distinctStringValues, getFilterMenuPostion, getZIndexCalcualtion, toogleCheckbox, setChecked, createCboxWithWrap, removeAddCboxClasses, refreshForeignData, getForeignData, getColumnByForeignKeyValue, getDatePredicate, renderMovable, isGroupAdaptive, getObject, getCustomDateFormat, getExpandedState, getPrintGridModel, extendObjWithFn, measureColumnDepth, checkDepth, refreshFilteredColsUid, Global, getTransformValues, applyBiggerTheme, alignFrozenEditForm, ensureLastRow, ensureFirstRow, isRowEnteredInGrid, getEditedDataIndex, eventPromise, getStateEventArgument, ispercentageWidth, resetRowIndex, compareChanges, setRowElements, created, destroyed, load, rowDataBound, queryCellInfo, headerCellInfo, actionBegin, actionComplete, actionFailure, dataBound, rowSelecting, rowSelected, rowDeselecting, rowDeselected, cellSelecting, cellSelected, cellDeselecting, cellDeselected, columnDragStart, columnDrag, columnDrop, rowDragStartHelper, rowDragStart, rowDrag, rowDrop, beforePrint, printComplete, detailDataBound, toolbarClick, batchAdd, batchCancel, batchDelete, beforeBatchAdd, beforeBatchDelete, beforeBatchSave, beginEdit, cellEdit, cellSave, cellSaved, endAdd, endDelete, endEdit, recordDoubleClick, recordClick, beforeDataBound, beforeOpenColumnChooser, resizeStart, onResize, resizeStop, checkBoxChange, beforeCopy, beforePaste, beforeAutoFill, filterChoiceRequest, filterAfterOpen, filterBeforeOpen, filterSearchBegin, commandClick, exportGroupCaption, lazyLoadGroupExpand, lazyLoadGroupCollapse, initialLoad, initialEnd, dataReady, contentReady, uiUpdate, onEmpty, inBoundModelChanged, modelChanged, colGroupRefresh, headerRefreshed, pageBegin, pageComplete, sortBegin, sortComplete, filterBegin, filterComplete, searchBegin, searchComplete, reorderBegin, reorderComplete, rowDragAndDropBegin, rowDragAndDropComplete, groupBegin, groupComplete, ungroupBegin, ungroupComplete, groupAggregates, refreshFooterRenderer, refreshAggregateCell, refreshAggregates, rowSelectionBegin, rowSelectionComplete, columnSelectionBegin, columnSelectionComplete, cellSelectionBegin, cellSelectionComplete, beforeCellFocused, cellFocused, keyPressed, click, destroy, columnVisibilityChanged, scroll, columnWidthChanged, columnPositionChanged, rowDragAndDrop, rowsAdded, rowsRemoved, columnDragStop, headerDrop, dataSourceModified, refreshComplete, refreshVirtualBlock, dblclick, toolbarRefresh, bulkSave, autoCol, tooltipDestroy, updateData, editBegin, editComplete, addBegin, addComplete, saveComplete, deleteBegin, deleteComplete, preventBatch, dialogDestroy, crudAction, addDeleteAction, destroyForm, doubleTap, beforeExcelExport, excelExportComplete, excelQueryCellInfo, excelHeaderQueryCellInfo, exportDetailDataBound, beforePdfExport, pdfExportComplete, pdfQueryCellInfo, pdfHeaderQueryCellInfo, accessPredicate, contextMenuClick, freezeRender, freezeRefresh, contextMenuOpen, columnMenuClick, columnMenuOpen, filterOpen, filterDialogCreated, filterMenuClose, initForeignKeyColumn, getForeignKeyData, generateQuery, showEmptyGrid, foreignKeyData, columnDataStateChange, dataStateChange, dataSourceChanged, rtlUpdated, beforeFragAppend, frozenHeight, textWrapRefresh, recordAdded, cancelBegin, editNextValCell, hierarchyPrint, expandChildGrid, printGridInit, exportRowDataBound, exportDataBound, rowPositionChanged, columnChooserOpened, batchForm, beforeStartEdit, beforeBatchCancel, batchEditFormRendered, partialRefresh, beforeCustomFilterOpen, selectVirtualRow, columnsPrepared, cBoxFltrBegin, cBoxFltrComplete, fltrPrevent, beforeFltrcMenuOpen, valCustomPlacement, filterCboxValue, componentRendered, restoreFocus, detailStateChange, detailIndentCellInfo, virtaulKeyHandler, virtaulCellFocus, virtualScrollEditActionBegin, virtualScrollEditSuccess, virtualScrollEditCancel, virtualScrollEdit, refreshVirtualCache, editReset, virtualScrollAddActionBegin, getVirtualData, refreshInfiniteModeBlocks, resetInfiniteBlocks, infiniteScrollHandler, infinitePageQuery, infiniteShowHide, appendInfiniteContent, removeInfiniteRows, setInfiniteCache, infiniteEditHandler, initialCollapse, getAggregateQuery, closeFilterDialog, columnChooserCancelBtnClick, getFilterBarOperator, resetColumns, pdfAggregateQueryCellInfo, excelAggregateQueryCellInfo, setGroupCache, lazyLoadScrollHandler, groupCollapse, beforeCheckboxRenderer, refreshHandlers, beforeRefreshOnDataChange, Data, Sort, Page, Selection, Filter, Search, Scroll, resizeClassList, Resize, Reorder, RowDD, Group, getCloneProperties, Print, DetailRow, Toolbar$1 as Toolbar, Aggregate, summaryIterator, VirtualScroll, Edit, BatchEdit, InlineEdit, NormalEdit, DialogEdit, ColumnChooser, ExcelExport, PdfExport, ExportHelper, ExportValueFormatter, Clipboard, CommandColumn, CheckBoxFilter, menuClass, ContextMenu$1 as ContextMenu, Freeze, ColumnMenu, ExcelFilter, ForeignKey, Logger, detailLists, gridObserver, BlazorAction, InfiniteScroll, LazyLoadGroup, Column, CommandColumnModel, Row, Cell, HeaderRender, ContentRender, RowRenderer, CellRenderer, HeaderCellRenderer, FilterCellRenderer, StackedHeaderCellRenderer, Render, IndentCellRenderer, GroupCaptionCellRenderer, GroupCaptionEmptyCellRenderer, BatchEditRender, DialogEditRender, InlineEditRender, EditRender, BooleanEditCell, DefaultEditCell, DropDownEditCell, NumericEditCell, DatePickerEditCell, CommandColumnRenderer, FreezeContentRender, FreezeRender, StringFilterUI, NumberFilterUI, DateFilterUI, BooleanFilterUI, FlMenuOptrUI, AutoCompleteEditCell, ComboboxEditCell, MultiSelectEditCell, TimePickerEditCell, ToggleEditCell, MaskedTextBoxCellEdit, VirtualContentRenderer, VirtualHeaderRenderer, VirtualElementHandler, GroupLazyLoadRenderer, CellRendererFactory, ServiceLocator, RowModelGenerator, GroupModelGenerator, FreezeRowModelGenerator, ValueFormatter, VirtualRowModelGenerator, InterSectionObserver, Pager, ExternalMessage, NumericContainer, PagerMessage, PagerDropDown };
 //# sourceMappingURL=ej2-grids.es5.js.map