@syncfusion/ej2-grids - npm Package Compare versions

Comparing version 1.0.10 to 1.0.11

dist/es6/grid/actions.js

@@ -13,1 +13,3 @@ export * from './actions/data';
 export * from './actions/detail-row';
+export * from './actions/toolbar';
+export * from './actions/aggregate';

dist/es6/grid/actions/data.js

@@ -23,3 +23,3 @@ import { isNullOrUndefined, extend } from '@syncfusion/ej2-base/util';
     };
-    Data.prototype.generateQuery = function () {
+    Data.prototype.generateQuery = function (skipPage) {
         var gObj = this.parent;
@@ -45,2 +45,8 @@ var query = gObj.query.clone();
         }
+        gObj.aggregates.forEach(function (row) {
+            row.columns.forEach(function (column) {
+                var types = column.type instanceof Array ? column.type : [column.type];
+                types.forEach(function (type) { return query.aggregate(type, column.field); });
+            });
+        });
         if ((gObj.allowSorting || gObj.allowGrouping) && gObj.sortSettings.columns.length) {
@@ -61,3 +67,3 @@ var columns = gObj.sortSettings.columns;
         }
-        if (gObj.allowPaging) {
+        if (gObj.allowPaging && skipPage !== true) {
             query.page(gObj.pageSettings.currentPage, gObj.pageSettings.pageSize);
@@ -76,2 +82,5 @@ }
     };
+    Data.prototype.isRemote = function () {
+        return this.dataManager.dataSource.offline !== true && this.dataManager.dataSource.url !== undefined;
+    };
     Data.prototype.getDatePredicate = function (filterObject) {
@@ -78,0 +87,0 @@ var prevDate;

dist/es6/grid/actions/filter.js

@@ -255,2 +255,3 @@ import { EventHandler } from '@syncfusion/ej2-base';
                     this.element.querySelector('#' + cols[i].field + '_filterBarcell').value = '';
+                    delete this.values[field];
                 }
@@ -257,0 +258,0 @@ cols.splice(i, 1);

dist/es6/grid/actions/group.js

@@ -316,3 +316,3 @@ import { Draggable, Droppable } from '@syncfusion/ej2-base';
     Group.prototype.renderGroupDropArea = function () {
-        this.element = createElement('div', { className: 'e-groupdroparea' });
+        this.element = createElement('div', { className: 'e-groupdroparea', attrs: { 'tabindex': '-1' } });
         this.updateGroupDropArea();
@@ -445,5 +445,11 @@ this.parent.element.insertBefore(this.element, this.parent.element.firstChild);
         var headerCell = gObj.getColumnHeaderByUid(column.uid);
-        childDiv.appendChild(createElement('span', { className: 'e-grouptext', innerHTML: column.headerText }));
+        childDiv.appendChild(createElement('span', {
+            className: 'e-grouptext', innerHTML: column.headerText,
+            attrs: { tabindex: '-1', 'aria-label': 'sort the grouped column' }
+        }));
         if (this.groupSettings.showToggleButton) {
-            childDiv.appendChild(createElement('span', { className: 'e-togglegroupbutton e-icons e-icon-ungroup e-toggleungroup', innerHTML: ' ' }));
+            childDiv.appendChild(createElement('span', {
+                className: 'e-togglegroupbutton e-icons e-icon-ungroup e-toggleungroup', innerHTML: ' ',
+                attrs: { tabindex: '-1', 'aria-label': 'ungroup button' }
+            }));
         }
@@ -453,6 +459,9 @@ if (headerCell.querySelectorAll('.e-ascending,.e-descending').length) {
         }
-        childDiv.appendChild(createElement('span', { className: 'e-groupsort e-icons ' + ('e-' + direction + ' e-icon-' + direction), innerHTML: ' ' }));
         childDiv.appendChild(createElement('span', {
-            className: 'e-ungroupbutton e-icons e-icon-hide',
-            attrs: { title: this.l10n.getConstant('UnGroup'), innerHTML: ' ' },
+            className: 'e-groupsort e-icons ' + ('e-' + direction + ' e-icon-' + direction), innerHTML: ' ',
+            attrs: { tabindex: '-1', 'aria-label': 'sort the grouped column' }
+        }));
+        childDiv.appendChild(createElement('span', {
+            className: 'e-ungroupbutton e-icons e-icon-hide', innerHTML: ' ',
+            attrs: { title: this.l10n.getConstant('UnGroup'), tabindex: '-1', 'aria-label': 'ungroup the grouped column' },
             styles: this.groupSettings.showUngroupButton ? '' : 'display:none'
@@ -476,3 +485,3 @@ }));
                                 (this.groupSettings.columns.indexOf(column.field) > -1 ? 'e-toggleungroup e-icon-ungroup'
-                                    : 'e-togglegroup e-icon-group')
+                                    : 'e-togglegroup e-icon-group'), attrs: { tabindex: '-1', 'aria-label': 'Group button' }
                         }));
@@ -504,2 +513,3 @@ }
                 case 'showDropArea':
+                    this.updateGroupDropArea();
                     this.groupSettings.showDropArea ? this.element.style.display = '' : this.element.style.display = 'none';
@@ -506,0 +516,0 @@ break;

dist/es6/grid/actions/page.js

@@ -23,6 +23,24 @@ import { extend } from '@syncfusion/ej2-base/util';
             click: this.clickHandler.bind(this),
-            enableRtl: gObj.enableRtl, locale: gObj.locale
+            enableRtl: gObj.enableRtl, locale: gObj.locale,
+            created: this.addAriaAttr.bind(this)
         }, ['parentObj', 'propName']);
         this.pagerObj = new Pager(pagerObj);
     };
+    Page.prototype.addAriaAttr = function () {
+        var _this = this;
+        var numericContainer = this.element.querySelector('.e-numericcontainer');
+        var links = numericContainer.querySelectorAll('a');
+        for (var i = 0; i < links.length; i++) {
+            if (this.parent.getContentTable()) {
+                links[i].setAttribute('aria-owns', this.parent.getContentTable().id);
+            }
+        }
+        var classList = ['.e-mfirst', '.e-mprev', '.e-first', '.e-prev', '.e-next', '.e-last', '.e-mnext', '.e-mlast'];
+        classList.forEach(function (value) {
+            var element = _this.element.querySelector(value);
+            if (_this.parent.getContentTable()) {
+                element.setAttribute('aria-owns', _this.parent.getContentTable().id);
+            }
+        });
+    };
     Page.prototype.dataReady = function (e) {
@@ -29,0 +47,0 @@ this.updateModel(e);

dist/es6/grid/actions/print.js

@@ -67,2 +67,5 @@ import { removeClass } from '@syncfusion/ej2-base/dom';
         }
+        if (gObj.toolbar) {
+            this.element.querySelector('.e-toolbar').style.display = 'none';
+        }
         if (gObj.allowFiltering && gObj.filterSettings.type === 'filterbar') {
@@ -69,0 +72,0 @@ this.element.querySelector('.e-filterbar').style.display = 'none';

dist/es6/grid/actions/scroll.js

 import { Browser, EventHandler } from '@syncfusion/ej2-base';
 import { addClass, removeClass } from '@syncfusion/ej2-base/dom';
 import { formatUnit, isNullOrUndefined } from '@syncfusion/ej2-base/util';
-import { contentReady, uiUpdate } from '../base/constant';
+import { getScrollBarWidth } from '../base/util';
+import { scroll, contentReady, uiUpdate } from '../base/constant';
 import { ColumnWidthService } from '../services/width-controller';
@@ -79,2 +80,3 @@ var Scroll = (function () {
             var sLimit = target.scrollWidth;
+            var isFooter = target.classList.contains('e-summarycontent');
             if (_this.previousValues.left === left) {
@@ -85,3 +87,7 @@ _this.previousValues.top = !isHeader ? _this.previousValues.top : target.scrollTop;
             element.scrollLeft = left;
+            if (isFooter) {
+                _this.header.scrollLeft = left;
+            }
             _this.previousValues.left = left;
+            _this.parent.notify(scroll, { left: left });
         };
@@ -95,2 +101,5 @@ };
             EventHandler.add(this.header, 'scroll', this.onContentScroll(this.content), this);
+            if (this.parent.aggregates.length) {
+                EventHandler.add(this.parent.getFooterContent().firstChild, 'scroll', this.onContentScroll(this.content), this);
+            }
             this.refresh();
@@ -139,9 +148,3 @@ this.oneTimeReady = false;
     Scroll.getScrollBarWidth = function () {
-        var divNode = document.createElement('div');
-        var value = 0;
-        divNode.style.cssText = 'width:100px;height: 100px;overflow: scroll;position: absolute;top: -9999px;';
-        document.body.appendChild(divNode);
-        value = (divNode.offsetWidth - divNode.clientWidth) | 0;
-        document.body.removeChild(divNode);
-        return value;
+        return getScrollBarWidth();
     };
@@ -148,0 +151,0 @@ return Scroll;

dist/es6/grid/actions/selection.js

@@ -39,2 +39,3 @@ import { Browser, EventHandler } from '@syncfusion/ej2-base';
         var selectedRow = gObj.getRowByIndex(index);
+        var selectData = gObj.getCurrentViewRecords()[index];
         if (!this.isRowType() || !selectedRow) {
@@ -44,9 +45,12 @@ return;
         var isRowSelected = selectedRow.hasAttribute('aria-selected');
+        var isToogle = index === this.prevRowIndex && isRowSelected;
+        if (!isToogle) {
+            this.onActionBegin({
+                data: selectData, rowIndex: index, isCtrlPressed: this.isMultiCtrlRequest,
+                isShiftPressed: this.isMultiShiftRequest, row: selectedRow, previousRow: gObj.getRows()[this.prevRowIndex],
+                previousRowIndex: this.prevRowIndex, target: this.target
+            }, events.rowSelecting);
+        }
         this.clearRow();
-        this.onActionBegin({
-            data: gObj.currentViewData[index], rowIndex: index, isCtrlPressed: this.isMultiCtrlRequest,
-            isShiftPressed: this.isMultiShiftRequest, row: selectedRow, previousRow: gObj.getRows()[this.prevRowIndex],
-            previousRowIndex: this.prevRowIndex, target: this.target
-        }, events.rowSelecting);
-        if (!(index === this.prevRowIndex && isRowSelected)) {
+        if (!isToogle) {
             this.updateRowSelection(selectedRow, index);
@@ -56,7 +60,9 @@ }
         this.parent.selectedRowIndex = index;
-        this.onActionComplete({
-            data: gObj.currentViewData[index], rowIndex: index,
-            row: selectedRow, previousRow: gObj.getRows()[this.prevRowIndex],
-            previousRowIndex: this.prevRowIndex, target: this.target
-        }, events.rowSelected);
+        if (!isToogle) {
+            this.onActionComplete({
+                data: selectData, rowIndex: index,
+                row: selectedRow, previousRow: gObj.getRows()[this.prevRowIndex],
+                previousRowIndex: this.prevRowIndex, target: this.target
+            }, events.rowSelected);
+        }
     };
@@ -70,11 +76,13 @@ Selection.prototype.selectRowsByRange = function (startIndex, endIndex) {
         var selectedRow = gObj.getRowByIndex(rowIndexes[0]);
+        var selectedData = gObj.getCurrentViewRecords()[rowIndexes[0]];
         if (this.isSingleSel() || !this.isRowType()) {
             return;
         }
-        this.clearRow();
         this.onActionBegin({
             rowIndexes: rowIndexes, row: selectedRow, rowIndex: rowIndexes[0], target: this.target,
             prevRow: gObj.getRows()[this.prevRowIndex], previousRowIndex: this.prevRowIndex,
-            isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest
+            isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest,
+            data: selectedData
         }, events.rowSelecting);
+        this.clearRow();
         for (var _i = 0, rowIndexes_1 = rowIndexes; _i < rowIndexes_1.length; _i++) {
@@ -87,3 +95,4 @@ var rowIndex = rowIndexes_1[_i];
             rowIndexes: rowIndexes, row: selectedRow, rowIndex: rowIndexes[0], target: this.target,
-            prevRow: gObj.getRows()[this.prevRowIndex], previousRowIndex: this.prevRowIndex
+            prevRow: gObj.getRows()[this.prevRowIndex], previousRowIndex: this.prevRowIndex,
+            data: selectedData
         }, events.rowSelected);
@@ -99,9 +108,7 @@ };
             var rowIndex = rowIndexes_2[_i];
-            this.onActionBegin({
-                data: gObj.currentViewData[rowIndex], rowIndex: rowIndex, row: selectedRow, target: this.target,
-                prevRow: gObj.getRows()[this.prevRowIndex], previousRowIndex: this.prevRowIndex,
-                isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest
-            }, events.rowSelecting);
+            var data = gObj.getCurrentViewRecords()[rowIndex];
+            var isUnSelected = this.selectedRowIndexes.indexOf(rowIndex) > -1;
             gObj.selectedRowIndex = rowIndex;
-            if (this.selectedRowIndexes.indexOf(rowIndex) > -1) {
+            if (isUnSelected) {
+                this.rowDeselect(events.rowDeselecting, [rowIndex], data, [selectedRow]);
                 this.selectedRowIndexes.splice(this.selectedRowIndexes.indexOf(rowIndex), 1);
@@ -111,11 +118,19 @@ this.selectedRecords.splice(this.selectedRecords.indexOf(selectedRow), 1);
                 this.addRemoveClassesForRow(selectedRow, false, 'e-selectionbackground', 'e-active');
+                this.rowDeselect(events.rowDeselecting, [rowIndex], data, [selectedRow]);
             }
             else {
+                this.onActionBegin({
+                    data: data, rowIndex: rowIndex, row: selectedRow, target: this.target,
+                    prevRow: gObj.getRows()[this.prevRowIndex], previousRowIndex: this.prevRowIndex,
+                    isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest
+                }, events.rowSelecting);
                 this.updateRowSelection(selectedRow, rowIndex);
             }
             this.updateRowProps(rowIndex);
-            this.onActionComplete({
-                data: gObj.currentViewData[rowIndex], rowIndex: rowIndex, row: selectedRow, target: this.target,
-                prevRow: gObj.getRows()[this.prevRowIndex], previousRowIndex: this.prevRowIndex
-            }, events.rowSelected);
+            if (!isUnSelected) {
+                this.onActionComplete({
+                    data: data, rowIndex: rowIndex, row: selectedRow, target: this.target,
+                    prevRow: gObj.getRows()[this.prevRowIndex], previousRowIndex: this.prevRowIndex
+                }, events.rowSelected);
+            }
         }
@@ -168,12 +183,9 @@ };
             var rowIndex = [];
+            var currentViewData = this.parent.getCurrentViewRecords();
             for (var i = 0, len = this.selectedRowIndexes.length; i < len; i++) {
-                data.push(this.parent.currentViewData[this.selectedRowIndexes[i]]);
+                data.push(currentViewData[this.selectedRowIndexes[i]]);
                 row.push(this.parent.getRows()[this.selectedRowIndexes[i]]);
                 rowIndex.push(this.selectedRowIndexes[i]);
             }
-            if (this.isTrigger) {
-                this.parent.trigger(events.rowDeselecting, {
-                    rowIndex: rowIndex, data: data, row: row
-                });
-            }
+            this.rowDeselect(events.rowDeselecting, rowIndex, data, row);
             for (var i = 0, len = this.selectedRowIndexes.length; i < len; i++) {
@@ -183,7 +195,2 @@ rows[this.selectedRowIndexes[i]].removeAttribute('aria-selected');
             }
-            if (this.isTrigger) {
-                this.parent.trigger(events.rowDeselected, {
-                    rowIndex: rowIndex, data: data, row: row
-                });
-            }
             this.selectedRowIndexes = [];
@@ -193,7 +200,15 @@ this.selectedRecords = [];
             this.parent.selectedRowIndex = undefined;
+            this.rowDeselect(events.rowDeselected, rowIndex, data, row);
         }
     };
+    Selection.prototype.rowDeselect = function (type, rowIndex, data, row) {
+        this.parent.trigger(type, {
+            rowIndex: rowIndex, data: data, row: row
+        });
+    };
     Selection.prototype.selectCell = function (cellIndex) {
         var gObj = this.parent;
         var selectedCell = gObj.getCellFromIndex(cellIndex.rowIndex, cellIndex.cellIndex);
+        this.currentIndex = cellIndex.rowIndex;
+        var selectedData = gObj.getCurrentViewRecords()[this.currentIndex];
         if (!this.isCellType() || !selectedCell) {
@@ -203,19 +218,26 @@ return;
         var isCellSelected = selectedCell.classList.contains('e-cellselectionbackground');
+        var isUpdate = !(!isUndefined(this.prevCIdxs) &&
+            cellIndex.rowIndex === this.prevCIdxs.rowIndex && cellIndex.cellIndex === this.prevCIdxs.cellIndex &&
+            isCellSelected);
+        if (isUpdate) {
+            this.onActionBegin({
+                data: selectedData, cellIndex: cellIndex, currentCell: selectedCell,
+                isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest, previousRowCellIndex: this.prevECIdxs,
+                previousRowCell: this.prevECIdxs ?
+                    gObj.getCellFromIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined
+            }, events.cellSelecting);
+        }
         this.clearCell();
-        this.onActionBegin({
-            data: this.parent.getRows()[cellIndex.rowIndex], cellIndex: cellIndex, currentCell: selectedCell,
-            isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest, previousRowCellIndex: this.prevECIdxs,
-            previousRowCell: this.prevECIdxs ? gObj.getCellFromIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined
-        }, events.cellSelecting);
-        if (!(!isUndefined(this.prevCIdxs) &&
-            cellIndex.rowIndex === this.prevCIdxs.rowIndex && cellIndex.cellIndex === this.prevCIdxs.cellIndex &&
-            isCellSelected)) {
+        if (isUpdate) {
             this.updateCellSelection(selectedCell, cellIndex.rowIndex, cellIndex.cellIndex);
         }
         this.updateCellProps(cellIndex, cellIndex);
-        this.onActionComplete({
-            data: this.parent.getRows()[cellIndex.rowIndex], cellIndex: cellIndex, currentCell: selectedCell,
-            previousRowCellIndex: this.prevECIdxs, selectedRowCellIndex: this.selectedRowCellIndexes,
-            previousRowCell: this.prevECIdxs ? gObj.getCellFromIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined
-        }, events.cellSelected);
+        if (isUpdate) {
+            this.onActionComplete({
+                data: selectedData, cellIndex: cellIndex, currentCell: selectedCell,
+                previousRowCellIndex: this.prevECIdxs, selectedRowCellIndex: this.selectedRowCellIndexes,
+                previousRowCell: this.prevECIdxs ?
+                    gObj.getCellFromIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined
+            }, events.cellSelected);
+        }
     };
@@ -228,13 +250,15 @@ Selection.prototype.selectCellsByRange = function (startIndex, endIndex) {
         var stIndex = startIndex;
-        var edIndex = endIndex;
+        var edIndex = endIndex = endIndex ? endIndex : startIndex;
         var cellIndexes;
+        this.currentIndex = startIndex.rowIndex;
+        var selectedData = gObj.getCurrentViewRecords()[this.currentIndex];
         if (this.isSingleSel() || !this.isCellType()) {
             return;
         }
-        this.clearCell();
         this.onActionBegin({
-            data: this.parent.getRows()[startIndex.rowIndex], cellIndex: startIndex, currentCell: selectedCell,
+            data: selectedData, cellIndex: startIndex, currentCell: selectedCell,
             isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest, previousRowCellIndex: this.prevECIdxs,
             previousRowCell: this.prevECIdxs ? gObj.getCellFromIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined
         }, events.cellSelecting);
+        this.clearCell();
         if (startIndex.rowIndex > endIndex.rowIndex) {
@@ -262,2 +286,3 @@ var temp = startIndex;
                 selectedCell.classList.add('e-cellselectionbackground');
+                this.addAttribute(selectedCell);
             }
@@ -268,3 +293,3 @@ this.selectedRowCellIndexes.push({ rowIndex: i, cellIndexes: cellIndexes });
         this.onActionComplete({
-            data: this.parent.getRows()[startIndex.rowIndex], cellIndex: startIndex, currentCell: selectedCell,
+            data: selectedData, cellIndex: startIndex, currentCell: selectedCell,
             previousRowCellIndex: this.prevECIdxs, selectedRowCellIndex: this.selectedRowCellIndexes,
@@ -277,2 +302,4 @@ previousRowCell: this.prevECIdxs ? gObj.getCellFromIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined
         var selectedCell = gObj.getCellFromIndex(rowCellIndexes[0].rowIndex, rowCellIndexes[0].cellIndexes[0]);
+        this.currentIndex = rowCellIndexes[0].rowIndex;
+        var selectedData = gObj.getCurrentViewRecords()[this.currentIndex];
         if (this.isSingleSel() || !this.isCellType()) {
@@ -282,3 +309,3 @@ return;
         this.onActionBegin({
-            data: this.parent.getRows()[rowCellIndexes[0].rowIndex], cellIndex: rowCellIndexes[0].cellIndexes[0],
+            data: selectedData, cellIndex: rowCellIndexes[0].cellIndexes[0],
             currentCell: selectedCell, isCtrlPressed: this.isMultiCtrlRequest,
@@ -295,2 +322,3 @@ isShiftPressed: this.isMultiShiftRequest, previousRowCellIndex: this.prevECIdxs,
                 selectedCell.classList.add('e-cellselectionbackground');
+                this.addAttribute(selectedCell);
                 this.addRowCellIndex({ rowIndex: rowCellIndexes[i].rowIndex, cellIndex: rowCellIndexes[i].cellIndexes[j] });
@@ -301,3 +329,3 @@ }
         this.onActionComplete({
-            data: this.parent.getRows()[rowCellIndexes[0].rowIndex], cellIndex: rowCellIndexes[0].cellIndexes[0],
+            data: selectedData, cellIndex: rowCellIndexes[0].cellIndexes[0],
             currentCell: selectedCell,
@@ -312,2 +340,4 @@ previousRowCellIndex: this.prevECIdxs, selectedRowCellIndex: this.selectedRowCellIndexes,
         var index;
+        this.currentIndex = cellIndexes[0].rowIndex;
+        var selectedData = gObj.getCurrentViewRecords()[this.currentIndex];
         if (this.isSingleSel() || !this.isCellType()) {
@@ -318,9 +348,2 @@ return;
             var cellIndex = cellIndexes_1[_i];
-            this.onActionBegin({
-                data: this.parent.getRows()[cellIndexes[0].rowIndex], cellIndex: cellIndexes[0],
-                isShiftPressed: this.isMultiShiftRequest, previousRowCellIndex: this.prevECIdxs,
-                currentCell: selectedCell, isCtrlPressed: this.isMultiCtrlRequest,
-                previousRowCell: this.prevECIdxs ?
-                    gObj.getCellFromIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined
-            }, events.cellSelecting);
             for (var i = 0, len = this.selectedRowCellIndexes.length; i < len; i++) {
@@ -332,26 +355,47 @@ if (this.selectedRowCellIndexes[i].rowIndex === cellIndex.rowIndex) {
             }
-            if (index > -1) {
+            var args = {
+                data: selectedData, cellIndex: cellIndexes[0],
+                isShiftPressed: this.isMultiShiftRequest, previousRowCellIndex: this.prevECIdxs,
+                currentCell: selectedCell, isCtrlPressed: this.isMultiCtrlRequest,
+                previousRowCell: this.prevECIdxs ?
+                    gObj.getCellFromIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined
+            };
+            var isUnSelected = index > -1;
+            if (isUnSelected) {
                 var selectedCellIdx = this.selectedRowCellIndexes[index].cellIndexes;
                 if (selectedCellIdx.indexOf(cellIndex.cellIndex) > -1) {
+                    this.cellDeselect(events.cellDeselecting, [{ rowIndex: cellIndex.rowIndex, cellIndexes: [cellIndex.cellIndex] }], selectedData, [selectedCell]);
                     selectedCellIdx.splice(selectedCellIdx.indexOf(cellIndex.cellIndex), 1);
                     selectedCell.classList.remove('e-cellselectionbackground');
+                    selectedCell.removeAttribute('aria-selected');
+                    this.cellDeselect(events.cellDeselected, [{ rowIndex: cellIndex.rowIndex, cellIndexes: [cellIndex.cellIndex] }], selectedData, [selectedCell]);
                 }
                 else {
+                    isUnSelected = false;
+                    this.onActionBegin(args, events.cellSelecting);
                     this.addRowCellIndex({ rowIndex: cellIndex.rowIndex, cellIndex: cellIndex.cellIndex });
                     selectedCell.classList.add('e-cellselectionbackground');
+                    this.addAttribute(selectedCell);
                 }
             }
             else {
+                this.onActionBegin(args, events.cellSelecting);
                 this.updateCellSelection(selectedCell, cellIndex.rowIndex, cellIndex.cellIndex);
             }
             this.updateCellProps(cellIndex, cellIndex);
-            this.onActionComplete({
-                data: this.parent.getRows()[cellIndexes[0].rowIndex], cellIndex: cellIndexes[0], currentCell: selectedCell,
-                previousRowCell: this.prevECIdxs ? gObj.getCellFromIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) :
-                    undefined, previousRowCellIndex: this.prevECIdxs, selectedRowCellIndex: this.selectedRowCellIndexes
-            }, events.cellSelected);
+            if (!isUnSelected) {
+                this.onActionComplete({
+                    data: selectedData, cellIndex: cellIndexes[0], currentCell: selectedCell,
+                    previousRowCell: this.prevECIdxs ? gObj.getCellFromIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) :
+                        undefined, previousRowCellIndex: this.prevECIdxs, selectedRowCellIndex: this.selectedRowCellIndexes
+                }, events.cellSelected);
+            }
         }
     };
+    Selection.prototype.cellDeselect = function (type, cellIndexes, data, cells) {
+        this.parent.trigger(type, {
+            cells: cells, data: data, cellIndexes: cellIndexes
+        });
+    };
     Selection.prototype.clearCell = function () {
-        this.selectedRowCellIndexes = [];
         this.clearCellSelection();
@@ -362,3 +406,9 @@ };
         selectedCell.classList.add('e-cellselectionbackground');
+        this.addAttribute(selectedCell);
     };
+    Selection.prototype.addAttribute = function (cell) {
+        this.target = cell;
+        cell.setAttribute('aria-selected', 'true');
+        cell.focus();
+    };
     Selection.prototype.updateCellProps = function (startIndex, endIndex) {
@@ -395,4 +445,5 @@ this.prevCIdxs = startIndex;
             var cells = [];
+            var currentViewData = gObj.getCurrentViewRecords();
             for (var i = 0, len = rowCell.length; i < len; i++) {
-                data.push(this.parent.currentViewData[rowCell[i].rowIndex]);
+                data.push(currentViewData[rowCell[i].rowIndex]);
                 for (var j = 0, cLen = rowCell.length; j < cLen; j++) {
@@ -402,17 +453,10 @@ cells.push(this.parent.getCellFromIndex(rowCell[i].rowIndex, rowCell[i].cellIndexes[j]));
             }
-            if (this.isTrigger) {
-                this.parent.trigger(events.cellDeselecting, {
-                    cells: cells, data: data, cellIndexes: rowCell
-                });
-            }
+            this.cellDeselect(events.cellDeselecting, rowCell, data, cells);
             for (var i = 0, len = selectedCells.length; i < len; i++) {
                 selectedCells[i].classList.remove('e-cellselectionbackground');
+                selectedCells[i].removeAttribute('aria-selected');
             }
             this.selectedRowCellIndexes = [];
             this.isCellSelected = false;
-            if (this.isTrigger) {
-                this.parent.trigger(events.cellDeselected, {
-                    cells: cells, data: data, cellIndexes: rowCell
-                });
-            }
+            this.cellDeselect(events.cellDeselected, rowCell, data, cells);
         }
@@ -556,4 +600,4 @@ };
         this.popUpClickHandler(e);
-        this.target = e.target;
         if (target.classList.contains('e-rowcell')) {
+            this.target = e.target;
             this.rowCellSelectionHandler(parseInt(target.parentElement.getAttribute('aria-rowindex'), 10), parseInt(target.getAttribute('aria-colindex'), 10));
@@ -564,3 +608,2 @@ if (Browser.isDevice && this.parent.selectionSettings.type === 'multiple') {
         }
-        this.target = undefined;
         this.isMultiCtrlRequest = false;
@@ -714,2 +757,3 @@ this.isMultiShiftRequest = false;
             this.selectRow(gObj.selectedRowIndex + key);
+            this.applyUpDown(gObj.selectedRowIndex);
         }
@@ -720,6 +764,13 @@ if (this.isCellType() && cond2) {
     };
+    Selection.prototype.applyUpDown = function (rowIndex) {
+        var gObj = this.parent;
+        this.target = gObj.getCellFromIndex(rowIndex, parseInt(this.target.getAttribute('aria-colindex'), 10));
+        this.addAttribute(this.target);
+    };
     Selection.prototype.rightArrowKey = function () {
+        this.preSelectedCellIndex = this.prevECIdxs;
         this.applyRightLeftKey(1, 0, !isUndefined(this.prevECIdxs) && this.prevECIdxs.cellIndex + 1 < this.parent.getColumns().length);
     };
     Selection.prototype.leftArrowKey = function () {
+        this.preSelectedCellIndex = this.prevECIdxs;
         this.applyRightLeftKey(-1, this.parent.getColumns().length - 1, !isUndefined(this.prevECIdxs) && this.prevECIdxs.cellIndex - 1 > -1);
@@ -729,21 +780,56 @@ };
         var gObj = this.parent;
+        var cellIndex;
+        var rowIndex;
+        if (!isNullOrUndefined(this.prevECIdxs)) {
+            cellIndex = this.prevECIdxs.cellIndex;
+            rowIndex = this.prevECIdxs.rowIndex;
+        }
         if (this.isCellType()) {
             if (cond && this.prevECIdxs.cellIndex + key1 > -1 &&
                 this.prevECIdxs.cellIndex + key1 < this.parent.getColumns().length) {
-                this.selectCell({ rowIndex: this.prevECIdxs.rowIndex, cellIndex: this.prevECIdxs.cellIndex + key1 });
+                cellIndex = this.prevECIdxs.cellIndex + key1;
+                rowIndex = this.prevECIdxs.rowIndex;
+                this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex });
             }
             else if (this.prevECIdxs.rowIndex + key1 > -1 &&
                 this.prevECIdxs.rowIndex + key1 < this.parent.getRows().length) {
-                this.selectCell({ rowIndex: this.prevECIdxs.rowIndex + key1, cellIndex: key2 });
+                cellIndex = key2;
+                rowIndex = this.prevECIdxs.rowIndex + key1;
+                this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex });
             }
-            if (gObj.element.querySelector('.e-cellselectionbackground').classList.contains('e-hide')) {
-                this.applyRightLeftKey(key1, key2, cond);
+            if (this.isCellHide({ rowIndex: rowIndex, cellIndex: cellIndex })) {
+                if (!((cellIndex === 0 && rowIndex === 0) ||
+                    (cellIndex === gObj.getColumns().length - 1 && rowIndex === gObj.getRows().length - 1))) {
+                    this.applyRightLeftKey(key1, key2, cond);
+                }
+                else {
+                    this.selectCell(this.preSelectedCellIndex);
+                }
             }
         }
+        else if (this.isRowType()) {
+            var cellIndex_1 = parseInt(this.target.getAttribute('aria-colindex'), 10);
+            var rowElement = closest(this.target, 'tr');
+            if (cellIndex_1 + key1 > -1 && cellIndex_1 + key1 < this.parent.getColumns().length) {
+                var cell = gObj.getCellFromIndex(parseInt(rowElement.getAttribute('aria-rowindex'), 10), cellIndex_1 + key1);
+                if (cell) {
+                    if (!cell.classList.contains('e-hide')) {
+                        this.addAttribute(cell);
+                    }
+                    else {
+                        key1 += key1;
+                        this.applyRightLeftKey(key1, key2, cond);
+                    }
+                }
+            }
+            else {
+                this.addAttribute(this.target);
+            }
+        }
     };
     Selection.prototype.homeKey = function () {
-        this.applyHomeEndKey({ rowIndex: 0, cellIndex: 0 });
+        this.applyHomeEndKey({ rowIndex: this.currentIndex || 0, cellIndex: 0 });
     };
     Selection.prototype.endKey = function () {
-        this.applyHomeEndKey({ rowIndex: this.parent.getRows().length - 1, cellIndex: this.parent.getColumns().length - 1 });
+        this.applyHomeEndKey({ rowIndex: this.currentIndex || 0, cellIndex: this.parent.getColumns().length - 1 });
     };
@@ -753,3 +839,14 @@ Selection.prototype.applyHomeEndKey = function (key) {
             this.selectCell(key);
+            if (this.isCellHide(key)) {
+                if (key.cellIndex > 0) {
+                    this.applyRightLeftKey(-1, this.parent.getColumns().length - 1, true);
+                }
+                else {
+                    this.applyRightLeftKey(1, 0, true);
+                }
+            }
         }
+        else {
+            this.addAttribute(this.parent.getCellFromIndex(key.rowIndex, key.cellIndex));
+        }
     };
@@ -766,2 +863,3 @@ Selection.prototype.shiftDownKey = function () {
                     this.selectRowsByRange(this.prevRowIndex, endIndex);
+                    this.applyUpDown(endIndex);
                 }
@@ -792,2 +890,3 @@ }
             this.selectRowsByRange(this.prevRowIndex, endIndex);
+            this.applyUpDown(endIndex);
         }
