@syncfusion/ej2-angular-grids 21.2.5 → 21.2.6-ngcc

package/src/grid/aggregate-columns.directive.d.ts

@@ -1,6 +1,5 @@
 import { ViewContainerRef } from '@angular/core';
 import { ComplexBase, ArrayBase } from '@syncfusion/ej2-angular-base';
-import * as i0 from "@angular/core";
 /**
  * `e-aggregate->e-column` directive represent a aggregate column of the Angular Grid.
  * ```html
@@ -101,8 +100,6 @@ export declare class AggregateColumnDirective extends ComplexBase<AggregateColum
      */
     groupCaptionTemplate: any;
     constructor(viewContainerRef: ViewContainerRef);
-    static ɵfac: i0.ɵɵFactoryDeclaration<AggregateColumnDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AggregateColumnDirective, "ejs-grid>e-aggregates>e-aggregate>e-columns>e-column", never, { "columnName": "columnName"; "customAggregate": "customAggregate"; "field": "field"; "footerTemplate": "footerTemplate"; "format": "format"; "groupCaptionTemplate": "groupCaptionTemplate"; "groupFooterTemplate": "groupFooterTemplate"; "type": "type"; }, {}, ["footerTemplate", "groupFooterTemplate", "groupCaptionTemplate"]>;
 }
 /**
  * AggregateColumn Array Directive
@@ -110,6 +107,4 @@ export declare class AggregateColumnDirective extends ComplexBase<AggregateColum
  */
 export declare class AggregateColumnsDirective extends ArrayBase<AggregateColumnsDirective> {
     constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<AggregateColumnsDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AggregateColumnsDirective, "ejs-grid>e-aggregates>e-aggregate>e-columns", never, {}, {}, ["children"]>;
 }

package/src/grid/aggregates.directive.d.ts

@@ -1,6 +1,5 @@
 import { ViewContainerRef } from '@angular/core';
 import { ComplexBase, ArrayBase } from '@syncfusion/ej2-angular-base';
-import * as i0 from "@angular/core";
 /**
  * `e-aggregate` directive represent a aggregate row of the Angular Grid.
  * It must be contained in a Grid component(`ejs-grid`).
@@ -31,8 +30,6 @@ export declare class AggregateDirective extends ComplexBase<AggregateDirective>
      */
     columns: any;
     constructor(viewContainerRef: ViewContainerRef);
-    static ɵfac: i0.ɵɵFactoryDeclaration<AggregateDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AggregateDirective, "ejs-grid>e-aggregates>e-aggregate", never, { "columns": "columns"; }, {}, ["childColumns"]>;
 }
 /**
  * Aggregate Array Directive
@@ -40,6 +37,4 @@ export declare class AggregateDirective extends ComplexBase<AggregateDirective>
  */
 export declare class AggregatesDirective extends ArrayBase<AggregatesDirective> {
     constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<AggregatesDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AggregatesDirective, "ejs-grid>e-aggregates", never, {}, {}, ["children"]>;
 }

package/src/grid/columns.directive.d.ts

@@ -1,6 +1,5 @@
 import { ViewContainerRef } from '@angular/core';
 import { ComplexBase, ArrayBase } from '@syncfusion/ej2-angular-base';
-import * as i0 from "@angular/core";
 /**
  * `e-column` directive represent a column of the Angular Grid.
  * It must be contained in a Grid component(`ejs-grid`).
@@ -450,8 +449,6 @@ export declare class ColumnDirective extends ComplexBase<ColumnDirective> {
      */
     filterTemplate: any;
     constructor(viewContainerRef: ViewContainerRef);
