@progress/kendo-angular-grid 13.0.0-develop.2 → 13.0.0-develop.21

package/fesm2020/progress-kendo-angular-grid.mjs

@@ -22,7 +22,7 @@ import * as i1$3 from '@angular/platform-browser';
 import * as i3 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
 import { plusIcon, cancelIcon, lockIcon, unlockIcon, insertMiddleIcon, caretAltLeftIcon, caretAltToLeftIcon, caretAltRightIcon, caretAltToRightIcon, sortDescSmallIcon, sortAscSmallIcon, filterIcon, stickIcon, unstickIcon, setColumnPositionIcon, columnsIcon, maxWidthIcon, displayInlineFlexIcon, moreHorizontalIcon, moreVerticalIcon, filterClearIcon, reorderIcon, caretAltDownIcon, minusIcon } from '@progress/kendo-svg-icons';
-import * as i40 from '@progress/kendo-angular-utils';
+import * as i41 from '@progress/kendo-angular-utils';
 import { DragTargetContainerDirective, DropTargetContainerDirective, DragAndDropModule as DragAndDropModule$1 } from '@progress/kendo-angular-utils';
 import * as i4$1 from '@progress/kendo-angular-buttons';
 import { ButtonModule, ChipModule, Button } from '@progress/kendo-angular-buttons';
@@ -2069,16 +2069,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * @hidden
  */
 class SelectionService {
-    constructor(domEvents, localDataChangesService, navigationService) {
+    constructor(domEvents, localDataChangesService, navigationService, ctxService) {
         this.domEvents = domEvents;
         this.localDataChangesService = localDataChangesService;
         this.navigationService = navigationService;
+        this.ctxService = ctxService;
         this.changes = new EventEmitter();
-        this.lastSelectionStartIndex = 0;
+        this.aggregateChanges = new EventEmitter();
         this.currentSelection = [];
         this.selectAllChecked = false;
         this.active = false;
         this.dragging = false;
+        this.lastSelectionData = {};
         this.addSubscriptions();
     }
     get enableMarquee() {
@@ -2097,6 +2099,10 @@ class SelectionService {
     }
     init(settings) {
         this.settings = settings;
+        if (!isPresent(this.lastSelectionStartIndex)) {
+            this.lastSelectionStartIndex = this.ctxService?.grid.selectionDirective?.rangeSelectionStartRow?.index || 0;
+            this.lastSelectionData = this.ctxService?.grid.selectionDirective?.rangeSelectionStartRow?.dataItem || {};
+        }
         this.currentSelection = [];
         if (settings.selectable && settings.selectable.enabled !== false) {
             const iterator = this.getIterator();
@@ -2157,12 +2163,21 @@ class SelectionService {
         }
         ev.ctrlKey = ctrlKey;
         ev.shiftKey = event.shiftKey;
+        if (this.options.cellAggregates) {
+            this.aggregateChanges.emit(ev);
+            ev.cellAggregates = this.aggregates;
+        }
+        if (ev.shiftKey) {
+            ev.rangeStartRow = { dataItem: this.lastSelectionData, index: this.lastSelectionStartIndex };
+            ev.rangeEndRow = { dataItem: item.data, index: item.index };
+        }
         this.changes.emit(ev);
     }
     toggle(item) {
         const selectedRows = [];
         const deselectedRows = [];
         this.lastSelectionStartIndex = item.index;
+        this.lastSelectionData = item.data;
         const rowArgs = { dataItem: item.data, index: item.index };
         if (this.isSelected(item.index)) {
             deselectedRows.push(rowArgs);
@@ -2201,6 +2216,7 @@ class SelectionService {
         const deselectedRows = [];
         const selectedRows = [];
         this.lastSelectionStartIndex = item.index;
+        this.lastSelectionData = item.data;
         if (!this.isSelected(item.index)) {
             selectedRows.push({ dataItem: item.data, index: item.index });
         }
@@ -2311,9 +2327,15 @@ class SelectionService {
             }
             next = iterator.next();
         }
+        let cellAggregates;
+        if (this.options.cellAggregates) {
+            this.aggregateChanges.emit({ selectedRows, deselectedRows });
+            cellAggregates = this.aggregates;
+        }
         return {
             deselectedRows: deselectedRows,
-            selectedRows: selectedRows
+            selectedRows: selectedRows,
+            cellAggregates
         };
     }
     get selectAllState() {
@@ -2326,6 +2348,7 @@ class SelectionService {
     }
     get options() {
         const defaultOptions = {
+            cellAggregates: false,
             checkboxOnly: false,
             enabled: true,
             mode: "multiple"
@@ -2335,6 +2358,7 @@ class SelectionService {
         }
         if (typeof this.settings.selectable === 'boolean') {
             return {
+                cellAggregates: false,
                 checkboxOnly: false,
                 enabled: this.settings.selectable,
                 mode: "multiple"
@@ -2407,11 +2431,11 @@ class SelectionService {
         }
     }
 }
-SelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SelectionService, deps: [{ token: DomEventsService }, { token: LocalDataChangesService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Injectable });
+SelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SelectionService, deps: [{ token: DomEventsService }, { token: LocalDataChangesService }, { token: NavigationService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Injectable });
 SelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SelectionService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SelectionService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: DomEventsService }, { type: LocalDataChangesService }, { type: NavigationService }]; } });
+        }], ctorParameters: function () { return [{ type: DomEventsService }, { type: LocalDataChangesService }, { type: NavigationService }, { type: ContextService }]; } });
 
 /**
  * @hidden
@@ -2422,6 +2446,7 @@ class CellSelectionService {
         this.localDataChangesService = localDataChangesService;
         this.navigationService = navigationService;
         this.changes = new EventEmitter();
+        this.aggregateChanges = new EventEmitter();
         this.mouseUpEvent = new EventEmitter();
         this.currentSelection = [];
         this.active = false;
@@ -2507,6 +2532,16 @@ class CellSelectionService {
         }
         ev.ctrlKey = ctrlKey;
         ev.shiftKey = event.shiftKey;
+        if (this.options.cellAggregates) {
+            this.aggregateChanges.emit(ev);
+            ev.cellAggregates = this.aggregates;
+        }
+        if (ev.shiftKey) {
+            ev.rangeStartCell = this.lastSelectionItem;
+            ev.rangeEndCell = {
+                ...this.settings.cellSelected({ dataItem: item.data, index: item.index }, item.column, item.column.leafIndex).item
+            };
+        }
         this.changes.emit(ev);
     }
     toggle(item) {
@@ -2610,13 +2645,20 @@ class CellSelectionService {
             }
             next = iterator.next();
         }
+        let cellAggregates;
+        if (this.options.cellAggregates) {
+            this.aggregateChanges.emit({ selectedCells, deselectedCells });
+            cellAggregates = this.aggregates;
+        }
         return {
             deselectedCells,
-            selectedCells
+            selectedCells,
+            cellAggregates
         };
     }
     get options() {
         const defaultOptions = {
+            cellAggregates: false,
             checkboxOnly: false,
             enabled: true,
             mode: "multiple"
@@ -2626,6 +2668,7 @@ class CellSelectionService {
         }
         if (typeof this.settings.selectable === 'boolean') {
             return {
+                cellAggregates: false,
                 checkboxOnly: false,
                 enabled: this.settings.selectable,
                 mode: "multiple"
@@ -2899,8 +2942,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1684846761,
-    version: '13.0.0-develop.2',
+    publishDate: 1685973015,
+    version: '13.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -4518,6 +4561,12 @@ class Selection {
          * @default []
          */
         this.selectedKeys = [];
+        /**
+         * Defines the initial shift-click range selection starting column index when cell selection is enabled.
+         *
+         * @default 0
+         */
+        this.rangeSelectionStartColumnIndex = 0;
         /**
          * Fires when the `selectedKeys` collection has been updated.
          */
@@ -4565,6 +4614,9 @@ class Selection {
         this.rowSelectionState.clear();
         this.cellSelectionState.clear();
     }
