@progress/kendo-angular-grid 13.0.0-develop.13 → 13.0.0-develop.15

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: 1685375852,
-    version: '13.0.0-develop.13',
+    publishDate: 1685453775,
+    version: '13.0.0-develop.15',
     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
  */
@@ -15798,6 +15875,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);
             });
         }
@@ -18553,6 +18632,224 @@ 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
  */
@@ -19146,6 +19443,12 @@ class GridComponent {
     get group() {
         return this._group;
     }
+    /**
+     * @hidden
+     */
+    get showStatusBar() {
+        return !!(this.selectable);
+    }
     /**
      * @hidden
      */
@@ -19379,6 +19682,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;
@@ -20640,7 +20952,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"
@@ -20888,285 +21200,288 @@ 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
+                                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"
-                            [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
+                                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>
+                        </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}"
-                (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"
-                [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'"
@@ -21198,7 +21513,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", "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: i40.DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { type: i40.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 });
+    `, 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: [{
@@ -21497,285 +21812,288 @@ 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
+                                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"
-                            [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
+                                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>
+                        </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}"
-                (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"
-                [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'"
@@ -21958,6 +22276,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]
@@ -25265,6 +25586,7 @@ const exportedModules$1 = [
     ToolbarTemplateDirective,
     ToolbarComponent,
     GridSpacerComponent,
+    StatusBarTemplateDirective,
     DataBindingDirective,
     SelectionDirective,
     CustomMessagesComponent,
@@ -25302,7 +25624,9 @@ const declarations$2 = [
     GroupBindingDirective,
     GridMarqueeDirective,
     GridSpacerComponent,
-    GridToolbarFocusableDirective
+    GridToolbarFocusableDirective,
+    StatusBarComponent,
+    StatusBarTemplateDirective
 ];
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -25344,7 +25668,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,
@@ -25359,6 +25685,7 @@ GridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
         ToolbarTemplateDirective,
         ToolbarComponent,
         GridSpacerComponent,
+        StatusBarTemplateDirective,
         DataBindingDirective,
         SelectionDirective,
         CustomMessagesComponent,
@@ -26254,5 +26581,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 };