@@ -807,5 +906,7 @@ if (this.isCellType() && !isUndefined(this.prevECIdxs) && (this.prevECIdxs.rowIndex - 1) > -1 && !this.isSingleSel()) {
         var gObj = this.parent;
+        var cellIndex;
         this.isMultiShiftRequest = true;
         if (this.isCellType() && !this.isSingleSel()) {
             if (cond) {
+                cellIndex = { rowIndex: this.prevECIdxs.rowIndex, cellIndex: this.prevECIdxs.cellIndex + key };
                 this.selectCellsByRange(this.prevCIdxs, {
@@ -818,2 +919,3 @@ rowIndex: this.prevECIdxs.rowIndex, cellIndex: this.prevECIdxs.cellIndex + key
                     (key > 0 ? this.prevECIdxs.rowIndex + 1 < this.parent.pageSettings.pageSize : this.prevECIdxs.rowIndex - 1 > -1)) {
+                    cellIndex = { rowIndex: this.prevECIdxs.rowIndex + key, cellIndex: key > 0 ? 0 : gObj.getColumns().length - 1 };
                     this.selectCellsByRange(this.prevCIdxs, {
@@ -824,2 +926,6 @@ rowIndex: this.prevECIdxs.rowIndex + key, cellIndex: key > 0 ? 0 : gObj.getColumns().length - 1
             }
+            if (!isNullOrUndefined(cellIndex) && this.isCellHide(cellIndex) && !((cellIndex.rowIndex === 0 && cellIndex.cellIndex === 0) ||
+                (cellIndex.rowIndex === gObj.getRows().length - 1 && cellIndex.cellIndex === gObj.getColumns().length))) {
+                this.applyShiftLeftRightKey(key, cellIndex.cellIndex > 0);
+            }
         }
@@ -837,5 +943,14 @@ this.isMultiShiftRequest = false;
             this.selectRow(rowIndex);
+            this.addAttribute(this.parent.getCellFromIndex(rowIndex, colIndex));
         }
         if (this.isCellType()) {
             this.selectCell({ rowIndex: rowIndex, cellIndex: colIndex });
+            if (this.isCellHide({ rowIndex: rowIndex, cellIndex: colIndex })) {
+                if (colIndex > 0) {
+                    this.applyRightLeftKey(-1, this.parent.getColumns().length - 1, true);
+                }
+                else {
+                    this.applyRightLeftKey(1, 0, true);
+                }
+            }
         }
@@ -856,5 +971,7 @@ };
                 classList(cells[i], args.slice(), []);
+                cells[i].setAttribute('aria-selected', 'true');
             }
             else {
                 classList(cells[i], [], args.slice());
+                cells[i].removeAttribute('aria-selected');
             }
@@ -872,4 +989,7 @@ }
     };
+    Selection.prototype.isCellHide = function (cellIndex) {
+        return !this.parent.getColumns()[cellIndex.cellIndex].visible;
+    };
     return Selection;
 }());
 export { Selection };

dist/es6/grid/base/constant.js

@@ -27,2 +27,3 @@ export var created = 'create';
 export var detailDataBound = 'detailDataBound';
+export var toolbarClick = 'toolbarClick';
 export var initialLoad = 'initial-load';
@@ -29,0 +30,0 @@ export var initialEnd = 'initial-end';

dist/es6/grid/base/enum.js

@@ -6,10 +6,12 @@ export var CellType;
     CellType[CellType["Summary"] = 2] = "Summary";
-    CellType[CellType["Filter"] = 3] = "Filter";
-    CellType[CellType["Indent"] = 4] = "Indent";
-    CellType[CellType["GroupCaption"] = 5] = "GroupCaption";
-    CellType[CellType["Expand"] = 6] = "Expand";
-    CellType[CellType["HeaderIndent"] = 7] = "HeaderIndent";
-    CellType[CellType["StackedHeader"] = 8] = "StackedHeader";
-    CellType[CellType["DetailHeader"] = 9] = "DetailHeader";
-    CellType[CellType["DetailExpand"] = 10] = "DetailExpand";
+    CellType[CellType["GroupSummary"] = 3] = "GroupSummary";
+    CellType[CellType["CaptionSummary"] = 4] = "CaptionSummary";
+    CellType[CellType["Filter"] = 5] = "Filter";
+    CellType[CellType["Indent"] = 6] = "Indent";
+    CellType[CellType["GroupCaption"] = 7] = "GroupCaption";
+    CellType[CellType["Expand"] = 8] = "Expand";
+    CellType[CellType["HeaderIndent"] = 9] = "HeaderIndent";
+    CellType[CellType["StackedHeader"] = 10] = "StackedHeader";
+    CellType[CellType["DetailHeader"] = 11] = "DetailHeader";
+    CellType[CellType["DetailExpand"] = 12] = "DetailExpand";
 })(CellType || (CellType = {}));
@@ -16,0 +18,0 @@ export var RenderType;

dist/es6/grid/base/grid.js

@@ -37,2 +37,3 @@ var __extends = (this && this.__extends) || (function () {
 import { Print } from '../actions/print';
+import { AggregateRow } from '../models/aggregate';
 var SortDescriptor = (function (_super) {
@@ -184,2 +185,5 @@ __extends(SortDescriptor, _super);
 __decorate([
+    Property(false)
+], GroupSettings.prototype, "disablePageWiseAggregates", void 0);
+__decorate([
     Property([])
@@ -206,3 +210,15 @@ ], GroupSettings.prototype, "columns", void 0);
             FilterbarTitle: '\'s filter bar cell',
-            EmptyDataSourceError: 'DataSource must not be empty at initial load since columns are generated from dataSource in AutoGenerate Column Grid'
+            EmptyDataSourceError: 'DataSource must not be empty at initial load since columns are generated from dataSource in AutoGenerate Column Grid',
+            Add: 'Add',
+            Edit: 'Edit',
+            Cancel: 'Cancel',
+            Update: 'Update',
+            Delete: 'Delete',
+            Print: 'Print',
+            Pdfexport: 'PDF Export',
+            Excelexport: 'Excel Export',
+            Wordexport: 'Word Export',
+            Search: 'Search',
+            Item: 'item',
+            Items: 'items'
         };
@@ -246,3 +262,3 @@ _this.keyConfigs = {
             'columnDragStart', 'columnDrag', 'columnDrop', 'printComplete', 'beforePrint', 'detailDataBound', 'detailTemplate',
-            'childGrid', 'queryString'];
+            'childGrid', 'queryString', 'toolbar', 'toolbarClick'];
         return this.addOnPersist(keyEntity);
@@ -294,2 +310,5 @@ };
         }
+        if (this.aggregates.length) {
+            modules.push({ member: 'aggregate', args: [this, this.serviceLocator] });
+        }
         if (this.isDetail()) {
@@ -301,2 +320,8 @@ modules.push({
         }
+        if (this.toolbar) {
+            modules.push({
+                member: 'toolbar',
+                args: [this, this.serviceLocator]
+            });
+        }
         return modules;
@@ -351,14 +376,3 @@ };
             var prop = _a[_i];
-            this.extendedPropertyChange(prop, newProp);
             switch (prop) {
-                case 'enableRtl':
-                    this.updateRTL();
-                    if (this.allowPaging) {
-                        this.element.querySelector('.e-gridpager').ej2_instances[0].enableRtl = newProp.enableRtl;
-                    }
-                    if (this.height !== 'auto') {
-                        this.scrollModule.removePadding(!newProp.enableRtl);
-                        this.scrollModule.setPadding();
-                    }
-                    break;
                 case 'enableHover':
@@ -386,2 +400,5 @@ var action = newProp.enableHover ? addClass : removeClass;
                     requireRefresh = true;
+                    if (this.toolbar) {
+                        this.notify(events.uiUpdate, { module: 'toolbar' });
+                    }
                     break;
@@ -428,2 +445,18 @@ case 'allowSorting':
                     break;
+                case 'toolbar':
+                    this.notify(events.uiUpdate, { module: 'toolbar' });
+                    break;
+                case 'groupSettings':
+                    if (!(isNullOrUndefined(newProp.groupSettings.showDropArea))) {
+                        this.headerModule.refreshUI();
+                        requireRefresh = true;
+                        checkCursor = true;
+                    }
+                    this.notify(events.inBoundModelChanged, { module: 'group', properties: newProp.groupSettings });
+                    break;
+                case 'aggregates':
+                    this.notify(events.uiUpdate, { module: 'aggregate', properties: newProp });
+                    break;
+                default:
+                    this.extendedPropertyChange(prop, newProp);
             }
@@ -441,2 +474,17 @@ }
         switch (prop) {
+            case 'enableRtl':
+                this.updateRTL();
+                if (this.allowPaging) {
+                    this.element.querySelector('.e-gridpager').ej2_instances[0].enableRtl = newProp.enableRtl;
+                    this.element.querySelector('.e-gridpager').ej2_instances[0].dataBind();
+                }
+                if (this.height !== 'auto') {
+                    this.scrollModule.removePadding(!newProp.enableRtl);
+                    this.scrollModule.setPadding();
+                }
+                if (this.toolbar) {
+                    this.toolbarModule.getToolbar().ej2_instances[0].enableRtl = newProp.enableRtl;
+                    this.toolbarModule.getToolbar().ej2_instances[0].dataBind();
+                }
+                break;
             case 'enableAltRow':
@@ -448,5 +496,2 @@ this.renderModule.refresh();
                 break;
-            case 'groupSettings':
-                this.notify(events.inBoundModelChanged, { module: 'group', properties: newProp.groupSettings });
-                break;
             case 'filterSettings':
@@ -535,2 +580,14 @@ this.notify(events.inBoundModelChanged, { module: 'filter', properties: newProp.filterSettings });
     };
+    Grid.prototype.getFooterContent = function () {
+        if (isNullOrUndefined(this.footerElement)) {
+            this.footerElement = this.element.getElementsByClassName('e-gridfooter')[0];
+        }
+        return this.footerElement;
+    };
+    Grid.prototype.getFooterContentTable = function () {
+        if (isNullOrUndefined(this.footerElement)) {
+            this.footerElement = this.element.getElementsByClassName('e-gridfooter')[0];
+        }
+        return this.footerElement.firstChild.firstChild;
+    };
     Grid.prototype.getPager = function () {
@@ -725,2 +782,5 @@ return this.gridPager;
     Grid.prototype.recalcIndentWidth = function () {
+        if (!this.getHeaderTable().querySelector('.e-emptycell')) {
+            return;
+        }
         if ((!this.groupSettings.columns.length && !this.isDetail()) ||
@@ -742,2 +802,3 @@ this.getHeaderTable().querySelector('.e-emptycell').getAttribute('indentRefreshed') ||
             contentCol[i].style.width = indentWidth + 'px';
+            this.notify(events.columnWidthChanged, { index: i, width: indentWidth });
             i++;
@@ -748,2 +809,3 @@ }
             contentCol[i].style.width = indentWidth + 'px';
+            this.notify(events.columnWidthChanged, { index: i, width: indentWidth });
         }
@@ -853,3 +915,3 @@ this.getHeaderTable().querySelector('.e-emptycell').setAttribute('indentRefreshed', 'true');
         var popup = createElement('div', { className: 'e-gridpopup', styles: 'display:none;' });
-        var content = createElement('div', { className: 'e-content' });
+        var content = createElement('div', { className: 'e-content', attrs: { tabIndex: '-1' } });
         append([content, createElement('div', { className: 'e-uptail e-tail' })], popup);
@@ -919,2 +981,6 @@ content.appendChild(createElement('span'));
     };