-    static ɵfac: i0.ɵɵFactoryDeclaration<ColumnDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ColumnDirective, "ejs-grid>e-columns>e-column", never, { "allowEditing": "allowEditing"; "allowFiltering": "allowFiltering"; "allowGrouping": "allowGrouping"; "allowReordering": "allowReordering"; "allowResizing": "allowResizing"; "allowSearching": "allowSearching"; "allowSorting": "allowSorting"; "autoFit": "autoFit"; "clipMode": "clipMode"; "columns": "columns"; "commands": "commands"; "customAttributes": "customAttributes"; "dataSource": "dataSource"; "defaultValue": "defaultValue"; "disableHtmlEncode": "disableHtmlEncode"; "displayAsCheckBox": "displayAsCheckBox"; "edit": "edit"; "editTemplate": "editTemplate"; "editType": "editType"; "enableGroupByFormat": "enableGroupByFormat"; "field": "field"; "filter": "filter"; "filterBarTemplate": "filterBarTemplate"; "filterTemplate": "filterTemplate"; "foreignKeyField": "foreignKeyField"; "foreignKeyValue": "foreignKeyValue"; "format": "format"; "formatter": "formatter"; "freeze": "freeze"; "headerTemplate": "headerTemplate"; "headerText": "headerText"; "headerTextAlign": "headerTextAlign"; "headerValueAccessor": "headerValueAccessor"; "hideAtMedia": "hideAtMedia"; "index": "index"; "isFrozen": "isFrozen"; "isIdentity": "isIdentity"; "isPrimaryKey": "isPrimaryKey"; "lockColumn": "lockColumn"; "maxWidth": "maxWidth"; "minWidth": "minWidth"; "showColumnMenu": "showColumnMenu"; "showInColumnChooser": "showInColumnChooser"; "sortComparer": "sortComparer"; "template": "template"; "textAlign": "textAlign"; "type": "type"; "uid": "uid"; "validationRules": "validationRules"; "valueAccessor": "valueAccessor"; "visible": "visible"; "width": "width"; }, {}, ["template", "headerTemplate", "commandsTemplate", "filter_itemTemplate", "editTemplate", "filterTemplate", "childColumns"]>;
 }
 /**
  * Column Array Directive
@@ -459,6 +456,4 @@ export declare class ColumnDirective extends ComplexBase<ColumnDirective> {
  */
 export declare class ColumnsDirective extends ArrayBase<ColumnsDirective> {
     constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<ColumnsDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ColumnsDirective, "ejs-grid>e-columns", never, {}, {}, ["children"]>;
 }

package/src/grid/grid-all.module.d.ts

@@ -1,7 +1,4 @@
 import { ValueProvider } from '@angular/core';
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "./grid.module";
 export declare const FilterService: ValueProvider;
 export declare const PageService: ValueProvider;
 export declare const SelectionService: ValueProvider;
@@ -30,7 +27,4 @@ export declare const LazyLoadGroupService: ValueProvider;
  * NgModule definition for the Grid component with providers.
  */
 export declare class GridAllModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<GridAllModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<GridAllModule, never, [typeof i1.CommonModule, typeof i2.GridModule], [typeof i2.GridModule]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<GridAllModule>;
 }

package/src/grid/grid.component.d.ts

@@ -3,7 +3,6 @@ import { IComponentBase } from '@syncfusion/ej2-angular-base';
 import { Grid } from '@syncfusion/ej2-grids';
 import { ColumnsDirective } from './columns.directive';
 import { AggregatesDirective } from './aggregates.directive';
-import * as i0 from "@angular/core";
 export declare const inputs: string[];
 export declare const outputs: string[];
 export declare const twoWays: string[];