+    /**
+     * @hidden
+     */
     getItemKey(row) {
         if (this.selectionKey) {
             if (typeof this.selectionKey === "string") {
@@ -4643,7 +4695,7 @@ class Selection {
     }
 }
 Selection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Selection, deps: [{ token: ContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-Selection.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Selection, selector: "kendo-grid-selection-base", inputs: { selectedKeys: "selectedKeys", selectionKey: ["kendoGridSelectBy", "selectionKey"], columnKey: "columnKey" }, outputs: { selectedKeysChange: "selectedKeysChange" }, usesOnChanges: true, ngImport: i0 });
+Selection.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Selection, selector: "kendo-grid-selection-base", inputs: { selectedKeys: "selectedKeys", rangeSelectionStartRow: "rangeSelectionStartRow", rangeSelectionStartColumnIndex: "rangeSelectionStartColumnIndex", selectionKey: ["kendoGridSelectBy", "selectionKey"], columnKey: "columnKey" }, outputs: { selectedKeysChange: "selectedKeysChange" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Selection, decorators: [{
             type: Directive,
             args: [{
@@ -4652,6 +4704,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: ContextService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedKeys: [{
                 type: Input
+            }], rangeSelectionStartRow: [{
+                type: Input
+            }], rangeSelectionStartColumnIndex: [{
+                type: Input
             }], selectionKey: [{
                 type: Input,
                 args: ["kendoGridSelectBy"]
@@ -6450,6 +6506,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Represents the status bar template of the Grid. Allows you to visualize the aggregates using custom rendering inside the template.
+ * The template context has the following field:
+ * - `aggregates`—The [SelectionAggregates]({% slug api_grid_selectionaggregates %}) object that contains all calculated aggregates.
+ * Use the Angular [ngFor](link:site.data.urls.angular['ngfor']) structural directive combined with the [KeyValuePipe](https://angular.io/api/common/KeyValuePipe)
+ * to loop through the aggregates as key-value pairs.
+ */
+class StatusBarTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+StatusBarTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StatusBarTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+StatusBarTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: StatusBarTemplateDirective, selector: "[kendoGridStatusBarTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StatusBarTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridStatusBarTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
 /**
  * @hidden
  */
@@ -6674,6 +6751,10 @@ class PagerElementComponent {
         this.total = this.pagerContext.total;
         this.skip = this.pagerContext.skip;
         this.pageSize = this.pagerContext.pageSize;
+        this.caretAltLeftIcon = caretAltLeftIcon;
+        this.caretAltToLeftIcon = caretAltToLeftIcon;
+        this.caretAltRightIcon = caretAltRightIcon;
+        this.caretAltToRightIcon = caretAltToRightIcon;
         /**
          * Sets the pager element sizing option.
          * @default `medium`
@@ -6736,6 +6817,18 @@ class PagerElementComponent {
             this.subscriptions.unsubscribe();
         }
     }
+    get prevArrowIcons() {
+        return !this.ctx.localization.rtl ? ['caret-alt-to-left', 'caret-alt-left'] : ['caret-alt-to-right', 'caret-alt-right'];
+    }
+    get prevArrowSVGIcons() {
+        return !this.ctx.localization.rtl ? [this.caretAltToLeftIcon, this.caretAltLeftIcon] : [this.caretAltToRightIcon, this.caretAltRightIcon];
+    }
+    get nextArrowIcons() {
+        return !this.ctx.localization.rtl ? ['caret-alt-right', 'caret-alt-to-right'] : ['caret-alt-left', 'caret-alt-to-left'];
+    }
+    get nextArrowSVGIcons() {
+        return !this.ctx.localization.rtl ? [this.caretAltRightIcon, this.caretAltToRightIcon] : [this.caretAltLeftIcon, this.caretAltToLeftIcon];
+    }
 }
 PagerElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerElementComponent, deps: [{ token: ContextService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
 PagerElementComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: PagerElementComponent, inputs: { size: "size" }, ngImport: i0 });
@@ -6753,8 +6846,6 @@ class PagerPrevButtonsComponent extends PagerElementComponent {
     constructor(ctx, pagerContext, cd, navigationService) {
         super(ctx, pagerContext, cd);
         this.navigationService = navigationService;
-        this.caretAltLeftIcon = caretAltLeftIcon;
-        this.caretAltToLeftIcon = caretAltToLeftIcon;
     }
     /**
      * @hidden
@@ -6783,8 +6874,8 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             [attr.aria-label]="textFor('pagerFirstPage')"
             (click)="currentPage !== 1 ? changePage(0) : false"
             role="button"
-            icon="caret-alt-to-left"
-            [svgIcon]="caretAltToLeftIcon"
+            [icon]="prevArrowIcons[0]"
+            [svgIcon]="prevArrowSVGIcons[0]"
             class="k-pager-nav k-pager-first"
             [disabled]="disabled"
             fillMode="flat"
@@ -6797,8 +6888,8 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             type="button"
             class="k-pager-nav"
             [disabled]="disabled"
-            icon="caret-alt-left"
-            [svgIcon]="caretAltLeftIcon"
+            [icon]="prevArrowIcons[1]"
+            [svgIcon]="prevArrowSVGIcons[1]"
             fillMode="flat"
             rounded="none"
             [size]="size"
@@ -6821,8 +6912,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [attr.aria-label]="textFor('pagerFirstPage')"
             (click)="currentPage !== 1 ? changePage(0) : false"
             role="button"
-            icon="caret-alt-to-left"
-            [svgIcon]="caretAltToLeftIcon"
+            [icon]="prevArrowIcons[0]"
+            [svgIcon]="prevArrowSVGIcons[0]"
             class="k-pager-nav k-pager-first"
             [disabled]="disabled"
             fillMode="flat"
@@ -6835,8 +6926,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             type="button"
             class="k-pager-nav"
             [disabled]="disabled"
-            icon="caret-alt-left"
-            [svgIcon]="caretAltLeftIcon"
+            [icon]="prevArrowIcons[1]"
+            [svgIcon]="prevArrowSVGIcons[1]"
             fillMode="flat"
             rounded="none"
             [size]="size"
@@ -7235,8 +7326,6 @@ class PagerNextButtonsComponent extends PagerElementComponent {
     constructor(ctx, pagerContext, cd, navigationService) {
         super(ctx, pagerContext, cd);
         this.navigationService = navigationService;
-        this.caretAltRightIcon = caretAltRightIcon;
-        this.caretAltToRightIcon = caretAltToRightIcon;
     }
     /**
      * @hidden
@@ -7262,8 +7351,8 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             [kendoGridFocusable]="!disabled"
             type="button"
             [size]="size"
-            icon="caret-alt-right"
-            [svgIcon]="caretAltRightIcon"
+            [icon]="nextArrowIcons[0]"
+            [svgIcon]="nextArrowSVGIcons[0]"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav"
@@ -7277,8 +7366,8 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             [kendoGridFocusable]="!disabled"
             type="button"
             [size]="size"
-            icon="caret-alt-to-right"
-            [svgIcon]="caretAltToRightIcon"
+            [icon]="nextArrowIcons[1]"
+            [svgIcon]="nextArrowSVGIcons[1]"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav k-pager-last"
@@ -7299,8 +7388,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [kendoGridFocusable]="!disabled"
             type="button"
             [size]="size"
-            icon="caret-alt-right"
-            [svgIcon]="caretAltRightIcon"
+            [icon]="nextArrowIcons[0]"
+            [svgIcon]="nextArrowSVGIcons[0]"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav"
@@ -7314,8 +7403,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [kendoGridFocusable]="!disabled"
             type="button"
             [size]="size"
-            icon="caret-alt-to-right"
-            [svgIcon]="caretAltToRightIcon"
+            [icon]="nextArrowIcons[1]"
+            [svgIcon]="nextArrowSVGIcons[1]"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav k-pager-last"
@@ -7515,7 +7604,7 @@ PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [value]="pageSize"
             (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
         <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
-    `, isInline: true, components: [{ type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i5.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }], directives: [{ type: PagerDropDownListDirective, selector: "[kendoGridPagerDropDown]" }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i5.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }], directives: [{ type: PagerDropDownListDirective, selector: "[kendoGridPagerDropDown]" }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
             type: Component,
             args: [{
@@ -8272,7 +8361,7 @@ GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 [label]="groupTitles[index]"
                 [removable]="true"
                 [icon]="getDirectionIcon(group)"
-                [svgIcon]=""
+                [svgIcon]="getDirectionSvgIcon(group)"
                 (contentClick)="directionChange(group)"
                 (remove)="remove(group)"
             >
@@ -8324,7 +8413,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [label]="groupTitles[index]"
                 [removable]="true"
                 [icon]="getDirectionIcon(group)"
-                [svgIcon]=""
+                [svgIcon]="getDirectionSvgIcon(group)"
                 (contentClick)="directionChange(group)"
                 (remove)="remove(group)"
             >
@@ -8970,7 +9059,11 @@ class FilterInputDirective {
             this.renderer.setAttribute(focusableElement, 'aria-label', ariaValue);
         }
         else {
-            this.renderer.setAttribute(this.element.nativeElement, 'aria-label', ariaValue);
+            const inputElement = this.element.nativeElement.querySelector('.k-input-inner');
+            const elementToSetLabel = inputElement ? inputElement : this.element.nativeElement;
+            if (ariaValue) {
+                this.renderer.setAttribute(elementToSetLabel, 'aria-label', ariaValue);
+            }
         }
     }
 }
@@ -10667,7 +10760,7 @@ class FilterMenuContainerComponent {
         /**
          * @hidden
          */
-        this.actionsClass = 'k-actions';
+        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this._templateContext = {};
         this.menuTabbingService = menuTabbingService;
     }
@@ -10789,16 +10882,16 @@ FilterMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                     </ng-container>
                 </ng-container>
                 <div [ngClass]="actionsClass">
-                    <button
-                        #resetButton
-                        type="reset"
-                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
-                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                     <button #filterButton
                         type="submit"
                         class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
                         [disabled]="disabled"
                         (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
+                    <button
+                        #resetButton
+                        type="reset"
+                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                 </div>
             </div>
         </form>
@@ -10835,16 +10928,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     </ng-container>
                 </ng-container>
                 <div [ngClass]="actionsClass">
-                    <button
-                        #resetButton
-                        type="reset"
-                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
-                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                     <button #filterButton
                         type="submit"
                         class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
                         [disabled]="disabled"
                         (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
+                    <button
+                        #resetButton
+                        type="reset"
+                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                 </div>
             </div>
         </form>
@@ -10943,7 +11036,7 @@ FilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 >
             </kendo-grid-filter-menu-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -11181,7 +11274,7 @@ ColumnMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
             </ng-container>
         <div>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
         trigger('state', [
             state('collapsed', style({ display: 'none' })),
             state('expanded', style({ display: 'block' })),
@@ -11276,11 +11369,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the column-menu item for locking and unlocking columns in the Grid. [See example](slug:columnmenu_grid#toc-lock-and-unlock-items).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-lock` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-lock` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html
@@ -11465,11 +11557,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the column-menu item which combines the lock and sticky column functionalities.
- * [See example](slug:columnmenu_grid#toc-set-column-position-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-filter` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-position` component. [See example](slug:columnmenu_grid#toc-set-column-position-item).
  *
  * @example
  * ```html
@@ -11636,7 +11727,7 @@ class ColumnListComponent {
         this.columnChange = new EventEmitter();
         this.autoSync = true;
         this.allowHideAll = false;
-        this.actionsClass = 'k-actions';
+        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this.unlockedCount = 0;
     }
     get className() {
@@ -11775,8 +11866,8 @@ ColumnListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             </label>
         </div>
         <div [ngClass]="actionsClass" *ngIf="!autoSync">
-            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
             <button #applyButton type="button" (keydown.tab)="onTab($event)" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="applyChanges()">{{ applyText }}</button>
+            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
         </div>
     `, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnListComponent, decorators: [{
@@ -11790,8 +11881,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             </label>
         </div>
         <div [ngClass]="actionsClass" *ngIf="!autoSync">
-            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
             <button #applyButton type="button" (keydown.tab)="onTab($event)" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="applyChanges()">{{ applyText }}</button>
+            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
         </div>
     `
                 }]
@@ -11829,11 +11920,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the column-menu item for selecting columns in the Grid. [See example](slug:columnmenu_grid#toc-column-chooser-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-chooser` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-chooser` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html
@@ -11871,7 +11961,7 @@ class ColumnMenuChooserComponent extends ColumnMenuItemBase {
         /**
          * @hidden
          */
-        this.actionsClass = 'k-actions';
+        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this.columnsIcon = columnsIcon;
     }
     get columns() {
@@ -11971,11 +12061,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the column-menu item for editing column filters in the Grid. [See example](slug:columnmenu_grid#toc-filter-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-filter` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-filter` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html
@@ -12012,7 +12101,7 @@ class ColumnMenuFilterComponent extends ColumnMenuItemBase {
         /**
          * @hidden
          */
-        this.actionsClass = 'k-actions';
+        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this.filterIcon = filterIcon;
     }
     /**
@@ -12224,8 +12313,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 /**
  * Represents the column-menu item for sorting Grid columns.
  * [See example](slug:columnmenu_grid#toc-sort-item).
- * The compoenent can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
+ *
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-sort` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
  * the template to the service input of the `kendo-grid-columnmenu-sort` component.
@@ -12391,11 +12482,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 /**
  * Represents the column-menu item for resizing all columns to the minimum possible width so that they fit the widest header or cell content without wrapping.
  * [See example](slug:columnmenu_grid#toc-autosize-all-columns-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the `service` input of the `kendo-grid-columnmenu-autosize-all-columns` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the `service` input of the `kendo-grid-columnmenu-autosize-all-columns` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html
@@ -12840,7 +12930,7 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-tabstrip-tab>
             </kendo-tabstrip>
         </ng-template>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: i16.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { type: i16.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { type: i16.TabTitleDirective, selector: "[kendoTabTitle]" }, { type: i16.TabContentDirective, selector: "[kendoTabContent]" }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: i16.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { type: i16.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { type: i16.TabTitleDirective, selector: "[kendoTabTitle]" }, { type: i16.TabContentDirective, selector: "[kendoTabContent]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -13143,13 +13233,22 @@ class FilterCellOperatorsComponent {
             this.subs.unsubscribe();
         }
     }
+    /**
+     * @hidden
+     */
+    get columnLabel() {
+        const localizationMsg = this.ctx.localization.get('filterCellOperatorLabel') || '';
+        const columnName = this.column.title || this.column.field;
+        return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
+    }
 }
 FilterCellOperatorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterCellOperatorsComponent, deps: [{ token: ContextService }, { token: SizingOptionsService }], target: i0.ɵɵFactoryTarget.Component });
-FilterCellOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterCellOperatorsComponent, selector: "kendo-grid-filter-cell-operators", inputs: { operators: "operators", showButton: "showButton", showOperators: "showOperators", value: "value" }, outputs: { valueChange: "valueChange", clear: "clear" }, host: { properties: { "class.k-filtercell-operator": "this.hostClasses" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: `
+FilterCellOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterCellOperatorsComponent, selector: "kendo-grid-filter-cell-operators", inputs: { operators: "operators", showButton: "showButton", showOperators: "showOperators", value: "value", column: "column" }, outputs: { valueChange: "valueChange", clear: "clear" }, host: { properties: { "class.k-filtercell-operator": "this.hostClasses" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: `
         <kendo-dropdownlist
             #dropdown
             *ngIf="showOperators"
             kendoGridFocusable
+            [attr.aria-label]="columnLabel"
             [data]="operators"
             class="k-dropdown-operator"
             (valueChange)="onChange($event)"
@@ -13182,6 +13281,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             #dropdown
             *ngIf="showOperators"
             kendoGridFocusable
+            [attr.aria-label]="columnLabel"
             [data]="operators"
             class="k-dropdown-operator"
             (valueChange)="onChange($event)"
@@ -13220,6 +13320,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], value: [{
                 type: Input
+            }], column: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], clear: [{
@@ -13255,12 +13357,13 @@ FilterCellWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         <ng-content></ng-content>
         <kendo-grid-filter-cell-operators
             [showOperators]="showOperators"
+            [column]="column"
             [operators]="operators"
             (clear)="onClear()"
             [showButton]="showButton"
             [(value)]="currentOperator">
         </kendo-grid-filter-cell-operators>
-    `, isInline: true, components: [{ type: FilterCellOperatorsComponent, selector: "kendo-grid-filter-cell-operators", inputs: ["operators", "showButton", "showOperators", "value"], outputs: ["valueChange", "clear"] }] });
+    `, isInline: true, components: [{ type: FilterCellOperatorsComponent, selector: "kendo-grid-filter-cell-operators", inputs: ["operators", "showButton", "showOperators", "value", "column"], outputs: ["valueChange", "clear"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterCellWrapperComponent, decorators: [{
             type: Component,
             args: [{
@@ -13269,6 +13372,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <ng-content></ng-content>
         <kendo-grid-filter-cell-operators
             [showOperators]="showOperators"
+            [column]="column"
             [operators]="operators"
             (clear)="onClear()"
             [showButton]="showButton"
@@ -13351,7 +13455,7 @@ StringFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                 [filterDelay]="filterDelay"
                 [ngModel]="currentFilter?.value"></kendo-textbox>
         </kendo-grid-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i3$1.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }], directives: [{ type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i3$1.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }], directives: [{ type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StringFilterCellComponent, decorators: [{
             type: Component,
             args: [{
@@ -13546,7 +13650,7 @@ class BooleanFilterCellComponent extends BooleanFilterComponent {
      * @hidden
      */
     get columnLabel() {
-        const localizationMsg = this.ctx.localization.get('filterInputLabel') || '';
+        const localizationMsg = this.ctx.localization.get('booleanFilterCellLabel') || '';
         const columnName = this.column.title || this.column.field;
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
@@ -15212,7 +15316,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 [logicalSlaveCellsCount]="unlockedColumnsCount"
         ></tr>
     </ng-container>
-    `, isInline: true, components: [{ type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }] });
+    `, isInline: true, components: [{ type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -15789,6 +15893,8 @@ class SelectionCheckboxDirective {
                 const ev = this.selectionService.toggleByIndex(this.itemIndex);
                 ev.ctrlKey = true;
                 ev.shiftKey = false;
+                this.selectionService.aggregateChanges.emit(ev);
+                ev.cellAggregates = this.selectionService.aggregates;
                 this.selectionService.changes.emit(ev);
             });
         }
@@ -16063,7 +16169,7 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 </ng-container>
             </ng-container>
         </ng-container>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i3$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i4$3.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i4$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "valueOf": FieldAccessorPipe } });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i3$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i4$3.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i4$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "valueOf": FieldAccessorPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
             args: [{
@@ -16193,11 +16299,12 @@ class GroupHeaderComponent {
         this.hasDetails = false;
         this.totalColumnsCount = 0;
         this.groups = [];
+        this.groupItemClass = true;
+        this.tableGroupRowClass = true;
         this.isExpanded = false;
         this.caretAltDownIcon = caretAltDownIcon;
         this.caretAltRightIcon = caretAltRightIcon;
-        this.groupItemClass = true;
-        this.tableGroupRowClass = true;
+        this.caretAltLeftIcon = caretAltLeftIcon;
     }
     ngDoCheck() {
         const groupArgs = {
@@ -16248,6 +16355,22 @@ class GroupHeaderComponent {
         const messageKey = this.isExpanded ? 'groupCollapse' : 'groupExpand';
         return this.ctx.localization.get(messageKey);
     }
+    get arrowIcon() {
+        const icon = !this.isExpanded ?
+            !this.ctx.localization.rtl ?
+                'caret-alt-right' :
+                'caret-alt-left' :
+            'caret-alt-down';
+        return icon;
+    }
+    get arrowSVGIcon() {
+        const icon = !this.isExpanded ?
+            !this.ctx.localization.rtl ?
+                this.caretAltRightIcon :
+                this.caretAltLeftIcon :
+            this.caretAltDownIcon;
+        return icon;
+    }
 }
 GroupHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupHeaderComponent, deps: [{ token: GroupsService }, { token: GroupInfoService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
 GroupHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GroupHeaderComponent, selector: "[kendoGridGroupHeader]", inputs: { rowIndex: "rowIndex", logicalRowIndex: "logicalRowIndex", item: "item", skipGroupDecoration: "skipGroupDecoration", hasDetails: "hasDetails", totalColumnsCount: "totalColumnsCount", hasGroupHeaderColumn: "hasGroupHeaderColumn", groupHeaderColumns: "groupHeaderColumns", columns: "columns", groups: "groups" }, host: { properties: { "class.k-grouping-row": "this.groupItemClass", "class.k-table-group-row": "this.tableGroupRowClass" } }, ngImport: i0, template: `
@@ -16274,8 +16397,8 @@ GroupHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                         [attr.title]="groupButtonTitle"
                         [attr.aria-label]="groupButtonTitle">
                         <kendo-icon-wrapper
-                            [name]="isExpanded ? 'caret-alt-down' : 'caret-alt-right'"
-                            [svgIcon]="isExpanded ? caretAltDownIcon : caretAltRightIcon"></kendo-icon-wrapper>
+                            [name]="arrowIcon"
+                            [svgIcon]="arrowSVGIcon"></kendo-icon-wrapper>
                     </a>
                     <ng-container *ngIf="!groupHeaderTemplate(item)">
                     {{groupTitle(item)}}: {{item.data | valueOf:"value": formatForGroup(item)}}
@@ -16319,7 +16442,7 @@ GroupHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 </ng-template>
             </td>
         </ng-container>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "valueOf": FieldAccessorPipe } });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "valueOf": FieldAccessorPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -16348,8 +16471,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         [attr.title]="groupButtonTitle"
                         [attr.aria-label]="groupButtonTitle">
                         <kendo-icon-wrapper
-                            [name]="isExpanded ? 'caret-alt-down' : 'caret-alt-right'"
-                            [svgIcon]="isExpanded ? caretAltDownIcon : caretAltRightIcon"></kendo-icon-wrapper>
+                            [name]="arrowIcon"
+                            [svgIcon]="arrowSVGIcon"></kendo-icon-wrapper>
                     </a>
                     <ng-container *ngIf="!groupHeaderTemplate(item)">
                     {{groupTitle(item)}}: {{item.data | valueOf:"value": formatForGroup(item)}}
@@ -16990,7 +17113,7 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
         </tr>
     </ng-container>
     <kendo-resize-sensor *ngIf="rowSticky" (resize)="resizeHandler()"></kendo-resize-sensor>
-    `, isInline: true, components: [{ type: CellComponent, selector: "[kendoGridCell]", inputs: ["column", "columnIndex", "isNew", "isLoading", "isVirtual", "loadingTemplate", "rowIndex", "dataItem"] }, { type: GroupHeaderComponent, selector: "[kendoGridGroupHeader]", inputs: ["rowIndex", "logicalRowIndex", "item", "skipGroupDecoration", "hasDetails", "totalColumnsCount", "hasGroupHeaderColumn", "groupHeaderColumns", "columns", "groups"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i1$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: CellComponent, selector: "[kendoGridCell]", inputs: ["column", "columnIndex", "isNew", "isLoading", "isVirtual", "loadingTemplate", "rowIndex", "dataItem"] }, { type: GroupHeaderComponent, selector: "[kendoGridGroupHeader]", inputs: ["rowIndex", "logicalRowIndex", "item", "skipGroupDecoration", "hasDetails", "totalColumnsCount", "hasGroupHeaderColumn", "groupHeaderColumns", "columns", "groups"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i1$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableBodyComponent, decorators: [{
             type: Component,
             args: [{
@@ -18050,7 +18173,6 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 [size]="size"
                 [style.width.px]="lockedWidth">
                 <colgroup kendoGridColGroup
-                    role="presentation"
                     [groups]="groups"
                     [columns]="$any(lockedLeafColumns)"
                     [detailTemplate]="detailTemplate"
@@ -18082,11 +18204,12 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             <div [style.height.px]="totalHeight"></div>
         </div>
     </div>
-    <div #container
-               class="k-grid-content k-virtual-content"
-               role="presentation" tabindex="-1"
-               [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
-               [lockedWidth]="lockedWidth + 1">
+    <div 
+        #container
+        class="k-grid-content k-virtual-content"
+        [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
+        [lockedWidth]="lockedWidth + 1"
+    >
         <div role="presentation" class="k-grid-table-wrap">
             <table
                 [style.width.px]="nonLockedWidth"
@@ -18097,7 +18220,6 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 [size]="size"
                 role="presentation">
                 <colgroup kendoGridColGroup
-                    role="presentation"
                     [groups]="isLocked ? [] : groups"
                     [columns]="$any(nonLockedColumnsToRender)"
                     [detailTemplate]="detailTemplate"
@@ -18169,7 +18291,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [size]="size"
                 [style.width.px]="lockedWidth">
                 <colgroup kendoGridColGroup
-                    role="presentation"
                     [groups]="groups"
                     [columns]="$any(lockedLeafColumns)"
                     [detailTemplate]="detailTemplate"
@@ -18201,11 +18322,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <div [style.height.px]="totalHeight"></div>
         </div>
     </div>
-    <div #container
-               class="k-grid-content k-virtual-content"
-               role="presentation" tabindex="-1"
-               [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
-               [lockedWidth]="lockedWidth + 1">
+    <div 
+        #container
+        class="k-grid-content k-virtual-content"
+        [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
+        [lockedWidth]="lockedWidth + 1"
+    >
         <div role="presentation" class="k-grid-table-wrap">
             <table
                 [style.width.px]="nonLockedWidth"
@@ -18216,7 +18338,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [size]="size"
                 role="presentation">
                 <colgroup kendoGridColGroup
-                    role="presentation"
                     [groups]="isLocked ? [] : groups"
                     [columns]="$any(nonLockedColumnsToRender)"
                     [detailTemplate]="detailTemplate"
@@ -18527,13 +18648,231 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+;
+/**
+ * @hidden
+ */
+class StatusBarComponent {
+    constructor(ctx, selectionService, dataChanges, columnInfoService, cellSelectionService) {
+        this.ctx = ctx;
+        this.selectionService = selectionService;
+        this.dataChanges = dataChanges;
+        this.columnInfoService = columnInfoService;
+        this.cellSelectionService = cellSelectionService;
+        this.hostClasses = true;
+        this.groupedAggregates = { dates: [], numbers: [], booleans: [] };
+        this.aggregates = {
+            sum: null,
+            average: null,
+            min: null,
+            max: null,
+            count: null,
+            isTrue: null,
+            isFalse: null,
+            earliest: null,
+            latest: null
+        };
+        this.subs = new Subscription();
+        this.selectedItems = [];
+    }
+    get isStatusBarTemplate() {
+        return this.statusBarTemplate ? '' : 'none';
+    }
+    ngOnInit() {
+        if (this.selectableSettings.cellAggregates) {
+            this.data = this.dataChanges.data ? this.dataChanges.data : this.ctx.grid.data;
+            this.selectService = this.isRowSelection ? this.selectionService : this.cellSelectionService;
+            if (this.isAggregateIncluded('count')) {
+                this.aggregates['count'] = 0;
+            }
+            const selectionDirective = this.ctx.grid.selectionDirective;
+            if (selectionDirective && !this.isRowSelection) {
+                this.selectedItems = selectionDirective.selectedKeys;
+            }
+            this.subs.add(this.selectService.aggregateChanges.subscribe((selectionArgs) => this.onSelectionChange(selectionArgs)));
+        }
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    onSelectionChange(selectionArgs) {
+        this.handleSelectedItems(selectionArgs);
+        this.nullifyAggregates();
+        this.handleAggregateChanges();
+        this.selectService.aggregates = this.aggregates;
+    }
+    handleAggregateChanges() {
+        const lockedColumns = this.columnInfoService.lockedLeafColumns.toArray();
+        const nonLockedColumns = this.columnInfoService.nonLockedLeafColumns.toArray();
+        const selectedItemsLength = this.selectedItems.length;
+        const columns = [...lockedColumns, ...nonLockedColumns];
+        const fields = columns.map(col => col.field);
+        if (this.isAggregateIncluded('count')) {
+            this.aggregates['count'] = this.isRowSelection ? (selectedItemsLength * columns.length) : selectedItemsLength;
+        }
+        this.selectedItems.forEach((item) => {
+            if (this.isRowSelection) {
+                fields.forEach((field) => {
+                    const cellValue = item.dataItem;
+                    if (cellValue && cellValue.hasOwnProperty(field)) {
+                        const cellValue = item.dataItem[field];
+                        this.groupAggregates(cellValue);
+                    }
+                });
+            }
+            else if (this.selectService.options.cell) {
+                const itemKey = this.data[item.itemKey];
+                const field = fields[item.columnKey];
+                if (itemKey && itemKey.hasOwnProperty(field)) {
+                    const cellValue = itemKey[fields[item.columnKey]];
+                    this.groupAggregates(cellValue);
+                }
+            }
+        });
+        this.calculateAggregates();
+    }
+    groupAggregates(aggregate) {
+        if (typeof aggregate === 'number') {
+            this.groupedAggregates.numbers.push(aggregate);
+        }
+        else if (typeof aggregate === 'boolean') {
+            this.groupedAggregates.booleans.push(aggregate);
+        }
+        else if (aggregate instanceof Date) {
+            this.groupedAggregates.dates.push(aggregate);
+        }
+    }
+    calculateAggregates() {
+        if (this.groupedAggregates.numbers.length > 0) {
+            if (this.isAggregateIncluded('min')) {
+                this.aggregates['min'] = Math.min(...this.groupedAggregates.numbers);
+            }
+            if (this.isAggregateIncluded('max')) {
+                this.aggregates['max'] = Math.max(...this.groupedAggregates.numbers);
+            }
+            if (this.isAggregateIncluded('sum')) {
+                this.aggregates['sum'] = this.groupedAggregates.numbers.reduce((acc, curr) => acc += curr, 0);
+            }
+            if (this.isAggregateIncluded('average')) {
+                this.aggregates['average'] = this.aggregates['sum'] / this.groupedAggregates.numbers.length;
+            }
+        }
+        if (this.groupedAggregates.booleans.length > 0) {
+            if (this.isAggregateIncluded('isTrue')) {
+                const isTrueCount = this.groupedAggregates.booleans.filter(bool => bool).length;
+                this.aggregates['isTrue'] = isTrueCount > 0 ? isTrueCount : null;
+            }
+            if (this.isAggregateIncluded('isFalse')) {
+                const isFalseCount = this.groupedAggregates.booleans.length - this.aggregates['isTrue'];
+                this.aggregates['isFalse'] = isFalseCount > 0 ? isFalseCount : null;
+            }
+        }
+        if (this.groupedAggregates.dates.length > 0) {
+            if (this.isAggregateIncluded('earliest')) {
+                this.aggregates['earliest'] = new Date(Math.min(...this.groupedAggregates.dates));
+            }
+            if (this.isAggregateIncluded('latest')) {
+                this.aggregates['latest'] = new Date(Math.max(...this.groupedAggregates.dates));
+            }
+        }
+    }
+    handleSelectedItems(selectionArgs) {
+        const rowOrCellSelect = `${this.isRowSelection ? 'selectedRows' : 'selectedCells'}`;
+        const rowOrCellDeselect = `${this.isRowSelection ? 'deselectedRows' : 'deselectedCells'}`;
+        const selectedItems = selectionArgs[rowOrCellSelect];
+        const deselectedItems = selectionArgs[rowOrCellDeselect];
+        if (!this.isRowSelection) {
+            // Needed when we have column groups with cell selection, the deselected items are duplicated
+            deselectedItems.forEach((item, index) => {
+                if (index + 1 < deselectedItems.length) {
+                    if (item.itemKey === deselectedItems[index + 1].itemKey
+                        && item.columnKey === deselectedItems[index + 1].columnKey) {
+                        deselectedItems.splice(index, 1);
+                    }
+                }
+            });
+        }
+        if (selectedItems.length > 0) {
+            selectedItems.forEach((item) => {
+                this.selectedItems = [...this.selectedItems, item];
+            });
+        }
+        if (deselectedItems.length > 0) {
+            if (this.isRowSelection) {
+                deselectedItems.forEach((row) => {
+                    this.selectedItems = this.selectedItems.filter((elem) => elem.dataItem !== row.dataItem);
+                });
+            }
+            else {
+                deselectedItems.forEach((cell) => {
+                    const index = this.selectedItems.findIndex((elem) => elem.itemKey === cell.itemKey && elem.columnKey === cell.columnKey);
+                    this.selectedItems.splice(index, 1);
+                });
+            }
+        }
+    }
+    isAggregateIncluded(aggregate) {
+        const { cellAggregates } = this.selectService.options;
+        if (typeof cellAggregates !== 'boolean') {
+            return cellAggregates.includes(aggregate);
+        }
+        return true;
+    }
+    nullifyAggregates() {
+        this.groupedAggregates = { dates: [], numbers: [], booleans: [] };
+        this.aggregates['count'] = null;
+        this.aggregates['sum'] = this.aggregates['average'] = null;
+        this.aggregates['max'] = this.aggregates['min'] = null;
+        this.aggregates['isFalse'] = this.aggregates['isTrue'] = null;
+        this.aggregates['earliest'] = this.aggregates['latest'] = null;
+    }
+    get isRowSelection() {
+        return typeof this.selectableSettings === 'boolean' || !this.selectableSettings.cell;
+    }
+}
+StatusBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StatusBarComponent, deps: [{ token: ContextService }, { token: SelectionService }, { token: LocalDataChangesService }, { token: ColumnInfoService }, { token: CellSelectionService }], target: i0.ɵɵFactoryTarget.Component });
+StatusBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: StatusBarComponent, selector: "kendo-grid-status-bar", inputs: { selectableSettings: "selectableSettings", statusBarTemplate: "statusBarTemplate" }, host: { properties: { "class.k-selection-aggregates": "this.hostClasses", "class.k-grid-selection-aggregates": "this.hostClasses", "style.display": "this.isStatusBarTemplate" } }, ngImport: i0, template: `
+        <ng-template
+            *ngIf="statusBarTemplate"
+            [ngTemplateOutlet]="statusBarTemplate?.templateRef"
+            [ngTemplateOutletContext]="{ aggregates: aggregates }">
+        </ng-template>
+    `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StatusBarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-status-bar',
+                    template: `
+        <ng-template
+            *ngIf="statusBarTemplate"
+            [ngTemplateOutlet]="statusBarTemplate?.templateRef"
+            [ngTemplateOutletContext]="{ aggregates: aggregates }">
+        </ng-template>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: SelectionService }, { type: LocalDataChangesService }, { type: ColumnInfoService }, { type: CellSelectionService }]; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-selection-aggregates']
+            }, {
+                type: HostBinding,
+                args: ['class.k-grid-selection-aggregates']
+            }], isStatusBarTemplate: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], selectableSettings: [{
+                type: Input
+            }], statusBarTemplate: [{
+                type: Input
+            }] } });
+
 /**
  * @hidden
  */
 class GridMessages extends ComponentMessages {
 }
 GridMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-GridMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GridMessages, selector: "kendo-grid-messages-base", inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItems: "pagerItems", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", selectPage: "selectPage", filter: "filter", filterInputLabel: "filterInputLabel", filterMenuTitle: "filterMenuTitle", filterMenuOperatorsDropDownLabel: "filterMenuOperatorsDropDownLabel", filterMenuLogicDropDownLabel: "filterMenuLogicDropDownLabel", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", gridLabel: "gridLabel", columnMenu: "columnMenu", setColumnPosition: "setColumnPosition", columns: "columns", lock: "lock", unlock: "unlock", stick: "stick", unstick: "unstick", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", autosizeThisColumn: "autosizeThisColumn", autosizeAllColumns: "autosizeAllColumns", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset", detailExpand: "detailExpand", detailCollapse: "detailCollapse", filterDateToday: "filterDateToday", filterDateToggle: "filterDateToggle", filterNumericDecrement: "filterNumericDecrement", filterNumericIncrement: "filterNumericIncrement", selectionCheckboxLabel: "selectionCheckboxLabel", selectAllCheckboxLabel: "selectAllCheckboxLabel", groupCollapse: "groupCollapse", groupExpand: "groupExpand", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", groupPanelLabel: "groupPanelLabel", dragRowHandleLabel: "dragRowHandleLabel", columnMenuFilterTabTitle: "columnMenuFilterTabTitle", columnMenuGeneralTabTitle: "columnMenuGeneralTabTitle", columnMenuColumnsTabTitle: "columnMenuColumnsTabTitle" }, usesInheritance: true, ngImport: i0 });
+GridMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GridMessages, selector: "kendo-grid-messages-base", inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItems: "pagerItems", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", selectPage: "selectPage", filter: "filter", filterInputLabel: "filterInputLabel", filterMenuTitle: "filterMenuTitle", filterMenuOperatorsDropDownLabel: "filterMenuOperatorsDropDownLabel", filterMenuLogicDropDownLabel: "filterMenuLogicDropDownLabel", filterCellOperatorLabel: "filterCellOperatorLabel", booleanFilterCellLabel: "booleanFilterCellLabel", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", gridLabel: "gridLabel", columnMenu: "columnMenu", setColumnPosition: "setColumnPosition", columns: "columns", lock: "lock", unlock: "unlock", stick: "stick", unstick: "unstick", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", autosizeThisColumn: "autosizeThisColumn", autosizeAllColumns: "autosizeAllColumns", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset", detailExpand: "detailExpand", detailCollapse: "detailCollapse", filterDateToday: "filterDateToday", filterDateToggle: "filterDateToggle", filterNumericDecrement: "filterNumericDecrement", filterNumericIncrement: "filterNumericIncrement", selectionCheckboxLabel: "selectionCheckboxLabel", selectAllCheckboxLabel: "selectAllCheckboxLabel", groupCollapse: "groupCollapse", groupExpand: "groupExpand", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", groupPanelLabel: "groupPanelLabel", dragRowHandleLabel: "dragRowHandleLabel", columnMenuFilterTabTitle: "columnMenuFilterTabTitle", columnMenuGeneralTabTitle: "columnMenuGeneralTabTitle", columnMenuColumnsTabTitle: "columnMenuColumnsTabTitle" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridMessages, decorators: [{
             type: Directive,
             args: [{
@@ -18576,6 +18915,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], filterMenuLogicDropDownLabel: [{
                 type: Input
+            }], filterCellOperatorLabel: [{
+                type: Input
+            }], booleanFilterCellLabel: [{
+                type: Input
             }], filterEqOperator: [{
                 type: Input
             }], filterNotEqOperator: [{
@@ -19120,6 +19463,12 @@ class GridComponent {
     get group() {
         return this._group;
     }
+    /**
+     * @hidden
+     */
+    get showStatusBar() {
+        return !!(this.selectable);
+    }
     /**
      * @hidden
      */
@@ -19353,6 +19702,15 @@ class GridComponent {
     set loadingTemplate(loadingTemplate) {
         this._loadingTemplate = loadingTemplate;
     }
+    get statusBarTemplate() {
+        if (this._statusBarTemplate) {
+            return this._statusBarTemplate;
+        }
+        return this.statusBarTemplateChildren ? this.statusBarTemplateChildren.first : undefined;
+    }
+    set statusBarTemplate(statusBarTemplate) {
+        this._statusBarTemplate = statusBarTemplate;
+    }
     get noRecordsTemplate() {
         if (this._customNoRecordsTemplate) {
             return this._customNoRecordsTemplate;
@@ -19402,7 +19760,7 @@ class GridComponent {
         return this.groupable && this.groupable.showFooter;
     }
     get ariaRowCount() {
-        return this.totalColumnLevels + 1 + this.view.total;
+        return this.totalColumnLevels + 1 + this.view.total + (hasFilterRow(this.filterable) ? 1 : 0);
     }
     get ariaColCount() {
         return this.columnsContainer.leafColumnsToRender.length;
@@ -20614,7 +20972,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         ContextService,
         SizingOptionsService,
         RowReorderService
-    ], queries: [{ propertyName: "columns", predicate: ColumnBase }, { propertyName: "detailTemplateChildren", predicate: DetailTemplateDirective }, { propertyName: "cellLoadingTemplateChildren", predicate: CellLoadingTemplateDirective }, { propertyName: "loadingTemplateChildren", predicate: LoadingTemplateDirective }, { propertyName: "noRecordsTemplateChildren", predicate: NoRecordsTemplateDirective }, { propertyName: "pagerTemplateChildren", predicate: PagerTemplateDirective }, { propertyName: "toolbarTemplateChildren", predicate: ToolbarTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], viewQueries: [{ propertyName: "lockedHeader", first: true, predicate: ["lockedHeader"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "ariaRoot", first: true, predicate: ["ariaRoot"], descendants: true, static: true }, { propertyName: "dragTargetContainer", first: true, predicate: DragTargetContainerDirective, descendants: true }, { propertyName: "dropTargetContainer", first: true, predicate: DropTargetContainerDirective, descendants: true }, { propertyName: "footer", predicate: ["footer"], descendants: true }], exportAs: ["kendoGrid"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "columns", predicate: ColumnBase }, { propertyName: "detailTemplateChildren", predicate: DetailTemplateDirective }, { propertyName: "cellLoadingTemplateChildren", predicate: CellLoadingTemplateDirective }, { propertyName: "loadingTemplateChildren", predicate: LoadingTemplateDirective }, { propertyName: "statusBarTemplateChildren", predicate: StatusBarTemplateDirective }, { propertyName: "noRecordsTemplateChildren", predicate: NoRecordsTemplateDirective }, { propertyName: "pagerTemplateChildren", predicate: PagerTemplateDirective }, { propertyName: "toolbarTemplateChildren", predicate: ToolbarTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], viewQueries: [{ propertyName: "lockedHeader", first: true, predicate: ["lockedHeader"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "ariaRoot", first: true, predicate: ["ariaRoot"], descendants: true, static: true }, { propertyName: "dragTargetContainer", first: true, predicate: DragTargetContainerDirective, descendants: true }, { propertyName: "dropTargetContainer", first: true, predicate: DropTargetContainerDirective, descendants: true }, { propertyName: "footer", predicate: ["footer"], descendants: true }], exportAs: ["kendoGrid"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoGridLocalizedMessages
             i18n-groupPanelEmpty="kendo.grid.groupPanelEmpty|The label visible in the Grid group panel when it is empty"
             groupPanelEmpty="Drag a column header and drop it here to group by that column"
@@ -20663,6 +21021,12 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
 
             i18n-filterMenuOperatorsDropDownLabel="kendo.grid.filterMenuOperatorsDropDownLabel|The label of the filter menu operators dropdown"
             filterMenuOperatorsDropDownLabel="{{ '{columnName} Filter Operators' }}"
+            
+            i18n-filterCellOperatorLabel="kendo.grid.filterCellOperatorLabel|The label of the filter cell operators dropdown"
+            filterCellOperatorLabel="{{ 'Filter cell operators for {columnName}' }}"
+
+            i18n-booleanFilterCellLabel="kendo.grid.booleanFilterCellLabel|The label of the boolean filter cell dropdown"
+            booleanFilterCellLabel="{{ 'Boolean filter cell for {columnName}' }}"
 
             i18n-filterMenuLogicDropDownLabel="kendo.grid.filterMenuLogicDropDownLabel|The label of the filter menu logic dropdown"
             filterMenuLogicDropDownLabel="{{ '{columnName} Filter Logic' }}"
@@ -20862,285 +21226,286 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             [navigable]="navigation.toolbarEnabled"
             [attr.aria-controls]="ariaRootId"
             position="top"></kendo-grid-toolbar>
-        <kendo-pager
-            *ngIf="showTopPager"
-            [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
-            [attr.role]="navigation.pagerEnabled ? 'application' : undefined"
-            class="k-grid-pager-top k-pager"
-            [template]="pagerTemplate"
-            [pageSize]="pageSize"
-            [total]="view.total"
-            [skip]="skip"
-            [size]="size"
-            [options]="pageable"
-            (pageChange)="notifyPageChange('pager', $event)">
-        </kendo-pager>
-        <kendo-grid-group-panel
-            *ngIf="showGroupPanel"
-            [navigable]="navigation.toolbarEnabled"
-            [text]="groupableEmptyText"
-            [groups]="group"
-            role="toolbar"
-            [attr.aria-label]="messageFor('groupPanelLabel')"
-            [attr.aria-controls]="ariaRootId"
-            (change)="groupChange.emit($event)">
-        </kendo-grid-group-panel>
-        <div #ariaRoot
-            class="k-grid-aria-root"
-            role="grid"
-            [id]="ariaRootId"
-            [attr.aria-label]="ariaLabel"
-            [attr.aria-rowcount]="ariaRowCount"
-            [attr.aria-colcount]="ariaColCount">
-        <ng-container *ngIf="isScrollable">
-            <div *ngIf="!hideHeader"
-                class="k-grid-header"
-                role="presentation"
-                [style.padding]="headerPadding">
-                <div *ngIf="isLocked"
-                     #lockedHeader
-                     role="presentation"
-                     class="k-grid-header-locked"
-                     [style.width.px]="lockedWidth">
-                    <table
-                        [locked]="true"
+            <kendo-pager
+                *ngIf="showTopPager"
+                [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
+                [attr.role]="navigation.pagerEnabled ? 'application' : undefined"
+                class="k-grid-pager-top k-pager"
+                [template]="pagerTemplate"
+                [pageSize]="pageSize"
+                [total]="view.total"
+                [skip]="skip"
+                [size]="size"
+                [options]="pageable"
+                (pageChange)="notifyPageChange('pager', $event)">
+            </kendo-pager>
+            <kendo-grid-group-panel
+                *ngIf="showGroupPanel"
+                [navigable]="navigation.toolbarEnabled"
+                [text]="groupableEmptyText"
+                [groups]="group"
+                role="toolbar"
+                [attr.aria-label]="messageFor('groupPanelLabel')"
+                [attr.aria-controls]="ariaRootId"
+                (change)="groupChange.emit($event)">
+            </kendo-grid-group-panel>
+            <div #ariaRoot
+                class="k-grid-aria-root"
+                role="grid"
+                [id]="ariaRootId"
+                [attr.aria-label]="ariaLabel"
+                [attr.aria-rowcount]="ariaRowCount"
+                [attr.aria-colcount]="ariaColCount">
+            <ng-container *ngIf="isScrollable">
+                <div *ngIf="!hideHeader"
+                    class="k-grid-header"
+                    role="presentation"
+                    [style.padding]="headerPadding">
+                    <div *ngIf="isLocked"
+                        #lockedHeader
                         role="presentation"
-                        class="k-grid-header-table"
-                        [style.width.px]="lockedWidth"
-                        kendoGridTable
-                        [size]="size">
-                        <colgroup kendoGridColGroup
+                        class="k-grid-header-locked"
+                        [style.width.px]="lockedWidth">
+                        <table
+                            [locked]="true"
                             role="presentation"
-                            [columns]="$any(lockedLeafColumns)"
-                            [groups]="group"
-                            [detailTemplate]="detailTemplate">
-                        </colgroup>
-                        <thead kendoGridHeader
-                            role="rowgroup"
-                            [resizable]="resizable"
-                            [scrollable]="true"
-                            [columns]="$any(lockedColumns)"
-                            [totalColumnLevels]="totalColumnLevels"
-                            [sort]="sort"
-                            [groups]="group"
-                            [filter]="filter"
-                            [filterable]="filterable"
-                            [groupable]="showGroupPanel"
-                            [reorderable]="reorderable"
-                            [sortable]="sortable"
-                            [columnMenu]="columnMenuOptions"
-                            [columnMenuTemplate]="columnMenuTemplate"
-                            [totalColumnsCount]="leafColumns.length"
-                            [detailTemplate]="detailTemplate"
-                            [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
-                        </thead>
-                    </table>
-                </div>
-                <div #header class="k-grid-header-wrap" role="presentation" data-scrollable
-                    [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
-                    [lockedWidth]="lockedWidth + scrollbarWidth + 2">
-                    <table
-                        role="presentation"
-                        class="k-grid-header-table"
-                        [style.width.px]="nonLockedWidth"
-                        [virtualColumns]="virtualColumns"
-                        kendoGridTable
-                        [size]="size">
-                        <colgroup kendoGridColGroup
+                            class="k-grid-header-table"
+                            [style.width.px]="lockedWidth"
+                            kendoGridTable
+                            [size]="size">
+                            <colgroup kendoGridColGroup
+                                [columns]="$any(lockedLeafColumns)"
+                                [groups]="group"
+                                [detailTemplate]="detailTemplate">
+                            </colgroup>
+                            <thead kendoGridHeader
+                                role="rowgroup"
+                                [resizable]="resizable"
+                                [scrollable]="true"
+                                [columns]="$any(lockedColumns)"
+                                [totalColumnLevels]="totalColumnLevels"
+                                [sort]="sort"
+                                [groups]="group"
+                                [filter]="filter"
+                                [filterable]="filterable"
+                                [groupable]="showGroupPanel"
+                                [reorderable]="reorderable"
+                                [sortable]="sortable"
+                                [columnMenu]="columnMenuOptions"
+                                [columnMenuTemplate]="columnMenuTemplate"
+                                [totalColumnsCount]="leafColumns.length"
+                                [detailTemplate]="detailTemplate"
+                                [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
+                            </thead>
+                        </table>
+                    </div>
+                    <div #header class="k-grid-header-wrap" role="presentation" data-scrollable
+                        [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
+                        [lockedWidth]="lockedWidth + scrollbarWidth + 2">
+                        <table
                             role="presentation"
-                            [columns]="headerLeafColumns"
-                            [groups]="isLocked ? [] : group"
-                            [detailTemplate]="detailTemplate">
-                        </colgroup>
-                        <thead kendoGridHeader
-                            [resizable]="resizable"
-                            role="rowgroup"
-                            [scrollable]="true"
-                            [columns]="headerColumns"
-                            [totalColumnLevels]="totalColumnLevels"
-                            [sort]="sort"
-                            [filter]="filter"
-                            [filterable]="filterable"
-                            [groupable]="showGroupPanel"
-                            [reorderable]="reorderable"
-                            [groups]="isLocked ? [] : group"
-                            [sortable]="sortable"
-                            [columnMenu]="columnMenuOptions"
-                            [columnMenuTemplate]="columnMenuTemplate"
-                            [lockedColumnsCount]="lockedLeafColumns.length"
-                            [totalColumnsCount]="leafColumns.length"
-                            [detailTemplate]="detailTemplate"
-                            [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
-                        </thead>
-                    </table>
-                    <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
-                        <div [style.width.px]="columnsContainer.unlockedWidth"></div>
+                            class="k-grid-header-table"
+                            [style.width.px]="nonLockedWidth"
+                            [virtualColumns]="virtualColumns"
+                            kendoGridTable
+                            [size]="size">
+                            <colgroup kendoGridColGroup
+                                [columns]="headerLeafColumns"
+                                [groups]="isLocked ? [] : group"
+                                [detailTemplate]="detailTemplate">
+                            </colgroup>
+                            <thead kendoGridHeader
+                                [resizable]="resizable"
+                                role="rowgroup"
+                                [scrollable]="true"
+                                [columns]="headerColumns"
+                                [totalColumnLevels]="totalColumnLevels"
+                                [sort]="sort"
+                                [filter]="filter"
+                                [filterable]="filterable"
+                                [groupable]="showGroupPanel"
+                                [reorderable]="reorderable"
+                                [groups]="isLocked ? [] : group"
+                                [sortable]="sortable"
+                                [columnMenu]="columnMenuOptions"
+                                [columnMenuTemplate]="columnMenuTemplate"
+                                [lockedColumnsCount]="lockedLeafColumns.length"
+                                [totalColumnsCount]="leafColumns.length"
+                                [detailTemplate]="detailTemplate"
+                                [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
+                            </thead>
+                        </table>
+                        <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
+                            <div [style.width.px]="columnsContainer.unlockedWidth"></div>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <kendo-grid-list
-                kendoDragTargetContainer
-                kendoDropTargetContainer
-                mode="manual"
-                [dragDisabled]="!rowReorderable"
-                [dropDisabled]="!rowReorderable"
-                [dragTargetFilter]="getDefaultSelectors('dragTarget')"
-                [dropTargetFilter]="getDefaultSelectors('dropTarget')"
-                [dragHandle]="getDefaultSelectors('handle')"
-                [hint]="{hintTemplate: defaultHint}"
-                (press)="handleReorderEvents($event, 'press')"
-                (dragStart)="handleReorderEvents($event, 'dragStart')"
-                (drag)="handleReorderEvents($event, 'drag')"
-                (dragEnter)="handleReorderEvents($event, 'dragEnter')"
-                (dragLeave)="handleReorderEvents($event, 'dragLeave')"
-                (dragEnd)="handleReorderEvents($event, 'dragEnd')"
-                (drop)="handleReorderEvents($event, 'drop')"
-                [dragData]="gridData"
-                [data]="$any(view)"
-                [rowHeight]="rowHeight"
-                [detailRowHeight]="detailRowHeight"
-                [total]="totalCount"
-                [take]="pageSize"
-                [groups]="group"
-                [groupable]="groupable"
-                [skip]="skip"
-                [trackBy]="trackBy"
-                [columns]="columnsContainer"
-                [selectable]="selectable"
-                [filterable]="filterable"
-                [detailTemplate]="detailTemplate"
-                [noRecordsTemplate]="noRecordsTemplate"
-                [size]="size"
-                (pageChange)="notifyPageChange('list', $event)"
-                [rowClass]="rowClass"
-                [rowSticky]="rowSticky"
-                [loading]="loading"
-                [isVirtual]="isVirtual"
-                [cellLoadingTemplate]="cellLoadingTemplate?.templateRef"
-                [loadingTemplate]="loadingTemplate?.templateRef"
-                [virtualColumns]="virtualColumns"
-                (scrollBottom)="notifyScrollBottom()"
-                (contentScroll)="contentScroll.emit($event)"
-                kendoDraggable
-                kendoGridSelectionMarquee
-                [enableDrag]="marqueeSelection"
-                [sort]="sort"
-                >
-            </kendo-grid-list>
-            <div
-                *ngIf="showFooter"
-                class="k-grid-footer"
-                [style.padding]="headerPadding">
-                <div
-                    *ngIf="lockedLeafColumns.length"
-                    class="k-grid-footer-locked"
-                    [style.width.px]="lockedWidth">
-                    <table
-                        role="presentation"
-                        class="k-grid-footer-table"
-                        [locked]="true"
-                        [style.width.px]="lockedWidth"
-                        kendoGridTable
-                        [size]="size">
-                        <colgroup kendoGridColGroup
-                            [columns]="$any(lockedLeafColumns)"
-                            [groups]="group"
-                            [detailTemplate]="detailTemplate">
-                        </colgroup>
-                        <tfoot kendoGridFooter
-                            [scrollable]="true"
-                            [groups]="group"
-                            [columns]="$any(lockedLeafColumns)"
-                            [detailTemplate]="detailTemplate"
-                            [logicalRowIndex]="ariaRowCount">
-                        </tfoot>
-                    </table>
-                </div>
-                <div #footer
-                    class="k-grid-footer-wrap" data-scrollable
-                    [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
-                    [lockedWidth]="lockedWidth + scrollbarWidth + 3">
-                    <table
-                        role="presentation"
-                        class="k-grid-footer-table"
-                        [style.width.px]="nonLockedWidth"
-                        kendoGridTable
-                        [size]="size">
-                        <colgroup kendoGridColGroup
-                            [columns]="$any(nonLockedLeafColumns)"
-                            [groups]="isLocked ? [] : group"
-                            [detailTemplate]="detailTemplate">
-                        </colgroup>
-                        <tfoot kendoGridFooter
-                            [logicalRowIndex]="ariaRowCount"
-                            [scrollable]="true"
-                            [groups]="isLocked ? [] : group"
-                            [columns]="$any(nonLockedLeafColumns)"
-                            [lockedColumnsCount]="lockedLeafColumns.length"
-                            [detailTemplate]="detailTemplate">
-                        </tfoot>
-                    </table>
-                </div>
-            </div>
-        </ng-container>
-        <ng-container *ngIf="!isScrollable">
-            <table
-                [style.table-layout]="resizable ? 'fixed' : null"
-                kendoGridTable
-                [size]="size">
-                <colgroup kendoGridColGroup
-                    [columns]="$any(leafColumns)"
-                    [groups]="group"
-                    [detailTemplate]="detailTemplate">
-                </colgroup>
-                <thead kendoGridHeader
-                    *ngIf="!hideHeader"
-                    [resizable]="resizable"
-                    [scrollable]="false"
-                    [columns]="$any(visibleColumns)"
-                    [totalColumnLevels]="totalColumnLevels"
-                    [groups]="group"
-                    [groupable]="showGroupPanel"
-                    [reorderable]="reorderable"
-                    [sort]="sort"
-                    [sortable]="sortable"
-                    [filter]="filter"
-                    [filterable]="filterable"
-                    [columnMenu]="columnMenuOptions"
-                    [columnMenuTemplate]="columnMenuTemplate"
-                    [detailTemplate]="detailTemplate"
-                    [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
-                </thead>
-                <tbody kendoGridTableBody
-                    [isLoading]="loading"
-                    [groups]="group"
+                <kendo-grid-list
+                    kendoDragTargetContainer
+                    kendoDropTargetContainer
+                    mode="manual"
+                    [dragDisabled]="!rowReorderable"
+                    [dropDisabled]="!rowReorderable"
+                    [dragTargetFilter]="getDefaultSelectors('dragTarget')"
+                    [dropTargetFilter]="getDefaultSelectors('dropTarget')"
+                    [dragHandle]="getDefaultSelectors('handle')"
+                    [hint]="{hintTemplate: defaultHint}"
+                    (onPress)="handleReorderEvents($event, 'press')"
+                    (onDragStart)="handleReorderEvents($event, 'dragStart')"
+                    (onDrag)="handleReorderEvents($event, 'drag')"
+                    (onDragEnter)="handleReorderEvents($event, 'dragEnter')"
+                    (onDragLeave)="handleReorderEvents($event, 'dragLeave')"
+                    (onDragEnd)="handleReorderEvents($event, 'dragEnd')"
+                    (onDrop)="handleReorderEvents($event, 'drop')"
+                    [dragData]="gridData"
                     [data]="$any(view)"
+                    [rowHeight]="rowHeight"
+                    [detailRowHeight]="detailRowHeight"
+                    [total]="totalCount"
+                    [take]="pageSize"
+                    [groups]="group"
+                    [groupable]="groupable"
                     [skip]="skip"
-                    [columns]="$any(leafColumns)"
+                    [trackBy]="trackBy"
+                    [columns]="columnsContainer"
                     [selectable]="selectable"
                     [filterable]="filterable"
-                    [noRecordsTemplate]="noRecordsTemplate"
                     [detailTemplate]="detailTemplate"
-                    [showGroupFooters]="showGroupFooters"
-                    [trackBy]="trackBy"
+                    [noRecordsTemplate]="noRecordsTemplate"
+                    [size]="size"
+                    (pageChange)="notifyPageChange('list', $event)"
                     [rowClass]="rowClass"
+                    [rowSticky]="rowSticky"
+                    [loading]="loading"
+                    [isVirtual]="isVirtual"
+                    [cellLoadingTemplate]="cellLoadingTemplate?.templateRef"
+                    [loadingTemplate]="loadingTemplate?.templateRef"
+                    [virtualColumns]="virtualColumns"
+                    (scrollBottom)="notifyScrollBottom()"
+                    (contentScroll)="contentScroll.emit($event)"
                     kendoDraggable
                     kendoGridSelectionMarquee
-                    [enableDrag]="marqueeSelection">
-                </tbody>
-                <tfoot kendoGridFooter
+                    [enableDrag]="marqueeSelection"
+                    [sort]="sort">
+                </kendo-grid-list>
+                <div
                     *ngIf="showFooter"
-                    [scrollable]="false"
-                    [logicalRowIndex]="ariaRowCount"
-                    [groups]="group"
-                    [columns]="$any(leafColumns)"
-                    [detailTemplate]="detailTemplate">
-                </tfoot>
-            </table>
-        </ng-container>
-        <div [loadingTemplate]="loadingTemplate" *ngIf="loading" kendoGridLoading>
-        </div>
+                    class="k-grid-footer"
+                    [style.padding]="headerPadding">
+                    <div
+                        *ngIf="lockedLeafColumns.length"
+                        class="k-grid-footer-locked"
+                        [style.width.px]="lockedWidth">
+                        <table
+                            role="presentation"
+                            class="k-grid-footer-table"
+                            [locked]="true"
+                            [style.width.px]="lockedWidth"
+                            kendoGridTable
+                            [size]="size">
+                            <colgroup kendoGridColGroup
+                                [columns]="$any(lockedLeafColumns)"
+                                [groups]="group"
+                                [detailTemplate]="detailTemplate">
+                            </colgroup>
+                            <tfoot kendoGridFooter
+                                [scrollable]="true"
+                                [groups]="group"
+                                [columns]="$any(lockedLeafColumns)"
+                                [detailTemplate]="detailTemplate"
+                                [logicalRowIndex]="ariaRowCount">
+                            </tfoot>
+                        </table>
+                    </div>
+                    <div #footer
+                        class="k-grid-footer-wrap" data-scrollable
+                        [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
+                        [lockedWidth]="lockedWidth + scrollbarWidth + 3">
+                        <table
+                            role="presentation"
+                            class="k-grid-footer-table"
+                            [style.width.px]="nonLockedWidth"
+                            kendoGridTable
+                            [size]="size">
+                            <colgroup kendoGridColGroup
+                                [columns]="$any(nonLockedLeafColumns)"
+                                [groups]="isLocked ? [] : group"
+                                [detailTemplate]="detailTemplate">
+                            </colgroup>
+                            <tfoot kendoGridFooter
+                                [logicalRowIndex]="ariaRowCount"
+                                [scrollable]="true"
+                                [groups]="isLocked ? [] : group"
+                                [columns]="$any(nonLockedLeafColumns)"
+                                [lockedColumnsCount]="lockedLeafColumns.length"
+                                [detailTemplate]="detailTemplate">
+                            </tfoot>
+                        </table>
+                    </div>
+                </div>
+            </ng-container>
+            <ng-container *ngIf="!isScrollable">
+                <table
+                    [style.table-layout]="resizable ? 'fixed' : null"
+                    kendoGridTable
+                    [size]="size">
+                    <colgroup kendoGridColGroup
+                        [columns]="$any(leafColumns)"
+                        [groups]="group"
+                        [detailTemplate]="detailTemplate">
+                    </colgroup>
+                    <thead kendoGridHeader
+                        *ngIf="!hideHeader"
+                        [resizable]="resizable"
+                        [scrollable]="false"
+                        [columns]="$any(visibleColumns)"
+                        [totalColumnLevels]="totalColumnLevels"
+                        [groups]="group"
+                        [groupable]="showGroupPanel"
+                        [reorderable]="reorderable"
+                        [sort]="sort"
+                        [sortable]="sortable"
+                        [filter]="filter"
+                        [filterable]="filterable"
+                        [columnMenu]="columnMenuOptions"
+                        [columnMenuTemplate]="columnMenuTemplate"
+                        [detailTemplate]="detailTemplate"
+                        [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
+                    </thead>
+                    <tbody kendoGridTableBody
+                        [isLoading]="loading"
+                        [groups]="group"
+                        [data]="$any(view)"
+                        [skip]="skip"
+                        [columns]="$any(leafColumns)"
+                        [selectable]="selectable"
+                        [filterable]="filterable"
+                        [noRecordsTemplate]="noRecordsTemplate"
+                        [detailTemplate]="detailTemplate"
+                        [showGroupFooters]="showGroupFooters"
+                        [trackBy]="trackBy"
+                        [rowClass]="rowClass"
+                        kendoDraggable
+                        kendoGridSelectionMarquee
+                        [enableDrag]="marqueeSelection">
+                    </tbody>
+                    <tfoot kendoGridFooter
+                        *ngIf="showFooter"
+                        [scrollable]="false"
+                        [logicalRowIndex]="ariaRowCount"
+                        [groups]="group"
+                        [columns]="$any(leafColumns)"
+                        [detailTemplate]="detailTemplate">
+                    </tfoot>
+                </table>
+            </ng-container>
+            <div [loadingTemplate]="loadingTemplate" *ngIf="loading" kendoGridLoading></div>
         </div>
+        <kendo-grid-status-bar
+            *ngIf="showStatusBar"
+            [selectableSettings]="selectable"
+            [statusBarTemplate]="statusBarTemplate">
+        </kendo-grid-status-bar>
         <kendo-pager
             *ngIf="showBottomPager"
             [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
@@ -21172,7 +21537,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             </kendo-icon-wrapper>
             {{hintText}}
         </ng-template>
-    `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { type: PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "size", "template"], outputs: ["pageChange"] }, { type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex", "size"] }, { type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "rowClass"] }, { type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i40.DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode"], outputs: ["dragReady", "press", "dragStart", "drag", "release", "dragEnd"], exportAs: ["kendoDragTargetContainer"] }, { type: i40.DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["dragEnter", "dragOver", "dragLeave", "drop"], exportAs: ["kendoDropTargetContainer"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { type: PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "size", "template"], outputs: ["pageChange"] }, { type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex", "size"] }, { type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "rowClass"] }, { type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { type: StatusBarComponent, selector: "kendo-grid-status-bar", inputs: ["selectableSettings", "statusBarTemplate"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i41.DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { type: i41.DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
             args: [{
@@ -21272,6 +21637,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
             i18n-filterMenuOperatorsDropDownLabel="kendo.grid.filterMenuOperatorsDropDownLabel|The label of the filter menu operators dropdown"
             filterMenuOperatorsDropDownLabel="{{ '{columnName} Filter Operators' }}"
+            
+            i18n-filterCellOperatorLabel="kendo.grid.filterCellOperatorLabel|The label of the filter cell operators dropdown"
+            filterCellOperatorLabel="{{ 'Filter cell operators for {columnName}' }}"
+
+            i18n-booleanFilterCellLabel="kendo.grid.booleanFilterCellLabel|The label of the boolean filter cell dropdown"
+            booleanFilterCellLabel="{{ 'Boolean filter cell for {columnName}' }}"
 
             i18n-filterMenuLogicDropDownLabel="kendo.grid.filterMenuLogicDropDownLabel|The label of the filter menu logic dropdown"
             filterMenuLogicDropDownLabel="{{ '{columnName} Filter Logic' }}"
@@ -21471,285 +21842,286 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [navigable]="navigation.toolbarEnabled"
             [attr.aria-controls]="ariaRootId"
             position="top"></kendo-grid-toolbar>
-        <kendo-pager
-            *ngIf="showTopPager"
-            [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
-            [attr.role]="navigation.pagerEnabled ? 'application' : undefined"
-            class="k-grid-pager-top k-pager"
-            [template]="pagerTemplate"
-            [pageSize]="pageSize"
-            [total]="view.total"
-            [skip]="skip"
-            [size]="size"
-            [options]="pageable"
-            (pageChange)="notifyPageChange('pager', $event)">
-        </kendo-pager>
-        <kendo-grid-group-panel
-            *ngIf="showGroupPanel"
-            [navigable]="navigation.toolbarEnabled"
-            [text]="groupableEmptyText"
-            [groups]="group"
-            role="toolbar"
-            [attr.aria-label]="messageFor('groupPanelLabel')"
-            [attr.aria-controls]="ariaRootId"
-            (change)="groupChange.emit($event)">
-        </kendo-grid-group-panel>
-        <div #ariaRoot
-            class="k-grid-aria-root"
-            role="grid"
-            [id]="ariaRootId"
-            [attr.aria-label]="ariaLabel"
-            [attr.aria-rowcount]="ariaRowCount"
-            [attr.aria-colcount]="ariaColCount">
-        <ng-container *ngIf="isScrollable">
-            <div *ngIf="!hideHeader"
-                class="k-grid-header"
-                role="presentation"
-                [style.padding]="headerPadding">
-                <div *ngIf="isLocked"
-                     #lockedHeader
-                     role="presentation"
-                     class="k-grid-header-locked"
-                     [style.width.px]="lockedWidth">
-                    <table
-                        [locked]="true"
+            <kendo-pager
+                *ngIf="showTopPager"
+                [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
+                [attr.role]="navigation.pagerEnabled ? 'application' : undefined"
+                class="k-grid-pager-top k-pager"
+                [template]="pagerTemplate"
+                [pageSize]="pageSize"
+                [total]="view.total"
+                [skip]="skip"
+                [size]="size"
+                [options]="pageable"
+                (pageChange)="notifyPageChange('pager', $event)">
+            </kendo-pager>
+            <kendo-grid-group-panel
+                *ngIf="showGroupPanel"
+                [navigable]="navigation.toolbarEnabled"
+                [text]="groupableEmptyText"
+                [groups]="group"
+                role="toolbar"
+                [attr.aria-label]="messageFor('groupPanelLabel')"
+                [attr.aria-controls]="ariaRootId"
+                (change)="groupChange.emit($event)">
+            </kendo-grid-group-panel>
+            <div #ariaRoot
+                class="k-grid-aria-root"
+                role="grid"
+                [id]="ariaRootId"
+                [attr.aria-label]="ariaLabel"
+                [attr.aria-rowcount]="ariaRowCount"
+                [attr.aria-colcount]="ariaColCount">
+            <ng-container *ngIf="isScrollable">
+                <div *ngIf="!hideHeader"
+                    class="k-grid-header"
+                    role="presentation"
+                    [style.padding]="headerPadding">
+                    <div *ngIf="isLocked"
+                        #lockedHeader
                         role="presentation"
-                        class="k-grid-header-table"
-                        [style.width.px]="lockedWidth"
-                        kendoGridTable
-                        [size]="size">
-                        <colgroup kendoGridColGroup
+                        class="k-grid-header-locked"
+                        [style.width.px]="lockedWidth">
+                        <table
+                            [locked]="true"
                             role="presentation"
-                            [columns]="$any(lockedLeafColumns)"
-                            [groups]="group"
-                            [detailTemplate]="detailTemplate">
-                        </colgroup>
-                        <thead kendoGridHeader
-                            role="rowgroup"
-                            [resizable]="resizable"
-                            [scrollable]="true"
-                            [columns]="$any(lockedColumns)"
-                            [totalColumnLevels]="totalColumnLevels"
-                            [sort]="sort"
-                            [groups]="group"
-                            [filter]="filter"
-                            [filterable]="filterable"
-                            [groupable]="showGroupPanel"
-                            [reorderable]="reorderable"
-                            [sortable]="sortable"
-                            [columnMenu]="columnMenuOptions"
-                            [columnMenuTemplate]="columnMenuTemplate"
-                            [totalColumnsCount]="leafColumns.length"
-                            [detailTemplate]="detailTemplate"
-                            [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
-                        </thead>
-                    </table>
-                </div>
-                <div #header class="k-grid-header-wrap" role="presentation" data-scrollable
-                    [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
-                    [lockedWidth]="lockedWidth + scrollbarWidth + 2">
-                    <table
-                        role="presentation"
-                        class="k-grid-header-table"
-                        [style.width.px]="nonLockedWidth"
-                        [virtualColumns]="virtualColumns"
-                        kendoGridTable
-                        [size]="size">
-                        <colgroup kendoGridColGroup
+                            class="k-grid-header-table"
+                            [style.width.px]="lockedWidth"
+                            kendoGridTable
+                            [size]="size">
+                            <colgroup kendoGridColGroup
+                                [columns]="$any(lockedLeafColumns)"
+                                [groups]="group"
+                                [detailTemplate]="detailTemplate">
+                            </colgroup>
+                            <thead kendoGridHeader
+                                role="rowgroup"
+                                [resizable]="resizable"
+                                [scrollable]="true"
+                                [columns]="$any(lockedColumns)"
+                                [totalColumnLevels]="totalColumnLevels"
+                                [sort]="sort"
+                                [groups]="group"
+                                [filter]="filter"
+                                [filterable]="filterable"
+                                [groupable]="showGroupPanel"
+                                [reorderable]="reorderable"
+                                [sortable]="sortable"
+                                [columnMenu]="columnMenuOptions"
+                                [columnMenuTemplate]="columnMenuTemplate"
+                                [totalColumnsCount]="leafColumns.length"
+                                [detailTemplate]="detailTemplate"
+                                [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
+                            </thead>
+                        </table>
+                    </div>
+                    <div #header class="k-grid-header-wrap" role="presentation" data-scrollable
+                        [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
+                        [lockedWidth]="lockedWidth + scrollbarWidth + 2">
+                        <table
                             role="presentation"
-                            [columns]="headerLeafColumns"
-                            [groups]="isLocked ? [] : group"
-                            [detailTemplate]="detailTemplate">
-                        </colgroup>
-                        <thead kendoGridHeader
-                            [resizable]="resizable"
-                            role="rowgroup"
-                            [scrollable]="true"
-                            [columns]="headerColumns"
-                            [totalColumnLevels]="totalColumnLevels"
-                            [sort]="sort"
-                            [filter]="filter"
-                            [filterable]="filterable"
-                            [groupable]="showGroupPanel"
-                            [reorderable]="reorderable"
-                            [groups]="isLocked ? [] : group"
-                            [sortable]="sortable"
-                            [columnMenu]="columnMenuOptions"
-                            [columnMenuTemplate]="columnMenuTemplate"
-                            [lockedColumnsCount]="lockedLeafColumns.length"
-                            [totalColumnsCount]="leafColumns.length"
-                            [detailTemplate]="detailTemplate"
-                            [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
-                        </thead>
-                    </table>
-                    <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
-                        <div [style.width.px]="columnsContainer.unlockedWidth"></div>
+                            class="k-grid-header-table"
+                            [style.width.px]="nonLockedWidth"
+                            [virtualColumns]="virtualColumns"
+                            kendoGridTable
+                            [size]="size">
+                            <colgroup kendoGridColGroup
+                                [columns]="headerLeafColumns"
+                                [groups]="isLocked ? [] : group"
+                                [detailTemplate]="detailTemplate">
+                            </colgroup>
+                            <thead kendoGridHeader
+                                [resizable]="resizable"
+                                role="rowgroup"
+                                [scrollable]="true"
+                                [columns]="headerColumns"
+                                [totalColumnLevels]="totalColumnLevels"
+                                [sort]="sort"
+                                [filter]="filter"
+                                [filterable]="filterable"
+                                [groupable]="showGroupPanel"
+                                [reorderable]="reorderable"
+                                [groups]="isLocked ? [] : group"
+                                [sortable]="sortable"
+                                [columnMenu]="columnMenuOptions"
+                                [columnMenuTemplate]="columnMenuTemplate"
+                                [lockedColumnsCount]="lockedLeafColumns.length"
+                                [totalColumnsCount]="leafColumns.length"
+                                [detailTemplate]="detailTemplate"
+                                [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
+                            </thead>
+                        </table>
+                        <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
+                            <div [style.width.px]="columnsContainer.unlockedWidth"></div>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <kendo-grid-list
-                kendoDragTargetContainer
-                kendoDropTargetContainer
-                mode="manual"
-                [dragDisabled]="!rowReorderable"
-                [dropDisabled]="!rowReorderable"
-                [dragTargetFilter]="getDefaultSelectors('dragTarget')"
-                [dropTargetFilter]="getDefaultSelectors('dropTarget')"
-                [dragHandle]="getDefaultSelectors('handle')"
-                [hint]="{hintTemplate: defaultHint}"
-                (press)="handleReorderEvents($event, 'press')"
-                (dragStart)="handleReorderEvents($event, 'dragStart')"
-                (drag)="handleReorderEvents($event, 'drag')"
-                (dragEnter)="handleReorderEvents($event, 'dragEnter')"
-                (dragLeave)="handleReorderEvents($event, 'dragLeave')"
-                (dragEnd)="handleReorderEvents($event, 'dragEnd')"
-                (drop)="handleReorderEvents($event, 'drop')"
-                [dragData]="gridData"
-                [data]="$any(view)"
-                [rowHeight]="rowHeight"
-                [detailRowHeight]="detailRowHeight"
-                [total]="totalCount"
-                [take]="pageSize"
-                [groups]="group"
-                [groupable]="groupable"
-                [skip]="skip"
-                [trackBy]="trackBy"
-                [columns]="columnsContainer"
-                [selectable]="selectable"
-                [filterable]="filterable"
-                [detailTemplate]="detailTemplate"
-                [noRecordsTemplate]="noRecordsTemplate"
-                [size]="size"
-                (pageChange)="notifyPageChange('list', $event)"
-                [rowClass]="rowClass"
-                [rowSticky]="rowSticky"
-                [loading]="loading"
-                [isVirtual]="isVirtual"
-                [cellLoadingTemplate]="cellLoadingTemplate?.templateRef"
-                [loadingTemplate]="loadingTemplate?.templateRef"
-                [virtualColumns]="virtualColumns"
-                (scrollBottom)="notifyScrollBottom()"
-                (contentScroll)="contentScroll.emit($event)"
-                kendoDraggable
-                kendoGridSelectionMarquee
-                [enableDrag]="marqueeSelection"
-                [sort]="sort"
-                >
-            </kendo-grid-list>
-            <div
-                *ngIf="showFooter"
-                class="k-grid-footer"
-                [style.padding]="headerPadding">
-                <div
-                    *ngIf="lockedLeafColumns.length"
-                    class="k-grid-footer-locked"
-                    [style.width.px]="lockedWidth">
-                    <table
-                        role="presentation"
-                        class="k-grid-footer-table"
-                        [locked]="true"
-                        [style.width.px]="lockedWidth"
-                        kendoGridTable
-                        [size]="size">
-                        <colgroup kendoGridColGroup
-                            [columns]="$any(lockedLeafColumns)"
-                            [groups]="group"
-                            [detailTemplate]="detailTemplate">
-                        </colgroup>
-                        <tfoot kendoGridFooter
-                            [scrollable]="true"
-                            [groups]="group"
-                            [columns]="$any(lockedLeafColumns)"
-                            [detailTemplate]="detailTemplate"
-                            [logicalRowIndex]="ariaRowCount">
-                        </tfoot>
-                    </table>
-                </div>
-                <div #footer
-                    class="k-grid-footer-wrap" data-scrollable
-                    [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
-                    [lockedWidth]="lockedWidth + scrollbarWidth + 3">
-                    <table
-                        role="presentation"
-                        class="k-grid-footer-table"
-                        [style.width.px]="nonLockedWidth"
-                        kendoGridTable
-                        [size]="size">
-                        <colgroup kendoGridColGroup
-                            [columns]="$any(nonLockedLeafColumns)"
-                            [groups]="isLocked ? [] : group"
-                            [detailTemplate]="detailTemplate">
-                        </colgroup>
-                        <tfoot kendoGridFooter
-                            [logicalRowIndex]="ariaRowCount"
-                            [scrollable]="true"
-                            [groups]="isLocked ? [] : group"
-                            [columns]="$any(nonLockedLeafColumns)"
-                            [lockedColumnsCount]="lockedLeafColumns.length"
-                            [detailTemplate]="detailTemplate">
-                        </tfoot>
-                    </table>
-                </div>
-            </div>
-        </ng-container>
-        <ng-container *ngIf="!isScrollable">
-            <table
-                [style.table-layout]="resizable ? 'fixed' : null"
-                kendoGridTable
-                [size]="size">
-                <colgroup kendoGridColGroup
-                    [columns]="$any(leafColumns)"
-                    [groups]="group"
-                    [detailTemplate]="detailTemplate">
-                </colgroup>
-                <thead kendoGridHeader
-                    *ngIf="!hideHeader"
-                    [resizable]="resizable"
-                    [scrollable]="false"
-                    [columns]="$any(visibleColumns)"
-                    [totalColumnLevels]="totalColumnLevels"
-                    [groups]="group"
-                    [groupable]="showGroupPanel"
-                    [reorderable]="reorderable"
-                    [sort]="sort"
-                    [sortable]="sortable"
-                    [filter]="filter"
-                    [filterable]="filterable"
-                    [columnMenu]="columnMenuOptions"
-                    [columnMenuTemplate]="columnMenuTemplate"
-                    [detailTemplate]="detailTemplate"
-                    [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
-                </thead>
-                <tbody kendoGridTableBody
-                    [isLoading]="loading"
-                    [groups]="group"
+                <kendo-grid-list
+                    kendoDragTargetContainer
+                    kendoDropTargetContainer
+                    mode="manual"
+                    [dragDisabled]="!rowReorderable"
+                    [dropDisabled]="!rowReorderable"
+                    [dragTargetFilter]="getDefaultSelectors('dragTarget')"
+                    [dropTargetFilter]="getDefaultSelectors('dropTarget')"
+                    [dragHandle]="getDefaultSelectors('handle')"
+                    [hint]="{hintTemplate: defaultHint}"
+                    (onPress)="handleReorderEvents($event, 'press')"
+                    (onDragStart)="handleReorderEvents($event, 'dragStart')"
+                    (onDrag)="handleReorderEvents($event, 'drag')"
+                    (onDragEnter)="handleReorderEvents($event, 'dragEnter')"
+                    (onDragLeave)="handleReorderEvents($event, 'dragLeave')"
+                    (onDragEnd)="handleReorderEvents($event, 'dragEnd')"
+                    (onDrop)="handleReorderEvents($event, 'drop')"
+                    [dragData]="gridData"
                     [data]="$any(view)"
+                    [rowHeight]="rowHeight"
+                    [detailRowHeight]="detailRowHeight"
+                    [total]="totalCount"
+                    [take]="pageSize"
+                    [groups]="group"
+                    [groupable]="groupable"
                     [skip]="skip"
-                    [columns]="$any(leafColumns)"
+                    [trackBy]="trackBy"
+                    [columns]="columnsContainer"
                     [selectable]="selectable"
                     [filterable]="filterable"
-                    [noRecordsTemplate]="noRecordsTemplate"
                     [detailTemplate]="detailTemplate"
-                    [showGroupFooters]="showGroupFooters"
-                    [trackBy]="trackBy"
+                    [noRecordsTemplate]="noRecordsTemplate"
+                    [size]="size"
+                    (pageChange)="notifyPageChange('list', $event)"
                     [rowClass]="rowClass"
+                    [rowSticky]="rowSticky"
+                    [loading]="loading"
+                    [isVirtual]="isVirtual"
+                    [cellLoadingTemplate]="cellLoadingTemplate?.templateRef"
+                    [loadingTemplate]="loadingTemplate?.templateRef"
+                    [virtualColumns]="virtualColumns"
+                    (scrollBottom)="notifyScrollBottom()"
+                    (contentScroll)="contentScroll.emit($event)"
                     kendoDraggable
                     kendoGridSelectionMarquee
-                    [enableDrag]="marqueeSelection">
-                </tbody>
-                <tfoot kendoGridFooter
+                    [enableDrag]="marqueeSelection"
+                    [sort]="sort">
+                </kendo-grid-list>
+                <div
                     *ngIf="showFooter"
-                    [scrollable]="false"
-                    [logicalRowIndex]="ariaRowCount"
-                    [groups]="group"
-                    [columns]="$any(leafColumns)"
-                    [detailTemplate]="detailTemplate">
-                </tfoot>
-            </table>
-        </ng-container>
-        <div [loadingTemplate]="loadingTemplate" *ngIf="loading" kendoGridLoading>
-        </div>
+                    class="k-grid-footer"
+                    [style.padding]="headerPadding">
+                    <div
+                        *ngIf="lockedLeafColumns.length"
+                        class="k-grid-footer-locked"
+                        [style.width.px]="lockedWidth">
+                        <table
+                            role="presentation"
+                            class="k-grid-footer-table"
+                            [locked]="true"
+                            [style.width.px]="lockedWidth"
+                            kendoGridTable
+                            [size]="size">
+                            <colgroup kendoGridColGroup
+                                [columns]="$any(lockedLeafColumns)"
+                                [groups]="group"
+                                [detailTemplate]="detailTemplate">
+                            </colgroup>
+                            <tfoot kendoGridFooter
+                                [scrollable]="true"
+                                [groups]="group"
+                                [columns]="$any(lockedLeafColumns)"
+                                [detailTemplate]="detailTemplate"
+                                [logicalRowIndex]="ariaRowCount">
+                            </tfoot>
+                        </table>
+                    </div>
+                    <div #footer
+                        class="k-grid-footer-wrap" data-scrollable
+                        [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
+                        [lockedWidth]="lockedWidth + scrollbarWidth + 3">
+                        <table
+                            role="presentation"
+                            class="k-grid-footer-table"
+                            [style.width.px]="nonLockedWidth"
+                            kendoGridTable
+                            [size]="size">
+                            <colgroup kendoGridColGroup
+                                [columns]="$any(nonLockedLeafColumns)"
+                                [groups]="isLocked ? [] : group"
+                                [detailTemplate]="detailTemplate">
+                            </colgroup>
+                            <tfoot kendoGridFooter
+                                [logicalRowIndex]="ariaRowCount"
+                                [scrollable]="true"
+                                [groups]="isLocked ? [] : group"
+                                [columns]="$any(nonLockedLeafColumns)"
+                                [lockedColumnsCount]="lockedLeafColumns.length"
+                                [detailTemplate]="detailTemplate">
+                            </tfoot>
+                        </table>
+                    </div>
+                </div>
+            </ng-container>
+            <ng-container *ngIf="!isScrollable">
+                <table
+                    [style.table-layout]="resizable ? 'fixed' : null"
+                    kendoGridTable
+                    [size]="size">
+                    <colgroup kendoGridColGroup
+                        [columns]="$any(leafColumns)"
+                        [groups]="group"
+                        [detailTemplate]="detailTemplate">
+                    </colgroup>
+                    <thead kendoGridHeader
+                        *ngIf="!hideHeader"
+                        [resizable]="resizable"
+                        [scrollable]="false"
+                        [columns]="$any(visibleColumns)"
+                        [totalColumnLevels]="totalColumnLevels"
+                        [groups]="group"
+                        [groupable]="showGroupPanel"
+                        [reorderable]="reorderable"
+                        [sort]="sort"
+                        [sortable]="sortable"
+                        [filter]="filter"
+                        [filterable]="filterable"
+                        [columnMenu]="columnMenuOptions"
+                        [columnMenuTemplate]="columnMenuTemplate"
+                        [detailTemplate]="detailTemplate"
+                        [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
+                    </thead>
+                    <tbody kendoGridTableBody
+                        [isLoading]="loading"
+                        [groups]="group"
+                        [data]="$any(view)"
+                        [skip]="skip"
+                        [columns]="$any(leafColumns)"
+                        [selectable]="selectable"
+                        [filterable]="filterable"
+                        [noRecordsTemplate]="noRecordsTemplate"
+                        [detailTemplate]="detailTemplate"
+                        [showGroupFooters]="showGroupFooters"
+                        [trackBy]="trackBy"
+                        [rowClass]="rowClass"
+                        kendoDraggable
+                        kendoGridSelectionMarquee
+                        [enableDrag]="marqueeSelection">
+                    </tbody>
+                    <tfoot kendoGridFooter
+                        *ngIf="showFooter"
+                        [scrollable]="false"
+                        [logicalRowIndex]="ariaRowCount"
+                        [groups]="group"
+                        [columns]="$any(leafColumns)"
+                        [detailTemplate]="detailTemplate">
+                    </tfoot>
+                </table>
+            </ng-container>
+            <div [loadingTemplate]="loadingTemplate" *ngIf="loading" kendoGridLoading></div>
         </div>
+        <kendo-grid-status-bar
+            *ngIf="showStatusBar"
+            [selectableSettings]="selectable"
+            [statusBarTemplate]="statusBarTemplate">
+        </kendo-grid-status-bar>
         <kendo-pager
             *ngIf="showBottomPager"
             [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
@@ -21932,6 +22304,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], loadingTemplateChildren: [{
                 type: ContentChildren,
                 args: [LoadingTemplateDirective]
+            }], statusBarTemplateChildren: [{
+                type: ContentChildren,
+                args: [StatusBarTemplateDirective]
             }], noRecordsTemplateChildren: [{
                 type: ContentChildren,
                 args: [NoRecordsTemplateDirective]
@@ -23562,7 +23937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }] });
 
 /**
- * Represents the component for toggling the Grid columns visibility. [See example](slug:columnmenu_grid#toc-using-standalone-column-chooser).
+ * Represents the component for toggling visibility of the Grid columns visibility. [See example](slug:columnmenu_grid#toc-using-standalone-column-chooser).
  * To show and hide the columns without including the column chooser item in the [Column Menu](slug:columnmenu_grid),
  * add the component inside the [ToolbarTemplate](slug:toolbartemplate_grid) directive.
  *
@@ -23976,7 +24351,7 @@ EditCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EditCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -24073,7 +24448,7 @@ CancelCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CancelCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -24170,7 +24545,7 @@ SaveCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SaveCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -24264,7 +24639,7 @@ RemoveCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RemoveCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -24343,7 +24718,7 @@ AddCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AddCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -25239,6 +25614,7 @@ const exportedModules$1 = [
     ToolbarTemplateDirective,
     ToolbarComponent,
     GridSpacerComponent,
+    StatusBarTemplateDirective,
     DataBindingDirective,
     SelectionDirective,
     CustomMessagesComponent,
@@ -25276,7 +25652,9 @@ const declarations$2 = [
     GroupBindingDirective,
     GridMarqueeDirective,
     GridSpacerComponent,
-    GridToolbarFocusableDirective
+    GridToolbarFocusableDirective,
+    StatusBarComponent,
+    StatusBarTemplateDirective
 ];
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -25318,7 +25696,9 @@ GridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
         GroupBindingDirective,
         GridMarqueeDirective,
         GridSpacerComponent,
-        GridToolbarFocusableDirective], imports: [CommonModule,
+        GridToolbarFocusableDirective,
+        StatusBarComponent,
+        StatusBarTemplateDirective], imports: [CommonModule,
         GroupModule,
         SharedModule,
         BodyModule,
@@ -25333,6 +25713,7 @@ GridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
         ToolbarTemplateDirective,
         ToolbarComponent,
         GridSpacerComponent,
+        StatusBarTemplateDirective,
         DataBindingDirective,
         SelectionDirective,
         CustomMessagesComponent,
@@ -25879,7 +26260,7 @@ PDFCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PDFCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -26162,7 +26543,7 @@ ExcelCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ExcelCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -26228,5 +26609,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddCommandDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BodyModule, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, BrowserSupportService, CELL_CONTEXT, CancelCommandDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellSelectionService, CellTemplateDirective, ChangeNotificationService, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnListComponent, ColumnLockedChangeEvent, ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuService, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnReorderService, ColumnResizingService, ColumnStickyChangeEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, ContextService, CustomMessagesComponent, DEFAULT_SCROLLER_FACTORY, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DetailsService, DoesNotContainFilterOperatorComponent, DomEventsService, DragAndDropService, DragHintService, DropCueService, EditCommandDirective, EditService, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandDetailsDirective, ExpandGroupDirective, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuModule, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FocusRoot, FocusableDirective, FooterComponent, FooterModule, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridComponent, GridModule, GridSpacerComponent, GridTableDirective, GridToolbarFocusableDirective, GridToolbarNavigationService, GroupBindingDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupInfoService, GroupModule, GroupPanelComponent, GroupsService, HeaderComponent, HeaderModule, HeaderTemplateDirective, IdService, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, NavigationService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PagerComponent, PagerContextService, PagerDropDownListDirective, PagerInfoComponent, PagerInputComponent, PagerInputDirective, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, ResizeService, ResponsiveService, RowEditingDirectiveBase, RowFilterModule, RowReorderColumnComponent, SaveCommandDirective, ScrollRequestService, ScrollSyncService, SelectAllCheckboxDirective, SelectionCheckboxDirective, SelectionDirective, SelectionService, SharedFilterModule, SharedModule, SinglePopupService, SizingOptionsService, Skip, SortService, SpanColumnComponent, StartsWithFilterOperatorComponent, StringFilterCellComponent, StringFilterComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateContextDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, count, defaultTrackBy, hasFilterMenu, hasFilterRow, isFilterable, slice };
+export { AddCommandDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BodyModule, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, BrowserSupportService, CELL_CONTEXT, CancelCommandDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellSelectionService, CellTemplateDirective, ChangeNotificationService, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnListComponent, ColumnLockedChangeEvent, ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuService, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnReorderService, ColumnResizingService, ColumnStickyChangeEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, ContextService, CustomMessagesComponent, DEFAULT_SCROLLER_FACTORY, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DetailsService, DoesNotContainFilterOperatorComponent, DomEventsService, DragAndDropService, DragHintService, DropCueService, EditCommandDirective, EditService, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandDetailsDirective, ExpandGroupDirective, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuModule, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FocusRoot, FocusableDirective, FooterComponent, FooterModule, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridComponent, GridModule, GridSpacerComponent, GridTableDirective, GridToolbarFocusableDirective, GridToolbarNavigationService, GroupBindingDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupInfoService, GroupModule, GroupPanelComponent, GroupsService, HeaderComponent, HeaderModule, HeaderTemplateDirective, IdService, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, NavigationService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PagerComponent, PagerContextService, PagerDropDownListDirective, PagerInfoComponent, PagerInputComponent, PagerInputDirective, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, ResizeService, ResponsiveService, RowEditingDirectiveBase, RowFilterModule, RowReorderColumnComponent, SaveCommandDirective, ScrollRequestService, ScrollSyncService, SelectAllCheckboxDirective, SelectionCheckboxDirective, SelectionDirective, SelectionService, SharedFilterModule, SharedModule, SinglePopupService, SizingOptionsService, Skip, SortService, SpanColumnComponent, StartsWithFilterOperatorComponent, StatusBarTemplateDirective, StringFilterCellComponent, StringFilterComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateContextDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, count, defaultTrackBy, hasFilterMenu, hasFilterRow, isFilterable, slice };