+    Grid.prototype.getCurrentViewRecords = function () {
+        return (this.allowGrouping && this.groupSettings.columns.length) ?
+            this.currentViewData.records : this.currentViewData;
+    };
     Grid.prototype.mouseClickHandler = function (e) {
@@ -954,3 +1020,3 @@ if (this.isChildGrid(e) || (parentsUntil(e.target, 'e-gridpopup') && e.touches) ||
     Grid.prototype.isDetail = function () {
-        return (this.detailTemplate && this.detailTemplate.length > 1) || !isNullOrUndefined(this.childGrid);
+        return !isNullOrUndefined(this.detailTemplate) || !isNullOrUndefined(this.childGrid);
     };
@@ -1028,2 +1094,5 @@ Grid.prototype.keyActionHandler = function (e) {
 __decorate([
+    Collection([], AggregateRow)
+], Grid.prototype, "aggregates", void 0);
+__decorate([
     Property('auto')
@@ -1059,2 +1128,5 @@ ], Grid.prototype, "height", void 0);
 __decorate([
+    Property()
+], Grid.prototype, "toolbar", void 0);
+__decorate([
     Event()
@@ -1137,2 +1209,5 @@ ], Grid.prototype, "created", void 0);
 ], Grid.prototype, "rowDrop", void 0);
+__decorate([
+    Event()
+], Grid.prototype, "toolbarClick", void 0);
 Grid = __decorate([
@@ -1139,0 +1214,0 @@ NotifyPropertyChanges

dist/es6/grid/base/util.js

 import { ChildProperty } from '@syncfusion/ej2-base';
 import { extend as baseExtend, isNullOrUndefined, getValue } from '@syncfusion/ej2-base/util';
 import { setStyleAttribute, addClass, attributes } from '@syncfusion/ej2-base/dom';
+import { DataUtil } from '@syncfusion/ej2-data';
 import { Column } from '../models/column';
@@ -184,3 +185,8 @@ export function doesImplementInterface(target, checkFor) {
     for (var i = 0, len = children.length; i < len; i++) {
-        elem.appendChild(children[0]);
+        if (len === children.length) {
+            elem.appendChild(children[i]);
+        }
+        else {
+            elem.appendChild(children[0]);
+        }
     }
@@ -200,1 +206,20 @@ return elem;
 }
+export function calculateAggregate(type, data, column, context) {
+    if (type === 'custom') {
+        return column.customAggregate ? column.customAggregate.call(context, data, column) : '';
+    }
+    return DataUtil.aggregates[type](data, column.field);
+}
+var scrollWidth = null;
+export function getScrollBarWidth() {
+    if (scrollWidth !== null) {
+        return scrollWidth;
+    }
+    var divNode = document.createElement('div');
+    var value = 0;
+    divNode.style.cssText = 'width:100px;height: 100px;overflow: scroll;position: absolute;top: -9999px;';
+    document.body.appendChild(divNode);
+    value = (divNode.offsetWidth - divNode.clientWidth) | 0;
+    document.body.removeChild(divNode);
+    return scrollWidth = value;
+}

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

@@ -17,3 +17,3 @@ var __extends = (this && this.__extends) || (function () {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.element = createElement('TD', { className: 'e-groupcaption' });
+        _this.element = createElement('TD', { className: 'e-groupcaption', attrs: { role: 'gridcell', tabindex: '-1' } });
         return _this;
@@ -24,4 +24,6 @@ }
         var value = this.format(cell.column, cell.column.valueAccessor('key', data, cell.column));
-        node.innerHTML = data.field + ': ' + value + ' - ' + data.count + ' ' + (data.count < 2 ? 'item' : 'items');
+        node.innerHTML = data.field + ': ' + value + ' - ' + data.count + ' ' +
+            (data.count < 2 ? this.localizer.getConstant('Item') : this.localizer.getConstant('Items'));
         node.setAttribute('colspan', cell.colSpan.toString());
+        node.setAttribute('aria-label', node.innerHTML + ' is groupcaption cell');
         return node;
@@ -28,0 +30,0 @@ };

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

@@ -6,3 +6,3 @@ import { isNullOrUndefined, extend } from '@syncfusion/ej2-base/util';
     function CellRenderer(locator) {
-        this.element = createElement('TD', { className: 'e-rowcell', attrs: { role: 'gridcell' } });
+        this.element = createElement('TD', { className: 'e-rowcell', attrs: { role: 'gridcell', tabindex: '-1' } });
         this.localizer = locator.getService('localization');
@@ -20,2 +20,14 @@ this.formatter = locator.getService('valueFormatter');
     };
+    CellRenderer.prototype.evaluate = function (node, cell, data, attributes) {
+        var result;
+        if (cell.column.template) {
+            var literals = ['index'];
+            result = cell.column.getColumnTemplate()(extend({ 'index': attributes[literals[0]] }, data));
+            appendChildren(node, result);
+            node.setAttribute('aria-label', node.innerText + ' is template cell' + ' column header ' +
+                cell.column.headerText);
+            return false;
+        }
+        return true;
+    };
     CellRenderer.prototype.invokeFormatter = function (column, value, data) {
@@ -39,5 +51,4 @@ if (!isNullOrUndefined(column.formatter)) {
         var column = cell.column;
-        var literals = ['index'];
         var innerHtml = this.getGui();
-        var value = column.valueAccessor(column.field, data, column);
+        var value = this.getValue(column.field, data, column);
         value = this.format(column, value, data);
@@ -57,24 +68,27 @@ innerHtml = value.toString();
         var fromFormatter = this.invokeFormatter(column, value, data);
-        if (!column.template) {
-            innerHtml = !isNullOrUndefined(column.formatter) ? isNullOrUndefined(fromFormatter) ? '' : fromFormatter.toString() : innerHtml;
-            this.appendHtml(node, innerHtml, column.getDomSetter());
+        innerHtml = !isNullOrUndefined(column.formatter) ? isNullOrUndefined(fromFormatter) ? '' : fromFormatter.toString() : innerHtml;
+        node.setAttribute('aria-label', innerHtml + ' column header ' + cell.column.headerText);
+        if (this.evaluate(node, cell, data, attributes)) {
+            this.appendHtml(node, innerHtml, column.getDomSetter ? column.getDomSetter() : 'innerHTML');
         }
-        else {
-            appendChildren(node, column.getColumnTemplate()(extend({ 'index': attributes[literals[0]] }, data)));
-        }
+        this.setAttributes(node, cell, attributes);
+        return node;
+    };
+    CellRenderer.prototype.appendHtml = function (node, innerHtml, property) {
+        if (property === void 0) { property = 'innerHTML'; }
+        node[property] = innerHtml;
+        return node;
+    };
+    CellRenderer.prototype.setAttributes = function (node, cell, attributes) {
+        var column = cell.column;
         this.buildAttributeFromCell(node, cell);
         setStyleAndAttributes(node, attributes);
+        setStyleAndAttributes(node, cell.attributes);
         if (column.customAttributes) {
             setStyleAndAttributes(node, column.customAttributes);
         }
-        if (!isNullOrUndefined(column.textAlign)) {
+        if (column.textAlign) {
             node.style.textAlign = column.textAlign;
         }
-        return node;
     };
-    CellRenderer.prototype.appendHtml = function (node, innerHtml, property) {
-        if (property === void 0) { property = 'innerHTML'; }
-        node[property] = innerHtml;
-        return node;
-    };
     CellRenderer.prototype.buildAttributeFromCell = function (node, cell) {
@@ -102,4 +116,7 @@ var attr = {};
     };
+    CellRenderer.prototype.getValue = function (field, data, column) {
+        return column.valueAccessor(column.field, data, column);
+    };
     return CellRenderer;
 }());
 export { CellRenderer };

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

@@ -63,3 +63,8 @@ import { Droppable, Browser } from '@syncfusion/ej2-base';
         var innerDiv = this.getPanel().firstChild;
-        var table = createElement('table', { className: 'e-table', attrs: { cellspacing: '0.25px', role: 'grid' } });
+        var table = createElement('table', {
+            className: 'e-table', attrs: {
+                cellspacing: '0.25px', role: 'grid',
+                id: this.parent.element.id + '_content_table'
+            }
+        });
         this.setColGroup(this.parent.element.querySelector('.e-gridheader').querySelector('colgroup').cloneNode(true));
@@ -89,3 +94,9 @@ table.appendChild(this.getColGroup());
             else {
-                tr = gObj.getRowTemplate()(extend({ index: i }, dataSource[i]))[0].children[0];
+                var elements = gObj.getRowTemplate()(extend({ index: i }, dataSource[i]));
+                for (var j = 0; j < elements.length; j++) {
+                    var isTR = elements[j].nodeName.toLowerCase() === 'tr';
+                    if (isTR || (elements[j].querySelectorAll && elements[j].querySelectorAll('tr').length)) {
+                        tr = isTR ? elements[j] : elements[j].querySelector('tr');
+                    }
+                }
             }
@@ -92,0 +103,0 @@ frag.appendChild(tr);

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

@@ -17,3 +17,6 @@ var __extends = (this && this.__extends) || (function () {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.element = createElement('TD', { className: 'e-detailrowcollapse', attrs: { 'aria-expanded': 'false' } });
+        _this.element = createElement('TD', {
+            className: 'e-detailrowcollapse',
+            attrs: { 'aria-expanded': 'false', role: 'gridcell', tabindex: '-1' }
+        });
         return _this;
@@ -20,0 +23,0 @@ }

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

@@ -24,2 +24,3 @@ var __extends = (this && this.__extends) || (function () {
         node.setAttribute('aria-expanded', 'true');
+        node.setAttribute('tabindex', '-1');
         node.appendChild(createElement('div', { className: 'e-icons e-gdiagonaldown e-icon-gdownarrow' }));
@@ -26,0 +27,0 @@ return node;

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

@@ -64,7 +64,10 @@ var __extends = (this && this.__extends) || (function () {
                     type: 'search', title: column.headerText + cell.attributes.title,
-                    value: data[cell.column.field] ? data[cell.column.field] : ''
+                    value: data[cell.column.field] ? data[cell.column.field] : '', role: 'search'
                 }
             });
             innerDIV.appendChild(input);
-            innerDIV.appendChild(createElement('span', { className: 'e-cancel e-hide e-icons e-icon-hide', }));
+            innerDIV.appendChild(createElement('span', {
+                className: 'e-cancel e-hide e-icons e-icon-hide',
+                attrs: { 'aria-label': 'clear filter cell', tabindex: '-1' }
+            }));
         }
@@ -71,0 +74,0 @@ if (column.allowFiltering === false || column.field === '' || isNullOrUndefined(column.field)) {

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

@@ -20,3 +20,3 @@ var __extends = (this && this.__extends) || (function () {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.element = createElement('TH', { className: 'e-headercell', attrs: { role: 'columnheader' } });
+        _this.element = createElement('TH', { className: 'e-headercell', attrs: { role: 'columnheader', tabindex: '-1' } });
         _this.ariaService = new AriaService();
@@ -23,0 +23,0 @@ return _this;

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

@@ -139,3 +139,3 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base/util';
         var tbody = createElement('tbody', { className: 'e-hide' });
-        var colHeader = createElement('tr', { className: 'e-columnheader' });
+        var colHeader = createElement('tr', { className: 'e-columnheader', attrs: { role: 'row' } });
         var colGroup = createElement('colgroup');
@@ -321,3 +321,3 @@ var rowBody = createElement('tr');
         var gObj = this.parent;
-        if (!(this.parent.allowReordering || this.parent.allowGrouping)) {
+        if (!(this.parent.allowReordering || (this.parent.allowGrouping && this.parent.groupSettings.showDropArea))) {
             return;
@@ -324,0 +324,0 @@ }

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

@@ -12,2 +12,3 @@ var __extends = (this && this.__extends) || (function () {
 import { createElement } from '@syncfusion/ej2-base/dom';
+import { setStyleAndAttributes } from '../base/util';
 import { CellRenderer } from './cell-renderer';
@@ -22,3 +23,5 @@ var IndentCellRenderer = (function (_super) {
     IndentCellRenderer.prototype.render = function (cell, data) {
-        return this.element.cloneNode();
+        var node = this.element.cloneNode();
+        setStyleAndAttributes(node, cell.attributes);
+        return node;
     };
@@ -25,0 +28,0 @@ return IndentCellRenderer;

dist/es6/grid/renderer/render.js

 import { createElement, remove } from '@syncfusion/ej2-base/dom';
 import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base/util';
+import { DataManager, Query, Deferred, Predicate } from '@syncfusion/ej2-data';
 import { RenderType, CellType } from '../base/enum';
 import { Data } from '../actions/data';
 import * as events from '../base/constant';
-import { prepareColumns } from '../base/util';
+import { prepareColumns, calculateAggregate } from '../base/util';
 import { ContentRender } from '../renderer/content-renderer';
@@ -50,2 +51,5 @@ import { HeaderRender } from '../renderer/header-renderer';
         var dataManager = this.data.getData(this.data.generateQuery().requiresCount());
+        if (this.parent.groupSettings.disablePageWiseAggregates && this.parent.groupSettings.columns.length) {
+            dataManager = dataManager.then(function (e) { return _this.validateGroupRecords(e); });
+        }
         dataManager.then(function (e) { return _this.dataManagerSuccess(e, args); })
@@ -77,5 +81,6 @@ .catch(function (e) { return _this.dataManagerFailure(e); });
         var value;
+        var data = record && record.items ? record.items[0] : record;
         var fmtr = this.locator.getService('valueFormatter');
         for (var i = 0, len = columns.length; i < len; i++) {
-            value = getValue(columns[i].field || '', record);
+            value = getValue(columns[i].field || '', data);
             if (!isNullOrUndefined(value)) {
@@ -130,3 +135,3 @@ this.isColTypeDef = true;
         }
-        this.parent.notify(events.dataReady, { count: e.count, result: e.result });
+        this.parent.notify(events.dataReady, { count: e.count, result: e.result, aggregates: e.aggregates });
         if (gObj.groupSettings.columns.length || (args && args.requestType === 'ungrouping')) {
@@ -196,4 +201,71 @@ this.headerRenderer.refreshUI();
     };
+    Render.prototype.validateGroupRecords = function (e) {
+        var _this = this;
+        var index = e.result.length - 1;
+        if (index < 0) {
+            return Promise.resolve(e);
+        }
+        var group0 = e.result[0];
+        var groupN = e.result[index];
+        var predicate = [];
+        var addWhere = function (input) {
+            [group0, groupN].forEach(function (group) {
+                return predicate.push(new Predicate('field', '==', group.field).and(_this.getPredicate('key', 'equal', group.key)));
+            });
+            input.where(Predicate.or(predicate));
+        };
+        var query = new Query();
+        addWhere(query);
+        var curDm = new DataManager(e.result);
+        var curFilter = curDm.executeLocal(query);
+        var newQuery = this.data.generateQuery(true);
+        var rPredicate = [];
+        if (this.data.isRemote()) {
+            [group0, groupN].forEach(function (group) {
+                return rPredicate.push(_this.getPredicate(group.field, 'equal', group.key));
+            });
+            newQuery.where(Predicate.or(rPredicate));
+        }
+        else {
+            addWhere(newQuery);
+        }
+        var deferred = new Deferred();
+        this.data.getData(newQuery).then(function (r) {
+            _this.updateGroupInfo(curFilter, r.result);
+            deferred.resolve(e);
+        });
+        return deferred.promise;
+    };
+    Render.prototype.getPredicate = function (key, operator, value) {
+        if (value instanceof Date) {
+            return this.data.getDatePredicate({ field: key, operator: operator, value: value });
+        }
+        return new Predicate(key, operator, value);
+    };
+    Render.prototype.updateGroupInfo = function (current, untouched) {
+        var _this = this;
+        var dm = new DataManager(untouched);
+        current.forEach(function (element, index, array) {
+            var uGroup = dm.executeLocal(new Query()
+                .where(new Predicate('field', '==', element.field).and(_this.getPredicate('key', 'equal', element.key))))[0];
+            element.count = uGroup.count;
+            var itemGroup = element.items;
+            var uGroupItem = uGroup.items;
+            if (itemGroup.GroupGuid) {
+                element.items = _this.updateGroupInfo(element.items, uGroup.items);
+            }
+            _this.parent.aggregates.forEach(function (row) {
+                return row.columns.forEach(function (column) {
+                    var types = column.type instanceof Array ? column.type : [column.type];
+                    types.forEach(function (type) {
+                        var key = column.field + ' - ' + type;
+                        element.aggregates[key] = calculateAggregate(type, itemGroup.level ? uGroupItem.records : uGroup.items, column);
+                    });
+                });
+            });
+        });
+        return current;
+    };
     return Render;
 }());
 export { Render };

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

@@ -20,2 +20,3 @@ import { isNullOrUndefined, extend } from '@syncfusion/ej2-base/util';
         addAttributes(tr, attrCopy);
+        setStyleAndAttributes(tr, row.attributes);
         var cellRendererFact = this.serviceLocator.getService('cellRendererFactory');
@@ -49,2 +50,5 @@ for (var i = 0, len = row.cells.length; i < len; i++) {
         }
+        if (row.visible === false) {
+            classes.push('e-hide');
+        }
         if (!isNullOrUndefined(row.index)) {
@@ -51,0 +55,0 @@ attr[prop.rowindex] = row.index;

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

@@ -18,3 +18,8 @@ var __extends = (this && this.__extends) || (function () {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.element = createElement('TH', { className: 'e-headercell e-stackedheadercell', attrs: { role: 'columnheader' } });
+        _this.element = createElement('TH', {
+            className: 'e-headercell e-stackedheadercell', attrs: {
+                role: 'columnheader',
+                tabindex: '-1'
+            }
+        });
         return _this;
@@ -21,0 +26,0 @@ }

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

@@ -15,8 +15,12 @@ var __extends = (this && this.__extends) || (function () {
 import { RowModelGenerator } from '../services/row-model-generator';
+import { GroupSummaryModelGenerator, CaptionSummaryModelGenerator } from '../services/summary-model-generator';
 var GroupModelGenerator = (function (_super) {
     __extends(GroupModelGenerator, _super);
-    function GroupModelGenerator() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function GroupModelGenerator(parent) {
+        var _this = _super.call(this, parent) || this;
         _this.rows = [];
         _this.index = 0;
+        _this.parent = parent;
+        _this.summaryModelGen = new GroupSummaryModelGenerator(parent);
+        _this.captionModelGen = new CaptionSummaryModelGenerator(parent);
         return _this;
@@ -26,3 +30,3 @@ }
         for (var i = 0, len = data.length; i < len; i++) {
-            this.getGroupedRecords(0, data[i]);
+            this.getGroupedRecords(0, data[i], data.level);
         }
@@ -32,3 +36,4 @@ this.index = 0;
     };
-    GroupModelGenerator.prototype.getGroupedRecords = function (index, data) {
+    GroupModelGenerator.prototype.getGroupedRecords = function (index, data, raw) {
+        var level = raw;
         if (isNullOrUndefined(data.items)) {
@@ -40,3 +45,3 @@ if (isNullOrUndefined(data.GroupGuid)) {
                 for (var j = 0, len = data.length; j < len; j++) {
-                    this.getGroupedRecords(index, data[j]);
+                    this.getGroupedRecords(index, data[j], data.level);
                 }
@@ -48,9 +53,16 @@ }
             if (data.items && data.items.length) {
-                this.getGroupedRecords(index + 1, data.items);
+                this.getGroupedRecords(index + 1, data.items, data.items.level);
             }
+            if (this.parent.aggregates.length) {
+                (_a = this.rows).push.apply(_a, this.summaryModelGen.generateRows(data, { level: level }));
+            }
         }
+        var _a;
     };
-    GroupModelGenerator.prototype.getCaptionRowCells = function (field, indent) {
+    GroupModelGenerator.prototype.getCaptionRowCells = function (field, indent, data) {
+        var cells = [];
+        var indx = 0;
+        var visibles = [];
+        var groupedLen = this.parent.groupSettings.columns.length;
         var gObj = this.parent;
-        var cells = [];
         for (var i = 0; i < indent; i++) {
@@ -60,4 +72,13 @@ cells.push(this.generateIndentCell());
         cells.push(this.generateCell({}, null, CellType.Expand));
-        cells.push(this.generateCell(gObj.getColumnByField(field), null, CellType.GroupCaption, gObj.getVisibleColumns().length + gObj.groupSettings.columns.length + (gObj.detailTemplate || gObj.childGrid ? 1 : 0) -
-            indent + (gObj.getVisibleColumns().length ? -1 : 0)));
+        indent = (this.parent.getVisibleColumns().length + groupedLen + (gObj.detailTemplate || gObj.childGrid ? 1 : 0) -
+            indent + (this.parent.getVisibleColumns().length ? -1 : 0));
+        if (this.parent.aggregates.length && !this.captionModelGen.isEmpty()) {
+            var captionCells = this.captionModelGen.generateRows(data)[0];
+            extend(data, captionCells.data);
+            visibles = captionCells.cells.filter(function (cell) { return cell.visible; });
+            visibles = visibles.slice(groupedLen + 1, visibles.length);
+            indent = indent - visibles.length;
+        }
+        cells.push(this.generateCell(this.parent.getColumnByField(field), null, CellType.GroupCaption, indent));
+        cells.push.apply(cells, visibles);
         return cells;
@@ -72,3 +93,3 @@ };
         var row = new Row(options);
-        row.cells = this.getCaptionRowCells(data.field, indent);
+        row.cells = this.getCaptionRowCells(data.field, indent, row.data);
         return row;
@@ -75,0 +96,0 @@ };

dist/es6/pager/numeric-container.js

@@ -30,3 +30,6 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base/util';
         for (var i = 1; i <= pagerObj.pageCount; i++) {
-            link = createElement('a', { className: 'e-link e-numericitem e-spacing e-pager-default', attrs: { role: 'link' } });
+            link = createElement('a', {
+                className: 'e-link e-numericitem e-spacing e-pager-default',
+                attrs: { role: 'link', tabindex: '-1', 'aria-label': 'Goto Page ' + i }
+            });
             if (pagerObj.currentPage === i) {
@@ -50,3 +53,5 @@ classList(link, ['e-currentitem', 'e-active'], ['e-pager-default']);
     NumericContainer.prototype.renderNumericContainer = function () {
-        this.element = createElement('div', { className: 'e-pagercontainer' });
+        this.element = createElement('div', {
+            className: 'e-pagercontainer', attrs: { 'role': 'navigation' }
+        });
         this.renderFirstNPrev(this.element);
@@ -64,3 +69,4 @@ this.renderPrevPagerSet(this.element);
                 title: this.pagerModule.getLocalizedLabel('firstPageTooltip'),
-                'aria-label': this.pagerModule.getLocalizedLabel('firstPageTooltip')
+                'aria-label': this.pagerModule.getLocalizedLabel('firstPageTooltip'),
+                tabindex: '-1'
             }
@@ -72,3 +78,4 @@ });
                 title: this.pagerModule.getLocalizedLabel('previousPageTooltip'),
-                'aria-label': this.pagerModule.getLocalizedLabel('previousPageTooltip')
+                'aria-label': this.pagerModule.getLocalizedLabel('previousPageTooltip'),
+                tabindex: '-1'
             }
@@ -83,3 +90,4 @@ });
                 title: this.pagerModule.getLocalizedLabel('previousPagerTooltip'), role: 'link',
-                'aria-label': this.pagerModule.getLocalizedLabel('previousPagerTooltip')
+                'aria-label': this.pagerModule.getLocalizedLabel('previousPagerTooltip'),
+                tabindex: '-1'
             }
@@ -94,3 +102,4 @@ });
                 title: this.pagerModule.getLocalizedLabel('nextPagerTooltip'), role: 'link',
-                'aria-label': this.pagerModule.getLocalizedLabel('nextPagerTooltip')
+                'aria-label': this.pagerModule.getLocalizedLabel('nextPagerTooltip'),
+                tabindex: '-1'
             }
@@ -105,3 +114,4 @@ });
                 title: this.pagerModule.getLocalizedLabel('nextPageTooltip'),
-                'aria-label': this.pagerModule.getLocalizedLabel('nextPageTooltip')
+                'aria-label': this.pagerModule.getLocalizedLabel('nextPageTooltip'),
+                tabindex: '-1'
             }
@@ -113,3 +123,4 @@ });
                 title: this.pagerModule.getLocalizedLabel('lastPageTooltip'),
-                'aria-label': this.pagerModule.getLocalizedLabel('lastPageTooltip')
+                'aria-label': this.pagerModule.getLocalizedLabel('lastPageTooltip'),
+                tabindex: '-1'
             }
@@ -116,0 +127,0 @@ });

dist/es6/pager/pager.js

@@ -17,3 +17,3 @@ var __extends = (this && this.__extends) || (function () {
 };
-import { Component, L10n } from '@syncfusion/ej2-base';
+import { Component, L10n, Browser } from '@syncfusion/ej2-base';
 import { createElement } from '@syncfusion/ej2-base/dom';
@@ -64,2 +64,3 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base/util';
         this.renderNextLastDivForDevice();
+        this.addAriaLabel();
         if (this.enableExternalMessage && this.externalMessageModule) {
@@ -204,7 +205,7 @@ this.externalMessageModule.render();
             className: 'e-mfirst e-icons e-icon-first',
-            attrs: { title: this.getLocalizedLabel('firstPageTooltip'), 'aria-label': this.getLocalizedLabel('firstPageTooltip') }
+            attrs: { title: this.getLocalizedLabel('firstPageTooltip'), tabindex: '-1' }
         }));
         this.element.appendChild(createElement('div', {
             className: 'e-mprev e-icons e-icon-prev',
-            attrs: { title: this.getLocalizedLabel('previousPageTooltip'), 'aria-label': this.getLocalizedLabel('previousPageTooltip') }
+            attrs: { title: this.getLocalizedLabel('previousPageTooltip'), tabindex: '-1' }
         }));
@@ -215,9 +216,19 @@ };
             className: 'e-mnext e-icons e-icon-next',
-            attrs: { title: this.getLocalizedLabel('nextPageTooltip'), 'aria-label': this.getLocalizedLabel('nextPageTooltip') }
+            attrs: { title: this.getLocalizedLabel('nextPageTooltip'), tabindex: '-1' }
         }));
         this.element.appendChild(createElement('div', {
             className: 'e-mlast e-icons e-icon-last',
-            attrs: { title: this.getLocalizedLabel('lastPageTooltip'), 'aria-label': this.getLocalizedLabel('lastPageTooltip') }
+            attrs: { title: this.getLocalizedLabel('lastPageTooltip'), tabindex: '-1' }
         }));
     };
+    Pager.prototype.addAriaLabel = function () {
+        var _this = this;
+        var classList = ['.e-mfirst', '.e-mprev', '.e-mnext', '.e-mlast'];
+        if (!Browser.isDevice) {
+            classList.forEach(function (value) {
+                var element = _this.element.querySelector(value);
+                element.setAttribute('aria-label', element.getAttribute('title'));
+            });
+        }
+    };
     return Pager;
@@ -224,0 +235,0 @@ }(Component));

package.json

 {
-  "_args": [
-    [
-      {
-        "raw": "@syncfusion/ej2-grids@*",
-        "scope": "@syncfusion",
-        "escapedName": "@syncfusion%2fej2-grids",
-        "name": "@syncfusion/ej2-grids",
-        "rawSpec": "*",
-        "spec": "*",
-        "type": "range"
-      },
-      "C:\\Users\\ajithr\\Desktop\\ej2-release\\node_modules\\@syncfusion\\ej2"
-    ]
-  ],
-  "_from": "@syncfusion/ej2-grids@*",
-  "_id": "@syncfusion/ej2-grids@1.0.10",
-  "_inCache": true,
-  "_location": "/@syncfusion/ej2-grids",
-  "_nodeVersion": "6.11.0",
-  "_npmUser": {
-    "name": "ej2",
-    "email": "[e-mail]"
-  },
-  "_npmVersion": "3.10.10",
-  "_phantomChildren": {},
-  "_requested": {
-    "raw": "@syncfusion/ej2-grids@*",
-    "scope": "@syncfusion",
-    "escapedName": "@syncfusion%2fej2-grids",
-    "name": "@syncfusion/ej2-grids",
-    "rawSpec": "*",
-    "spec": "*",
-    "type": "range"
-  },
-  "_requiredBy": [
-    "/@syncfusion/ej2",
-    "/@syncfusion/ej2-ng-grids"
-  ],
-  "_resolved": "http://syncdeskn6525:8081/repository/ej2-production/@syncfusion/ej2-grids/-/ej2-grids-1.0.10.tgz",
-  "_shasum": "8e41ff4d7aa1bee168ba92bb5aec749dbb94178a",
-  "_shrinkwrap": null,
-  "_spec": "@syncfusion/ej2-grids@*",
-  "_where": "C:\\Users\\ajithr\\Desktop\\ej2-release\\node_modules\\@syncfusion\\ej2",
-  "author": {
-    "name": "Syncfusion Inc."
-  },
-  "bugs": {
-    "url": "https://github.com/syncfusion/ej2-grids/issues"
-  },
+  "name": "@syncfusion/ej2-grids",
+  "version": "1.0.11",
+  "description": "Syncfusion TypeScript Grid Components",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "module": "dist/es6/index.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "^1.0.10",
-    "@syncfusion/ej2-data": "^1.0.10"
+    "@syncfusion/ej2-base": "^1.0.11",
+    "@syncfusion/ej2-data": "^1.0.11",
+    "@syncfusion/ej2-navigations": "^1.0.11"
   },
-  "description": "Essential JS 2 Grid Components",
   "devDependencies": {
@@ -63,8 +20,2 @@ "@types/chai": "^3.4.28",
   },