@@ -142,6 +141,4 @@ export declare class GridComponent extends Grid implements IComponentBase {
     ngAfterContentChecked(): void;
     registerEvents: (eventList: string[]) => void;
     addTwoWay: (propList: string[]) => void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<GridComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GridComponent, "ejs-grid", never, { "aggregates": "aggregates"; "allowExcelExport": "allowExcelExport"; "allowFiltering": "allowFiltering"; "allowGrouping": "allowGrouping"; "allowKeyboard": "allowKeyboard"; "allowMultiSorting": "allowMultiSorting"; "allowPaging": "allowPaging"; "allowPdfExport": "allowPdfExport"; "allowReordering": "allowReordering"; "allowResizing": "allowResizing"; "allowRowDragAndDrop": "allowRowDragAndDrop"; "allowSelection": "allowSelection"; "allowSorting": "allowSorting"; "allowTextWrap": "allowTextWrap"; "autoFit": "autoFit"; "childGrid": "childGrid"; "clipMode": "clipMode"; "columnChooserSettings": "columnChooserSettings"; "columnMenuItems": "columnMenuItems"; "columnQueryMode": "columnQueryMode"; "columns": "columns"; "contextMenuItems": "contextMenuItems"; "cssClass": "cssClass"; "currencyCode": "currencyCode"; "currentAction": "currentAction"; "currentViewData": "currentViewData"; "dataSource": "dataSource"; "detailTemplate": "detailTemplate"; "editSettings": "editSettings"; "ej2StatePersistenceVersion": "ej2StatePersistenceVersion"; "enableAdaptiveUI": "enableAdaptiveUI"; "enableAltRow": "enableAltRow"; "enableAutoFill": "enableAutoFill"; "enableColumnVirtualization": "enableColumnVirtualization"; "enableHeaderFocus": "enableHeaderFocus"; "enableHover": "enableHover"; "enableHtmlSanitizer": "enableHtmlSanitizer"; "enableImmutableMode": "enableImmutableMode"; "enableInfiniteScrolling": "enableInfiniteScrolling"; "enablePersistence": "enablePersistence"; "enableRtl": "enableRtl"; "enableStickyHeader": "enableStickyHeader"; "enableVirtualMaskRow": "enableVirtualMaskRow"; "enableVirtualization": "enableVirtualization"; "filterSettings": "filterSettings"; "frozenColumns": "frozenColumns"; "frozenRows": "frozenRows"; "gridLines": "gridLines"; "groupSettings": "groupSettings"; "height": "height"; "hierarchyPrintMode": "hierarchyPrintMode"; "infiniteScrollSettings": "infiniteScrollSettings"; "loadingIndicator": "loadingIndicator"; "locale": "locale"; "pageSettings": "pageSettings"; "pagerTemplate": "pagerTemplate"; "parentDetails": "parentDetails"; "printMode": "printMode"; "query": "query"; "queryString": "queryString"; "resizeSettings": "resizeSettings"; "rowDropSettings": "rowDropSettings"; "rowHeight": "rowHeight"; "rowRenderingMode": "rowRenderingMode"; "rowTemplate": "rowTemplate"; "searchSettings": "searchSettings"; "selectedRowIndex": "selectedRowIndex"; "selectionSettings": "selectionSettings"; "showColumnChooser": "showColumnChooser"; "showColumnMenu": "showColumnMenu"; "showHider": "showHider"; "sortSettings": "sortSettings"; "textWrapSettings": "textWrapSettings"; "toolbar": "toolbar"; "toolbarTemplate": "toolbarTemplate"; "width": "width"; }, { "actionBegin": "actionBegin"; "actionComplete": "actionComplete"; "actionFailure": "actionFailure"; "batchAdd": "batchAdd"; "batchCancel": "batchCancel"; "batchDelete": "batchDelete"; "beforeAutoFill": "beforeAutoFill"; "beforeBatchAdd": "beforeBatchAdd"; "beforeBatchDelete": "beforeBatchDelete"; "beforeBatchSave": "beforeBatchSave"; "beforeCopy": "beforeCopy"; "beforeDataBound": "beforeDataBound"; "beforeExcelExport": "beforeExcelExport"; "beforeOpenAdaptiveDialog": "beforeOpenAdaptiveDialog"; "beforeOpenColumnChooser": "beforeOpenColumnChooser"; "beforePaste": "beforePaste"; "beforePdfExport": "beforePdfExport"; "beforePrint": "beforePrint"; "beginEdit": "beginEdit"; "cellDeselected": "cellDeselected"; "cellDeselecting": "cellDeselecting"; "cellEdit": "cellEdit"; "cellSave": "cellSave"; "cellSaved": "cellSaved"; "cellSelected": "cellSelected"; "cellSelecting": "cellSelecting"; "checkBoxChange": "checkBoxChange"; "columnDataStateChange": "columnDataStateChange"; "columnDeselected": "columnDeselected"; "columnDeselecting": "columnDeselecting"; "columnDrag": "columnDrag"; "columnDragStart": "columnDragStart"; "columnDrop": "columnDrop"; "columnMenuClick": "columnMenuClick"; "columnMenuOpen": "columnMenuOpen"; "columnSelected": "columnSelected"; "columnSelecting": "columnSelecting"; "commandClick": "commandClick"; "contextMenuClick": "contextMenuClick"; "contextMenuOpen": "contextMenuOpen"; "created": "created"; "dataBound": "dataBound"; "dataSourceChanged": "dataSourceChanged"; "dataStateChange": "dataStateChange"; "destroyed": "destroyed"; "detailDataBound": "detailDataBound"; "excelAggregateQueryCellInfo": "excelAggregateQueryCellInfo"; "excelExportComplete": "excelExportComplete"; "excelHeaderQueryCellInfo": "excelHeaderQueryCellInfo"; "excelQueryCellInfo": "excelQueryCellInfo"; "exportDetailDataBound": "exportDetailDataBound"; "exportGroupCaption": "exportGroupCaption"; "headerCellInfo": "headerCellInfo"; "keyPressed": "keyPressed"; "lazyLoadGroupCollapse": "lazyLoadGroupCollapse"; "lazyLoadGroupExpand": "lazyLoadGroupExpand"; "load": "load"; "pdfAggregateQueryCellInfo": "pdfAggregateQueryCellInfo"; "pdfExportComplete": "pdfExportComplete"; "pdfHeaderQueryCellInfo": "pdfHeaderQueryCellInfo"; "pdfQueryCellInfo": "pdfQueryCellInfo"; "printComplete": "printComplete"; "queryCellInfo": "queryCellInfo"; "recordClick": "recordClick"; "recordDoubleClick": "recordDoubleClick"; "resizeStart": "resizeStart"; "resizeStop": "resizeStop"; "resizing": "resizing"; "rowDataBound": "rowDataBound"; "rowDeselected": "rowDeselected"; "rowDeselecting": "rowDeselecting"; "rowDrag": "rowDrag"; "rowDragStart": "rowDragStart"; "rowDragStartHelper": "rowDragStartHelper"; "rowDrop": "rowDrop"; "rowSelected": "rowSelected"; "rowSelecting": "rowSelecting"; "toolbarClick": "toolbarClick"; "dataSourceChange": "dataSourceChange"; }, ["rowTemplate", "detailTemplate", "toolbarTemplate", "pagerTemplate", "editSettings_template", "groupSettings_captionTemplate", "childColumns", "childAggregates"], never>;
 }