-  "dist": {
-    "shasum": "8e41ff4d7aa1bee168ba92bb5aec749dbb94178a",
-    "tarball": "http://syncdeskn6525:8081/repository/ej2-production/@syncfusion/ej2-grids/-/ej2-grids-1.0.10.tgz"
-  },
-  "gitHead": "6d1eeb79121ba627302bc1b65be9fe25b7bc37e5",
-  "homepage": "https://github.com/syncfusion/ej2-grids#readme",
   "keywords": [
@@ -81,24 +32,6 @@ "ej2",
   ],
-  "license": "SEE LICENSE IN license",
-  "maintainers": [
-    {
-      "name": "ej2",
-      "email": "[e-mail]"
-    }
-  ],
-  "module": "dist/es6/index.js",
-  "name": "@syncfusion/ej2-grids",
-  "optionalDependencies": {},
-  "readme": "# Grid Overview\n\nThe Grid control is used to display and manipulate tabular data with configuration options to control the way the data is presented and manipulated.\nIt will pull data from a data source, such as array of JSON objects, `OData web services`, or [`DataManager`](http://ej2.syncfusion.com/documentation/data/api-dataManager.html) binding data fields to columns.\nAlso displaying a column header to identify the field with support for grouped records.\n\nThe most important features available in the Grid components are paging, sorting, filtering, searching and grouping.\nAlso, it comes with full documentation and support which is available for commercial and community licensed users. To know more, please visit www.syncfusion.com. \n\n## Key Features\n\n* **Data sources** - Bind the Grid component with an array of JSON objects or DataManager.\n* **Sorting and grouping** - Supports **n** levels of sorting and grouping.\n* **Filtering** - Offers filter bar at each column to filter data.\n* **Paging** - Provides the option to easily switch between pages using the pager bar.\n* **Reordering** - Allows you to drag any column and drop it at any position in the Grid’s column header row, allowing columns to be repositioned.\n* **RTL support** - Provides a full-fledged right-to-left mode which aligns content in the Grid control from right to left.\n* **Localization** - Provides inherent support to localize the UI.\n\n## Resources\n* [Demo](http://ej2.syncfusion.com/demos/#/grid/default.html)\n* [Documentation](http://ej2.syncfusion.com/documentation/grid/)\n\n# 1.0.10\n## Grid\n### New Features\n- Detail Template added.\n- Hierarchy Grid added.",
-  "readmeFilename": "ReadMe.md",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/syncfusion/ej2-grids.git"
-  },
-  "scripts": {
-    "ci-publish": "gulp ci-publish",
-    "compile": "gulp ci-compile",
-    "test": "gulp ci-test"
-  },
-  "version": "1.0.10"
+    "url": "https://github.com/syncfusion/ej2-grids.git"
+  }
 }

ReadMe.md

@@ -24,6 +24,4 @@ # Grid Overview
 
-# 1.0.10
-## Grid
-### New Features
-- Detail Template added.
-- Hierarchy Grid added.
+## Changelog
+
+Check the changelog [here](https://github.com/syncfusion/ej2-grids/blob/master/CHANGELOG.md)

src/grid/actions.d.ts

@@ -16,1 +16,3 @@ /**
 export * from './actions/detail-row';
+export * from './actions/toolbar';
+export * from './actions/aggregate';

src/grid/actions.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "./actions/data", "./actions/sort", "./actions/page", "./actions/selection", "./actions/filter", "./actions/search", "./actions/scroll", "./actions/reorder", "./actions/row-reorder", "./actions/group", "./actions/print", "./actions/detail-row"], function (require, exports, data_1, sort_1, page_1, selection_1, filter_1, search_1, scroll_1, reorder_1, row_reorder_1, group_1, print_1, detail_row_1) {
+define(["require", "exports", "./actions/data", "./actions/sort", "./actions/page", "./actions/selection", "./actions/filter", "./actions/search", "./actions/scroll", "./actions/reorder", "./actions/row-reorder", "./actions/group", "./actions/print", "./actions/detail-row", "./actions/toolbar", "./actions/aggregate"], function (require, exports, data_1, sort_1, page_1, selection_1, filter_1, search_1, scroll_1, reorder_1, row_reorder_1, group_1, print_1, detail_row_1, toolbar_1, aggregate_1) {
     "use strict";
@@ -19,2 +19,4 @@ function __export(m) {
     __export(detail_row_1);
+    __export(toolbar_1);
+    __export(aggregate_1);
 });

src/grid/actions/data.d.ts

@@ -1,3 +0,4 @@
-import { Query } from '@syncfusion/ej2-data';
+import { Query, Predicate } from '@syncfusion/ej2-data';
 import { IDataProcessor, IGrid } from '../base/interface';
+import { PredicateModel } from '../base/grid-model';
 /**
@@ -25,3 +26,3 @@ * Grid data module is used to generate query and data source.
      */
-    generateQuery(): Query;
+    generateQuery(skipPage?: boolean): Query;
     /**
@@ -34,3 +35,6 @@ * The function is used to get dataManager promise by executing given Query.
     getData(query: Query): Promise<Object>;
-    private getDatePredicate(filterObject);
+    /** @hidden */
+    isRemote(): boolean;
+    /** @hidden */
+    getDatePredicate(filterObject: PredicateModel): Predicate;
     private addRows(e);
@@ -37,0 +41,0 @@ private removeRows(e);

src/grid/actions/data.js

@@ -22,3 +22,3 @@ define(["require", "exports", "@syncfusion/ej2-base/util", "@syncfusion/ej2-data", "../base/util", "../base/constant"], function (require, exports, util_1, ej2_data_1, util_2, events) {
         };
-        Data.prototype.generateQuery = function () {
+        Data.prototype.generateQuery = function (skipPage) {
             var gObj = this.parent;
@@ -44,2 +44,8 @@ var query = gObj.query.clone();
             }
+            gObj.aggregates.forEach(function (row) {
+                row.columns.forEach(function (column) {
+                    var types = column.type instanceof Array ? column.type : [column.type];
+                    types.forEach(function (type) { return query.aggregate(type, column.field); });
+                });
+            });
             if ((gObj.allowSorting || gObj.allowGrouping) && gObj.sortSettings.columns.length) {
@@ -60,3 +66,3 @@ var columns = gObj.sortSettings.columns;
             }
-            if (gObj.allowPaging) {
+            if (gObj.allowPaging && skipPage !== true) {
                 query.page(gObj.pageSettings.currentPage, gObj.pageSettings.pageSize);
@@ -75,2 +81,5 @@ }
         };
+        Data.prototype.isRemote = function () {
+            return this.dataManager.dataSource.offline !== true && this.dataManager.dataSource.url !== undefined;
+        };
         Data.prototype.getDatePredicate = function (filterObject) {
@@ -77,0 +86,0 @@ var prevDate;

src/grid/actions/filter.js

@@ -247,2 +247,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base/util", "../base/util", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-data", "../base/constant", "../base/enum", "../renderer/row-renderer", "../models/cell", "../models/row", "../renderer/filter-cell-renderer"], function (require, exports, ej2_base_1, util_1, util_2, dom_1, ej2_data_1, events, enum_1, row_renderer_1, cell_1, row_1, filter_cell_renderer_1) {
                         this.element.querySelector('#' + cols[i].field + '_filterBarcell').value = '';
+                        delete this.values[field];
                     }
@@ -249,0 +250,0 @@ cols.splice(i, 1);

src/grid/actions/group.js

@@ -313,3 +313,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-base/util", "../base/util", "../base/constant", "../services/aria-service"], function (require, exports, ej2_base_1, dom_1, util_1, util_2, events, aria_service_1) {
         Group.prototype.renderGroupDropArea = function () {
-            this.element = dom_1.createElement('div', { className: 'e-groupdroparea' });
+            this.element = dom_1.createElement('div', { className: 'e-groupdroparea', attrs: { 'tabindex': '-1' } });
             this.updateGroupDropArea();
@@ -442,5 +442,11 @@ this.parent.element.insertBefore(this.element, this.parent.element.firstChild);
             var headerCell = gObj.getColumnHeaderByUid(column.uid);
-            childDiv.appendChild(dom_1.createElement('span', { className: 'e-grouptext', innerHTML: column.headerText }));
+            childDiv.appendChild(dom_1.createElement('span', {
+                className: 'e-grouptext', innerHTML: column.headerText,
+                attrs: { tabindex: '-1', 'aria-label': 'sort the grouped column' }
+            }));
             if (this.groupSettings.showToggleButton) {
-                childDiv.appendChild(dom_1.createElement('span', { className: 'e-togglegroupbutton e-icons e-icon-ungroup e-toggleungroup', innerHTML: ' ' }));
+                childDiv.appendChild(dom_1.createElement('span', {
+                    className: 'e-togglegroupbutton e-icons e-icon-ungroup e-toggleungroup', innerHTML: ' ',
+                    attrs: { tabindex: '-1', 'aria-label': 'ungroup button' }
+                }));
             }
@@ -450,6 +456,9 @@ if (headerCell.querySelectorAll('.e-ascending,.e-descending').length) {
             }
-            childDiv.appendChild(dom_1.createElement('span', { className: 'e-groupsort e-icons ' + ('e-' + direction + ' e-icon-' + direction), innerHTML: ' ' }));
             childDiv.appendChild(dom_1.createElement('span', {
-                className: 'e-ungroupbutton e-icons e-icon-hide',
-                attrs: { title: this.l10n.getConstant('UnGroup'), innerHTML: ' ' },
+                className: 'e-groupsort e-icons ' + ('e-' + direction + ' e-icon-' + direction), innerHTML: ' ',
+                attrs: { tabindex: '-1', 'aria-label': 'sort the grouped column' }
+            }));
+            childDiv.appendChild(dom_1.createElement('span', {
+                className: 'e-ungroupbutton e-icons e-icon-hide', innerHTML: ' ',
+                attrs: { title: this.l10n.getConstant('UnGroup'), tabindex: '-1', 'aria-label': 'ungroup the grouped column' },
                 styles: this.groupSettings.showUngroupButton ? '' : 'display:none'
@@ -473,3 +482,3 @@ }));
                                     (this.groupSettings.columns.indexOf(column.field) > -1 ? 'e-toggleungroup e-icon-ungroup'
-                                        : 'e-togglegroup e-icon-group')
+                                        : 'e-togglegroup e-icon-group'), attrs: { tabindex: '-1', 'aria-label': 'Group button' }
                             }));
@@ -501,2 +510,3 @@ }
                     case 'showDropArea':
+                        this.updateGroupDropArea();
                         this.groupSettings.showDropArea ? this.element.style.display = '' : this.element.style.display = 'none';
@@ -503,0 +513,0 @@ break;

src/grid/actions/page.d.ts

@@ -28,2 +28,3 @@ import { PageSettingsModel } from '../models/page-settings-model';
     render(): void;
+    private addAriaAttr();
     private dataReady(e?);
@@ -30,0 +31,0 @@ /**

src/grid/actions/page.js

@@ -20,6 +20,24 @@ define(["require", "exports", "@syncfusion/ej2-base/util", "@syncfusion/ej2-base/dom", "../../pager/pager", "../../pager/external-message", "../base/util", "../base/constant"], function (require, exports, util_1, dom_1, pager_1, external_message_1, util_2, events) {
                 click: this.clickHandler.bind(this),
-                enableRtl: gObj.enableRtl, locale: gObj.locale
+                enableRtl: gObj.enableRtl, locale: gObj.locale,
+                created: this.addAriaAttr.bind(this)
             }, ['parentObj', 'propName']);
             this.pagerObj = new pager_1.Pager(pagerObj);
         };
+        Page.prototype.addAriaAttr = function () {
+            var _this = this;
+            var numericContainer = this.element.querySelector('.e-numericcontainer');
+            var links = numericContainer.querySelectorAll('a');
+            for (var i = 0; i < links.length; i++) {
+                if (this.parent.getContentTable()) {
+                    links[i].setAttribute('aria-owns', this.parent.getContentTable().id);
+                }
+            }
+            var classList = ['.e-mfirst', '.e-mprev', '.e-first', '.e-prev', '.e-next', '.e-last', '.e-mnext', '.e-mlast'];
+            classList.forEach(function (value) {
+                var element = _this.element.querySelector(value);
+                if (_this.parent.getContentTable()) {
+                    element.setAttribute('aria-owns', _this.parent.getContentTable().id);
+                }
+            });
+        };
         Page.prototype.dataReady = function (e) {
@@ -26,0 +44,0 @@ this.updateModel(e);

src/grid/actions/print.js

@@ -66,2 +66,5 @@ define(["require", "exports", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-base/util", "../base/util", "../base/constant"], function (require, exports, dom_1, util_1, util_2, events) {
             }
+            if (gObj.toolbar) {
+                this.element.querySelector('.e-toolbar').style.display = 'none';
+            }
             if (gObj.allowFiltering && gObj.filterSettings.type === 'filterbar') {
@@ -68,0 +71,0 @@ this.element.querySelector('.e-filterbar').style.display = 'none';

src/grid/actions/scroll.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-base/util", "../base/constant", "../services/width-controller"], function (require, exports, ej2_base_1, dom_1, util_1, constant_1, width_controller_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-base/util", "../base/util", "../base/constant", "../services/width-controller"], function (require, exports, ej2_base_1, dom_1, util_1, util_2, constant_1, width_controller_1) {
     "use strict";
@@ -77,2 +77,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 var sLimit = target.scrollWidth;
+                var isFooter = target.classList.contains('e-summarycontent');
                 if (_this.previousValues.left === left) {
@@ -83,3 +84,7 @@ _this.previousValues.top = !isHeader ? _this.previousValues.top : target.scrollTop;
                 element.scrollLeft = left;
+                if (isFooter) {
+                    _this.header.scrollLeft = left;
+                }
                 _this.previousValues.left = left;
+                _this.parent.notify(constant_1.scroll, { left: left });
             };
@@ -93,2 +98,5 @@ };
                 ej2_base_1.EventHandler.add(this.header, 'scroll', this.onContentScroll(this.content), this);
+                if (this.parent.aggregates.length) {
+                    ej2_base_1.EventHandler.add(this.parent.getFooterContent().firstChild, 'scroll', this.onContentScroll(this.content), this);
+                }
                 this.refresh();
@@ -137,9 +145,3 @@ this.oneTimeReady = false;
         Scroll.getScrollBarWidth = function () {
-            var divNode = document.createElement('div');
-            var value = 0;
-            divNode.style.cssText = 'width:100px;height: 100px;overflow: scroll;position: absolute;top: -9999px;';
-            document.body.appendChild(divNode);
-            value = (divNode.offsetWidth - divNode.clientWidth) | 0;
-            document.body.removeChild(divNode);
-            return value;
+            return util_2.getScrollBarWidth();
         };
@@ -146,0 +148,0 @@ return Scroll;

src/grid/actions/selection.d.ts

@@ -41,4 +41,4 @@ import { IGrid, IAction, IIndex, ISelectedCell } from '../base/interface';
     private y;
-    private isTrigger;
     private target;
+    private preSelectedCellIndex;
     private parent;
@@ -114,2 +114,3 @@ /**
     clearRowSelection(): void;
+    private rowDeselect(type, rowIndex, data, row);
     /**
@@ -141,4 +142,6 @@ * Selects a cell by given index.
     addCellsToSelection(cellIndexes: IIndex[]): void;
+    private cellDeselect(type, cellIndexes, data, cells);
     private clearCell();
     private updateCellSelection(selectedCell, rowIndex, cellIndex);
+    private addAttribute(cell);
     private updateCellProps(startIndex, endIndex);
@@ -192,2 +195,3 @@ private addRowCellIndex(rowCellIndex);
     private applyDownUpKey(key, cond1, cond2);
+    private applyUpDown(rowIndex);
     /**
@@ -261,2 +265,3 @@ * Apply rightArrow key selection
     private isSingleSel();
+    private isCellHide(cellIndex);
 }

src/grid/actions/selection.js

@@ -37,2 +37,3 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base/util", "@syncfusion/ej2-base/dom", "../base/util", "../base/constant"], function (require, exports, ej2_base_1, util_1, dom_1, util_2, events) {
             var selectedRow = gObj.getRowByIndex(index);
+            var selectData = gObj.getCurrentViewRecords()[index];
             if (!this.isRowType() || !selectedRow) {
@@ -42,9 +43,12 @@ return;
             var isRowSelected = selectedRow.hasAttribute('aria-selected');
+            var isToogle = index === this.prevRowIndex && isRowSelected;
+            if (!isToogle) {
+                this.onActionBegin({
+                    data: selectData, rowIndex: index, isCtrlPressed: this.isMultiCtrlRequest,
+                    isShiftPressed: this.isMultiShiftRequest, row: selectedRow, previousRow: gObj.getRows()[this.prevRowIndex],
+                    previousRowIndex: this.prevRowIndex, target: this.target
+                }, events.rowSelecting);
+            }
             this.clearRow();
-            this.onActionBegin({
-                data: gObj.currentViewData[index], rowIndex: index, isCtrlPressed: this.isMultiCtrlRequest,
-                isShiftPressed: this.isMultiShiftRequest, row: selectedRow, previousRow: gObj.getRows()[this.prevRowIndex],
-                previousRowIndex: this.prevRowIndex, target: this.target
-            }, events.rowSelecting);
-            if (!(index === this.prevRowIndex && isRowSelected)) {
+            if (!isToogle) {
                 this.updateRowSelection(selectedRow, index);
@@ -54,7 +58,9 @@ }
             this.parent.selectedRowIndex = index;
-            this.onActionComplete({
-                data: gObj.currentViewData[index], rowIndex: index,
-                row: selectedRow, previousRow: gObj.getRows()[this.prevRowIndex],
-                previousRowIndex: this.prevRowIndex, target: this.target
-            }, events.rowSelected);
+            if (!isToogle) {
+                this.onActionComplete({
+                    data: selectData, rowIndex: index,
+                    row: selectedRow, previousRow: gObj.getRows()[this.prevRowIndex],
+                    previousRowIndex: this.prevRowIndex, target: this.target
+                }, events.rowSelected);
+            }
         };
@@ -68,11 +74,13 @@ Selection.prototype.selectRowsByRange = function (startIndex, endIndex) {
             var selectedRow = gObj.getRowByIndex(rowIndexes[0]);
+            var selectedData = gObj.getCurrentViewRecords()[rowIndexes[0]];
             if (this.isSingleSel() || !this.isRowType()) {
                 return;
             }
-            this.clearRow();
             this.onActionBegin({
                 rowIndexes: rowIndexes, row: selectedRow, rowIndex: rowIndexes[0], target: this.target,
                 prevRow: gObj.getRows()[this.prevRowIndex], previousRowIndex: this.prevRowIndex,
-                isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest
+                isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest,
+                data: selectedData
             }, events.rowSelecting);
+            this.clearRow();
             for (var _i = 0, rowIndexes_1 = rowIndexes; _i < rowIndexes_1.length; _i++) {
@@ -85,3 +93,4 @@ var rowIndex = rowIndexes_1[_i];
                 rowIndexes: rowIndexes, row: selectedRow, rowIndex: rowIndexes[0], target: this.target,
-                prevRow: gObj.getRows()[this.prevRowIndex], previousRowIndex: this.prevRowIndex
+                prevRow: gObj.getRows()[this.prevRowIndex], previousRowIndex: this.prevRowIndex,
+                data: selectedData
             }, events.rowSelected);
@@ -97,9 +106,7 @@ };
                 var rowIndex = rowIndexes_2[_i];
-                this.onActionBegin({
-                    data: gObj.currentViewData[rowIndex], rowIndex: rowIndex, row: selectedRow, target: this.target,
-                    prevRow: gObj.getRows()[this.prevRowIndex], previousRowIndex: this.prevRowIndex,
-                    isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest
-                }, events.rowSelecting);
+                var data = gObj.getCurrentViewRecords()[rowIndex];
+                var isUnSelected = this.selectedRowIndexes.indexOf(rowIndex) > -1;
                 gObj.selectedRowIndex = rowIndex;
-                if (this.selectedRowIndexes.indexOf(rowIndex) > -1) {
+                if (isUnSelected) {
+                    this.rowDeselect(events.rowDeselecting, [rowIndex], data, [selectedRow]);
                     this.selectedRowIndexes.splice(this.selectedRowIndexes.indexOf(rowIndex), 1);
@@ -109,11 +116,19 @@ this.selectedRecords.splice(this.selectedRecords.indexOf(selectedRow), 1);
                     this.addRemoveClassesForRow(selectedRow, false, 'e-selectionbackground', 'e-active');
+                    this.rowDeselect(events.rowDeselecting, [rowIndex], data, [selectedRow]);
                 }
                 else {
+                    this.onActionBegin({
+                        data: data, rowIndex: rowIndex, row: selectedRow, target: this.target,
+                        prevRow: gObj.getRows()[this.prevRowIndex], previousRowIndex: this.prevRowIndex,
+                        isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest
+                    }, events.rowSelecting);
                     this.updateRowSelection(selectedRow, rowIndex);
                 }
                 this.updateRowProps(rowIndex);
-                this.onActionComplete({
-                    data: gObj.currentViewData[rowIndex], rowIndex: rowIndex, row: selectedRow, target: this.target,
-                    prevRow: gObj.getRows()[this.prevRowIndex], previousRowIndex: this.prevRowIndex
-                }, events.rowSelected);
+                if (!isUnSelected) {
+                    this.onActionComplete({
+                        data: data, rowIndex: rowIndex, row: selectedRow, target: this.target,
+                        prevRow: gObj.getRows()[this.prevRowIndex], previousRowIndex: this.prevRowIndex
+                    }, events.rowSelected);
+                }
             }
@@ -166,12 +181,9 @@ };
                 var rowIndex = [];
+                var currentViewData = this.parent.getCurrentViewRecords();
                 for (var i = 0, len = this.selectedRowIndexes.length; i < len; i++) {
-                    data.push(this.parent.currentViewData[this.selectedRowIndexes[i]]);
+                    data.push(currentViewData[this.selectedRowIndexes[i]]);
                     row.push(this.parent.getRows()[this.selectedRowIndexes[i]]);
                     rowIndex.push(this.selectedRowIndexes[i]);
                 }
-                if (this.isTrigger) {
-                    this.parent.trigger(events.rowDeselecting, {
-                        rowIndex: rowIndex, data: data, row: row
-                    });
-                }
+                this.rowDeselect(events.rowDeselecting, rowIndex, data, row);
                 for (var i = 0, len = this.selectedRowIndexes.length; i < len; i++) {
@@ -181,7 +193,2 @@ rows[this.selectedRowIndexes[i]].removeAttribute('aria-selected');
                 }
-                if (this.isTrigger) {
-                    this.parent.trigger(events.rowDeselected, {
-                        rowIndex: rowIndex, data: data, row: row
-                    });
-                }
                 this.selectedRowIndexes = [];
@@ -191,7 +198,15 @@ this.selectedRecords = [];
                 this.parent.selectedRowIndex = undefined;
+                this.rowDeselect(events.rowDeselected, rowIndex, data, row);
             }
         };
+        Selection.prototype.rowDeselect = function (type, rowIndex, data, row) {
+            this.parent.trigger(type, {
+                rowIndex: rowIndex, data: data, row: row
+            });
+        };
         Selection.prototype.selectCell = function (cellIndex) {
             var gObj = this.parent;
             var selectedCell = gObj.getCellFromIndex(cellIndex.rowIndex, cellIndex.cellIndex);
+            this.currentIndex = cellIndex.rowIndex;
+            var selectedData = gObj.getCurrentViewRecords()[this.currentIndex];
             if (!this.isCellType() || !selectedCell) {
@@ -201,19 +216,26 @@ return;
             var isCellSelected = selectedCell.classList.contains('e-cellselectionbackground');
+            var isUpdate = !(!util_1.isUndefined(this.prevCIdxs) &&
+                cellIndex.rowIndex === this.prevCIdxs.rowIndex && cellIndex.cellIndex === this.prevCIdxs.cellIndex &&
+                isCellSelected);
+            if (isUpdate) {
+                this.onActionBegin({
+                    data: selectedData, cellIndex: cellIndex, currentCell: selectedCell,
+                    isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest, previousRowCellIndex: this.prevECIdxs,
+                    previousRowCell: this.prevECIdxs ?
+                        gObj.getCellFromIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined
+                }, events.cellSelecting);
+            }
             this.clearCell();
-            this.onActionBegin({
-                data: this.parent.getRows()[cellIndex.rowIndex], cellIndex: cellIndex, currentCell: selectedCell,
-                isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest, previousRowCellIndex: this.prevECIdxs,
-                previousRowCell: this.prevECIdxs ? gObj.getCellFromIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined
-            }, events.cellSelecting);
-            if (!(!util_1.isUndefined(this.prevCIdxs) &&
-                cellIndex.rowIndex === this.prevCIdxs.rowIndex && cellIndex.cellIndex === this.prevCIdxs.cellIndex &&
-                isCellSelected)) {
+            if (isUpdate) {
                 this.updateCellSelection(selectedCell, cellIndex.rowIndex, cellIndex.cellIndex);
             }
             this.updateCellProps(cellIndex, cellIndex);
-            this.onActionComplete({
-                data: this.parent.getRows()[cellIndex.rowIndex], cellIndex: cellIndex, currentCell: selectedCell,
-                previousRowCellIndex: this.prevECIdxs, selectedRowCellIndex: this.selectedRowCellIndexes,
-                previousRowCell: this.prevECIdxs ? gObj.getCellFromIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined
-            }, events.cellSelected);
+            if (isUpdate) {
+                this.onActionComplete({
+                    data: selectedData, cellIndex: cellIndex, currentCell: selectedCell,
+                    previousRowCellIndex: this.prevECIdxs, selectedRowCellIndex: this.selectedRowCellIndexes,
+                    previousRowCell: this.prevECIdxs ?
+                        gObj.getCellFromIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined
+                }, events.cellSelected);
+            }
         };
@@ -226,13 +248,15 @@ Selection.prototype.selectCellsByRange = function (startIndex, endIndex) {
             var stIndex = startIndex;
-            var edIndex = endIndex;
+            var edIndex = endIndex = endIndex ? endIndex : startIndex;
             var cellIndexes;
+            this.currentIndex = startIndex.rowIndex;
+            var selectedData = gObj.getCurrentViewRecords()[this.currentIndex];
             if (this.isSingleSel() || !this.isCellType()) {
                 return;
             }
-            this.clearCell();
             this.onActionBegin({
-                data: this.parent.getRows()[startIndex.rowIndex], cellIndex: startIndex, currentCell: selectedCell,
+                data: selectedData, cellIndex: startIndex, currentCell: selectedCell,
                 isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest, previousRowCellIndex: this.prevECIdxs,
                 previousRowCell: this.prevECIdxs ? gObj.getCellFromIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined
             }, events.cellSelecting);
+            this.clearCell();
             if (startIndex.rowIndex > endIndex.rowIndex) {
@@ -260,2 +284,3 @@ var temp = startIndex;
                     selectedCell.classList.add('e-cellselectionbackground');
+                    this.addAttribute(selectedCell);
                 }
@@ -266,3 +291,3 @@ this.selectedRowCellIndexes.push({ rowIndex: i, cellIndexes: cellIndexes });
             this.onActionComplete({
-                data: this.parent.getRows()[startIndex.rowIndex], cellIndex: startIndex, currentCell: selectedCell,
+                data: selectedData, cellIndex: startIndex, currentCell: selectedCell,
                 previousRowCellIndex: this.prevECIdxs, selectedRowCellIndex: this.selectedRowCellIndexes,
@@ -275,2 +300,4 @@ previousRowCell: this.prevECIdxs ? gObj.getCellFromIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined
             var selectedCell = gObj.getCellFromIndex(rowCellIndexes[0].rowIndex, rowCellIndexes[0].cellIndexes[0]);
+            this.currentIndex = rowCellIndexes[0].rowIndex;
+            var selectedData = gObj.getCurrentViewRecords()[this.currentIndex];
             if (this.isSingleSel() || !this.isCellType()) {
@@ -280,3 +307,3 @@ return;
             this.onActionBegin({
-                data: this.parent.getRows()[rowCellIndexes[0].rowIndex], cellIndex: rowCellIndexes[0].cellIndexes[0],
+                data: selectedData, cellIndex: rowCellIndexes[0].cellIndexes[0],
                 currentCell: selectedCell, isCtrlPressed: this.isMultiCtrlRequest,
@@ -293,2 +320,3 @@ isShiftPressed: this.isMultiShiftRequest, previousRowCellIndex: this.prevECIdxs,
                     selectedCell.classList.add('e-cellselectionbackground');
+                    this.addAttribute(selectedCell);
                     this.addRowCellIndex({ rowIndex: rowCellIndexes[i].rowIndex, cellIndex: rowCellIndexes[i].cellIndexes[j] });
@@ -299,3 +327,3 @@ }
             this.onActionComplete({
-                data: this.parent.getRows()[rowCellIndexes[0].rowIndex], cellIndex: rowCellIndexes[0].cellIndexes[0],
+                data: selectedData, cellIndex: rowCellIndexes[0].cellIndexes[0],
                 currentCell: selectedCell,
@@ -310,2 +338,4 @@ previousRowCellIndex: this.prevECIdxs, selectedRowCellIndex: this.selectedRowCellIndexes,
             var index;
+            this.currentIndex = cellIndexes[0].rowIndex;
+            var selectedData = gObj.getCurrentViewRecords()[this.currentIndex];
             if (this.isSingleSel() || !this.isCellType()) {
@@ -316,9 +346,2 @@ return;
                 var cellIndex = cellIndexes_1[_i];
-                this.onActionBegin({
-                    data: this.parent.getRows()[cellIndexes[0].rowIndex], cellIndex: cellIndexes[0],
-                    isShiftPressed: this.isMultiShiftRequest, previousRowCellIndex: this.prevECIdxs,
-                    currentCell: selectedCell, isCtrlPressed: this.isMultiCtrlRequest,
-                    previousRowCell: this.prevECIdxs ?
-                        gObj.getCellFromIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined
-                }, events.cellSelecting);
                 for (var i = 0, len = this.selectedRowCellIndexes.length; i < len; i++) {
@@ -330,26 +353,47 @@ if (this.selectedRowCellIndexes[i].rowIndex === cellIndex.rowIndex) {
                 }
-                if (index > -1) {
+                var args = {
+                    data: selectedData, cellIndex: cellIndexes[0],
+                    isShiftPressed: this.isMultiShiftRequest, previousRowCellIndex: this.prevECIdxs,
+                    currentCell: selectedCell, isCtrlPressed: this.isMultiCtrlRequest,
+                    previousRowCell: this.prevECIdxs ?
+                        gObj.getCellFromIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined
+                };
+                var isUnSelected = index > -1;
+                if (isUnSelected) {
                     var selectedCellIdx = this.selectedRowCellIndexes[index].cellIndexes;
                     if (selectedCellIdx.indexOf(cellIndex.cellIndex) > -1) {
+                        this.cellDeselect(events.cellDeselecting, [{ rowIndex: cellIndex.rowIndex, cellIndexes: [cellIndex.cellIndex] }], selectedData, [selectedCell]);
                         selectedCellIdx.splice(selectedCellIdx.indexOf(cellIndex.cellIndex), 1);
                         selectedCell.classList.remove('e-cellselectionbackground');
+                        selectedCell.removeAttribute('aria-selected');
+                        this.cellDeselect(events.cellDeselected, [{ rowIndex: cellIndex.rowIndex, cellIndexes: [cellIndex.cellIndex] }], selectedData, [selectedCell]);
                     }
                     else {
+                        isUnSelected = false;
+                        this.onActionBegin(args, events.cellSelecting);
                         this.addRowCellIndex({ rowIndex: cellIndex.rowIndex, cellIndex: cellIndex.cellIndex });
                         selectedCell.classList.add('e-cellselectionbackground');
+                        this.addAttribute(selectedCell);
                     }
                 }
                 else {
+                    this.onActionBegin(args, events.cellSelecting);
                     this.updateCellSelection(selectedCell, cellIndex.rowIndex, cellIndex.cellIndex);
                 }
                 this.updateCellProps(cellIndex, cellIndex);
-                this.onActionComplete({
-                    data: this.parent.getRows()[cellIndexes[0].rowIndex], cellIndex: cellIndexes[0], currentCell: selectedCell,
-                    previousRowCell: this.prevECIdxs ? gObj.getCellFromIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) :
-                        undefined, previousRowCellIndex: this.prevECIdxs, selectedRowCellIndex: this.selectedRowCellIndexes
-                }, events.cellSelected);
+                if (!isUnSelected) {
+                    this.onActionComplete({
+                        data: selectedData, cellIndex: cellIndexes[0], currentCell: selectedCell,
+                        previousRowCell: this.prevECIdxs ? gObj.getCellFromIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) :
+                            undefined, previousRowCellIndex: this.prevECIdxs, selectedRowCellIndex: this.selectedRowCellIndexes
+                    }, events.cellSelected);
+                }
             }
         };
+        Selection.prototype.cellDeselect = function (type, cellIndexes, data, cells) {
+            this.parent.trigger(type, {
+                cells: cells, data: data, cellIndexes: cellIndexes
+            });
+        };
         Selection.prototype.clearCell = function () {
-            this.selectedRowCellIndexes = [];
             this.clearCellSelection();
@@ -360,3 +404,9 @@ };
             selectedCell.classList.add('e-cellselectionbackground');
+            this.addAttribute(selectedCell);
         };
+        Selection.prototype.addAttribute = function (cell) {
+            this.target = cell;
+            cell.setAttribute('aria-selected', 'true');
+            cell.focus();
+        };
         Selection.prototype.updateCellProps = function (startIndex, endIndex) {
@@ -393,4 +443,5 @@ this.prevCIdxs = startIndex;
                 var cells = [];
+                var currentViewData = gObj.getCurrentViewRecords();
                 for (var i = 0, len = rowCell.length; i < len; i++) {
-                    data.push(this.parent.currentViewData[rowCell[i].rowIndex]);
+                    data.push(currentViewData[rowCell[i].rowIndex]);
                     for (var j = 0, cLen = rowCell.length; j < cLen; j++) {
@@ -400,17 +451,10 @@ cells.push(this.parent.getCellFromIndex(rowCell[i].rowIndex, rowCell[i].cellIndexes[j]));
                 }
-                if (this.isTrigger) {
-                    this.parent.trigger(events.cellDeselecting, {
-                        cells: cells, data: data, cellIndexes: rowCell
-                    });
-                }
+                this.cellDeselect(events.cellDeselecting, rowCell, data, cells);
                 for (var i = 0, len = selectedCells.length; i < len; i++) {
                     selectedCells[i].classList.remove('e-cellselectionbackground');
+                    selectedCells[i].removeAttribute('aria-selected');
                 }
                 this.selectedRowCellIndexes = [];
                 this.isCellSelected = false;
-                if (this.isTrigger) {
-                    this.parent.trigger(events.cellDeselected, {
-                        cells: cells, data: data, cellIndexes: rowCell
-                    });
-                }
+                this.cellDeselect(events.cellDeselected, rowCell, data, cells);
             }
@@ -554,4 +598,4 @@ };
             this.popUpClickHandler(e);
-            this.target = e.target;
             if (target.classList.contains('e-rowcell')) {
+                this.target = e.target;
                 this.rowCellSelectionHandler(parseInt(target.parentElement.getAttribute('aria-rowindex'), 10), parseInt(target.getAttribute('aria-colindex'), 10));
@@ -562,3 +606,2 @@ if (ej2_base_1.Browser.isDevice && this.parent.selectionSettings.type === 'multiple') {
             }
-            this.target = undefined;
             this.isMultiCtrlRequest = false;
@@ -712,2 +755,3 @@ this.isMultiShiftRequest = false;
                 this.selectRow(gObj.selectedRowIndex + key);
+                this.applyUpDown(gObj.selectedRowIndex);
             }
@@ -718,6 +762,13 @@ if (this.isCellType() && cond2) {
         };
+        Selection.prototype.applyUpDown = function (rowIndex) {
+            var gObj = this.parent;
+            this.target = gObj.getCellFromIndex(rowIndex, parseInt(this.target.getAttribute('aria-colindex'), 10));
+            this.addAttribute(this.target);
+        };
         Selection.prototype.rightArrowKey = function () {
+            this.preSelectedCellIndex = this.prevECIdxs;
             this.applyRightLeftKey(1, 0, !util_1.isUndefined(this.prevECIdxs) && this.prevECIdxs.cellIndex + 1 < this.parent.getColumns().length);
         };
         Selection.prototype.leftArrowKey = function () {
+            this.preSelectedCellIndex = this.prevECIdxs;
             this.applyRightLeftKey(-1, this.parent.getColumns().length - 1, !util_1.isUndefined(this.prevECIdxs) && this.prevECIdxs.cellIndex - 1 > -1);
@@ -727,21 +778,56 @@ };
             var gObj = this.parent;
+            var cellIndex;
+            var rowIndex;
+            if (!util_1.isNullOrUndefined(this.prevECIdxs)) {
+                cellIndex = this.prevECIdxs.cellIndex;
+                rowIndex = this.prevECIdxs.rowIndex;
+            }
             if (this.isCellType()) {
                 if (cond && this.prevECIdxs.cellIndex + key1 > -1 &&
                     this.prevECIdxs.cellIndex + key1 < this.parent.getColumns().length) {
-                    this.selectCell({ rowIndex: this.prevECIdxs.rowIndex, cellIndex: this.prevECIdxs.cellIndex + key1 });
+                    cellIndex = this.prevECIdxs.cellIndex + key1;
+                    rowIndex = this.prevECIdxs.rowIndex;
+                    this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex });
                 }
                 else if (this.prevECIdxs.rowIndex + key1 > -1 &&
                     this.prevECIdxs.rowIndex + key1 < this.parent.getRows().length) {
-                    this.selectCell({ rowIndex: this.prevECIdxs.rowIndex + key1, cellIndex: key2 });
+                    cellIndex = key2;
+                    rowIndex = this.prevECIdxs.rowIndex + key1;
+                    this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex });
                 }
-                if (gObj.element.querySelector('.e-cellselectionbackground').classList.contains('e-hide')) {
-                    this.applyRightLeftKey(key1, key2, cond);
+                if (this.isCellHide({ rowIndex: rowIndex, cellIndex: cellIndex })) {
+                    if (!((cellIndex === 0 && rowIndex === 0) ||
+                        (cellIndex === gObj.getColumns().length - 1 && rowIndex === gObj.getRows().length - 1))) {
+                        this.applyRightLeftKey(key1, key2, cond);
+                    }
+                    else {
+                        this.selectCell(this.preSelectedCellIndex);
+                    }
                 }
             }
+            else if (this.isRowType()) {
+                var cellIndex_1 = parseInt(this.target.getAttribute('aria-colindex'), 10);
+                var rowElement = dom_1.closest(this.target, 'tr');
+                if (cellIndex_1 + key1 > -1 && cellIndex_1 + key1 < this.parent.getColumns().length) {
+                    var cell = gObj.getCellFromIndex(parseInt(rowElement.getAttribute('aria-rowindex'), 10), cellIndex_1 + key1);
+                    if (cell) {
+                        if (!cell.classList.contains('e-hide')) {
+                            this.addAttribute(cell);
+                        }
+                        else {
+                            key1 += key1;
+                            this.applyRightLeftKey(key1, key2, cond);
+                        }
+                    }
+                }
+                else {
+                    this.addAttribute(this.target);
+                }
+            }
         };
         Selection.prototype.homeKey = function () {
-            this.applyHomeEndKey({ rowIndex: 0, cellIndex: 0 });
+            this.applyHomeEndKey({ rowIndex: this.currentIndex || 0, cellIndex: 0 });
         };
         Selection.prototype.endKey = function () {
-            this.applyHomeEndKey({ rowIndex: this.parent.getRows().length - 1, cellIndex: this.parent.getColumns().length - 1 });
+            this.applyHomeEndKey({ rowIndex: this.currentIndex || 0, cellIndex: this.parent.getColumns().length - 1 });
         };
@@ -751,3 +837,14 @@ Selection.prototype.applyHomeEndKey = function (key) {
                 this.selectCell(key);
+                if (this.isCellHide(key)) {
+                    if (key.cellIndex > 0) {
+                        this.applyRightLeftKey(-1, this.parent.getColumns().length - 1, true);
+                    }
+                    else {
+                        this.applyRightLeftKey(1, 0, true);
+                    }
+                }
             }
+            else {
+                this.addAttribute(this.parent.getCellFromIndex(key.rowIndex, key.cellIndex));
+            }
         };
@@ -764,2 +861,3 @@ Selection.prototype.shiftDownKey = function () {
                         this.selectRowsByRange(this.prevRowIndex, endIndex);
+                        this.applyUpDown(endIndex);
                     }
@@ -790,2 +888,3 @@ }
                 this.selectRowsByRange(this.prevRowIndex, endIndex);
+                this.applyUpDown(endIndex);
             }
@@ -805,5 +904,7 @@ if (this.isCellType() && !util_1.isUndefined(this.prevECIdxs) && (this.prevECIdxs.rowIndex - 1) > -1 && !this.isSingleSel()) {
             var gObj = this.parent;
+            var cellIndex;
             this.isMultiShiftRequest = true;
             if (this.isCellType() && !this.isSingleSel()) {
                 if (cond) {
+                    cellIndex = { rowIndex: this.prevECIdxs.rowIndex, cellIndex: this.prevECIdxs.cellIndex + key };
                     this.selectCellsByRange(this.prevCIdxs, {
@@ -816,2 +917,3 @@ rowIndex: this.prevECIdxs.rowIndex, cellIndex: this.prevECIdxs.cellIndex + key
                         (key > 0 ? this.prevECIdxs.rowIndex + 1 < this.parent.pageSettings.pageSize : this.prevECIdxs.rowIndex - 1 > -1)) {
+                        cellIndex = { rowIndex: this.prevECIdxs.rowIndex + key, cellIndex: key > 0 ? 0 : gObj.getColumns().length - 1 };
                         this.selectCellsByRange(this.prevCIdxs, {
@@ -822,2 +924,6 @@ rowIndex: this.prevECIdxs.rowIndex + key, cellIndex: key > 0 ? 0 : gObj.getColumns().length - 1
                 }
+                if (!util_1.isNullOrUndefined(cellIndex) && this.isCellHide(cellIndex) && !((cellIndex.rowIndex === 0 && cellIndex.cellIndex === 0) ||
+                    (cellIndex.rowIndex === gObj.getRows().length - 1 && cellIndex.cellIndex === gObj.getColumns().length))) {
+                    this.applyShiftLeftRightKey(key, cellIndex.cellIndex > 0);
+                }
             }
@@ -835,5 +941,14 @@ this.isMultiShiftRequest = false;
                 this.selectRow(rowIndex);
+                this.addAttribute(this.parent.getCellFromIndex(rowIndex, colIndex));
             }
             if (this.isCellType()) {
                 this.selectCell({ rowIndex: rowIndex, cellIndex: colIndex });
+                if (this.isCellHide({ rowIndex: rowIndex, cellIndex: colIndex })) {
+                    if (colIndex > 0) {
+                        this.applyRightLeftKey(-1, this.parent.getColumns().length - 1, true);
+                    }
+                    else {
+                        this.applyRightLeftKey(1, 0, true);
+                    }
+                }
             }
@@ -854,5 +969,7 @@ };
                     dom_1.classList(cells[i], args.slice(), []);
+                    cells[i].setAttribute('aria-selected', 'true');
                 }
                 else {
                     dom_1.classList(cells[i], [], args.slice());
+                    cells[i].removeAttribute('aria-selected');
                 }
@@ -870,2 +987,5 @@ }
         };
+        Selection.prototype.isCellHide = function (cellIndex) {
+            return !this.parent.getColumns()[cellIndex.cellIndex].visible;
+        };
         return Selection;
@@ -872,0 +992,0 @@ }());

src/grid/base/constant.d.ts

@@ -53,2 +53,4 @@ /** @hidden */
 export declare const detailDataBound: string;
+/** @hidden */
+export declare const toolbarClick: string;
 /**
@@ -55,0 +57,0 @@ * Specifies grid internal events

src/grid/base/constant.js

@@ -30,2 +30,3 @@ define(["require", "exports"], function (require, exports) {
     exports.detailDataBound = 'detailDataBound';
+    exports.toolbarClick = 'toolbarClick';
     exports.initialLoad = 'initial-load';
@@ -32,0 +33,0 @@ exports.initialEnd = 'initial-end';

src/grid/base/enum.d.ts

@@ -45,18 +45,22 @@ /**
     Summary = 2,
+    /**  Defines CellType as GroupSummary */
+    GroupSummary = 3,
+    /**  Defines CellType as CaptionSummary */
+    CaptionSummary = 4,
     /**  Defines CellType as Filter */
-    Filter = 3,
+    Filter = 5,
     /**  Defines CellType as Indent */
-    Indent = 4,
+    Indent = 6,
     /**  Defines CellType as GroupCaption */
-    GroupCaption = 5,
+    GroupCaption = 7,
     /**  Defines CellType as Expand */
-    Expand = 6,
+    Expand = 8,
     /**  Defines CellType as HeaderIndent */
-    HeaderIndent = 7,
+    HeaderIndent = 9,
     /**  Defines CellType as StackedHeader */
-    StackedHeader = 8,
+    StackedHeader = 10,
     /**  Defines CellType as DetailHeader */
-    DetailHeader = 9,
+    DetailHeader = 11,
     /**  Defines CellType as DetailExpand */
-    DetailExpand = 10,
+    DetailExpand = 12,
 }
@@ -110,1 +114,5 @@ /**
 export declare type FilterBarMode = 'onenter' | 'immediate';
+/**
+ * Defines the aggregate types.
+ */
+export declare type AggregateType = 'sum' | 'average' | 'max' | 'min' | 'count' | 'truecount' | 'falsecount' | 'custom';

src/grid/base/enum.js

@@ -9,10 +9,12 @@ define(["require", "exports"], function (require, exports) {
         CellType[CellType["Summary"] = 2] = "Summary";
-        CellType[CellType["Filter"] = 3] = "Filter";
-        CellType[CellType["Indent"] = 4] = "Indent";
-        CellType[CellType["GroupCaption"] = 5] = "GroupCaption";
-        CellType[CellType["Expand"] = 6] = "Expand";
-        CellType[CellType["HeaderIndent"] = 7] = "HeaderIndent";
-        CellType[CellType["StackedHeader"] = 8] = "StackedHeader";
-        CellType[CellType["DetailHeader"] = 9] = "DetailHeader";
-        CellType[CellType["DetailExpand"] = 10] = "DetailExpand";
+        CellType[CellType["GroupSummary"] = 3] = "GroupSummary";
+        CellType[CellType["CaptionSummary"] = 4] = "CaptionSummary";
+        CellType[CellType["Filter"] = 5] = "Filter";
+        CellType[CellType["Indent"] = 6] = "Indent";
+        CellType[CellType["GroupCaption"] = 7] = "GroupCaption";
+        CellType[CellType["Expand"] = 8] = "Expand";
+        CellType[CellType["HeaderIndent"] = 9] = "HeaderIndent";
+        CellType[CellType["StackedHeader"] = 10] = "StackedHeader";
+        CellType[CellType["DetailHeader"] = 11] = "DetailHeader";
+        CellType[CellType["DetailExpand"] = 12] = "DetailExpand";
     })(CellType = exports.CellType || (exports.CellType = {}));
@@ -19,0 +21,0 @@ var RenderType;

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