package/src/grid/grid.module.d.ts

@@ -1,15 +1,5 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./grid.component";
-import * as i2 from "./stacked-column.directive";
-import * as i3 from "./columns.directive";
-import * as i4 from "./aggregate-columns.directive";
-import * as i5 from "./aggregates.directive";
-import * as i6 from "@angular/common";
 /**
  * NgModule definition for the Grid component.
  */
 export declare class GridModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<GridModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<GridModule, [typeof i1.GridComponent, typeof i2.StackedColumnDirective, typeof i2.StackedColumnsDirective, typeof i3.ColumnDirective, typeof i3.ColumnsDirective, typeof i4.AggregateColumnDirective, typeof i4.AggregateColumnsDirective, typeof i5.AggregateDirective, typeof i5.AggregatesDirective], [typeof i6.CommonModule], [typeof i1.GridComponent, typeof i2.StackedColumnDirective, typeof i2.StackedColumnsDirective, typeof i3.ColumnDirective, typeof i3.ColumnsDirective, typeof i4.AggregateColumnDirective, typeof i4.AggregateColumnsDirective, typeof i5.AggregateDirective, typeof i5.AggregatesDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<GridModule>;
 }

package/src/grid/stacked-column.directive.d.ts

@@ -1,6 +1,5 @@
 import { ViewContainerRef } from '@angular/core';
 import { ComplexBase, ArrayBase } from '@syncfusion/ej2-angular-base';
-import * as i0 from "@angular/core";
 /**
  * `e-stacked-column` directive represent the stacked column of the Angular Grid.
  * It must be contained in a StackedColumns component(`e-stacked-columns`).
@@ -452,8 +451,6 @@ export declare class StackedColumnDirective extends ComplexBase<StackedColumnDir
      */
     filterTemplate: any;
     constructor(viewContainerRef: ViewContainerRef);
-    static ɵfac: i0.ɵɵFactoryDeclaration<StackedColumnDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<StackedColumnDirective, "ejs-grid>e-columns>e-column>e-stacked-columns>e-stacked-column", never, { "allowEditing": "allowEditing"; "allowFiltering": "allowFiltering"; "allowGrouping": "allowGrouping"; "allowReordering": "allowReordering"; "allowResizing": "allowResizing"; "allowSearching": "allowSearching"; "allowSorting": "allowSorting"; "autoFit": "autoFit"; "clipMode": "clipMode"; "columns": "columns"; "commands": "commands"; "customAttributes": "customAttributes"; "dataSource": "dataSource"; "defaultValue": "defaultValue"; "disableHtmlEncode": "disableHtmlEncode"; "displayAsCheckBox": "displayAsCheckBox"; "edit": "edit"; "editTemplate": "editTemplate"; "editType": "editType"; "enableGroupByFormat": "enableGroupByFormat"; "field": "field"; "filter": "filter"; "filterBarTemplate": "filterBarTemplate"; "filterTemplate": "filterTemplate"; "foreignKeyField": "foreignKeyField"; "foreignKeyValue": "foreignKeyValue"; "format": "format"; "formatter": "formatter"; "freeze": "freeze"; "headerTemplate": "headerTemplate"; "headerText": "headerText"; "headerTextAlign": "headerTextAlign"; "headerValueAccessor": "headerValueAccessor"; "hideAtMedia": "hideAtMedia"; "index": "index"; "isFrozen": "isFrozen"; "isIdentity": "isIdentity"; "isPrimaryKey": "isPrimaryKey"; "lockColumn": "lockColumn"; "maxWidth": "maxWidth"; "minWidth": "minWidth"; "showColumnMenu": "showColumnMenu"; "showInColumnChooser": "showInColumnChooser"; "sortComparer": "sortComparer"; "template": "template"; "textAlign": "textAlign"; "type": "type"; "uid": "uid"; "validationRules": "validationRules"; "valueAccessor": "valueAccessor"; "visible": "visible"; "width": "width"; }, {}, ["template", "headerTemplate", "commandsTemplate", "filter_itemTemplate", "editTemplate", "filterTemplate"]>;
 }
 /**
  * StackedColumn Array Directive
@@ -461,6 +458,4 @@ export declare class StackedColumnDirective extends ComplexBase<StackedColumnDir
  */
 export declare class StackedColumnsDirective extends ArrayBase<StackedColumnsDirective> {
     constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<StackedColumnsDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<StackedColumnsDirective, "ejs-grid>e-columns>e-column>e-stacked-columns", never, {}, {}, ["children"]>;
 }