@@ -1,2 +0,2 @@
-import { Component, ModuleDeclaration, ChildProperty, compile as templateComplier, Browser } from '@syncfusion/ej2-base';import { isNullOrUndefined } from '@syncfusion/ej2-base/util';import { createElement, addClass, removeClass, append, remove, classList } from '@syncfusion/ej2-base/dom';import { Property, Collection, Complex, Event, NotifyPropertyChanges, INotifyPropertyChanged, L10n } from '@syncfusion/ej2-base';import { EventHandler, KeyboardEvents, KeyboardEventArgs, EmitType } from '@syncfusion/ej2-base';import { Query, DataManager } from '@syncfusion/ej2-data';import { iterateArrayOrObject, prepareColumns, parentsUntil } from './util';import * as events from '../base/constant';import { IRenderer, IValueFormatter, IFilterOperator, IIndex, RowDataBoundEventArgs, QueryCellInfoEventArgs } from './interface';import { CellDeselectEventArgs, CellSelectEventArgs, CellSelectingEventArgs, ParentDetails } from './interface';import { FailureEventArgs, FilterEventArgs, ColumnDragEventArgs, GroupEventArgs, PrintEventArgs } from './interface';import { RowDeselectEventArgs, RowSelectEventArgs, RowSelectingEventArgs, PageEventArgs, RowDragEventArgs } from './interface';import { DetailDataBoundEventArgs } from './interface';import { SearchEventArgs, SortEventArgs, ISelectedCell, EJ2Intance } from './interface';import { Render } from '../renderer/render';import { Column, ColumnModel } from '../models/column';import { Action, SelectionType, GridLine, RenderType, SortDirection, SelectionMode, PrintMode, FilterType, FilterBarMode } from './enum';import { Data } from '../actions/data';import { CellRendererFactory } from '../services/cell-render-factory';import { ServiceLocator } from '../services/service-locator';import { ValueFormatter } from '../services/value-formatter';import { RendererFactory } from '../services/renderer-factory';import { ColumnWidthService } from '../services/width-controller';import { AriaService } from '../services/aria-service';import { PageSettingsModel } from '../models/models';import { PageSettings } from '../models/page-settings';import { Sort } from '../actions/sort';import { Page } from '../actions/page';import { Selection } from '../actions/selection';import { Filter } from '../actions/filter';import { Search } from '../actions/search';import { Reorder } from '../actions/reorder';import { RowDD } from '../actions/row-reorder';import { ShowHide } from '../actions/show-hide';import { Scroll } from '../actions/scroll';import { Group } from '../actions/group';import { Print } from '../actions/print';import { DetailRow } from '../actions/detail-row';
+import { Component, ModuleDeclaration, ChildProperty, compile as templateComplier, Browser } from '@syncfusion/ej2-base';import { isNullOrUndefined } from '@syncfusion/ej2-base/util';import { createElement, addClass, removeClass, append, remove, classList } from '@syncfusion/ej2-base/dom';import { Property, Collection, Complex, Event, NotifyPropertyChanges, INotifyPropertyChanged, L10n } from '@syncfusion/ej2-base';import { EventHandler, KeyboardEvents, KeyboardEventArgs, EmitType } from '@syncfusion/ej2-base';import { Query, DataManager } from '@syncfusion/ej2-data';import { ItemModel, ClickEventArgs } from '@syncfusion/ej2-navigations';import { iterateArrayOrObject, prepareColumns, parentsUntil } from './util';import * as events from '../base/constant';import { IRenderer, IValueFormatter, IFilterOperator, IIndex, RowDataBoundEventArgs, QueryCellInfoEventArgs } from './interface';import { CellDeselectEventArgs, CellSelectEventArgs, CellSelectingEventArgs, ParentDetails } from './interface';import { FailureEventArgs, FilterEventArgs, ColumnDragEventArgs, GroupEventArgs, PrintEventArgs } from './interface';import { RowDeselectEventArgs, RowSelectEventArgs, RowSelectingEventArgs, PageEventArgs, RowDragEventArgs } from './interface';import { DetailDataBoundEventArgs } from './interface';import { SearchEventArgs, SortEventArgs, ISelectedCell, EJ2Intance } from './interface';import { Render } from '../renderer/render';import { Column, ColumnModel } from '../models/column';import { Action, SelectionType, GridLine, RenderType, SortDirection, SelectionMode, PrintMode, FilterType, FilterBarMode } from './enum';import { Data } from '../actions/data';import { CellRendererFactory } from '../services/cell-render-factory';import { ServiceLocator } from '../services/service-locator';import { ValueFormatter } from '../services/value-formatter';import { RendererFactory } from '../services/renderer-factory';import { ColumnWidthService } from '../services/width-controller';import { AriaService } from '../services/aria-service';import { PageSettingsModel, AggregateRowModel } from '../models/models';import { PageSettings } from '../models/page-settings';import { Sort } from '../actions/sort';import { Page } from '../actions/page';import { Selection } from '../actions/selection';import { Filter } from '../actions/filter';import { Search } from '../actions/search';import { Reorder } from '../actions/reorder';import { RowDD } from '../actions/row-reorder';import { ShowHide } from '../actions/show-hide';import { Scroll } from '../actions/scroll';import { Group } from '../actions/group';import { Print } from '../actions/print';import { DetailRow } from '../actions/detail-row';import { Toolbar } from '../actions/toolbar';import { AggregateRow } from '../models/aggregate';
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -118,3 +118,3 @@
     /**
-     * Defines the ID of droppable control on which row drop should occur.        */    targetID?: string;
+     * Defines the ID of droppable component on which row drop should occur.        */    targetID?: string;
 
@@ -141,2 +141,5 @@ }
     /**
+     * If `disablePageWiseAggregates` set to true, then the group aggregate value will     * be calculated from the whole data instead of paged data and two requests will be made for each page     * when Grid bound with remote service.     * @default false     */    disablePageWiseAggregates?: boolean;
+
+    /**
      * Specifies the column names to group at initial rendering of Grid.       * Also user can get current grouped columns.          */    columns?: string[];
@@ -194,3 +197,3 @@
     /**
-     * If `allowReordering` set to true, then the Grid columns can be reordered.      * Reordering can be done by drag and drop the particular column from one index to another index.     * > If Grid rendered with Multi-level headers, then reordering allows only in same level.       * @default false         */    allowReordering?: boolean;
+     * If `allowReordering` set to true, then the Grid columns can be reordered.      * Reordering can be done by drag and drop the particular column from one index to another index.     * > If Grid rendered with stacked headers, then reordering allows only in same level of column headers.       * @default false         */    allowReordering?: boolean;
 
@@ -213,2 +216,5 @@ /**
     /**
+     * Configures the Grid aggregate rows.     * @default []     */    aggregates?: AggregateRowModel[];
+
+    /**
      * Defines the scrollable height of the grid content.         * @default auto         */    height?: string | number;
@@ -244,8 +250,11 @@
     /**
-     * Triggers when the widget is created.     * @event      */    created?: EmitType<Object>;
+     * `toolbar` defines toolbar items for grid. It contains built-in and custom toolbar items.      * If a string value is assigned to the `toolbar` option, it will be treated as a single string template for the whole Grid Toolbar.     * If an Array value is assigned, it will be treated as the list of built-in and custom toolbar items in the Grid's Toolbar.      * <br><br>          * The available built-in toolbar items are       * * search - Searches records by given key.     * * print - Print the Grid.<br><br>     * The following code example implements the custom toolbar items.     * ```html     * <style type="text/css" class="cssStyles">     * .refreshicon:before     * {     *    content:"\e898";     * }     * </style>     * <div id="grid"></div>     * <script>     * var gridObj = new Grid({     * datasource: window.gridData,     * toolbar : ['Expand', {text: 'Refresh', tooltipText: 'Refresh', prefixIcon: 'refreshicon'}]});     * //Expand - To display button with Expand label     * //Refresh - To display button with prefixIcon and text     * gridObj.appendTo("#grid");     * </script>     * ```     * @default null     */    toolbar?: string | string[] | ItemModel[];
 
     /**
-     * Triggers when the widget is destroyed.      * @event      */    destroyed?: EmitType<Object>;
+     * Triggers when the component is created.     * @event      */    created?: EmitType<Object>;
 
     /**
+     * Triggers when the component is destroyed.      * @event      */    destroyed?: EmitType<Object>;
+
+    /**
      * This allows any customization of Grid properties before rendering.      * @event      */    load?: EmitType<Object>;
@@ -322,2 +331,5 @@
 
+    /**
+     * Triggers when toolbar item is clicked.     * @event     */    toolbarClick?: EmitType<ClickEventArgs>;
+
 }

src/grid/base/grid.d.ts

@@ -5,2 +5,3 @@ import { Component, ModuleDeclaration, ChildProperty } from '@syncfusion/ej2-base';
 import { Query, DataManager } from '@syncfusion/ej2-data';
+import { ItemModel, ClickEventArgs } from '@syncfusion/ej2-navigations';
 import { GridModel } from './grid-model';
@@ -21,3 +22,3 @@ import { IRenderer, IValueFormatter, IFilterOperator, IIndex, RowDataBoundEventArgs, QueryCellInfoEventArgs } from './interface';
 import { SortDescriptorModel, PredicateModel, RowDropSettingsModel, GroupSettingsModel } from './grid-model';
-import { PageSettingsModel } from '../models/models';
+import { PageSettingsModel, AggregateRowModel } from '../models/models';
 import { Sort } from '../actions/sort';
@@ -35,2 +36,3 @@ import { Page } from '../actions/page';
 import { DetailRow } from '../actions/detail-row';
+import { Toolbar } from '../actions/toolbar';
 /**
@@ -264,3 +266,3 @@ * Represents the field name and direction of sort column.
     /**
-     * Defines the ID of droppable control on which row drop should occur.
+     * Defines the ID of droppable component on which row drop should occur.
      */
@@ -296,2 +298,9 @@ targetID: string;
     /**
+     * If `disablePageWiseAggregates` set to true, then the group aggregate value will
+     * be calculated from the whole data instead of paged data and two requests will be made for each page
+     * when Grid bound with remote service.
+     * @default false
+     */
+    disablePageWiseAggregates: boolean;
+    /**
      * Specifies the column names to group at initial rendering of Grid.
@@ -303,3 +312,3 @@ * Also user can get current grouped columns.
 /**
- * Represents the Grid control.
+ * Represents the Grid component.
  * ```html
@@ -320,2 +329,3 @@ * <div id="grid"></div>
     private sortedColumns;
+    private footerElement;
     /** @hidden */
@@ -419,2 +429,6 @@ recordsCount: number;
     /**
+     * `toolbarModule` is used to manipulate toolbar items in the Grid.
+     */
+    toolbarModule: Toolbar;
+    /**
      * Defines the schema of dataSource.
@@ -498,3 +512,3 @@ * If the `columns` declaration is empty or undefined then the `columns` are automatically generated from data source.
      * Reordering can be done by drag and drop the particular column from one index to another index.
-     * > If Grid rendered with Multi-level headers, then reordering allows only in same level.
+     * > If Grid rendered with stacked headers, then reordering allows only in same level of column headers.
      * @default false
@@ -530,2 +544,7 @@ */
     /**
+     * Configures the Grid aggregate rows.
+     * @default []
+     */
+    aggregates: AggregateRowModel[];
+    /**
      * Defines the scrollable height of the grid content.
@@ -639,3 +658,32 @@ * @default auto
     /**
-     * Triggers when the widget is created.
+     * `toolbar` defines toolbar items for grid. It contains built-in and custom toolbar items.
+     * If a string value is assigned to the `toolbar` option, it will be treated as a single string template for the whole Grid Toolbar.
+     * If an Array value is assigned, it will be treated as the list of built-in and custom toolbar items in the Grid's Toolbar.
+     * <br><br>
+     * The available built-in toolbar items are
+     * * search - Searches records by given key.
+     * * print - Print the Grid.<br><br>
+     * The following code example implements the custom toolbar items.
+     * ```html
+     * <style type="text/css" class="cssStyles">
+     * .refreshicon:before
+     * {
+     *    content:"\e898";
+     * }
+     * </style>
+     * <div id="grid"></div>
+     * <script>
+     * var gridObj = new Grid({
+     * datasource: window.gridData,
+     * toolbar : ['Expand', {text: 'Refresh', tooltipText: 'Refresh', prefixIcon: 'refreshicon'}]});
+     * //Expand - To display button with Expand label
+     * //Refresh - To display button with prefixIcon and text
+     * gridObj.appendTo("#grid");
+     * </script>
+     * ```
+     * @default null
+     */
+    toolbar: string | string[] | ItemModel[];
+    /**
+     * Triggers when the component is created.
      * @event
@@ -645,3 +693,3 @@ */
     /**
-     * Triggers when the widget is destroyed.
+     * Triggers when the component is destroyed.
      * @event
@@ -774,3 +822,8 @@ */
     /**
-     * Constructor for creating the widget
+     * Triggers when toolbar item is clicked.
+     * @event
+     */
+    toolbarClick: EmitType<ClickEventArgs>;
+    /**
+     * Constructor for creating the component
      * @hidden
@@ -786,3 +839,3 @@ */
     /**
-     * To provide the array of modules needed for control rendering
+     * To provide the array of modules needed for component rendering
      * @return {ModuleDeclaration[]}
@@ -798,3 +851,3 @@ * @hidden
     /**
-     * For internal use only - To Initialize the control rendering.
+     * For internal use only - To Initialize the component rendering.
      * @private
@@ -809,5 +862,3 @@ */
     /**
-     * Prepares the widget for safe removal from DOM.
-     * Detaches all event handlers, attributes, and classes to avoid memory leaks.
-     * > This method does not remove the widget element from DOM.
+     * To destroy the component(Detaches/removes all event handlers, attributes, classes and empty the component element).
      * @method destroy
@@ -886,2 +937,12 @@ * @return {void}
     /**
+     * Gets the footer div of Grid.
+     * @return {Element}
+     */
+    getFooterContent(): Element;
+    /**
+     * Gets the footer table element of Grid.
+     * @return {Element}
+     */
+    getFooterContentTable(): Element;
+    /**
      * Gets the pager of Grid.
@@ -1165,3 +1226,3 @@ * @return {Element}
     /**
-     * Binding events to the element while widget creation.
+     * Binding events to the element while component creation.
      * @hidden
@@ -1171,3 +1232,3 @@ */
     /**
-     * Unbinding events from the element while widget destroy.
+     * Unbinding events from the element while component destroy.
      * @hidden
@@ -1184,2 +1245,8 @@ */
     removeListener(): void;
+    /**
+     * Get current visible data of grid.
+     * @return {Object[]}
+     * @hidden
+     */
+    getCurrentViewRecords(): Object[];
     private mouseClickHandler(e);
@@ -1186,0 +1253,0 @@ private focusOutHandler(e);

src/grid/base/grid.js

@@ -17,3 +17,3 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base/util", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "./util", "../base/constant", "../renderer/render", "./enum", "../services/cell-render-factory", "../services/service-locator", "../services/value-formatter", "../services/renderer-factory", "../services/width-controller", "../services/aria-service", "../models/page-settings", "../actions/search", "../actions/show-hide", "../actions/scroll", "../actions/print"], function (require, exports, ej2_base_1, util_1, dom_1, ej2_base_2, ej2_base_3, util_2, events, render_1, enum_1, cell_render_factory_1, service_locator_1, value_formatter_1, renderer_factory_1, width_controller_1, aria_service_1, page_settings_1, search_1, show_hide_1, scroll_1, print_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base/util", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "./util", "../base/constant", "../renderer/render", "./enum", "../services/cell-render-factory", "../services/service-locator", "../services/value-formatter", "../services/renderer-factory", "../services/width-controller", "../services/aria-service", "../models/page-settings", "../actions/search", "../actions/show-hide", "../actions/scroll", "../actions/print", "../models/aggregate"], function (require, exports, ej2_base_1, util_1, dom_1, ej2_base_2, ej2_base_3, util_2, events, render_1, enum_1, cell_render_factory_1, service_locator_1, value_formatter_1, renderer_factory_1, width_controller_1, aria_service_1, page_settings_1, search_1, show_hide_1, scroll_1, print_1, aggregate_1) {
     "use strict";
@@ -166,2 +166,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
     __decorate([
+        ej2_base_2.Property(false)
+    ], GroupSettings.prototype, "disablePageWiseAggregates", void 0);
+    __decorate([
         ej2_base_2.Property([])
@@ -189,3 +192,15 @@ ], GroupSettings.prototype, "columns", void 0);
                 FilterbarTitle: '\'s filter bar cell',
-                EmptyDataSourceError: 'DataSource must not be empty at initial load since columns are generated from dataSource in AutoGenerate Column Grid'
+                EmptyDataSourceError: 'DataSource must not be empty at initial load since columns are generated from dataSource in AutoGenerate Column Grid',
+                Add: 'Add',
+                Edit: 'Edit',
+                Cancel: 'Cancel',
+                Update: 'Update',
+                Delete: 'Delete',
+                Print: 'Print',
+                Pdfexport: 'PDF Export',
+                Excelexport: 'Excel Export',
+                Wordexport: 'Word Export',
+                Search: 'Search',
+                Item: 'item',
+                Items: 'items'
             };
@@ -229,3 +244,3 @@ _this.keyConfigs = {
                 'columnDragStart', 'columnDrag', 'columnDrop', 'printComplete', 'beforePrint', 'detailDataBound', 'detailTemplate',
-                'childGrid', 'queryString'];
+                'childGrid', 'queryString', 'toolbar', 'toolbarClick'];
             return this.addOnPersist(keyEntity);
@@ -277,2 +292,5 @@ };
             }
+            if (this.aggregates.length) {
+                modules.push({ member: 'aggregate', args: [this, this.serviceLocator] });
+            }
             if (this.isDetail()) {
@@ -284,2 +302,8 @@ modules.push({
             }
+            if (this.toolbar) {
+                modules.push({
+                    member: 'toolbar',
+                    args: [this, this.serviceLocator]
+                });
+            }
             return modules;
@@ -334,14 +358,3 @@ };
                 var prop = _a[_i];
-                this.extendedPropertyChange(prop, newProp);
                 switch (prop) {
-                    case 'enableRtl':
-                        this.updateRTL();
-                        if (this.allowPaging) {
-                            this.element.querySelector('.e-gridpager').ej2_instances[0].enableRtl = newProp.enableRtl;
-                        }
-                        if (this.height !== 'auto') {
-                            this.scrollModule.removePadding(!newProp.enableRtl);
-                            this.scrollModule.setPadding();
-                        }
-                        break;
                     case 'enableHover':
@@ -369,2 +382,5 @@ var action = newProp.enableHover ? dom_1.addClass : dom_1.removeClass;
                         requireRefresh = true;
+                        if (this.toolbar) {
+                            this.notify(events.uiUpdate, { module: 'toolbar' });
+                        }
                         break;
@@ -411,2 +427,18 @@ case 'allowSorting':
                         break;
+                    case 'toolbar':
+                        this.notify(events.uiUpdate, { module: 'toolbar' });
+                        break;
+                    case 'groupSettings':
+                        if (!(util_1.isNullOrUndefined(newProp.groupSettings.showDropArea))) {
+                            this.headerModule.refreshUI();
+                            requireRefresh = true;
+                            checkCursor = true;
+                        }
+                        this.notify(events.inBoundModelChanged, { module: 'group', properties: newProp.groupSettings });
+                        break;
+                    case 'aggregates':
+                        this.notify(events.uiUpdate, { module: 'aggregate', properties: newProp });
+                        break;
+                    default:
+                        this.extendedPropertyChange(prop, newProp);
                 }
@@ -424,2 +456,17 @@ }
             switch (prop) {
+                case 'enableRtl':
+                    this.updateRTL();
+                    if (this.allowPaging) {
+                        this.element.querySelector('.e-gridpager').ej2_instances[0].enableRtl = newProp.enableRtl;
+                        this.element.querySelector('.e-gridpager').ej2_instances[0].dataBind();
+                    }
+                    if (this.height !== 'auto') {
+                        this.scrollModule.removePadding(!newProp.enableRtl);
+                        this.scrollModule.setPadding();
+                    }
+                    if (this.toolbar) {
+                        this.toolbarModule.getToolbar().ej2_instances[0].enableRtl = newProp.enableRtl;
+                        this.toolbarModule.getToolbar().ej2_instances[0].dataBind();
+                    }
+                    break;
                 case 'enableAltRow':
@@ -431,5 +478,2 @@ this.renderModule.refresh();
                     break;
-                case 'groupSettings':
-                    this.notify(events.inBoundModelChanged, { module: 'group', properties: newProp.groupSettings });
-                    break;
                 case 'filterSettings':
@@ -518,2 +562,14 @@ this.notify(events.inBoundModelChanged, { module: 'filter', properties: newProp.filterSettings });
         };
+        Grid.prototype.getFooterContent = function () {
+            if (util_1.isNullOrUndefined(this.footerElement)) {
+                this.footerElement = this.element.getElementsByClassName('e-gridfooter')[0];
+            }
+            return this.footerElement;
+        };
+        Grid.prototype.getFooterContentTable = function () {
+            if (util_1.isNullOrUndefined(this.footerElement)) {
+                this.footerElement = this.element.getElementsByClassName('e-gridfooter')[0];
+            }
+            return this.footerElement.firstChild.firstChild;
+        };
         Grid.prototype.getPager = function () {
@@ -708,2 +764,5 @@ return this.gridPager;
         Grid.prototype.recalcIndentWidth = function () {
+            if (!this.getHeaderTable().querySelector('.e-emptycell')) {
+                return;
+            }
             if ((!this.groupSettings.columns.length && !this.isDetail()) ||
@@ -725,2 +784,3 @@ this.getHeaderTable().querySelector('.e-emptycell').getAttribute('indentRefreshed') ||
                 contentCol[i].style.width = indentWidth + 'px';
+                this.notify(events.columnWidthChanged, { index: i, width: indentWidth });
                 i++;
@@ -731,2 +791,3 @@ }
                 contentCol[i].style.width = indentWidth + 'px';
+                this.notify(events.columnWidthChanged, { index: i, width: indentWidth });
             }
@@ -836,3 +897,3 @@ this.getHeaderTable().querySelector('.e-emptycell').setAttribute('indentRefreshed', 'true');
             var popup = dom_1.createElement('div', { className: 'e-gridpopup', styles: 'display:none;' });
-            var content = dom_1.createElement('div', { className: 'e-content' });
+            var content = dom_1.createElement('div', { className: 'e-content', attrs: { tabIndex: '-1' } });
             dom_1.append([content, dom_1.createElement('div', { className: 'e-uptail e-tail' })], popup);
@@ -902,2 +963,6 @@ content.appendChild(dom_1.createElement('span'));
         };