package/src/pager/pager-all.module.d.ts

@@ -1,11 +1,5 @@
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "./pager.module";
 /**
  * NgModule definition for the Pager component with providers.
  */
 export declare class PagerAllModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<PagerAllModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PagerAllModule, never, [typeof i1.CommonModule, typeof i2.PagerModule], [typeof i2.PagerModule]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<PagerAllModule>;
 }

package/src/pager/pager.component.d.ts

@@ -1,7 +1,6 @@
 import { ElementRef, ViewContainerRef, Renderer2, Injector } from '@angular/core';
 import { IComponentBase } from '@syncfusion/ej2-angular-base';
 import { Pager } from '@syncfusion/ej2-grids';
-import * as i0 from "@angular/core";
 export declare const inputs: string[];
 export declare const outputs: string[];
 export declare const twoWays: string[];
@@ -37,6 +36,4 @@ export declare class PagerComponent extends Pager implements IComponentBase {
     ngAfterContentChecked(): void;
     registerEvents: (eventList: string[]) => void;
     addTwoWay: (propList: string[]) => void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PagerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PagerComponent, "ejs-pager", never, { "cssClass": "cssClass"; "currentPage": "currentPage"; "customText": "customText"; "enableExternalMessage": "enableExternalMessage"; "enablePagerMessage": "enablePagerMessage"; "enablePersistence": "enablePersistence"; "enableQueryString": "enableQueryString"; "enableRtl": "enableRtl"; "externalMessage": "externalMessage"; "locale": "locale"; "pageCount": "pageCount"; "pageSize": "pageSize"; "pageSizes": "pageSizes"; "template": "template"; "totalRecordsCount": "totalRecordsCount"; }, { "click": "click"; "created": "created"; "dropDownChanged": "dropDownChanged"; "currentPageChange": "currentPageChange"; "pageSizeChange": "pageSizeChange"; "pageCountChange": "pageCountChange"; "pageSizesChange": "pageSizesChange"; }, ["template"], never>;
 }

package/src/pager/pager.module.d.ts

@@ -1,11 +1,5 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./pager.component";
-import * as i2 from "@angular/common";
 /**
  * NgModule definition for the Pager component.
  */
 export declare class PagerModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<PagerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PagerModule, [typeof i1.PagerComponent], [typeof i2.CommonModule], [typeof i1.PagerComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<PagerModule>;
 }

package/styles/bootstrap-dark.css

@@ -1161,6 +1161,10 @@ li.e-separator.e-menu-item.e-excel-separator {
   padding: 9px 0;
   font-size: 16px;
 }
+.e-bigger .e-grid.e-device .e-groupheadercell,
+.e-grid.e-bigger.e-device .e-groupheadercell {
+  padding: 9px 0;
+}
 .e-bigger .e-grid .e-groupheadercell:hover,
 .e-grid.e-bigger .e-groupheadercell:hover {
   padding: 9px 0;
@@ -1219,6 +1223,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-bigger .e-grid.e-device .e-groupheadercell span,
 .e-grid.e-bigger.e-device .e-groupheadercell span {
   line-height: 33px;
+  padding: 0 8px;
 }
 .e-bigger .e-grid.e-device .e-rowcell, .e-bigger .e-grid.e-device .e-summarycell,
 .e-grid.e-bigger.e-device .e-rowcell,
@@ -1295,12 +1300,21 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-left: -7px;
   margin-top: -3px;
   margin-right: 0;
+  padding-top: 0;
+}
+.e-bigger .e-grid.e-device span.e-ungroupbutton.e-icons,
+.e-grid.e-bigger.e-device span.e-ungroupbutton.e-icons {
+  margin-top: -3px;
 }
 .e-bigger .e-grid span.e-groupsort.e-icons,
 .e-grid.e-bigger span.e-groupsort.e-icons {
   margin-right: 0;
   margin-top: -4px;
 }
+.e-bigger .e-grid.e-device span.e-groupsort.e-icons,
+.e-grid.e-bigger.e-device span.e-groupsort.e-icons {
+  margin-top: -1px;
+}
 .e-bigger .e-grid.e-rtl .e-groupheadercell, .e-bigger .e-grid.e-rtl .e-groupheadercell:hover,
 .e-grid.e-bigger.e-rtl .e-groupheadercell,
 .e-grid.e-bigger.e-rtl .e-groupheadercell:hover {
@@ -1312,7 +1326,6 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-left: 0;
   margin-right: -10px;
   margin-top: -4px;
-  padding-top: 0;
   padding-left: 8px;
 }
 .e-bigger .e-grid .e-groupcaption,
@@ -1823,6 +1836,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   border-collapse: separate;
   table-layout: fixed;
   width: 100%;
+  border-spacing: 0.25px;
 }
 .e-grid .e-tableborder {
   border-right: 1px solid;
@@ -2264,6 +2278,8 @@ li.e-separator.e-menu-item.e-excel-separator {
   border-top-style: solid;
   border-top-width: 1px;
   padding: 0.3em;
+  font-weight: normal;
+  text-align: left;
 }
 .e-grid th.e-detailcell .e-rowcell,
 .e-grid th.e-detailcell .e-gridpager {
@@ -2677,7 +2693,8 @@ li.e-separator.e-menu-item.e-excel-separator {
 }
 .e-grid span.e-ungroupbutton.e-icons {
   margin-left: -8px;
-  margin-top: 2px;
+  margin-top: -3px;
+  padding-top: 4px;
   padding-right: 8px;
 }
 .e-grid .e-grptogglebtn {
@@ -3253,6 +3270,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.e-rtl.e-default .e-detailcell, .e-grid.e-rtl.e-default.e-bothlines .e-detailcell {
   border-right-style: solid;
   border-right-width: 1px;
+  text-align: right;
 }
 .e-grid.e-rtl .e-cc-searchdiv span.e-ccsearch-icon.e-icons {
   float: left;
@@ -3264,7 +3282,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.e-rtl span.e-ungroupbutton.e-icons {
   margin-left: 0;
   margin-right: -10px;
-  padding-top: 0;
+  padding-top: 4px;
 }
 .e-grid.e-rtl.e-default.e-bothlines .e-headercell, .e-grid.e-rtl.e-default.e-bothlines .e-detailheadercell {
   border-width: 0 0 0 1px;
@@ -3595,6 +3613,10 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-bigger.e-grid.e-rtl .e-groupheadercell span {
   padding: 0 8px;
 }
+.e-bigger .e-grid.e-device.e-rtl .e-groupheadercell span,
+.e-bigger.e-grid.e-device.e-rtl .e-groupheadercell span {
+  padding: 0 8px;
+}
 
 .e-grid-min-height .e-rowcell,
 .e-grid-min-height .e-icon-grightarrow,
@@ -3744,8 +3766,17 @@ li.e-separator.e-menu-item.e-excel-separator {
   position: absolute;
   top: 6px;
   white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
   width: 45%;
 }
+.e-bigger .e-grid.e-row-responsive .e-gridcontent .e-verticalwrap td::before, .e-bigger .e-grid.e-row-responsive .e-summarycontent .e-verticalwrap td::before,
+.e-bigger.e-grid.e-row-responsive .e-gridcontent .e-verticalwrap td::before,
+.e-bigger.e-grid.e-row-responsive .e-summarycontent .e-verticalwrap td::before {
+  line-height: 18px;
+  white-space: normal;
+  word-wrap: break-word;
+}
 .e-bigger .e-grid.e-row-responsive .e-gridcontent td[data-cell], .e-bigger .e-grid.e-row-responsive .e-summarycontent td[data-cell],
 .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-cell],
 .e-bigger.e-grid.e-row-responsive .e-summarycontent td[data-cell] {

package/styles/bootstrap.css

@@ -1162,6 +1162,10 @@ li.e-separator.e-menu-item.e-excel-separator {
   padding: 9px 0;
   font-size: 16px;
 }
+.e-bigger .e-grid.e-device .e-groupheadercell,
+.e-grid.e-bigger.e-device .e-groupheadercell {
+  padding: 9px 0;
+}
 .e-bigger .e-grid .e-groupheadercell:hover,
 .e-grid.e-bigger .e-groupheadercell:hover {
   padding: 9px 0;
@@ -1220,6 +1224,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-bigger .e-grid.e-device .e-groupheadercell span,
 .e-grid.e-bigger.e-device .e-groupheadercell span {
   line-height: 33px;
+  padding: 0 8px;
 }
 .e-bigger .e-grid.e-device .e-rowcell, .e-bigger .e-grid.e-device .e-summarycell,
 .e-grid.e-bigger.e-device .e-rowcell,
@@ -1296,12 +1301,21 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-left: -7px;
   margin-top: -3px;
   margin-right: 0;
+  padding-top: 0;
+}
+.e-bigger .e-grid.e-device span.e-ungroupbutton.e-icons,
+.e-grid.e-bigger.e-device span.e-ungroupbutton.e-icons {
+  margin-top: -3px;
 }
 .e-bigger .e-grid span.e-groupsort.e-icons,
 .e-grid.e-bigger span.e-groupsort.e-icons {
   margin-right: 0;
   margin-top: -4px;
 }
+.e-bigger .e-grid.e-device span.e-groupsort.e-icons,
+.e-grid.e-bigger.e-device span.e-groupsort.e-icons {
+  margin-top: -1px;
+}
 .e-bigger .e-grid.e-rtl .e-groupheadercell, .e-bigger .e-grid.e-rtl .e-groupheadercell:hover,
 .e-grid.e-bigger.e-rtl .e-groupheadercell,
 .e-grid.e-bigger.e-rtl .e-groupheadercell:hover {
@@ -1313,7 +1327,6 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-left: 0;
   margin-right: -10px;
   margin-top: -4px;
-  padding-top: 0;
   padding-left: 8px;
 }
 .e-bigger .e-grid .e-groupcaption,
@@ -1824,6 +1837,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   border-collapse: separate;
   table-layout: fixed;
   width: 100%;
+  border-spacing: 0.25px;
 }
 .e-grid .e-tableborder {
   border-right: 1px solid;
@@ -2265,6 +2279,8 @@ li.e-separator.e-menu-item.e-excel-separator {
   border-top-style: solid;
   border-top-width: 1px;
   padding: 0.3em;
+  font-weight: normal;
+  text-align: left;
 }
 .e-grid th.e-detailcell .e-rowcell,
 .e-grid th.e-detailcell .e-gridpager {
@@ -2678,7 +2694,8 @@ li.e-separator.e-menu-item.e-excel-separator {
 }
 .e-grid span.e-ungroupbutton.e-icons {
   margin-left: -8px;
-  margin-top: 2px;
+  margin-top: -3px;
+  padding-top: 4px;
   padding-right: 8px;
 }
 .e-grid .e-grptogglebtn {
@@ -3254,6 +3271,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.e-rtl.e-default .e-detailcell, .e-grid.e-rtl.e-default.e-bothlines .e-detailcell {
   border-right-style: solid;
   border-right-width: 1px;
+  text-align: right;
 }
 .e-grid.e-rtl .e-cc-searchdiv span.e-ccsearch-icon.e-icons {
   float: left;
@@ -3265,7 +3283,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.e-rtl span.e-ungroupbutton.e-icons {
   margin-left: 0;
   margin-right: -10px;
-  padding-top: 0;
+  padding-top: 4px;
 }
 .e-grid.e-rtl.e-default.e-bothlines .e-headercell, .e-grid.e-rtl.e-default.e-bothlines .e-detailheadercell {
   border-width: 0 0 0 1px;
@@ -3596,6 +3614,10 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-bigger.e-grid.e-rtl .e-groupheadercell span {
   padding: 0 8px;
 }
+.e-bigger .e-grid.e-device.e-rtl .e-groupheadercell span,
+.e-bigger.e-grid.e-device.e-rtl .e-groupheadercell span {
+  padding: 0 8px;
+}
 
 .e-grid-min-height .e-rowcell,
 .e-grid-min-height .e-icon-grightarrow,
@@ -3745,8 +3767,17 @@ li.e-separator.e-menu-item.e-excel-separator {
   position: absolute;
   top: 6px;
   white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
   width: 45%;
 }
+.e-bigger .e-grid.e-row-responsive .e-gridcontent .e-verticalwrap td::before, .e-bigger .e-grid.e-row-responsive .e-summarycontent .e-verticalwrap td::before,
+.e-bigger.e-grid.e-row-responsive .e-gridcontent .e-verticalwrap td::before,
+.e-bigger.e-grid.e-row-responsive .e-summarycontent .e-verticalwrap td::before {
+  line-height: 18px;
+  white-space: normal;
+  word-wrap: break-word;
+}
 .e-bigger .e-grid.e-row-responsive .e-gridcontent td[data-cell], .e-bigger .e-grid.e-row-responsive .e-summarycontent td[data-cell],
 .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-cell],
 .e-bigger.e-grid.e-row-responsive .e-summarycontent td[data-cell] {

package/styles/bootstrap4.css

@@ -1212,6 +1212,10 @@ li.e-separator.e-menu-item.e-excel-separator {
   padding: 6px 0;
   font-size: 14px;
 }
+.e-bigger .e-grid.e-device .e-groupheadercell,
+.e-grid.e-bigger.e-device .e-groupheadercell {
+  padding: 0;
+}
 .e-bigger .e-grid .e-groupheadercell:hover,
 .e-grid.e-bigger .e-groupheadercell:hover {
   padding: 6px 0;
@@ -1223,8 +1227,8 @@ li.e-separator.e-menu-item.e-excel-separator {
 }
 .e-bigger .e-grid .e-groupheadercell span,
 .e-grid.e-bigger .e-groupheadercell span {
-  height: 4px;
-  line-height: 4px;
+  height: 24px;
+  line-height: 24px;
   padding: 8px 4px 10px 12px;
 }
 .e-bigger .e-grid .e-groupheadercell .e-ungroupbutton,
@@ -1270,6 +1274,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-bigger .e-grid.e-device .e-groupheadercell span,
 .e-grid.e-bigger.e-device .e-groupheadercell span {
   line-height: 33px;
+  padding: 0 4px 0 12px;
 }
 .e-bigger .e-grid.e-device .e-rowcell, .e-bigger .e-grid.e-device .e-summarycell,
 .e-grid.e-bigger.e-device .e-rowcell,
@@ -1342,11 +1347,17 @@ li.e-separator.e-menu-item.e-excel-separator {
 }
 .e-bigger .e-grid span.e-ungroupbutton.e-icons,
 .e-grid.e-bigger span.e-ungroupbutton.e-icons {
-  font-size: 12px;
+  font-size: 16px;
   margin-left: -7px;
   margin-top: -1px;
   margin-right: 8px;
   padding-top: 8px;
+  padding-top: 8px;
+}
+.e-bigger .e-grid.e-device span.e-ungroupbutton.e-icons,
+.e-grid.e-bigger.e-device span.e-ungroupbutton.e-icons {
+  margin-top: -1px;
+  padding-top: 0;
 }
 .e-bigger .e-grid span.e-groupsort.e-icons,
 .e-grid.e-bigger span.e-groupsort.e-icons {
@@ -1354,6 +1365,10 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-top: -1px;
   margin-left: -4px;
 }
+.e-bigger .e-grid.e-device span.e-groupsort.e-icons,
+.e-grid.e-bigger.e-device span.e-groupsort.e-icons {
+  margin-top: 0;
+}
 .e-bigger .e-grid.e-rtl span.e-groupsort.e-icons,
 .e-grid.e-bigger.e-rtl span.e-groupsort.e-icons {
   margin-left: 7px;
@@ -1368,8 +1383,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.e-bigger.e-rtl span.e-ungroupbutton.e-icons {
   margin-left: -9px;
   margin-right: -15px;
-  margin-top: 3px;
-  padding-top: 4px;
+  margin-top: -1px;
   padding-left: 12px;
 }
 .e-bigger .e-grid .e-groupcaption,
@@ -1883,6 +1897,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   border-collapse: separate;
   table-layout: fixed;
   width: 100%;
+  border-spacing: 0.25px;
 }
 .e-grid .e-tableborder {
   border-right: 1px solid;
@@ -2324,6 +2339,8 @@ li.e-separator.e-menu-item.e-excel-separator {
   border-top-style: solid;
   border-top-width: 1px;
   padding: 0.3em;
+  font-weight: normal;
+  text-align: left;
 }
 .e-grid th.e-detailcell .e-rowcell,
 .e-grid th.e-detailcell .e-gridpager {
@@ -2739,8 +2756,8 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid span.e-ungroupbutton.e-icons {
   margin-left: -8px;
   margin-top: 0;
-  padding-right: 8px;
   padding-top: 4px;
+  padding-right: 8px;
 }
 .e-grid .e-grptogglebtn {
   padding: 7px;
@@ -3316,6 +3333,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid.e-rtl.e-default .e-detailcell, .e-grid.e-rtl.e-default.e-bothlines .e-detailcell {
   border-right-style: solid;
   border-right-width: 1px;
+  text-align: right;
 }
 .e-grid.e-rtl .e-cc-searchdiv span.e-ccsearch-icon.e-icons {
   float: left;
@@ -3658,6 +3676,10 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-bigger.e-grid.e-rtl .e-groupheadercell span {
   padding: 8px 4px 10px 8px;
 }
+.e-bigger .e-grid.e-device.e-rtl .e-groupheadercell span,
+.e-bigger.e-grid.e-device.e-rtl .e-groupheadercell span {
+  padding: 0 4px 0 12px;
+}
 
 .e-grid-min-height .e-rowcell,
 .e-grid-min-height .e-icon-grightarrow,
@@ -3808,8 +3830,17 @@ li.e-separator.e-menu-item.e-excel-separator {
   position: absolute;
   top: 6px;
   white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
   width: 45%;
 }
+.e-bigger .e-grid.e-row-responsive .e-gridcontent .e-verticalwrap td::before, .e-bigger .e-grid.e-row-responsive .e-summarycontent .e-verticalwrap td::before,
+.e-bigger.e-grid.e-row-responsive .e-gridcontent .e-verticalwrap td::before,
+.e-bigger.e-grid.e-row-responsive .e-summarycontent .e-verticalwrap td::before {
+  line-height: 21px;
+  white-space: normal;
+  word-wrap: break-word;
+}
 .e-bigger .e-grid.e-row-responsive .e-gridcontent td[data-cell], .e-bigger .e-grid.e-row-responsive .e-summarycontent td[data-cell],
 .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-cell],
 .e-bigger.e-grid.e-row-responsive .e-summarycontent td[data-cell] {