+        Grid.prototype.getCurrentViewRecords = function () {
+            return (this.allowGrouping && this.groupSettings.columns.length) ?
+                this.currentViewData.records : this.currentViewData;
+        };
         Grid.prototype.mouseClickHandler = function (e) {
@@ -937,3 +1002,3 @@ if (this.isChildGrid(e) || (util_2.parentsUntil(e.target, 'e-gridpopup') && e.touches) ||
         Grid.prototype.isDetail = function () {
-            return (this.detailTemplate && this.detailTemplate.length > 1) || !util_1.isNullOrUndefined(this.childGrid);
+            return !util_1.isNullOrUndefined(this.detailTemplate) || !util_1.isNullOrUndefined(this.childGrid);
         };
@@ -1011,2 +1076,5 @@ Grid.prototype.keyActionHandler = function (e) {
     __decorate([
+        ej2_base_2.Collection([], aggregate_1.AggregateRow)
+    ], Grid.prototype, "aggregates", void 0);
+    __decorate([
         ej2_base_2.Property('auto')
@@ -1042,2 +1110,5 @@ ], Grid.prototype, "height", void 0);
     __decorate([
+        ej2_base_2.Property()
+    ], Grid.prototype, "toolbar", void 0);
+    __decorate([
         ej2_base_2.Event()
@@ -1120,2 +1191,5 @@ ], Grid.prototype, "created", void 0);
     ], Grid.prototype, "rowDrop", void 0);
+    __decorate([
+        ej2_base_2.Event()
+    ], Grid.prototype, "toolbarClick", void 0);
     Grid = __decorate([
@@ -1122,0 +1196,0 @@ ej2_base_2.NotifyPropertyChanges

src/grid/base/interface.d.ts

 import { Component, NumberFormatOptions, DateFormatOptions } from '@syncfusion/ej2-base';
 import { Query, DataManager } from '@syncfusion/ej2-data';
+import { ItemModel } from '@syncfusion/ej2-navigations';
 import { Column, ColumnModel } from '../models/column';
 import { SortSettingsModel, SelectionSettingsModel, FilterSettingsModel, SearchSettingsModel } from './grid-model';
-import { PageSettingsModel } from '../models/models';
+import { PageSettingsModel, AggregateRowModel } from '../models/models';
 import { RowDropSettingsModel, GroupSettingsModel, GridModel } from './grid-model';
@@ -103,2 +104,7 @@ import { Cell } from '../models/cell';
     /**
+     * Specifies the summaryRows for Grid.
+     * @default []
+     */
+    aggregates?: AggregateRowModel[];
+    /**
      * Specifies scrollable height of the grid content.
@@ -163,2 +169,8 @@ * @default auto
     query?: Query;
+    /**
+     * @hidden
+     * Specifies the toolbar for Grid.
+     * @default null
+     */
+    toolbar?: string | string[] | ItemModel[];
     getHeaderContent?(): Element;
@@ -190,2 +202,3 @@ setGridHeaderContent?(value: Element): void;
     getSelectedRowIndexes?(): number[];
+    getCurrentViewRecords(): Object[];
     selectRows?(indexes: number[]): void;
@@ -207,2 +220,4 @@ clearSelection?(): void;
     getPrimaryKeyFieldNames?(): string[];
+    print(): void;
+    search(searchString: string): void;
 }
@@ -217,3 +232,3 @@ /** @hidden */
     getTable(): Element;
-    getRows?(): Row[] | HTMLCollectionOf<HTMLTableRowElement>;
+    getRows?(): Row<{}>[] | HTMLCollectionOf<HTMLTableRowElement>;
     refreshUI?(): void;
@@ -285,14 +300,15 @@ setVisible?(column?: Column[]): void;
  */
-export interface ICellRenderer {
+export interface ICellRenderer<T> {
     element?: Element;
     getGui?(): string | Element;
-    format?(column: Column, value: Object, data: Object): string;
+    format?(column: T, value: Object, data: Object): string;
+    evaluate?(node: Element, column: Cell<T>, data: Object, attributes?: Object): boolean;
     setStyleAndAttributes?(node: Element, attributes: {
         [key: string]: Object;
     }): void;
-    render(cell: Cell, data: Object, attributes?: {
+    render(cell: Cell<T>, data: Object, attributes?: {
         [x: string]: string;
     }): Element;
     appendHtml?(node: Element, innerHtml: string | Element): Element;
-    refresh?(cell: Cell, node: Element): Element;
+    refresh?(cell: Cell<T>, node: Element): Element;
 }
@@ -302,5 +318,5 @@ /**
  */
-export interface IRowRenderer {
+export interface IRowRenderer<T> {
     element?: Element;
-    render(row: Row, column: Column[], attributes?: {
+    render(row: Row<T>, column: Column[], attributes?: {
         [x: string]: string;
@@ -351,3 +367,3 @@ }, rowTemplate?: string): Element;
  */
-export interface ICell {
+export interface ICell<T> {
     colSpan?: number;
@@ -359,3 +375,3 @@ rowSpan?: number;
     isDataCell?: boolean;
-    column?: Column;
+    column?: T;
     rowID?: string;
@@ -369,3 +385,3 @@ index?: number;
  */
-export interface IRow {
+export interface IRow<T> {
     uid?: string;
@@ -378,3 +394,3 @@ data?: Object;
     rowSpan?: number;
-    cells?: Cell[];
+    cells?: Cell<T>[];
     index?: number;
@@ -388,4 +404,4 @@ subRowDetails?: Object;
  */
-export interface IModelGenerator {
-    generateRows(data: Object): Row[];
+export interface IModelGenerator<T> {
+    generateRows(data: Object, args?: Object): Row<T>[];
 }
@@ -392,0 +408,0 @@ export interface ActionEventArgs {

src/grid/base/type.d.ts

@@ -1,2 +0,2 @@
-import { ColumnModel } from '../models/column';
+import { ColumnModel, AggregateColumnModel } from '../models/models';
 /**
@@ -8,1 +8,7 @@ * Exports types used by Grid.
 export declare type SortComparer = (x: ValueType, y: ValueType) => number;
+export declare type CustomSummaryType = (data: Object[] | Object, column: AggregateColumnModel) => Object;
+export declare type ReturnType = {
+    result: Object[];
+    count: number;
+    aggregates?: Object;
+};

src/grid/base/util.d.ts

@@ -1,3 +0,5 @@
-import { ColumnModel, Column } from '../models/column';
 import { IPosition } from './interface';
+import { Column } from '../models/column';
+import { ColumnModel, AggregateColumnModel } from '../models/models';
+import { AggregateType } from './enum';
 /**
@@ -60,1 +62,5 @@ * Function to check whether target object implement specific interface
 export declare function parents(elem: Element, selector: string, isID?: boolean): Element[];
+/** @hidden */
+export declare function calculateAggregate(type: AggregateType | string, data: Object, column?: AggregateColumnModel, context?: Object): Object;
+/** @hidden */
+export declare function getScrollBarWidth(): number;

src/grid/base/util.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base/util", "@syncfusion/ej2-base/dom", "../models/column"], function (require, exports, ej2_base_1, util_1, dom_1, column_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base/util", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-data", "../models/column"], function (require, exports, ej2_base_1, util_1, dom_1, ej2_data_1, column_1) {
     "use strict";
@@ -199,3 +199,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
         for (var i = 0, len = children.length; i < len; i++) {
-            elem.appendChild(children[0]);
+            if (len === children.length) {
+                elem.appendChild(children[i]);
+            }
+            else {
+                elem.appendChild(children[0]);
+            }
         }
@@ -217,2 +222,23 @@ return elem;
     exports.parents = parents;
+    function calculateAggregate(type, data, column, context) {
+        if (type === 'custom') {
+            return column.customAggregate ? column.customAggregate.call(context, data, column) : '';
+        }
+        return ej2_data_1.DataUtil.aggregates[type](data, column.field);
+    }
+    exports.calculateAggregate = calculateAggregate;
+    var scrollWidth = null;
+    function getScrollBarWidth() {
+        if (scrollWidth !== null) {
+            return scrollWidth;
+        }
+        var divNode = document.createElement('div');
+        var value = 0;
+        divNode.style.cssText = 'width:100px;height: 100px;overflow: scroll;position: absolute;top: -9999px;';
+        document.body.appendChild(divNode);
+        value = (divNode.offsetWidth - divNode.clientWidth) | 0;
+        document.body.removeChild(divNode);
+        return scrollWidth = value;
+    }
+    exports.getScrollBarWidth = getScrollBarWidth;
 });

src/grid/models.d.ts

@@ -5,1 +5,2 @@ /**
 export * from './models/column';
+export * from './models/models';

src/grid/models/cell.d.ts

 import { CellType } from '../base/enum';
-import { Column } from './column';
 /**
@@ -7,3 +6,3 @@ * Cell
  */
-export declare class Cell {
+export declare class Cell<T> {
     colSpan: number;
@@ -15,3 +14,3 @@ rowSpan: number;
     isDataCell: boolean;
-    column: Column;
+    column: T;
     rowID: string;
@@ -18,0 +17,0 @@ index: number;

src/grid/models/column.d.ts

@@ -12,3 +12,4 @@ import { NumberFormatOptions, DateFormatOptions } from '@syncfusion/ej2-base';
      * The bounded columns can be sort, filter and group etc.,
-     * If the `field` name contains “dot”, then it is considered as complex binding.
+     * The `field` name must be a valid JavaScript identifier,
+     * the first character must be an alphabet and should not contain spaces and special characters.
      * @default undefined
@@ -55,3 +56,3 @@ */
     /**
-     * The format that is applied to the value before it is displayed and it does not affect the original data source values.
+     * It is used to change display value with the given format and does not affect the original data.
      * Gets the format from the user which can be standard or custom
@@ -80,4 +81,3 @@ * [`number`](http://ej2.syncfusion.com/documentation/base/intl.html#number-formatter-and-parser)
     /**
-     * If `allowSorting` set to true the user can click the column header and sort the grid by the column field when sorting is enabled.
-     * If set to false, then it disables sorting of a particular column.
+     * If `allowSorting` set to false, then it disables sorting option of a particular column.
      * By default all columns are sortable.
@@ -186,5 +186,5 @@ * @default true
     /**
-     * The `filterBarTemplate` is used to add a custom control instead of default input control for filter bar.
+     * The `filterBarTemplate` is used to add a custom component instead of default input component for filter bar.
      * It have create and read functions.
-     * * create – It is used for creating custom controls.
+     * * create – It is used for creating custom components.
      * * read – It is used to perform custom filter action.
@@ -265,4 +265,4 @@ *
      * If the `field` name contains “dot”, then it is considered as complex binding.
-     * The field name should be a valid JavaScript identifier and
-     * should contain no spaces, no special characters, and the first character should be a letter.
+     * The `field` name must be a valid JavaScript identifier,
+     * the first character must be an alphabet and should not contain spaces and special characters.
      * @default undefined
@@ -309,3 +309,3 @@ */
     /**
-     * The format that is applied to the value before it is displayed and it does not affect the original data source values.
+     * It is used to change display value with the given format and does not affect the original data.
      * Gets the format from the user which can be standard or custom
@@ -334,4 +334,3 @@ * [`number`](http://ej2.syncfusion.com/documentation/base/intl.html#number-formatter-and-parser)
     /**
-     * If `allowSorting` set to true the user can click the column header and sort the grid by the column field when sorting is enabled.
-     * If set to false, then it disables sorting of a particular column.
+     * If `allowSorting` set to false, then it disables sorting option of a particular column.
      * By default all columns are sortable.
@@ -440,5 +439,5 @@ * @default true
     /**
-     * The `filterBarTemplate` is used to add a custom control instead of default input control for filter bar.
+     * The `filterBarTemplate` is used to add a custom component instead of default input component for filter bar.
      * It have create and read functions.
-     * * create – It is used for creating custom controls.
+     * * create – It is used for creating custom components.
      * * read – It is used to perform custom filter action.
@@ -445,0 +444,0 @@ *

src/grid/models/models.d.ts

 /**
  * Export model files
  */
+export { ColumnModel } from './column';
 export * from './page-settings-model';
+export * from './aggregate-model';

src/grid/models/row.d.ts

@@ -6,3 +6,3 @@ import { Cell } from './cell';
  */
-export declare class Row {
+export declare class Row<T> {
     uid: string;
@@ -15,6 +15,10 @@ data: Object;
     rowSpan: number;
-    cells: Cell[];
+    cells: Cell<T>[];
     index: number;
     subRowDetails: Object;
     height: string;
+    visible: boolean;
+    attributes: {
+        [x: string]: Object;
+    };
     cssClass: string;
@@ -21,0 +25,0 @@ constructor(options: {

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

@@ -0,1 +1,2 @@
+import { Column } from '../models/column';
 import { Cell } from '../models/cell';
@@ -8,3 +9,3 @@ import { ICellRenderer } from '../base/interface';
  */
-export declare class GroupCaptionCellRenderer extends CellRenderer implements ICellRenderer {
+export declare class GroupCaptionCellRenderer extends CellRenderer implements ICellRenderer<Column> {
     element: HTMLElement;
@@ -16,3 +17,3 @@ /**
      */
-    render(cell: Cell, data: {
+    render(cell: Cell<Column>, data: {
         field: string;
@@ -19,0 +20,0 @@ key: string;

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

@@ -18,3 +18,3 @@ var __extends = (this && this.__extends) || (function () {
             var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.element = dom_1.createElement('TD', { className: 'e-groupcaption' });
+            _this.element = dom_1.createElement('TD', { className: 'e-groupcaption', attrs: { role: 'gridcell', tabindex: '-1' } });
             return _this;
@@ -25,4 +25,6 @@ }
             var value = this.format(cell.column, cell.column.valueAccessor('key', data, cell.column));
-            node.innerHTML = data.field + ': ' + value + ' - ' + data.count + ' ' + (data.count < 2 ? 'item' : 'items');
+            node.innerHTML = data.field + ': ' + value + ' - ' + data.count + ' ' +
+                (data.count < 2 ? this.localizer.getConstant('Item') : this.localizer.getConstant('Items'));
             node.setAttribute('colspan', cell.colSpan.toString());
+            node.setAttribute('aria-label', node.innerHTML + ' is groupcaption cell');
             return node;
@@ -29,0 +31,0 @@ };

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

@@ -0,4 +1,5 @@
+import { L10n } from '@syncfusion/ej2-base';
 import { Column } from '../models/column';
 import { Cell } from '../models/cell';
-import { ICellRenderer } from '../base/interface';
+import { ICellRenderer, IValueFormatter } from '../base/interface';
 import { ServiceLocator } from '../services/service-locator';
@@ -9,6 +10,6 @@ /**
  */
-export declare class CellRenderer implements ICellRenderer {
+export declare class CellRenderer implements ICellRenderer<Column> {
     element: HTMLElement;
-    private localizer;
-    private formatter;
+    protected localizer: L10n;
+    protected formatter: IValueFormatter;
     constructor(locator?: ServiceLocator);
@@ -27,2 +28,3 @@ /**
     format(column: Column, value: Object, data?: Object): string;
+    evaluate(node: Element, cell: Cell<Column>, data: Object, attributes?: Object): boolean;
     /**
@@ -42,3 +44,3 @@ * Function to invoke the custom formatter available in the column object.
      */
-    render(cell: Cell, data: Object, attributes?: {
+    render(cell: Cell<Column>, data: Object, attributes?: {
         [x: string]: Object;
@@ -53,3 +55,10 @@ }): Element;
     appendHtml(node: Element, innerHtml: string | Element, property?: string): Element;
-    buildAttributeFromCell(node: HTMLElement, cell: Cell): void;
+    /**
+     * @hidden
+     */
+    setAttributes(node: HTMLElement, cell: Cell<Column>, attributes?: {
+        [x: string]: Object;
+    }): void;
+    buildAttributeFromCell<Column>(node: HTMLElement, cell: Cell<Column>): void;
+    getValue(field: string, data: Object, column: Column): Object;
 }

src/grid/renderer/cell-renderer.js

@@ -6,3 +6,3 @@ define(["require", "exports", "@syncfusion/ej2-base/util", "@syncfusion/ej2-base/dom", "../base/util"], function (require, exports, util_1, dom_1, util_2) {
         function CellRenderer(locator) {
-            this.element = dom_1.createElement('TD', { className: 'e-rowcell', attrs: { role: 'gridcell' } });
+            this.element = dom_1.createElement('TD', { className: 'e-rowcell', attrs: { role: 'gridcell', tabindex: '-1' } });
             this.localizer = locator.getService('localization');
@@ -20,2 +20,14 @@ this.formatter = locator.getService('valueFormatter');
         };
+        CellRenderer.prototype.evaluate = function (node, cell, data, attributes) {
+            var result;
+            if (cell.column.template) {
+                var literals = ['index'];
+                result = cell.column.getColumnTemplate()(util_1.extend({ 'index': attributes[literals[0]] }, data));
+                util_2.appendChildren(node, result);
+                node.setAttribute('aria-label', node.innerText + ' is template cell' + ' column header ' +
+                    cell.column.headerText);
+                return false;
+            }
+            return true;
+        };
         CellRenderer.prototype.invokeFormatter = function (column, value, data) {
@@ -39,5 +51,4 @@ if (!util_1.isNullOrUndefined(column.formatter)) {
             var column = cell.column;
-            var literals = ['index'];
             var innerHtml = this.getGui();
-            var value = column.valueAccessor(column.field, data, column);
+            var value = this.getValue(column.field, data, column);
             value = this.format(column, value, data);
@@ -57,24 +68,27 @@ innerHtml = value.toString();
             var fromFormatter = this.invokeFormatter(column, value, data);
-            if (!column.template) {
-                innerHtml = !util_1.isNullOrUndefined(column.formatter) ? util_1.isNullOrUndefined(fromFormatter) ? '' : fromFormatter.toString() : innerHtml;
-                this.appendHtml(node, innerHtml, column.getDomSetter());
+            innerHtml = !util_1.isNullOrUndefined(column.formatter) ? util_1.isNullOrUndefined(fromFormatter) ? '' : fromFormatter.toString() : innerHtml;
+            node.setAttribute('aria-label', innerHtml + ' column header ' + cell.column.headerText);
+            if (this.evaluate(node, cell, data, attributes)) {
+                this.appendHtml(node, innerHtml, column.getDomSetter ? column.getDomSetter() : 'innerHTML');
             }
-            else {
-                util_2.appendChildren(node, column.getColumnTemplate()(util_1.extend({ 'index': attributes[literals[0]] }, data)));
-            }
+            this.setAttributes(node, cell, attributes);
+            return node;
+        };
+        CellRenderer.prototype.appendHtml = function (node, innerHtml, property) {
+            if (property === void 0) { property = 'innerHTML'; }
+            node[property] = innerHtml;
+            return node;
+        };
+        CellRenderer.prototype.setAttributes = function (node, cell, attributes) {
+            var column = cell.column;
             this.buildAttributeFromCell(node, cell);
             util_2.setStyleAndAttributes(node, attributes);
+            util_2.setStyleAndAttributes(node, cell.attributes);
             if (column.customAttributes) {
                 util_2.setStyleAndAttributes(node, column.customAttributes);
             }
-            if (!util_1.isNullOrUndefined(column.textAlign)) {
+            if (column.textAlign) {
                 node.style.textAlign = column.textAlign;
             }
-            return node;
         };
-        CellRenderer.prototype.appendHtml = function (node, innerHtml, property) {
-            if (property === void 0) { property = 'innerHTML'; }
-            node[property] = innerHtml;
-            return node;
-        };
         CellRenderer.prototype.buildAttributeFromCell = function (node, cell) {
@@ -102,2 +116,5 @@ var attr = {};
         };
+        CellRenderer.prototype.getValue = function (field, data, column) {
+            return column.valueAccessor(column.field, data, column);
+        };
         return CellRenderer;
@@ -104,0 +121,0 @@ }());

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

@@ -18,3 +18,3 @@ import { IRenderer, IGrid, NotifyArgs } from '../base/interface';
     private rafCallback;
-    private parent;
+    protected parent: IGrid;
     private serviceLocator;
@@ -69,3 +69,3 @@ private ariaService;
      */
-    getRows(): Row[] | HTMLCollectionOf<HTMLTableRowElement>;
+    getRows(): Row<Column>[] | HTMLCollectionOf<HTMLTableRowElement>;
     /**
@@ -72,0 +72,0 @@ * Get the content table data row elements

src/grid/renderer/content-renderer.js

@@ -58,3 +58,8 @@ define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base/util", "@syncfusion/ej2-base/dom", "../base/util", "../base/constant", "./row-renderer", "../services/row-model-generator", "../services/group-model-generator"], function (require, exports, ej2_base_1, util_1, dom_1, util_2, events, row_renderer_1, row_model_generator_1, group_model_generator_1) {
             var innerDiv = this.getPanel().firstChild;
-            var table = dom_1.createElement('table', { className: 'e-table', attrs: { cellspacing: '0.25px', role: 'grid' } });
+            var table = dom_1.createElement('table', {
+                className: 'e-table', attrs: {
+                    cellspacing: '0.25px', role: 'grid',
+                    id: this.parent.element.id + '_content_table'
+                }
+            });
             this.setColGroup(this.parent.element.querySelector('.e-gridheader').querySelector('colgroup').cloneNode(true));
@@ -84,3 +89,9 @@ table.appendChild(this.getColGroup());
                 else {
-                    tr = gObj.getRowTemplate()(util_1.extend({ index: i }, dataSource[i]))[0].children[0];
+                    var elements = gObj.getRowTemplate()(util_1.extend({ index: i }, dataSource[i]));
+                    for (var j = 0; j < elements.length; j++) {
+                        var isTR = elements[j].nodeName.toLowerCase() === 'tr';
+                        if (isTR || (elements[j].querySelectorAll && elements[j].querySelectorAll('tr').length)) {
+                            tr = isTR ? elements[j] : elements[j].querySelector('tr');
+                        }
+                    }
                 }
@@ -87,0 +98,0 @@ frag.appendChild(tr);

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

 import { ICellRenderer } from '../base/interface';
 import { CellRenderer } from './cell-renderer';
+import { Column } from '../models/column';
 /**
@@ -7,3 +8,3 @@ * ExpandCellRenderer class which responsible for building group expand cell.
  */
-export declare class DetailExpandCellRenderer extends CellRenderer implements ICellRenderer {
+export declare class DetailExpandCellRenderer extends CellRenderer implements ICellRenderer<Column> {
     element: HTMLElement;
@@ -10,0 +11,0 @@ /**

src/grid/renderer/detail-expand-cell-renderer.js

@@ -18,3 +18,6 @@ var __extends = (this && this.__extends) || (function () {
             var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.element = dom_1.createElement('TD', { className: 'e-detailrowcollapse', attrs: { 'aria-expanded': 'false' } });
+            _this.element = dom_1.createElement('TD', {
+                className: 'e-detailrowcollapse',
+                attrs: { 'aria-expanded': 'false', role: 'gridcell', tabindex: '-1' }
+            });
             return _this;
@@ -21,0 +24,0 @@ }

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

 import { Cell } from '../models/cell';
 import { ICellRenderer } from '../base/interface';
 import { CellRenderer } from './cell-renderer';
+import { Column } from '../models/column';
 /**
@@ -8,3 +9,3 @@ * DetailHeaderIndentCellRenderer class which responsible for building detail header indent cell.
  */
-export declare class DetailHeaderIndentCellRenderer extends CellRenderer implements ICellRenderer {
+export declare class DetailHeaderIndentCellRenderer extends CellRenderer implements ICellRenderer<Column> {
     element: HTMLElement;
@@ -16,3 +17,3 @@ /**
      */
-    render(cell: Cell, data: Object): Element;
+    render(cell: Cell<Column>, data: Object): Element;
 }

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

 import { Cell } from '../models/cell';
 import { ICellRenderer } from '../base/interface';
 import { IndentCellRenderer } from './indent-cell-renderer';
+import { Column } from '../models/column';
 /**
@@ -8,3 +9,3 @@ * ExpandCellRenderer class which responsible for building group expand cell.
  */
-export declare class ExpandCellRenderer extends IndentCellRenderer implements ICellRenderer {
+export declare class ExpandCellRenderer extends IndentCellRenderer implements ICellRenderer<Column> {
     /**
@@ -15,3 +16,3 @@ * Function to render the expand cell
      */
-    render(cell: Cell, data: {
+    render(cell: Cell<Column>, data: {
         field: string;
@@ -18,0 +19,0 @@ key: string;

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

@@ -25,2 +25,3 @@ var __extends = (this && this.__extends) || (function () {
             node.setAttribute('aria-expanded', 'true');
+            node.setAttribute('tabindex', '-1');
             node.appendChild(dom_1.createElement('div', { className: 'e-icons e-gdiagonaldown e-icon-gdownarrow' }));
@@ -27,0 +28,0 @@ return node;

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

@@ -0,1 +1,2 @@
+import { Column } from '../models/column';
 import { Cell } from '../models/cell';
@@ -8,3 +9,3 @@ import { ICellRenderer } from '../base/interface';
  */
-export declare class FilterCellRenderer extends CellRenderer implements ICellRenderer {
+export declare class FilterCellRenderer extends CellRenderer implements ICellRenderer<Column> {
     element: HTMLElement;
@@ -21,3 +22,3 @@ /**
      */
-    render(cell: Cell, data: Object): Element;
+    render(cell: Cell<Column>, data: Object): Element;
     /**
@@ -24,0 +25,0 @@ * Function to specifies how the result content to be placed in the cell.

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

@@ -64,7 +64,10 @@ var __extends = (this && this.__extends) || (function () {
                         type: 'search', title: column.headerText + cell.attributes.title,
-                        value: data[cell.column.field] ? data[cell.column.field] : ''
+                        value: data[cell.column.field] ? data[cell.column.field] : '', role: 'search'
                     }
                 });
                 innerDIV.appendChild(input);
-                innerDIV.appendChild(dom_1.createElement('span', { className: 'e-cancel e-hide e-icons e-icon-hide', }));
+                innerDIV.appendChild(dom_1.createElement('span', {
+                    className: 'e-cancel e-hide e-icons e-icon-hide',
+                    attrs: { 'aria-label': 'clear filter cell', tabindex: '-1' }
+                }));
             }
@@ -71,0 +74,0 @@ if (column.allowFiltering === false || column.field === '' || util_1.isNullOrUndefined(column.field)) {

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

@@ -0,1 +1,2 @@
+import { Column } from '../models/column';
 import { Cell } from '../models/cell';
@@ -8,3 +9,3 @@ import { ICellRenderer } from '../base/interface';
  */
-export declare class HeaderCellRenderer extends CellRenderer implements ICellRenderer {
+export declare class HeaderCellRenderer extends CellRenderer implements ICellRenderer<Column> {
     element: HTMLElement;
@@ -23,3 +24,3 @@ private ariaService;
      */
-    render(cell: Cell, data: Object, attributes?: {
+    render(cell: Cell<Column>, data: Object, attributes?: {
         [x: string]: Object;
@@ -32,3 +33,3 @@ }): Element;
      */
-    refresh(cell: Cell, node: Element): Element;
+    refresh(cell: Cell<Column>, node: Element): Element;
     private clean(node);
@@ -35,0 +36,0 @@ private prepareHeader(cell, node);

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

@@ -18,3 +18,3 @@ var __extends = (this && this.__extends) || (function () {
             var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.element = dom_1.createElement('TH', { className: 'e-headercell', attrs: { role: 'columnheader' } });
+            _this.element = dom_1.createElement('TH', { className: 'e-headercell', attrs: { role: 'columnheader', tabindex: '-1' } });
             _this.ariaService = new aria_service_1.AriaService();
@@ -21,0 +21,0 @@ return _this;

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

 import { Cell } from '../models/cell';
 import { ICellRenderer } from '../base/interface';
 import { CellRenderer } from './cell-renderer';
+import { Column } from '../models/column';
 /**
@@ -8,3 +9,3 @@ * HeaderIndentCellRenderer class which responsible for building header indent cell.
  */
-export declare class HeaderIndentCellRenderer extends CellRenderer implements ICellRenderer {
+export declare class HeaderIndentCellRenderer extends CellRenderer implements ICellRenderer<Column> {
     element: HTMLElement;
@@ -16,3 +17,3 @@ /**
      */
-    render(cell: Cell, data: Object): Element;
+    render(cell: Cell<Column>, data: Object): Element;
 }

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

@@ -71,3 +71,3 @@ import { IRenderer, IGrid } from '../base/interface';
      */
-    getRows(): Row[] | HTMLCollectionOf<HTMLTableRowElement>;
+    getRows(): Row<Column>[] | HTMLCollectionOf<HTMLTableRowElement>;
     /**
@@ -74,0 +74,0 @@ * The function is used to create header table elements

src/grid/renderer/header-renderer.js

@@ -132,3 +132,3 @@ define(["require", "exports", "@syncfusion/ej2-base/util", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-base/dom", "../base/enum", "./row-renderer", "../models/cell", "../models/row", "../base/constant", "@syncfusion/ej2-base", "../base/util"], function (require, exports, util_1, dom_1, dom_2, enum_1, row_renderer_1, cell_1, row_1, events, ej2_base_1, util_2) {
             var tbody = dom_1.createElement('tbody', { className: 'e-hide' });
-            var colHeader = dom_1.createElement('tr', { className: 'e-columnheader' });
+            var colHeader = dom_1.createElement('tr', { className: 'e-columnheader', attrs: { role: 'row' } });
             var colGroup = dom_1.createElement('colgroup');
@@ -314,3 +314,3 @@ var rowBody = dom_1.createElement('tr');
             var gObj = this.parent;
-            if (!(this.parent.allowReordering || this.parent.allowGrouping)) {
+            if (!(this.parent.allowReordering || (this.parent.allowGrouping && this.parent.groupSettings.showDropArea))) {
                 return;
@@ -317,0 +317,0 @@ }

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

 import { Cell } from '../models/cell';
+import { Column } from '../models/column';
 import { ICellRenderer } from '../base/interface';
@@ -8,3 +9,3 @@ import { CellRenderer } from './cell-renderer';
  */
-export declare class IndentCellRenderer extends CellRenderer implements ICellRenderer {
+export declare class IndentCellRenderer extends CellRenderer implements ICellRenderer<Column> {
     element: HTMLElement;
@@ -16,3 +17,3 @@ /**
      */
-    render(cell: Cell, data: Object): Element;
+    render(cell: Cell<Column>, data: Object): Element;
 }

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

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "@syncfusion/ej2-base/dom", "./cell-renderer"], function (require, exports, dom_1, cell_renderer_1) {
+define(["require", "exports", "@syncfusion/ej2-base/dom", "../base/util", "./cell-renderer"], function (require, exports, dom_1, util_1, cell_renderer_1) {
     "use strict";
@@ -23,3 +23,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
         IndentCellRenderer.prototype.render = function (cell, data) {
-            return this.element.cloneNode();
+            var node = this.element.cloneNode();
+            util_1.setStyleAndAttributes(node, cell.attributes);
+            return node;
         };
@@ -26,0 +28,0 @@ return IndentCellRenderer;

src/grid/renderer/render.d.ts

 import { IGrid, NotifyArgs } from '../base/interface';
+import { ReturnType } from '../base/type';
 import { ServiceLocator } from '../services/service-locator';
@@ -49,2 +50,6 @@ /**
     private addEventListener();
+    /** @hidden */
+    validateGroupRecords(e: ReturnType): Promise<Object>;
+    private getPredicate(key, operator, value);
+    private updateGroupInfo(current, untouched);
 }

src/grid/renderer/render.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-base/util", "../base/enum", "../actions/data", "../base/constant", "../base/util", "../renderer/content-renderer", "../renderer/header-renderer", "../renderer/cell-renderer", "../renderer/header-cell-renderer", "../renderer/stacked-cell-renderer", "../renderer/indent-cell-renderer", "../renderer/caption-cell-renderer", "../renderer/expand-cell-renderer", "../renderer/header-indent-renderer", "../renderer/detail-header-indent-renderer", "../renderer/detail-expand-cell-renderer"], function (require, exports, dom_1, util_1, enum_1, data_1, events, util_2, content_renderer_1, header_renderer_1, cell_renderer_1, header_cell_renderer_1, stacked_cell_renderer_1, indent_cell_renderer_1, caption_cell_renderer_1, expand_cell_renderer_1, header_indent_renderer_1, detail_header_indent_renderer_1, detail_expand_cell_renderer_1) {
+define(["require", "exports", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-base/util", "@syncfusion/ej2-data", "../base/enum", "../actions/data", "../base/constant", "../base/util", "../renderer/content-renderer", "../renderer/header-renderer", "../renderer/cell-renderer", "../renderer/header-cell-renderer", "../renderer/stacked-cell-renderer", "../renderer/indent-cell-renderer", "../renderer/caption-cell-renderer", "../renderer/expand-cell-renderer", "../renderer/header-indent-renderer", "../renderer/detail-header-indent-renderer", "../renderer/detail-expand-cell-renderer"], function (require, exports, dom_1, util_1, ej2_data_1, enum_1, data_1, events, util_2, content_renderer_1, header_renderer_1, cell_renderer_1, header_cell_renderer_1, stacked_cell_renderer_1, indent_cell_renderer_1, caption_cell_renderer_1, expand_cell_renderer_1, header_indent_renderer_1, detail_header_indent_renderer_1, detail_expand_cell_renderer_1) {
     "use strict";
@@ -36,2 +36,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
             var dataManager = this.data.getData(this.data.generateQuery().requiresCount());
+            if (this.parent.groupSettings.disablePageWiseAggregates && this.parent.groupSettings.columns.length) {
+                dataManager = dataManager.then(function (e) { return _this.validateGroupRecords(e); });
+            }
             dataManager.then(function (e) { return _this.dataManagerSuccess(e, args); })
@@ -63,5 +66,6 @@ .catch(function (e) { return _this.dataManagerFailure(e); });
             var value;
+            var data = record && record.items ? record.items[0] : record;
             var fmtr = this.locator.getService('valueFormatter');
             for (var i = 0, len = columns.length; i < len; i++) {
-                value = util_1.getValue(columns[i].field || '', record);
+                value = util_1.getValue(columns[i].field || '', data);
                 if (!util_1.isNullOrUndefined(value)) {
@@ -116,3 +120,3 @@ this.isColTypeDef = true;
             }
-            this.parent.notify(events.dataReady, { count: e.count, result: e.result });
+            this.parent.notify(events.dataReady, { count: e.count, result: e.result, aggregates: e.aggregates });
             if (gObj.groupSettings.columns.length || (args && args.requestType === 'ungrouping')) {
@@ -182,2 +186,69 @@ this.headerRenderer.refreshUI();
         };
+        Render.prototype.validateGroupRecords = function (e) {
+            var _this = this;
+            var index = e.result.length - 1;
+            if (index < 0) {
+                return Promise.resolve(e);
+            }
+            var group0 = e.result[0];
+            var groupN = e.result[index];
+            var predicate = [];
+            var addWhere = function (input) {
+                [group0, groupN].forEach(function (group) {
+                    return predicate.push(new ej2_data_1.Predicate('field', '==', group.field).and(_this.getPredicate('key', 'equal', group.key)));
+                });
+                input.where(ej2_data_1.Predicate.or(predicate));
+            };
+            var query = new ej2_data_1.Query();
+            addWhere(query);
+            var curDm = new ej2_data_1.DataManager(e.result);
+            var curFilter = curDm.executeLocal(query);
+            var newQuery = this.data.generateQuery(true);
+            var rPredicate = [];
+            if (this.data.isRemote()) {
+                [group0, groupN].forEach(function (group) {
+                    return rPredicate.push(_this.getPredicate(group.field, 'equal', group.key));
+                });
+                newQuery.where(ej2_data_1.Predicate.or(rPredicate));
+            }
+            else {
+                addWhere(newQuery);
+            }
+            var deferred = new ej2_data_1.Deferred();
+            this.data.getData(newQuery).then(function (r) {
+                _this.updateGroupInfo(curFilter, r.result);
+                deferred.resolve(e);
+            });
+            return deferred.promise;
+        };
+        Render.prototype.getPredicate = function (key, operator, value) {
+            if (value instanceof Date) {
+                return this.data.getDatePredicate({ field: key, operator: operator, value: value });
+            }
+            return new ej2_data_1.Predicate(key, operator, value);
+        };
+        Render.prototype.updateGroupInfo = function (current, untouched) {
+            var _this = this;
+            var dm = new ej2_data_1.DataManager(untouched);
+            current.forEach(function (element, index, array) {
+                var uGroup = dm.executeLocal(new ej2_data_1.Query()
+                    .where(new ej2_data_1.Predicate('field', '==', element.field).and(_this.getPredicate('key', 'equal', element.key))))[0];
+                element.count = uGroup.count;
+                var itemGroup = element.items;
+                var uGroupItem = uGroup.items;
+                if (itemGroup.GroupGuid) {
+                    element.items = _this.updateGroupInfo(element.items, uGroup.items);
+                }
+                _this.parent.aggregates.forEach(function (row) {
+                    return row.columns.forEach(function (column) {
+                        var types = column.type instanceof Array ? column.type : [column.type];
+                        types.forEach(function (type) {
+                            var key = column.field + ' - ' + type;
+                            element.aggregates[key] = util_2.calculateAggregate(type, itemGroup.level ? uGroupItem.records : uGroup.items, column);
+                        });
+                    });
+                });
+            });
+            return current;
+        };
         return Render;
@@ -184,0 +255,0 @@ }());

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

@@ -10,3 +10,3 @@ import { Column } from '../models/column';
  */
-export declare class RowRenderer implements IRowRenderer {
+export declare class RowRenderer<T> implements IRowRenderer<T> {
     element: Element;
@@ -25,3 +25,3 @@ private cellRenderer;
      */
-    render(row: Row, columns: Column[], attributes?: {
+    render(row: Row<T>, columns: Column[], attributes?: {
         [x: string]: Object;
@@ -34,3 +34,3 @@ }, rowTemplate?: string): Element;
      */
-    buildAttributeFromRow(tr: Element, row: Row): void;
+    buildAttributeFromRow(tr: Element, row: Row<T>): void;
 }

src/grid/renderer/row-renderer.js

@@ -18,2 +18,3 @@ define(["require", "exports", "@syncfusion/ej2-base/util", "@syncfusion/ej2-base/dom", "../base/constant", "../base/util", "../base/enum"], function (require, exports, util_1, dom_1, constant_1, util_2, enum_1) {
             dom_1.attributes(tr, attrCopy);
+            util_2.setStyleAndAttributes(tr, row.attributes);
             var cellRendererFact = this.serviceLocator.getService('cellRendererFactory');
@@ -47,2 +48,5 @@ for (var i = 0, len = row.cells.length; i < len; i++) {
             }
+            if (row.visible === false) {
+                classes.push('e-hide');
+            }
             if (!util_1.isNullOrUndefined(row.index)) {
@@ -49,0 +53,0 @@ attr[prop.rowindex] = row.index;

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

@@ -0,1 +1,2 @@
+import { Column } from '../models/column';
 import { Cell } from '../models/cell';
@@ -8,3 +9,3 @@ import { ICellRenderer } from '../base/interface';
  */
-export declare class StackedHeaderCellRenderer extends CellRenderer implements ICellRenderer {
+export declare class StackedHeaderCellRenderer extends CellRenderer implements ICellRenderer<Column> {
     element: HTMLElement;
@@ -17,5 +18,5 @@ /**
      */
-    render(cell: Cell, data: Object, attributes?: {
+    render(cell: Cell<Column>, data: Object, attributes?: {
         [x: string]: Object;
     }): Element;
 }

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

@@ -18,3 +18,8 @@ var __extends = (this && this.__extends) || (function () {
             var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.element = dom_1.createElement('TH', { className: 'e-headercell e-stackedheadercell', attrs: { role: 'columnheader' } });
+            _this.element = dom_1.createElement('TH', {
+                className: 'e-headercell e-stackedheadercell', attrs: {
+                    role: 'columnheader',
+                    tabindex: '-1'
+                }
+            });
             return _this;
@@ -21,0 +26,0 @@ }

src/grid/services/cell-render-factory.d.ts

@@ -9,6 +9,6 @@ import { ICellRenderer } from '../base/interface';
     cellRenderMap: {
-        [c: string]: ICellRenderer;
+        [c: string]: ICellRenderer<{}>;
     };
-    addCellRenderer(name: string | CellType, type: ICellRenderer): void;
-    getCellRenderer(name: string | CellType): ICellRenderer;
+    addCellRenderer(name: string | CellType, type: ICellRenderer<{}>): void;
+    getCellRenderer(name: string | CellType): ICellRenderer<{}>;
 }

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

@@ -1,3 +0,4 @@
-import { IModelGenerator } from '../base/interface';
+import { IModelGenerator, IGrid } from '../base/interface';
 import { Row } from '../models/row';
+import { Column } from '../models/column';
 import { RowModelGenerator } from '../services/row-model-generator';
@@ -8,10 +9,13 @@ /**
  */
-export declare class GroupModelGenerator extends RowModelGenerator implements IModelGenerator {
+export declare class GroupModelGenerator extends RowModelGenerator implements IModelGenerator<Column> {
     private rows;
     private index;
+    private summaryModelGen;
+    private captionModelGen;
+    constructor(parent?: IGrid);
     generateRows(data: {
         length: number;
-    }): Row[];
-    private getGroupedRecords(index, data);
-    private getCaptionRowCells(field, indent);
+    }): Row<Column>[];
+    private getGroupedRecords(index, data, raw?);
+    private getCaptionRowCells(field, indent, data);
     private generateCaptionRow(data, indent);
@@ -18,0 +22,0 @@ private generateDataRows(data, indent);

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

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-define(["require", "exports", "../models/row", "@syncfusion/ej2-base/util", "../base/enum", "../services/row-model-generator"], function (require, exports, row_1, util_1, enum_1, row_model_generator_1) {
+define(["require", "exports", "../models/row", "@syncfusion/ej2-base/util", "../base/enum", "../services/row-model-generator", "../services/summary-model-generator"], function (require, exports, row_1, util_1, enum_1, row_model_generator_1, summary_model_generator_1) {
     "use strict";
@@ -17,6 +17,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
         __extends(GroupModelGenerator, _super);
-        function GroupModelGenerator() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
+        function GroupModelGenerator(parent) {
+            var _this = _super.call(this, parent) || this;
             _this.rows = [];
             _this.index = 0;
+            _this.parent = parent;
+            _this.summaryModelGen = new summary_model_generator_1.GroupSummaryModelGenerator(parent);
+            _this.captionModelGen = new summary_model_generator_1.CaptionSummaryModelGenerator(parent);
             return _this;
@@ -26,3 +29,3 @@ }
             for (var i = 0, len = data.length; i < len; i++) {
-                this.getGroupedRecords(0, data[i]);
+                this.getGroupedRecords(0, data[i], data.level);
             }
@@ -32,3 +35,4 @@ this.index = 0;
         };
-        GroupModelGenerator.prototype.getGroupedRecords = function (index, data) {
+        GroupModelGenerator.prototype.getGroupedRecords = function (index, data, raw) {
+            var level = raw;
             if (util_1.isNullOrUndefined(data.items)) {
@@ -40,3 +44,3 @@ if (util_1.isNullOrUndefined(data.GroupGuid)) {
                     for (var j = 0, len = data.length; j < len; j++) {
-                        this.getGroupedRecords(index, data[j]);
+                        this.getGroupedRecords(index, data[j], data.level);
                     }
@@ -48,9 +52,16 @@ }
                 if (data.items && data.items.length) {
-                    this.getGroupedRecords(index + 1, data.items);
+                    this.getGroupedRecords(index + 1, data.items, data.items.level);
                 }
+                if (this.parent.aggregates.length) {
+                    (_a = this.rows).push.apply(_a, this.summaryModelGen.generateRows(data, { level: level }));
+                }
             }
+            var _a;
         };
-        GroupModelGenerator.prototype.getCaptionRowCells = function (field, indent) {
+        GroupModelGenerator.prototype.getCaptionRowCells = function (field, indent, data) {
+            var cells = [];
+            var indx = 0;
+            var visibles = [];
+            var groupedLen = this.parent.groupSettings.columns.length;
             var gObj = this.parent;
-            var cells = [];
             for (var i = 0; i < indent; i++) {
@@ -60,4 +71,13 @@ cells.push(this.generateIndentCell());
             cells.push(this.generateCell({}, null, enum_1.CellType.Expand));
-            cells.push(this.generateCell(gObj.getColumnByField(field), null, enum_1.CellType.GroupCaption, gObj.getVisibleColumns().length + gObj.groupSettings.columns.length + (gObj.detailTemplate || gObj.childGrid ? 1 : 0) -
-                indent + (gObj.getVisibleColumns().length ? -1 : 0)));
+            indent = (this.parent.getVisibleColumns().length + groupedLen + (gObj.detailTemplate || gObj.childGrid ? 1 : 0) -
+                indent + (this.parent.getVisibleColumns().length ? -1 : 0));
+            if (this.parent.aggregates.length && !this.captionModelGen.isEmpty()) {
+                var captionCells = this.captionModelGen.generateRows(data)[0];
+                util_1.extend(data, captionCells.data);
+                visibles = captionCells.cells.filter(function (cell) { return cell.visible; });
+                visibles = visibles.slice(groupedLen + 1, visibles.length);
+                indent = indent - visibles.length;
+            }
+            cells.push(this.generateCell(this.parent.getColumnByField(field), null, enum_1.CellType.GroupCaption, indent));
+            cells.push.apply(cells, visibles);
             return cells;
@@ -72,3 +92,3 @@ };
             var row = new row_1.Row(options);
-            row.cells = this.getCaptionRowCells(data.field, indent);
+            row.cells = this.getCaptionRowCells(data.field, indent, row.data);
             return row;
@@ -75,0 +95,0 @@ };

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

@@ -10,3 +10,3 @@ import { IModelGenerator, IGrid } from '../base/interface';
  */
-export declare class RowModelGenerator implements IModelGenerator {
+export declare class RowModelGenerator implements IModelGenerator<Column> {
     protected parent: IGrid;
@@ -17,6 +17,6 @@ /**
     constructor(parent?: IGrid);
-    generateRows(data: Object): Row[];
-    protected ensureColumns(): Cell[];
-    protected generateRow(data: Object, index: number, cssClass?: string): Row;
-    protected generateCell(column: Column, rowId?: string, cellType?: CellType, colSpan?: number): Cell;
+    generateRows(data: Object): Row<Column>[];
+    protected ensureColumns(): Cell<Column>[];
+    protected generateRow(data: Object, index: number, cssClass?: string): Row<Column>;
+    protected generateCell(column: Column, rowId?: string, cellType?: CellType, colSpan?: number): Cell<Column>;
 }

src/pager/numeric-container.d.ts

@@ -36,3 +36,3 @@ import { Pager, IRender } from './pager';
     /**
-     * Binding events to the element while widget creation
+     * Binding events to the element while Component creation
      * @hidden
@@ -42,3 +42,3 @@ */
     /**
-     * Unbinding events from the element while widget destroy
+     * Unbinding events from the element while Component destroy
      * @hidden
@@ -45,0 +45,0 @@ */

src/pager/numeric-container.js

@@ -30,3 +30,6 @@ define(["require", "exports", "@syncfusion/ej2-base/util", "@syncfusion/ej2-base", "@syncfusion/ej2-base/dom"], function (require, exports, util_1, ej2_base_1, dom_1) {
             for (var i = 1; i <= pagerObj.pageCount; i++) {
-                link = dom_1.createElement('a', { className: 'e-link e-numericitem e-spacing e-pager-default', attrs: { role: 'link' } });
+                link = dom_1.createElement('a', {
+                    className: 'e-link e-numericitem e-spacing e-pager-default',
+                    attrs: { role: 'link', tabindex: '-1', 'aria-label': 'Goto Page ' + i }
+                });
                 if (pagerObj.currentPage === i) {
@@ -50,3 +53,5 @@ dom_1.classList(link, ['e-currentitem', 'e-active'], ['e-pager-default']);
         NumericContainer.prototype.renderNumericContainer = function () {
-            this.element = dom_1.createElement('div', { className: 'e-pagercontainer' });
+            this.element = dom_1.createElement('div', {
+                className: 'e-pagercontainer', attrs: { 'role': 'navigation' }
+            });
             this.renderFirstNPrev(this.element);
@@ -64,3 +69,4 @@ this.renderPrevPagerSet(this.element);
                     title: this.pagerModule.getLocalizedLabel('firstPageTooltip'),
-                    'aria-label': this.pagerModule.getLocalizedLabel('firstPageTooltip')
+                    'aria-label': this.pagerModule.getLocalizedLabel('firstPageTooltip'),
+                    tabindex: '-1'
                 }
@@ -72,3 +78,4 @@ });
                     title: this.pagerModule.getLocalizedLabel('previousPageTooltip'),
-                    'aria-label': this.pagerModule.getLocalizedLabel('previousPageTooltip')
+                    'aria-label': this.pagerModule.getLocalizedLabel('previousPageTooltip'),
+                    tabindex: '-1'
                 }
@@ -83,3 +90,4 @@ });
                     title: this.pagerModule.getLocalizedLabel('previousPagerTooltip'), role: 'link',
-                    'aria-label': this.pagerModule.getLocalizedLabel('previousPagerTooltip')
+                    'aria-label': this.pagerModule.getLocalizedLabel('previousPagerTooltip'),
+                    tabindex: '-1'
                 }
@@ -94,3 +102,4 @@ });
                     title: this.pagerModule.getLocalizedLabel('nextPagerTooltip'), role: 'link',
-                    'aria-label': this.pagerModule.getLocalizedLabel('nextPagerTooltip')
+                    'aria-label': this.pagerModule.getLocalizedLabel('nextPagerTooltip'),
+                    tabindex: '-1'
                 }
@@ -105,3 +114,4 @@ });
                     title: this.pagerModule.getLocalizedLabel('nextPageTooltip'),
-                    'aria-label': this.pagerModule.getLocalizedLabel('nextPageTooltip')
+                    'aria-label': this.pagerModule.getLocalizedLabel('nextPageTooltip'),
+                    tabindex: '-1'
                 }
@@ -113,3 +123,4 @@ });
                     title: this.pagerModule.getLocalizedLabel('lastPageTooltip'),
-                    'aria-label': this.pagerModule.getLocalizedLabel('lastPageTooltip')
+                    'aria-label': this.pagerModule.getLocalizedLabel('lastPageTooltip'),
+                    tabindex: '-1'
                 }
@@ -116,0 +127,0 @@ });

src/pager/pager-model.d.ts

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

src/pager/pager.d.ts

@@ -13,3 +13,3 @@ import { Component, ModuleDeclaration, L10n, EmitType } from '@syncfusion/ej2-base';
 /**
- * Represents the `Pager` control.
+ * Represents the `Pager` component.
  * ```html
@@ -107,3 +107,3 @@ * <div id="pager"/>
     /**
-     * To provide the array of modules needed for control rendering
+     * To provide the array of modules needed for component rendering
      * @hidden
@@ -118,3 +118,3 @@ */
     /**
-     * To Initialize the control rendering
+     * To Initialize the component rendering
      */
@@ -168,2 +168,3 @@ protected render(): void;
     private renderNextLastDivForDevice();
+    private addAriaLabel();
 }

src/pager/pager.js

@@ -60,2 +60,3 @@ var __extends = (this && this.__extends) || (function () {
             this.renderNextLastDivForDevice();
+            this.addAriaLabel();
             if (this.enableExternalMessage && this.externalMessageModule) {
@@ -200,7 +201,7 @@ this.externalMessageModule.render();
                 className: 'e-mfirst e-icons e-icon-first',
-                attrs: { title: this.getLocalizedLabel('firstPageTooltip'), 'aria-label': this.getLocalizedLabel('firstPageTooltip') }
+                attrs: { title: this.getLocalizedLabel('firstPageTooltip'), tabindex: '-1' }
             }));
             this.element.appendChild(dom_1.createElement('div', {
                 className: 'e-mprev e-icons e-icon-prev',
-                attrs: { title: this.getLocalizedLabel('previousPageTooltip'), 'aria-label': this.getLocalizedLabel('previousPageTooltip') }
+                attrs: { title: this.getLocalizedLabel('previousPageTooltip'), tabindex: '-1' }
             }));
@@ -211,9 +212,19 @@ };
                 className: 'e-mnext e-icons e-icon-next',
-                attrs: { title: this.getLocalizedLabel('nextPageTooltip'), 'aria-label': this.getLocalizedLabel('nextPageTooltip') }
+                attrs: { title: this.getLocalizedLabel('nextPageTooltip'), tabindex: '-1' }
             }));
             this.element.appendChild(dom_1.createElement('div', {
                 className: 'e-mlast e-icons e-icon-last',
-                attrs: { title: this.getLocalizedLabel('lastPageTooltip'), 'aria-label': this.getLocalizedLabel('lastPageTooltip') }
+                attrs: { title: this.getLocalizedLabel('lastPageTooltip'), tabindex: '-1' }
             }));
         };
+        Pager.prototype.addAriaLabel = function () {
+            var _this = this;
+            var classList = ['.e-mfirst', '.e-mprev', '.e-mnext', '.e-mlast'];
+            if (!ej2_base_1.Browser.isDevice) {
+                classList.forEach(function (value) {
+                    var element = _this.element.querySelector(value);
+                    element.setAttribute('aria-label', element.getAttribute('title'));
+                });
+            }
+        };
         return Pager;
@@ -220,0 +231,0 @@ }(ej2_base_1.Component));

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7810806

increased by31.98%

Number of package files

231

increased by9.48%

Lines of code

100377

increased by31.92%

Worsened metrics

Dependency count

3

increased by50%

Number of low maintenance alerts

1

increased byInfinity%

Number of low quality alerts

2

increased by100%

Number of lines in readme file

26

decreased by-7.14%

Dependency changes

• + Added@syncfusion/ej2-navigations@^1.0.11

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

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

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

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

• Updated@syncfusion/ej2-base@^1.0.11

• Updated@syncfusion/ej2-data@^1.0.11