@progress/kendo-angular-grid 19.1.2 → 19.2.0-develop.10

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

@@ -526,6 +526,24 @@ const isMultipleRangesEnabled = (selectableSettings) => {
         typeof selectableSettings === 'object' &&
         selectableSettings.selectable.multipleRanges;
 };
+/**
+ * @hidden
+ * Calculates the height of a table row by inserting a temporary row into the table body when the `rowHeight` option is not set.
+ */
+const calcRowHeight = (tableBody) => {
+    let result = 0;
+    if (!isDocumentAvailable()) {
+        return result;
+    }
+    if (tableBody) {
+        const row = tableBody.insertRow(0);
+        const cell = row.insertCell(0);
+        cell.textContent = ' ';
+        result = row.getBoundingClientRect().height;
+        tableBody.deleteRow(0);
+    }
+    return result;
+};
 
 /**
  * @hidden
@@ -850,7 +868,7 @@ class ContextService {
     topToolbarNavigation;
     bottomToolbarNavigation;
     navigable;
-    groupBindingDirective;
+    dataBindingDirective;
     constructor(renderer, localization) {
         this.renderer = renderer;
         this.localization = localization;
@@ -14121,7 +14139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Represents a directive that manages keyboard navigation for a column menu item. [See example](slug:columnmenu_grid#customizing-the-content).
+ * Represents a directive that manages keyboard navigation for a column menu item ([see example](slug:columnmenu_grid#customizing-the-content)).
  *
  * @example
  * ```html
@@ -16657,7 +16675,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class CellSelectionAggregateService {
     ctx;
-    dataChanges;
     columnInfoService;
     selectedItems = [];
     groupedAggregates = { dates: [], numbers: [], booleans: [] };
@@ -16673,9 +16690,8 @@ class CellSelectionAggregateService {
         latest: null
     };
     sub = new Subscription();
-    constructor(ctx, dataChanges, columnInfoService) {
+    constructor(ctx, columnInfoService) {
         this.ctx = ctx;
-        this.dataChanges = dataChanges;
         this.columnInfoService = columnInfoService;
     }
     ngOnDestroy() {
@@ -16836,12 +16852,12 @@ class CellSelectionAggregateService {
         this.aggregates['isFalse'] = this.aggregates['isTrue'] = null;
         this.aggregates['earliest'] = this.aggregates['latest'] = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellSelectionAggregateService, deps: [{ token: ContextService }, { token: LocalDataChangesService }, { token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellSelectionAggregateService, deps: [{ token: ContextService }, { token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellSelectionAggregateService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellSelectionAggregateService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: ContextService }, { type: LocalDataChangesService }, { type: ColumnInfoService }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: ColumnInfoService }]; } });
 
 /**
  * @hidden
@@ -16970,6 +16986,8 @@ class SelectionService {
         if (ev.shiftKey) {
             ev.rangeStartRow = { dataItem: this.lastSelectionData, index: this.lastSelectionStartIndex };
             ev.rangeEndRow = { dataItem: item.data, index: item.index };
+            this.lastSelectionData = item.data;
+            this.lastSelectionStartIndex = item.index;
         }
         this.syncCurrentSelection(ev);
         this.changes.emit(ev);
@@ -17058,13 +17076,14 @@ class SelectionService {
             item = iterator.next();
         }
     }
-    addAllTo(item, ctrlKey, preserveSelection = false) {
+    addAllTo(item, ctrlKey, preserveSelection = false, shiftKey = false) {
         const selectedRows = [];
         const deselectedRows = [];
         const start = Math.min(this.lastSelectionStartIndex, item.index);
         const end = Math.max(this.lastSelectionStartIndex, item.index);
         const iterator = this.getIterator();
         let next = iterator.next();
+        let selectedItem;
         while (!next.done) {
             if (next.value && next.value.type === "data") {
                 const idx = next.value.index;
@@ -17075,6 +17094,9 @@ class SelectionService {
                 if ((idx >= start && idx <= end) && !this.isSelected(idx) && !this.nonSelectableRows.has(idx)) {
                     selectedRows.push(rowArgs);
                 }
+                if (idx === item.index && !this.nonSelectableRows.has(idx)) {
+                    selectedItem = rowArgs;
+                }
             }
             next = iterator.next();
         }
@@ -17082,10 +17104,23 @@ class SelectionService {
             const nonSelectableRows = this.currentSelection.filter(i => this.nonSelectableRows.has(i.index));
             deselectedRows.push(...nonSelectableRows);
         }
-        return {
-            deselectedRows: deselectedRows,
-            selectedRows: selectedRows
+        const selectionEvent = {
+            deselectedRows,
+            selectedRows
         };
+        if (shiftKey && selectedItem) {
+            selectionEvent.rangeStartRow = {
+                dataItem: this.lastSelectionData,
+                index: this.lastSelectionStartIndex
+            };
+            selectionEvent.rangeEndRow = {
+                dataItem: selectedItem.dataItem,
+                index: selectedItem.index
+            };
+            this.lastSelectionData = selectedItem.dataItem;
+            this.lastSelectionStartIndex = selectedItem.index;
+        }
+        return selectionEvent;
     }
     updateAll(selectAllChecked) {
         this.selectAllChecked = selectAllChecked;
@@ -19074,7 +19109,7 @@ class SelectionCheckboxDirective {
                 const ctrlKey = event.ctrlKey || event.metaKey;
                 if (event.shiftKey && this.selectionService.options.mode === 'multiple') {
                     const item = { index: this.itemIndex };
-                    ev = this.selectionService.addAllTo(item, ctrlKey);
+                    ev = this.selectionService.addAllTo(item, ctrlKey, false, event.shiftKey);
                 }
                 else {
                     ev = this.selectionService.toggleByIndex(this.itemIndex);
@@ -19573,27 +19608,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-/**
- * @hidden
- */
-class RowspanService {
-    skipCells = [];
-    addCells(rowIndex, colIndex, rowspan) {
-        for (let i = 1; i < rowspan; i++) {
-            if (!this.skipCells.some(this.cellExists(rowIndex + i, colIndex))) {
-                this.skipCells.push({ rowIndex: rowIndex + i, colIndex });
-            }
-        }
-    }
-    reset() {
-        this.skipCells = [];
-    }
-    shouldSkip(rowIndex, colIndex) {
-        return !!this.skipCells.find(this.cellExists(rowIndex, colIndex));
-    }
-    cellExists = (rowIndex, colIndex) => cell => cell.rowIndex === rowIndex && cell.colIndex === colIndex;
-}
-
 const columnCellIndex = (cell, cells) => {
     let cellIndex = 0;
     for (let idx = 0; idx < cells.length; idx++) {
@@ -19622,13 +19636,12 @@ class TableBodyComponent {
     cellSelectionService;
     columnInfoService;
     navigationService;
-    rowspanService;
     columns = [];
     allColumns;
     groups = [];
     detailTemplate;
     noRecordsTemplate;
-    data;
+    rowsToRender;
     skip = 0;
     selectable;
     filterable;
@@ -19638,7 +19651,6 @@ class TableBodyComponent {
     isVirtual;
     cellLoadingTemplate;
     skipGroupDecoration = false;
-    showGroupFooters = false;
     lockedColumnsCount = 0;
     totalColumnsCount = 0;
     virtualColumns;
@@ -19656,9 +19668,7 @@ class TableBodyComponent {
     clickTimeout;
     minusIcon = minusIcon;
     plusIcon = plusIcon;
-    dataArray;
-    rerender = false;
-    constructor(detailsService, groupsService, changeNotification, editService, ctx, ngZone, renderer, element, domEvents, selectionService, cellSelectionService, columnInfoService, navigationService, rowspanService) {
+    constructor(detailsService, groupsService, changeNotification, editService, ctx, ngZone, renderer, element, domEvents, selectionService, cellSelectionService, columnInfoService, navigationService) {
         this.detailsService = detailsService;
         this.groupsService = groupsService;
         this.changeNotification = changeNotification;
@@ -19672,7 +19682,6 @@ class TableBodyComponent {
         this.cellSelectionService = cellSelectionService;
         this.columnInfoService = columnInfoService;
         this.navigationService = navigationService;
-        this.rowspanService = rowspanService;
         this.noRecordsText = this.ctx.localization.get('noRecords');
         this.cellKeydownSubscription = this.navigationService.cellKeydown.subscribe((args) => this.cellKeydownHandler(args));
         this.trackByWrapper = this.trackByWrapper.bind(this);
@@ -19681,12 +19690,6 @@ class TableBodyComponent {
     get newDataItem() {
         return this.editService.newDataItem;
     }
-    get cachedDataArray() {
-        if (!this.dataArray) {
-            this.dataArray = this.data.map(item => item);
-        }
-        return this.dataArray;
-    }
     // Number of unlocked columns in the next table, if any
     unlockedColumnsCount(item) {
         const allColumns = this.allColumns || this.columns;
@@ -19698,25 +19701,7 @@ class TableBodyComponent {
         });
         const contentColumnsCount = this.totalColumnsCount - this.lockedColumnsCount - allColumnsCount;
         const headerFooterColumnsCount = this.totalColumnsCount - this.lockedColumnsCount - allColumns.length;
-        return item && this.isDataItem(item) ? contentColumnsCount : headerFooterColumnsCount;
-    }
-    shouldSkipCell(rowIndex, colIndex) {
-        return this.rowspanService.shouldSkip(rowIndex, colIndex);
-    }
-    getRowspan(row, column, colIndex) {
-        if (this.rerender) {
-            this.dataArray = null;
-            this.rerender = false;
-        }
-        const rowspan = column.cellRowspan(row, column, this.cachedDataArray);
-        if (rowspan > 1) {
-            this.rowspanService.addCells(row.index, colIndex, rowspan);
-        }
-        this.ngZone.runOutsideAngular(() => setTimeout(() => {
-            this.rerender = true;
-            this.rowspanService.reset();
-        }));
-        return rowspan;
+        return item && item.type === 'data' ? contentColumnsCount : headerFooterColumnsCount;
     }
     isAriaSelected(item, column) {
         return this.cellSelectionService.isCellSelected(item, column) ||
@@ -19726,44 +19711,16 @@ class TableBodyComponent {
         this.detailsService.toggleRow(index, dataItem);
         return false;
     }
-    isExpanded(viewItem) {
-        return this.detailsService.isExpanded(viewItem.index, viewItem.data);
-    }
     detailButtonIconName(viewItem) {
-        const expanded = this.isExpanded(viewItem);
-        return expanded ? 'minus' : 'plus';
+        return viewItem.isExpanded ? 'minus' : 'plus';
     }
     detailButtonSvgIcon(viewItem) {
-        const expanded = this.isExpanded(viewItem);
-        return expanded ? this.minusIcon : this.plusIcon;
+        return viewItem.isExpanded ? this.minusIcon : this.plusIcon;
     }
     detailButtonTitle(viewItem) {
-        const messageKey = this.isExpanded(viewItem) ? 'detailCollapse' : 'detailExpand';
+        const messageKey = viewItem.isExpanded ? 'detailCollapse' : 'detailExpand';
         return this.ctx.localization.get(messageKey);
     }
-    isGroup(item) {
-        return item.type === 'group';
-    }
-    isDataItem(item) {
-        return !this.isGroup(item) && !this.isFooter(item);
-    }
-    isFooter(item) {
-        return item.type === 'footer';
-    }
-    isFooterItemInExpandedGroup(item) {
-        const footerItem = { data: item.data, index: item.groupIndex, parentGroup: item.group.parentGroup };
-        return this.isInExpandedGroup(footerItem);
-    }
-    isDataItemInExpandedGroup(item) {
-        const dataItem = { data: item.group.data, index: item.groupIndex, parentGroup: item.group.parentGroup };
-        return this.isInExpandedGroup(dataItem);
-    }
-    isInExpandedGroup(item) {
-        return this.groupsService.isInExpandedGroup(item);
-    }
-    isParentGroupExpanded(item) {
-        return this.groupsService.isInExpandedGroup(item.parentGroup);
-    }
     isOdd(item) {
         return item.index % 2 !== 0;
     }
@@ -19986,7 +19943,7 @@ class TableBodyComponent {
         const columnIndex = this.lockedColumnsCount + index;
         let rowIndex = row.getAttribute('data-kendo-grid-item-index');
         rowIndex = rowIndex ? parseInt(rowIndex, 10) : -1;
-        const dataItem = rowIndex === -1 ? this.editService.newDataItem : this.data.at(rowIndex - this.skip);
+        const dataItem = rowIndex === -1 ? this.editService.newDataItem : this.rowsToRender.find(item => +item.index === rowIndex && item.type === 'data')?.data;
         const isEditedColumn = this.editService.isEditedColumn(rowIndex, column);
         const isEditedRow = this.editService.isEdited(rowIndex);
         const type = eventArg.type === 'keydown' ? 'click' : eventArg.type;
@@ -20031,8 +19988,8 @@ class TableBodyComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableBodyComponent, deps: [{ token: DetailsService }, { token: GroupsService }, { token: ChangeNotificationService }, { token: EditService }, { token: ContextService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DomEventsService }, { token: SelectionService }, { token: CellSelectionService }, { token: ColumnInfoService }, { token: NavigationService }, { token: RowspanService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableBodyComponent, isStandalone: true, selector: "[kendoGridTableBody]", inputs: { columns: "columns", allColumns: "allColumns", groups: "groups", detailTemplate: "detailTemplate", noRecordsTemplate: "noRecordsTemplate", data: "data", skip: "skip", selectable: "selectable", filterable: "filterable", noRecordsText: "noRecordsText", isLocked: "isLocked", isLoading: "isLoading", isVirtual: "isVirtual", cellLoadingTemplate: "cellLoadingTemplate", skipGroupDecoration: "skipGroupDecoration", showGroupFooters: "showGroupFooters", lockedColumnsCount: "lockedColumnsCount", totalColumnsCount: "totalColumnsCount", virtualColumns: "virtualColumns", trackBy: "trackBy", rowSticky: "rowSticky", totalColumns: "totalColumns", rowClass: "rowClass" }, host: { properties: { "class.k-table-tbody": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableBodyComponent, deps: [{ token: DetailsService }, { token: GroupsService }, { token: ChangeNotificationService }, { token: EditService }, { token: ContextService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DomEventsService }, { token: SelectionService }, { token: CellSelectionService }, { token: ColumnInfoService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableBodyComponent, isStandalone: true, selector: "[kendoGridTableBody]", inputs: { columns: "columns", allColumns: "allColumns", groups: "groups", detailTemplate: "detailTemplate", noRecordsTemplate: "noRecordsTemplate", rowsToRender: "rowsToRender", skip: "skip", selectable: "selectable", filterable: "filterable", noRecordsText: "noRecordsText", isLocked: "isLocked", isLoading: "isLoading", isVirtual: "isVirtual", cellLoadingTemplate: "cellLoadingTemplate", skipGroupDecoration: "skipGroupDecoration", lockedColumnsCount: "lockedColumnsCount", totalColumnsCount: "totalColumnsCount", virtualColumns: "virtualColumns", trackBy: "trackBy", rowSticky: "rowSticky", totalColumns: "totalColumns", rowClass: "rowClass" }, host: { properties: { "class.k-table-tbody": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
     <ng-container *ngIf="editService.hasNewItem">
         <tr class="k-grid-add-row k-grid-edit-row k-master-row"
             kendoGridLogicalRow
@@ -20073,7 +20030,7 @@ class TableBodyComponent {
             </td>
         </tr>
     </ng-container>
-    <tr *ngIf="data?.length === 0 || data === null" class="k-grid-norecords" role="row">
+    <tr *ngIf="!rowsToRender?.length" class="k-grid-norecords" role="row">
         <td [attr.colspan]="colSpan" class="k-table-td">
             <ng-template
                 *ngIf="noRecordsTemplate?.templateRef"
@@ -20086,8 +20043,8 @@ class TableBodyComponent {
             </ng-container>
         </td>
     </tr>
-    <ng-container *ngFor="let item of data; trackBy: trackByWrapper; let rowIndex = index;">
-        <tr *ngIf="isGroup(item) && isParentGroupExpanded($any(item)) && showGroupHeader(item)"
+    <ng-container *ngFor="let item of rowsToRender; trackBy: trackByWrapper; let rowIndex = index;">
+        <tr *ngIf="item.type === 'group'"
             kendoGridGroupHeader
                 [columns]="columns"
                 [groups]="groups"
@@ -20105,8 +20062,7 @@ class TableBodyComponent {
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="groupHeaderSlaveCellsCount">
         </tr>
-        <tr
-            *ngIf="isDataItem(item) && (!$any(item).group || isDataItemInExpandedGroup($any(item)))"
+        <tr *ngIf="item.showDataItem"
             kendoGridLogicalRow
                 [dataRowIndex]="$any(item).index"
                 [dataItem]="item.data"
@@ -20119,7 +20075,7 @@ class TableBodyComponent {
             [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-master-row]="true"
-            [class.k-expanded]="isDataItem(item) && isExpanded(item)"
+            [class.k-expanded]="item.isExpanded"
             [class.k-grid-edit-row]="isEditingRow($any(item).index)"
             [attr.aria-selected]="lockedColumnsCount < 1 ? isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item) : undefined"
             [attr.data-kendo-grid-item-index]="$any(item).index"
@@ -20148,7 +20104,7 @@ class TableBodyComponent {
                 </a>
             </td>
             <ng-container *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;">
-                <td *ngIf="column.cellRowspan ? !shouldSkipCell(rowIndex, lockedColumnsCount + columnIndex) : true"
+                <td *ngIf="!item.cells?.[lockedColumnsCount + columnIndex]?.skip"
                     kendoGridCell
                         [rowIndex]="$any(item).index"
                         [columnIndex]="lockedColumnsCount + columnIndex"
@@ -20165,10 +20121,7 @@ class TableBodyComponent {
                         [dataItem]="item.data"
                         [colIndex]="columnIndex"
                         [colSpan]="column.colspan"
-                        [rowSpan]="column.cellRowspan ? getRowspan({
-                                index: rowIndex,
-                                dataItem: item
-                            }, column, lockedColumnsCount + columnIndex) : 1"
+                        [rowSpan]="item.cells[lockedColumnsCount + columnIndex]?.rowspan"
                         [attr.role]="column.tableCellsRole"
                         class="k-table-td"
                         [attr.aria-selected]="lockedColumnsCount < 1 && isSelectable({ dataItem: item.data, index: $any(item).index }) ? isAriaSelected(item, column) : undefined"
@@ -20178,24 +20131,18 @@ class TableBodyComponent {
                     [class.k-grid-edit-cell]="isEditingCell($any(item).index, column)"
                     [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
                     [attr.colspan]="column.colspan"
-                    [class.k-selected]="isSelectable && cellSelectionService.isCellSelected(item, column)"
-                    >
+                    [class.k-selected]="isSelectable && cellSelectionService.isCellSelected(item, column)">
                 </td>
             </ng-container>
         </tr>
-        <tr *ngIf="isDataItem(item) &&
-                (!$any(item).group || isDataItemInExpandedGroup($any(item))) &&
-                detailTemplate?.templateRef &&
-                detailTemplate.showIf(item.data, $any(item).index) &&
-                isExpanded(item)"
+        <tr *ngIf="item.showDetailRow"
             class="k-detail-row"
             kendoGridLogicalRow
                 [dataRowIndex]="$any(item).index"
                 [dataItem]="item.data"
                 [logicalRowIndex]="logicalRowIndex(rowIndex) + 1"
                 [logicalSlaveRow]="false"
-                [logicalCellsCount]="1"
-            >
+                [logicalCellsCount]="1">
             <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups"></td>
             <td class="k-hierarchy-cell k-table-td"></td>
             <td class="k-detail-cell k-table-td"
@@ -20207,8 +20154,7 @@ class TableBodyComponent {
                     [dataItem]="item.data"
                     [colIndex]="0"
                     [colSpan]="allColumnsSpan + 1"
-                    role="gridcell" aria-selected="false"
-                >
+                    role="gridcell" aria-selected="false">
                 <ng-template
                     [ngTemplateOutlet]="detailTemplate.templateRef"
                     [ngTemplateOutletContext]="{
@@ -20219,10 +20165,7 @@ class TableBodyComponent {
                 </ng-template>
             </td>
         </tr>
-        <tr *ngIf="isFooter(item) &&
-                $any(item).group &&
-                (isFooterItemInExpandedGroup($any(item)) || (showGroupFooters && isParentGroupExpanded($any(item).group))) &&
-                !$any(item.data).hideFooter"
+        <tr *ngIf="item.type === 'footer'"
             class="k-group-footer"
             kendoGridLogicalRow
                 [logicalRowIndex]="logicalRowIndex(rowIndex)"
@@ -20238,8 +20181,7 @@ class TableBodyComponent {
                 kendoGridLogicalCell
                     [logicalRowIndex]="logicalRowIndex(rowIndex)"
                     [logicalColIndex]="0"
-                    aria-selected="false"
-                >
+                    aria-selected="false">
             </td>
             <td kendoGridLogicalCell
                     [logicalRowIndex]="logicalRowIndex(rowIndex)"
@@ -20308,7 +20250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             </td>
         </tr>
     </ng-container>
-    <tr *ngIf="data?.length === 0 || data === null" class="k-grid-norecords" role="row">
+    <tr *ngIf="!rowsToRender?.length" class="k-grid-norecords" role="row">
         <td [attr.colspan]="colSpan" class="k-table-td">
             <ng-template
                 *ngIf="noRecordsTemplate?.templateRef"
@@ -20321,8 +20263,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             </ng-container>
         </td>
     </tr>
-    <ng-container *ngFor="let item of data; trackBy: trackByWrapper; let rowIndex = index;">
-        <tr *ngIf="isGroup(item) && isParentGroupExpanded($any(item)) && showGroupHeader(item)"
+    <ng-container *ngFor="let item of rowsToRender; trackBy: trackByWrapper; let rowIndex = index;">
+        <tr *ngIf="item.type === 'group'"
             kendoGridGroupHeader
                 [columns]="columns"
                 [groups]="groups"
@@ -20340,8 +20282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="groupHeaderSlaveCellsCount">
         </tr>
-        <tr
-            *ngIf="isDataItem(item) && (!$any(item).group || isDataItemInExpandedGroup($any(item)))"
+        <tr *ngIf="item.showDataItem"
             kendoGridLogicalRow
                 [dataRowIndex]="$any(item).index"
                 [dataItem]="item.data"
@@ -20354,7 +20295,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-master-row]="true"
-            [class.k-expanded]="isDataItem(item) && isExpanded(item)"
+            [class.k-expanded]="item.isExpanded"
             [class.k-grid-edit-row]="isEditingRow($any(item).index)"
             [attr.aria-selected]="lockedColumnsCount < 1 ? isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item) : undefined"
             [attr.data-kendo-grid-item-index]="$any(item).index"
@@ -20383,7 +20324,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 </a>
             </td>
             <ng-container *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;">
-                <td *ngIf="column.cellRowspan ? !shouldSkipCell(rowIndex, lockedColumnsCount + columnIndex) : true"
+                <td *ngIf="!item.cells?.[lockedColumnsCount + columnIndex]?.skip"
                     kendoGridCell
                         [rowIndex]="$any(item).index"
                         [columnIndex]="lockedColumnsCount + columnIndex"
@@ -20400,10 +20341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         [dataItem]="item.data"
                         [colIndex]="columnIndex"
                         [colSpan]="column.colspan"
-                        [rowSpan]="column.cellRowspan ? getRowspan({
-                                index: rowIndex,
-                                dataItem: item
-                            }, column, lockedColumnsCount + columnIndex) : 1"
+                        [rowSpan]="item.cells[lockedColumnsCount + columnIndex]?.rowspan"
                         [attr.role]="column.tableCellsRole"
                         class="k-table-td"
                         [attr.aria-selected]="lockedColumnsCount < 1 && isSelectable({ dataItem: item.data, index: $any(item).index }) ? isAriaSelected(item, column) : undefined"
@@ -20413,24 +20351,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [class.k-grid-edit-cell]="isEditingCell($any(item).index, column)"
                     [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
                     [attr.colspan]="column.colspan"
-                    [class.k-selected]="isSelectable && cellSelectionService.isCellSelected(item, column)"
-                    >
+                    [class.k-selected]="isSelectable && cellSelectionService.isCellSelected(item, column)">
                 </td>
             </ng-container>
         </tr>
-        <tr *ngIf="isDataItem(item) &&
-                (!$any(item).group || isDataItemInExpandedGroup($any(item))) &&
-                detailTemplate?.templateRef &&
-                detailTemplate.showIf(item.data, $any(item).index) &&
-                isExpanded(item)"
+        <tr *ngIf="item.showDetailRow"
             class="k-detail-row"
             kendoGridLogicalRow
                 [dataRowIndex]="$any(item).index"
                 [dataItem]="item.data"
                 [logicalRowIndex]="logicalRowIndex(rowIndex) + 1"
                 [logicalSlaveRow]="false"
-                [logicalCellsCount]="1"
-            >
+                [logicalCellsCount]="1">
             <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups"></td>
             <td class="k-hierarchy-cell k-table-td"></td>
             <td class="k-detail-cell k-table-td"
@@ -20442,8 +20374,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [dataItem]="item.data"
                     [colIndex]="0"
                     [colSpan]="allColumnsSpan + 1"
-                    role="gridcell" aria-selected="false"
-                >
+                    role="gridcell" aria-selected="false">
                 <ng-template
                     [ngTemplateOutlet]="detailTemplate.templateRef"
                     [ngTemplateOutletContext]="{
@@ -20454,10 +20385,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 </ng-template>
             </td>
         </tr>
-        <tr *ngIf="isFooter(item) &&
-                $any(item).group &&
-                (isFooterItemInExpandedGroup($any(item)) || (showGroupFooters && isParentGroupExpanded($any(item).group))) &&
-                !$any(item.data).hideFooter"
+        <tr *ngIf="item.type === 'footer'"
             class="k-group-footer"
             kendoGridLogicalRow
                 [logicalRowIndex]="logicalRowIndex(rowIndex)"
@@ -20473,8 +20401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 kendoGridLogicalCell
                     [logicalRowIndex]="logicalRowIndex(rowIndex)"
                     [logicalColIndex]="0"
-                    aria-selected="false"
-                >
+                    aria-selected="false">
             </td>
             <td kendoGridLogicalCell
                     [logicalRowIndex]="logicalRowIndex(rowIndex)"
@@ -20503,7 +20430,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         GroupHeaderComponent, IconWrapperComponent, NgTemplateOutlet, ResizeSensorComponent
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: DetailsService }, { type: GroupsService }, { type: ChangeNotificationService }, { type: EditService }, { type: ContextService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: DomEventsService }, { type: SelectionService }, { type: CellSelectionService }, { type: ColumnInfoService }, { type: NavigationService }, { type: RowspanService }]; }, propDecorators: { columns: [{
+        }], ctorParameters: function () { return [{ type: DetailsService }, { type: GroupsService }, { type: ChangeNotificationService }, { type: EditService }, { type: ContextService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: DomEventsService }, { type: SelectionService }, { type: CellSelectionService }, { type: ColumnInfoService }, { type: NavigationService }]; }, propDecorators: { columns: [{
                 type: Input
             }], allColumns: [{
                 type: Input
@@ -20513,7 +20440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], noRecordsTemplate: [{
                 type: Input
-            }], data: [{
+            }], rowsToRender: [{
                 type: Input
             }], skip: [{
                 type: Input
@@ -20533,8 +20460,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], skipGroupDecoration: [{
                 type: Input
-            }], showGroupFooters: [{
-                type: Input
             }], lockedColumnsCount: [{
                 type: Input
             }], totalColumnsCount: [{
@@ -21289,8 +21214,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1750771045,
-    version: '19.1.2',
+    publishDate: 1751281289,
+    version: '19.2.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -23323,6 +23248,141 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['style.min-width']
             }] } });
 
+/**
+ * @hidden
+ */
+class RowspanService {
+    skipCells = [];
+    addCells(rowIndex, colIndex, rowspan) {
+        for (let i = 1; i < rowspan; i++) {
+            if (!this.skipCells.some(this.cellExists(rowIndex + i, colIndex))) {
+                this.skipCells.push({ rowIndex: rowIndex + i, colIndex });
+            }
+        }
+    }
+    reset() {
+        this.skipCells = [];
+    }
+    shouldSkip(rowIndex, colIndex) {
+        return !!this.skipCells.find(this.cellExists(rowIndex, colIndex));
+    }
+    cellExists = (rowIndex, colIndex) => cell => cell.rowIndex === rowIndex && cell.colIndex === colIndex;
+}
+
+/**
+ * @hidden
+ */
+class DataMappingService {
+    rowspanService;
+    groupsService;
+    detailsService;
+    recalculateRowspan = true;
+    dataArray = null;
+    constructor(rowspanService, groupsService, detailsService) {
+        this.rowspanService = rowspanService;
+        this.groupsService = groupsService;
+        this.detailsService = detailsService;
+    }
+    isGroup(item) {
+        return item.type === 'group';
+    }
+    /**
+     * Maps the data to the Grid row items, applying rowspan and detail row logic.
+     */
+    dataMapper(data, nonLockedColumnsToRender, lockedLeafColumns, detailTemplate, showFooter) {
+        const result = [];
+        if (!data || !nonLockedColumnsToRender && !lockedLeafColumns) {
+            return [];
+        }
+        let dataIndex = 0;
+        for (const item of data) {
+            if (this.shouldRenderItem(item, detailTemplate, showFooter)) {
+                if (item.type === 'data') {
+                    item.cells = [];
+                    for (let i = 0; i < (lockedLeafColumns.length + nonLockedColumnsToRender.length); i++) {
+                        const column = i < lockedLeafColumns.length ? lockedLeafColumns.get(i) : nonLockedColumnsToRender.get(i - lockedLeafColumns.length);
+                        const cell = {};
+                        if (column.cellRowspan && this.shouldSkipCell(dataIndex, i)) {
+                            cell.skip = true;
+                        }
+                        else {
+                            cell.rowspan = column.cellRowspan ? this.getRowspan({
+                                index: dataIndex,
+                                dataItem: item
+                            }, column, i, data) : 1;
+                        }
+                        item.cells.push(cell);
+                    }
+                }
+                result.push(item);
+            }
+            dataIndex++;
+        }
+        this.recalculateRowspan = true;
+        this.rowspanService.reset();
+        return result;
+    }
+    isDataItem(item) {
+        return !this.isGroup(item) && !this.isFooter(item);
+    }
+    isFooter(item) {
+        return item.type === 'footer';
+    }
+    isFooterItemInExpandedGroup(item) {
+        const footerItem = { data: item.data, index: item.groupIndex, parentGroup: item.group.parentGroup };
+        return this.isInExpandedGroup(footerItem);
+    }
+    isDataItemInExpandedGroup(item) {
+        const dataItem = { data: item.group.data, index: item.groupIndex, parentGroup: item.group.parentGroup };
+        return this.isInExpandedGroup(dataItem);
+    }
+    isInExpandedGroup(item) {
+        return this.groupsService.isInExpandedGroup(item);
+    }
+    isParentGroupExpanded(item) {
+        return this.groupsService.isInExpandedGroup(item.parentGroup);
+    }
+    isExpanded(viewItem) {
+        return this.detailsService.isExpanded(viewItem.index, viewItem.data);
+    }
+    shouldRenderItem(item, detailTemplate, showFooter) {
+        const renderGroupHeader = this.isGroup(item) && this.isParentGroupExpanded(item);
+        const renderDataItem = this.isDataItem(item) && (!item.group || this.isDataItemInExpandedGroup(item));
+        const renderDetailTemplate = renderDataItem && detailTemplate?.templateRef && detailTemplate.showIf(item.data, item.index) && this.isExpanded(item);
+        const isVisibleFooter = this.isFooter(item) && item.group && (this.isFooterItemInExpandedGroup(item) || (showFooter && this.isParentGroupExpanded(item.group)));
+        const renderFooter = isVisibleFooter && !item.data.hideFooter;
+        item.showDataItem = renderDataItem;
+        item.showDetailRow = renderDataItem && renderDetailTemplate;
+        item.isExpanded = this.isExpanded(item);
+        return renderGroupHeader || renderDataItem || renderDetailTemplate || renderFooter;
+    }
+    shouldSkipCell(rowIndex, colIndex) {
+        return this.rowspanService.shouldSkip(rowIndex, colIndex);
+    }
+    cachedDataArray(data) {
+        if (!this.dataArray) {
+            this.dataArray = data.map(item => item);
+        }
+        return this.dataArray;
+    }
+    getRowspan(row, column, colIndex, data) {
+        if (this.recalculateRowspan) {
+            this.dataArray = null;
+            this.recalculateRowspan = false;
+        }
+        const rowspan = column.cellRowspan(row, column, this.cachedDataArray(data));
+        if (rowspan > 1) {
+            this.rowspanService.addCells(row.index, colIndex, rowspan);
+        }
+        return rowspan;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataMappingService, deps: [{ token: RowspanService }, { token: GroupsService }, { token: DetailsService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataMappingService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataMappingService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: RowspanService }, { type: GroupsService }, { type: DetailsService }]; } });
+
 const elementAt = (index, elements, elementOffset) => {
     for (let idx = 0, elementIdx = 0; idx < elements.length; idx++) {
         const offset = elementOffset(elements[idx]);
@@ -23387,14 +23447,13 @@ class ListComponent {
     changeDetector;
     pdfService;
     columnInfo;
-    rowspanService;
+    dataMappingService;
     hostClass = true;
     hostRole = 'presentation';
     data;
     groups = [];
     total;
     rowHeight;
-    stickyRowHeight;
     detailRowHeight;
     take;
     skip = 0;
@@ -23419,6 +23478,7 @@ class ListComponent {
     scrollBottom = new EventEmitter();
     totalHeight;
     columnsStartIdx = 0;
+    allItems = [];
     get showFooter() {
         return this.groupable && this.groupable.showFooter;
     }
@@ -23444,6 +23504,7 @@ class ListComponent {
     columnsEndIdx;
     viewportColumnsWidth;
     scrollLeft = 0;
+    recalculateRowspan = true;
     observer;
     get lockedLeafColumns() {
         return this.columns.lockedLeafColumns;
@@ -23476,7 +23537,8 @@ class ListComponent {
     rtl = false;
     columnUpdateFrame;
     hasLockedContainer;
-    constructor(scrollerFactory, detailsService, changeNotification, suspendService, groupsService, ngZone, renderer, scrollSyncService, resizeService, editService, supportService, navigationService, scrollRequestService, ctx, columnResizingService, changeDetector, pdfService, columnInfo, rowspanService) {
+    minRowHeight;
+    constructor(scrollerFactory, detailsService, changeNotification, suspendService, groupsService, ngZone, renderer, scrollSyncService, resizeService, editService, supportService, navigationService, scrollRequestService, ctx, columnResizingService, changeDetector, pdfService, columnInfo, dataMappingService) {
         this.changeNotification = changeNotification;
         this.suspendService = suspendService;
         this.groupsService = groupsService;
@@ -23492,12 +23554,13 @@ class ListComponent {
         this.changeDetector = changeDetector;
         this.pdfService = pdfService;
         this.columnInfo = columnInfo;
-        this.rowspanService = rowspanService;
+        this.dataMappingService = dataMappingService;
         this.scroller = scrollerFactory(this.dispatcher);
         this.subscriptions = detailsService.changes.subscribe(x => this.detailExpand(x));
         this.subscriptions.add(scrollRequestService.requests.subscribe(req => isPresent(req.adjustIndex) ? this.scrollTo(req.request, req.adjustIndex) : this.scrollToItem(req.request)));
     }
     ngOnInit() {
+        this.minRowHeight = this.isVirtual ? this.rowHeight || calcRowHeight(this.table.nativeElement) : this.rowHeight;
         this.init();
         this.subscriptions.add(this.ngZone.runOutsideAngular(this.handleRowSync.bind(this)));
         this.subscriptions.add(this.ngZone.runOutsideAngular(this.handleRowNavigationLocked.bind(this)));
@@ -23533,6 +23596,22 @@ class ListComponent {
         if (this.virtualColumns && (!this.viewportColumns || this.viewportWidthChange())) {
             this.updateViewportColumns();
         }
+        const shouldCalculatePageSize = isDocumentAvailable() && this.isVirtual && this.ctx.grid && !this.ctx.grid.pageSize;
+        if (shouldCalculatePageSize) {
+            const calculatedPageSize = this.calcVirtualPageSize();
+            if (calculatedPageSize > 0) {
+                this.ngZone.onMicrotaskEmpty.pipe(take(1)).subscribe(() => {
+                    this.ctx.grid.pageSize = calculatedPageSize;
+                    this.ngZone.run(() => {
+                        this.pageChange.emit({
+                            skip: this.skip || 0,
+                            take: calculatedPageSize
+                        });
+                    });
+                });
+            }
+        }
+        this.allItems = this.dataMappingService.dataMapper(this.data, this.nonLockedColumnsToRender, this.lockedLeafColumns, this.detailTemplate, this.showFooter);
     }
     ngAfterViewInit() {
         if (!isDocumentAvailable()) {
@@ -23571,7 +23650,7 @@ class ListComponent {
         if (this.suspendService.scroll) {
             return;
         }
-        this.rowHeightService = new RowHeightService(this.total, this.rowHeight, this.detailRowHeight);
+        this.rowHeightService = new RowHeightService(this.total, this.rowHeight || this.minRowHeight, this.detailRowHeight);
         this.totalHeight = this.rowHeightService.totalHeight();
         if (!isUniversal()) {
             this.ngZone.runOutsideAngular(this.createScroller.bind(this));
@@ -23600,6 +23679,36 @@ class ListComponent {
             args.preventDefault();
         }
     }
+    updateViewportColumns(range) {
+        const columns = this.columns.nonLockedLeafColumns.toArray();
+        // eslint-disable-next-line prefer-const
+        let { startIdx, endIdx, offset } = range || this.calculateViewportColumns();
+        const start = Math.max(0, startIdx - bufferSize);
+        const end = Math.min(endIdx + bufferSize, columns.length - 1);
+        if (start < startIdx) {
+            for (let idx = startIdx - 1; idx >= start; idx--) {
+                offset -= columns[idx].width;
+            }
+        }
+        let currentColumns = columns.slice(start, end + 1);
+        this.viewportColumnsWidth = currentColumns.reduce((total, column) => total + column.width, 0);
+        const stickyBeforeStart = columns.slice(0, start).filter(c => c.sticky && !currentColumns.some(col => col === c));
+        const stickyAfterEnd = columns.slice(end, columns.length).filter(c => c.sticky && !currentColumns.some(col => col === c));
+        currentColumns = [...stickyBeforeStart, ...currentColumns, ...stickyAfterEnd];
+        if (start > 0) {
+            const offsetColumn = new ColumnBase();
+            offsetColumn.width = offset;
+            currentColumns.unshift(offsetColumn);
+        }
+        this.viewportColumns = new QueryList();
+        this.viewportColumns.reset(currentColumns);
+        this.columnsStartIdx = start;
+        this.columnsEndIdx = end;
+        this.columnInfo.columnRangeChange.emit({ start, end, offset });
+        if (!range) {
+            this.updateColumnViewport(startIdx, endIdx);
+        }
+    }
     detailExpand({ index, expand }) {
         if (expand) {
             this.rowHeightService.expandDetail(index);
@@ -23640,10 +23749,10 @@ class ListComponent {
         const observable = this.scroller
             .create(this.rowHeightService, this.skip, this.take, this.total);
         this.skipScroll = false;
-        this.scrollerSubscription = observable.pipe(filter((x) => x instanceof PageAction), filter(() => {
+        this.scrollerSubscription = observable.pipe(filter((x) => x instanceof PageAction), filter((x) => {
             const temp = this.skipScroll;
             this.skipScroll = false;
-            return !temp;
+            return !temp && x.skip !== this.skip;
         }), tap(() => this.rebind = true))
             .subscribe((x) => this.ngZone.run(() => this.pageChange.emit(x)));
         this.scrollerSubscription.add(observable.pipe(filter((x) => x instanceof ScrollAction))
@@ -23682,7 +23791,6 @@ class ListComponent {
             .pipe(filter(isLocked), switchMapTo(onStable())), this.editService.changed, this.resizeService.changes, this.columnResizingService.changes
             .pipe(filter(change => change.type === 'end')), this.supportService.changes)
             .pipe(tap(() => {
-            this.ngZone.run(() => this.rowspanService.reset());
             this.resetNavigationViewport();
         }), filter(isLocked))
             .subscribe(() => {
@@ -23826,36 +23934,6 @@ class ListComponent {
         })
             .forEach(setHeight(this.renderer));
     }
-    updateViewportColumns(range) {
-        const columns = this.columns.nonLockedLeafColumns.toArray();
-        // eslint-disable-next-line prefer-const
-        let { startIdx, endIdx, offset } = range || this.calculateViewportColumns();
-        const start = Math.max(0, startIdx - bufferSize);
-        const end = Math.min(endIdx + bufferSize, columns.length - 1);
-        if (start < startIdx) {
-            for (let idx = startIdx - 1; idx >= start; idx--) {
-                offset -= columns[idx].width;
-            }
-        }
-        let currentColumns = columns.slice(start, end + 1);
-        this.viewportColumnsWidth = currentColumns.reduce((total, column) => total + column.width, 0);
-        const stickyBeforeStart = columns.slice(0, start).filter(c => c.sticky && !currentColumns.some(col => col === c));
-        const stickyAfterEnd = columns.slice(end, columns.length).filter(c => c.sticky && !currentColumns.some(col => col === c));
-        currentColumns = [...stickyBeforeStart, ...currentColumns, ...stickyAfterEnd];
-        if (start > 0) {
-            const offsetColumn = new ColumnBase();
-            offsetColumn.width = offset;
-            currentColumns.unshift(offsetColumn);
-        }
-        this.viewportColumns = new QueryList();
-        this.viewportColumns.reset(currentColumns);
-        this.columnsStartIdx = start;
-        this.columnsEndIdx = end;
-        this.columnInfo.columnRangeChange.emit({ start, end, offset });
-        if (!range) {
-            this.updateColumnViewport(startIdx, endIdx);
-        }
-    }
     handleColumnScroll() {
         const container = this.container.nativeElement;
         const scrollLeft = container.scrollLeft;
@@ -23927,8 +24005,15 @@ class ListComponent {
         }
         return element.offsetLeft;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListComponent, deps: [{ token: SCROLLER_FACTORY_TOKEN }, { token: DetailsService }, { token: ChangeNotificationService }, { token: SuspendService }, { token: GroupsService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: ScrollSyncService }, { token: ResizeService }, { token: EditService }, { token: BrowserSupportService }, { token: NavigationService }, { token: ScrollRequestService }, { token: ContextService }, { token: ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: PDFService }, { token: ColumnInfoService }, { token: RowspanService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListComponent, isStandalone: true, selector: "kendo-grid-list", inputs: { data: "data", groups: "groups", total: "total", rowHeight: "rowHeight", stickyRowHeight: "stickyRowHeight", detailRowHeight: "detailRowHeight", take: "take", skip: "skip", columns: "columns", detailTemplate: "detailTemplate", noRecordsTemplate: "noRecordsTemplate", selectable: "selectable", groupable: "groupable", filterable: "filterable", rowClass: "rowClass", rowSticky: "rowSticky", loading: "loading", trackBy: "trackBy", virtualColumns: "virtualColumns", isVirtual: "isVirtual", cellLoadingTemplate: "cellLoadingTemplate", loadingTemplate: "loadingTemplate", sort: "sort", size: "size" }, outputs: { contentScroll: "contentScroll", pageChange: "pageChange", scrollBottom: "scrollBottom" }, host: { properties: { "class.k-grid-container": "this.hostClass", "attr.role": "this.hostRole" } }, providers: [
+    calcVirtualPageSize = () => {
+        const containerHeight = this.container.nativeElement.offsetHeight;
+        if (containerHeight && (this.rowHeight ?? this.minRowHeight)) {
+            return Math.ceil((containerHeight / (this.rowHeight ?? this.minRowHeight)) * 1.5);
+        }
+        return 0;
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListComponent, deps: [{ token: SCROLLER_FACTORY_TOKEN }, { token: DetailsService }, { token: ChangeNotificationService }, { token: SuspendService }, { token: GroupsService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: ScrollSyncService }, { token: ResizeService }, { token: EditService }, { token: BrowserSupportService }, { token: NavigationService }, { token: ScrollRequestService }, { token: ContextService }, { token: ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: PDFService }, { token: ColumnInfoService }, { token: DataMappingService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListComponent, isStandalone: true, selector: "kendo-grid-list", inputs: { data: "data", groups: "groups", total: "total", rowHeight: "rowHeight", detailRowHeight: "detailRowHeight", take: "take", skip: "skip", columns: "columns", detailTemplate: "detailTemplate", noRecordsTemplate: "noRecordsTemplate", selectable: "selectable", groupable: "groupable", filterable: "filterable", rowClass: "rowClass", rowSticky: "rowSticky", loading: "loading", trackBy: "trackBy", virtualColumns: "virtualColumns", isVirtual: "isVirtual", cellLoadingTemplate: "cellLoadingTemplate", loadingTemplate: "loadingTemplate", sort: "sort", size: "size" }, outputs: { contentScroll: "contentScroll", pageChange: "pageChange", scrollBottom: "scrollBottom" }, host: { properties: { "class.k-grid-container": "this.hostClass", "attr.role": "this.hostRole" } }, providers: [
             {
                 provide: SCROLLER_FACTORY_TOKEN,
                 useValue: DEFAULT_SCROLLER_FACTORY
@@ -23964,13 +24049,12 @@ class ListComponent {
                     role="presentation"
                     [groups]="groups"
                     [isLocked]="true"
-                    [data]="data"
+                    [rowsToRender]="allItems"
                     [noRecordsText]="''"
                     [columns]="$any(lockedLeafColumns)"
                     [totalColumnsCount]="leafColumns.length"
                     [totalColumns]="columns"
                     [detailTemplate]="detailTemplate"
-                    [showGroupFooters]="showFooter"
                     [skip]="skip"
                     [selectable]="selectable"
                     [trackBy]="trackBy"
@@ -24012,9 +24096,8 @@ class ListComponent {
                 <tbody kendoGridTableBody
                     role="rowgroup"
                     [skipGroupDecoration]="isLocked"
-                    [data]="data"
+                    [rowsToRender]="allItems"
                     [groups]="groups"
-                    [showGroupFooters]="showFooter"
                     [columns]="$any(nonLockedColumnsToRender)"
                     [allColumns]="$any(nonLockedLeafColumns)"
                     [detailTemplate]="detailTemplate"
@@ -24044,7 +24127,7 @@ class ListComponent {
             <div [style.width.px]="totalWidth"></div>
         </div>
     </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: TableDirective, selector: "[kendoGridResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "directive", type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { kind: "component", 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", "totalColumns", "rowClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: TableDirective, selector: "[kendoGridResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "directive", type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { kind: "component", type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "rowsToRender", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "totalColumns", "rowClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
@@ -24087,13 +24170,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     role="presentation"
                     [groups]="groups"
                     [isLocked]="true"
-                    [data]="data"
+                    [rowsToRender]="allItems"
                     [noRecordsText]="''"
                     [columns]="$any(lockedLeafColumns)"
                     [totalColumnsCount]="leafColumns.length"
                     [totalColumns]="columns"
                     [detailTemplate]="detailTemplate"
-                    [showGroupFooters]="showFooter"
                     [skip]="skip"
                     [selectable]="selectable"
                     [trackBy]="trackBy"
@@ -24135,9 +24217,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 <tbody kendoGridTableBody
                     role="rowgroup"
                     [skipGroupDecoration]="isLocked"
-                    [data]="data"
+                    [rowsToRender]="allItems"
                     [groups]="groups"
-                    [showGroupFooters]="showFooter"
                     [columns]="$any(nonLockedColumnsToRender)"
                     [allColumns]="$any(nonLockedLeafColumns)"
                     [detailTemplate]="detailTemplate"
@@ -24174,7 +24255,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SCROLLER_FACTORY_TOKEN]
-                }] }, { type: DetailsService }, { type: ChangeNotificationService }, { type: SuspendService }, { type: GroupsService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: ScrollSyncService }, { type: ResizeService }, { type: EditService }, { type: BrowserSupportService }, { type: NavigationService }, { type: ScrollRequestService }, { type: ContextService }, { type: ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: PDFService }, { type: ColumnInfoService }, { type: RowspanService }]; }, propDecorators: { hostClass: [{
+                }] }, { type: DetailsService }, { type: ChangeNotificationService }, { type: SuspendService }, { type: GroupsService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: ScrollSyncService }, { type: ResizeService }, { type: EditService }, { type: BrowserSupportService }, { type: NavigationService }, { type: ScrollRequestService }, { type: ContextService }, { type: ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: PDFService }, { type: ColumnInfoService }, { type: DataMappingService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-grid-container']
             }], hostRole: [{
@@ -24188,8 +24269,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], rowHeight: [{
                 type: Input
-            }], stickyRowHeight: [{
-                type: Input
             }], detailRowHeight: [{
                 type: Input
             }], take: [{
@@ -24239,10 +24318,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['container', { static: true }]
             }], lockedContainer: [{
                 type: ViewChild,
-                args: ['lockedContainer', { static: false }]
+                args: ['lockedContainer']
             }], lockedTable: [{
                 type: ViewChild,
-                args: ['lockedTable', { static: false }]
+                args: ['lockedTable']
             }], table: [{
                 type: ViewChild,
                 args: ['table', { static: true }]
@@ -27566,6 +27645,538 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: [GroupToolbarToolComponent]
             }] } });
 
+/**
+ * A directive that handles in-memory data operations like [paging]({% slug paging_grid %}),
+ * [sorting]({% slug sorting_grid %}), and [grouping]({% slug grouping_grid %}).
+ *
+ * Use this directive with local data and enable the Grid data operations with minimal configuration.
+ * ([More information and examples]({% slug local_data_grid %}#toc-using-the-data-binding-directive)).
+ *
+ * @example
+ * ```html
+ * <kendo-grid [kendoGridBinding]="gridData"></kendo-grid>
+ * ```
+ * @remarks
+ * Applied to: {@link GridComponent}.
+ */
+class DataBindingDirective {
+    grid;
+    changeDetector;
+    localDataChangesService;
+    rowReorderService;
+    /**
+     * Sets the number of records to skip in the Grid.
+     *
+     * @default 0
+     */
+    set skip(value) {
+        if (!isPresent(value)) {
+            value = 0;
+        }
+        this.grid.skip = this.state.skip = value;
+        if (this.rowReorderService) {
+            this.rowReorderService.skip = value;
+        }
+    }
+    /**
+     * Sets the sort descriptors for the Grid data.
+     *
+     */
+    set sort(value) {
+        this.grid.sort = this.state.sort = value;
+    }
+    /**
+     * Sets the filter descriptor for the Grid data.
+     *
+     */
+    set filter(value) {
+        this.grid.filter = this.state.filter = value;
+    }
+    /**
+     * Sets the page size for the Grid pager.
+     *
+     */
+    set pageSize(value) {
+        this.grid.pageSize = this.state.take = value;
+    }
+    /**
+     * Sets the group descriptors for the Grid data.
+     *
+     */
+    set group(value) {
+        this.grid.group = this.state.group = value;
+    }
+    /**
+     * Sets the data array for the Grid.
+     *
+     */
+    set data(value) {
+        this.originalData = value || [];
+        if (this.localDataChangesService) {
+            this.localDataChangesService.data = value;
+        }
+        this.dataChanged = true;
+    }
+    state = {
+        skip: 0
+    };
+    originalData = [];
+    dataChanged;
+    stateChangeSubscription;
+    dataChangedSubscription;
+    rowReorderSubscription;
+    constructor(grid, changeDetector, localDataChangesService, rowReorderService, ctx) {
+        this.grid = grid;
+        this.changeDetector = changeDetector;
+        this.localDataChangesService = localDataChangesService;
+        this.rowReorderService = rowReorderService;
+        if (localDataChangesService) {
+            this.dataChangedSubscription = this.localDataChangesService.changes.subscribe(this.rebind.bind(this));
+        }
+        ctx && (ctx.dataBindingDirective = this);
+    }
+    /**
+     * @hidden
+     */
+    ngOnInit() {
+        this.applyState(this.state);
+        this.stateChangeSubscription = this.grid
+            .dataStateChange
+            .subscribe(this.onStateChange.bind(this));
+        if (this.rowReorderService) {
+            this.rowReorderSubscription = this.grid
+                .rowReorder
+                .subscribe(this.onRowReorder.bind(this));
+        }
+    }
+    /**
+     * @hidden
+     */
+    ngOnDestroy() {
+        if (this.stateChangeSubscription) {
+            this.stateChangeSubscription.unsubscribe();
+        }
+        if (this.dataChangedSubscription) {
+            this.dataChangedSubscription.unsubscribe();
+        }
+        if (this.rowReorderSubscription) {
+            this.rowReorderSubscription.unsubscribe();
+        }
+    }
+    /**
+     * @hidden
+     */
+    ngOnChanges(changes) {
+        if (anyChanged(["pageSize", "skip", "sort", "group", "filter"], changes)) {
+            this.rebind();
+        }
+    }
+    ngDoCheck() {
+        if (this.dataChanged) {
+            this.updateGridData();
+        }
+    }
+    /**
+     * @hidden
+     */
+    onStateChange(state) {
+        this.applyState(state);
+        this.rebind();
+    }
+    /**
+     * @hidden
+     */
+    onRowReorder(ev) {
+        this.rowReorderService.reorderRows(ev, this.originalData);
+        this.rebind();
+    }
+    /**
+     * @hidden
+     */
+    rebind() {
+        this.data = this.originalData;
+        this.updateGridData();
+        this.notifyDataChange();
+    }
+    /**
+     * Notifies the Grid that its data has changed.
+     */
+    notifyDataChange() {
+        this.grid.onDataChange();
+        if (this.changeDetector) {
+            this.changeDetector.markForCheck();
+        }
+    }
+    process(state) {
+        if (this.grid.isVirtual && (!isPresent(state.take) || state.take === 0)) {
+            return {
+                data: [],
+                total: this.originalData?.length || 0
+            };
+        }
+        return process(this.originalData, state);
+    }
+    applyState({ skip, take, sort, group, filter }) {
+        this.skip = skip;
+        this.pageSize = take;
+        this.sort = sort;
+        this.group = group;
+        this.filter = filter;
+    }
+    updateGridData() {
+        this.grid.data = this.process(this.state);
+        this.grid.updateNavigationMetadata();
+        this.dataChanged = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataBindingDirective, deps: [{ token: GridComponent }, { token: i0.ChangeDetectorRef }, { token: LocalDataChangesService }, { token: RowReorderService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DataBindingDirective, isStandalone: true, selector: "[kendoGridBinding]", inputs: { skip: "skip", sort: "sort", filter: "filter", pageSize: "pageSize", group: "group", data: ["kendoGridBinding", "data"] }, exportAs: ["kendoGridBinding"], usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataBindingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridBinding]',
+                    exportAs: 'kendoGridBinding',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: GridComponent }, { type: i0.ChangeDetectorRef }, { type: LocalDataChangesService }, { type: RowReorderService }, { type: ContextService }]; }, propDecorators: { skip: [{
+                type: Input
+            }], sort: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }], data: [{
+                type: Input,
+                args: ["kendoGridBinding"]
+            }] } });
+
+const hasGroups = (items) => items && items.length && items[0].field && items[0].items;
+const groupDescriptorsPresent = (descriptors) => isPresent(descriptors) && descriptors.length > 0;
+const processGroups = (data, state) => process(data, state).data;
+const removeParentDescriptors = (parents, owner) => g => g.field !== owner.field && !parents.some(y => y.field === g.field);
+const findGroup = (groupIndex, groups) => {
+    const parents = [];
+    return {
+        group: groupIndex.split("_").reduce((acc, x) => {
+            const idx = parseInt(x, 10);
+            if (acc.items) {
+                parents.push(acc);
+                return acc.items[idx];
+            }
+            return isArray(acc) ? acc[idx] : acc;
+        }, groups),
+        parents
+    };
+};
+const findChildren = (data, parents) => {
+    const filters = parents.map(p => ({ field: p.field, operator: "eq", value: p.value }));
+    return filterBy(data, {
+        filters: filters,
+        logic: "and"
+    });
+};
+/**
+ * @hidden
+ */
+const count = (groups, includeFooters = false) => (groups.reduce((acc, group) => {
+    if (!group.skipHeader) {
+        acc++;
+    }
+    if (group.items) {
+        const children = count(group.items, includeFooters);
+        if (includeFooters && children && !group.hideFooter) {
+            acc++;
+        }
+        acc += children;
+    }
+    return acc;
+}, 0));
+/**
+ * @hidden
+ */
+const noDescriptors = (descriptors) => !isPresent(descriptors) || !descriptors.length;
+/**
+ * @hidden
+ */
+const slice = (groups, skip, take, includeFooters = false) => {
+    if (!isPresent(take)) {
+        return groups;
+    }
+    const result = [];
+    for (let idx = 0, length = groups.length; idx < length; idx++) {
+        if (take <= 0) {
+            break;
+        }
+        const group = groups[idx];
+        const groupItems = group.items;
+        let itemCount = count(groupItems, includeFooters);
+        if (includeFooters && groupItems.length) {
+            itemCount++;
+        }
+        const skipHeader = skip > 0;
+        if (skip) {
+            skip--;
+            if (itemCount && skip >= itemCount) {
+                skip -= itemCount;
+                continue;
+            }
+        }
+        if (!skipHeader || itemCount) {
+            const items = [];
+            let hideFooter = true;
+            if (!skipHeader) {
+                take--;
+            }
+            if (take) {
+                if (hasGroups(groupItems)) {
+                    const children = slice(groupItems, skip, take, includeFooters);
+                    items.push(...children);
+                    take -= count(children, includeFooters);
+                }
+                else {
+                    items.push(...groupItems.slice(skip, Math.min(skip + take, groupItems.length)));
+                    take -= items.length;
+                }
+                if (take && includeFooters) {
+                    hideFooter = false;
+                    take--;
+                }
+                skip = 0;
+            }
+            result.push({
+                aggregates: group.aggregates,
+                field: group.field,
+                hideFooter,
+                items,
+                offset: idx,
+                skipHeader,
+                value: group.value
+            });
+        }
+    }
+    return result;
+};
+const skippedHeaders = (groupItem) => {
+    let total = 0;
+    while (groupItem) {
+        if (groupItem.skipHeader) {
+            total++;
+        }
+        groupItem = groupItem.items && groupItem.items[0] || null;
+    }
+    return total;
+};
+/**
+ * A directive which encapsulates the in-memory handling of grouping with virtual scrolling.
+ * @remarks
+ * Applied to: {@link GridComponent}.
+ */
+class GroupBindingDirective extends DataBindingDirective {
+    groupsService;
+    /**
+     * The array of data which will be used to populate the Grid.
+     */
+    set kendoGridGroupBinding(value) {
+        this.groups = null;
+        this.grid.resetGroupsState();
+        this.data = value;
+    }
+    /**
+     * @hidden
+     */
+    set data(value) {
+        this.originalData = value || [];
+        this.dataChanged = true;
+    }
+    /**
+     * Defines the descriptors by which the data will be sorted.
+     */
+    set sort(value) {
+        const noCurrentDescriptors = noDescriptors(this.state.sort);
+        const noIncomingDescriptors = noDescriptors(value);
+        const clear = this.state.sort !== value && !(noCurrentDescriptors && noIncomingDescriptors);
+        this.grid.sort = this.state.sort = value;
+        if (clear) {
+            this.groups = null;
+            this.grid.resetGroupsState();
+        }
+    }
+    /**
+     * Defines the descriptor by which the data will be filtered.
+     */
+    set filter(value) {
+        const clear = diffFilters(this.state.filter, value);
+        if (clear) {
+            this.state.filter = value;
+            this.grid.filter = cloneFilters(value);
+            this.groups = null;
+            this.grid.resetGroupsState();
+        }
+    }
+    /**
+     * Defines the descriptors by which the data will be grouped.
+     */
+    set group(value) {
+        // don't clear if no groups are present in previous and current value
+        const groupsPresent = groupDescriptorsPresent(this.state.group) || groupDescriptorsPresent(value);
+        const clear = this.state.group !== value && groupsPresent;
+        this.grid.group = this.state.group = value;
+        if (clear) {
+            this.groups = null;
+            this.grid.resetGroupsState();
+            this.skip = 0;
+        }
+    }
+    groups;
+    gridSubs = new Subscription();
+    constructor(changeDetector, localDataChangesService, ctxService, groupsService) {
+        super(ctxService.grid, changeDetector, localDataChangesService, null, ctxService);
+        this.groupsService = groupsService;
+        ctxService.dataBindingDirective = this;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.gridSubs.add(this.grid.groupExpand.subscribe(this.groupExpand.bind(this)));
+        this.gridSubs.add(this.grid.groupCollapse.subscribe(this.groupCollapse.bind(this)));
+    }
+    ngAfterContentInit() {
+        if (isDevMode() && this.grid.isGroupExpanded) {
+            throw new Error(GridConfigurationErrorMessages.groupBindingDirectives);
+        }
+    }
+    ngOnDestroy() {
+        this.gridSubs.unsubscribe();
+    }
+    /**
+     * @hidden
+     */
+    toggleAll(expand) {
+        this.skip = 0;
+        this.grid.scrollTo({ row: 0, column: 0 });
+        this.groups.forEach((gr, idx) => {
+            const expanded = this.groupsService.isExpanded({
+                group: gr,
+                groupIndex: idx.toString(),
+                parentGroup: undefined
+            });
+            const performToggle = (expand && !expanded) || (!expand && expanded);
+            if (performToggle) {
+                this.grid.groupsService.toggleRow({
+                    type: 'group',
+                    data: gr,
+                    index: idx.toString(),
+                    level: 0,
+                    parentGroup: undefined
+                });
+                this[expand ? 'groupExpand' : 'groupCollapse']({ groupIndex: idx.toString() });
+            }
+        });
+    }
+    /**
+     * Collapses all expanded root level groups.
+     */
+    collapseAll() {
+        this.toggleAll(false);
+    }
+    /**
+     * Expands all expanded root level groups.
+     */
+    expandAll() {
+        this.toggleAll(true);
+    }
+    /**
+     * @hidden
+     */
+    groupExpand({ groupIndex }) {
+        const { group, parents } = findGroup(groupIndex, this.groups);
+        if (!group) {
+            return;
+        }
+        this.groupsService.expandChildren(groupIndex);
+        if (!group.items.length) {
+            const descriptors = this.state.group.filter(removeParentDescriptors(parents, group));
+            const children = findChildren(this.originalData, parents.concat(group));
+            group.items = processGroups(children, {
+                filter: this.state.filter,
+                group: descriptors,
+                sort: this.state.sort
+            });
+        }
+        this.grid.data = this.dataResult(this.state.skip, this.state.take);
+    }
+    /**
+     * @hidden
+     */
+    groupCollapse({ groupIndex }) {
+        const { group } = findGroup(groupIndex, this.groups);
+        if (group) {
+            group.items = [];
+        }
+        else {
+            return;
+        }
+        this.grid.data = this.dataResult(this.state.skip, this.state.take);
+    }
+    process(state) {
+        if (state.group && state.group.length) {
+            const groups = this.processGroups(state);
+            this.grid.skip -= skippedHeaders(groups.data[0]);
+            return groups;
+        }
+        else {
+            this.groups = null;
+        }
+        return super.process(state);
+    }
+    processGroups(state) {
+        if (!this.groups || !this.groups.length) {
+            this.groups = processGroups(this.originalData, {
+                filter: state.filter,
+                group: state.group,
+                sort: state.sort
+            });
+        }
+        return this.dataResult(state.skip, state.take);
+    }
+    dataResult(skip, take) {
+        const includeFooters = this.grid.showGroupFooters;
+        return {
+            data: slice(this.groups, skip, take, includeFooters),
+            total: count(this.groups, includeFooters)
+        };
+    }
+    applyState({ skip, take, sort, group, filter }) {
+        this.skip = skip;
+        this.state.take = take;
+        // this.pageSize = take; // do need to update take as the process with slice correctly
+        this.sort = sort;
+        this.group = group;
+        this.filter = filter;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupBindingDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: LocalDataChangesService }, { token: ContextService }, { token: GroupsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GroupBindingDirective, isStandalone: true, selector: "[kendoGridGroupBinding]", inputs: { kendoGridGroupBinding: "kendoGridGroupBinding", sort: "sort", filter: "filter", group: "group" }, exportAs: ["kendoGridGroupBinding"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupBindingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridGroupBinding]',
+                    exportAs: 'kendoGridGroupBinding',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: LocalDataChangesService }, { type: ContextService }, { type: GroupsService }]; }, propDecorators: { kendoGridGroupBinding: [{
+                type: Input,
+                args: ["kendoGridGroupBinding"]
+            }], sort: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }] } });
+
 const createControl = (source) => (acc, key) => {
     acc[key] = new FormControl(source[key]);
     return acc;
@@ -27644,9 +28255,9 @@ class GridComponent {
     localization;
     ctx;
     sizingService;
-    adaptiveService;
     adaptiveGridService;
     rowReorderService;
+    dataMappingService;
     /**
      * Sets the data of the Grid. If you provide an array, the Grid gets the total count automatically.
      * ([more information and example]({% slug binding_grid %})).
@@ -28358,10 +28969,8 @@ class GridComponent {
     dragTargetContainer;
     dropTargetContainer;
     dialogContainer;
-    /**
-     * @hidden
-     */
     adaptiveRenderer;
+    listComponent;
     get scrollbarWidth() {
         return this.supportService.scrollbarWidth;
     }
@@ -28557,6 +29166,7 @@ class GridComponent {
      */
     blockArrowSelection = false;
     undoRedoService;
+    rowsToRender;
     selectionSubscription;
     stateChangeSubscription;
     groupExpandCollapseSubscription;
@@ -28582,7 +29192,7 @@ class GridComponent {
     rowReorderSubscription;
     rtl = false;
     _rowSticky;
-    constructor(supportService, selectionService, cellSelectionService, wrapper, groupInfoService, groupsService, changeNotification, detailsService, editService, filterService, pdfService, responsiveService, renderer, excelService, ngZone, scrollSyncService, domEvents, columnResizingService, changeDetectorRef, columnReorderService, columnInfoService, navigationService, sortService, scrollRequestService, localization, ctx, sizingService, adaptiveService, adaptiveGridService, rowReorderService) {
+    constructor(supportService, selectionService, cellSelectionService, wrapper, groupInfoService, groupsService, changeNotification, detailsService, editService, filterService, pdfService, responsiveService, renderer, excelService, ngZone, scrollSyncService, domEvents, columnResizingService, changeDetectorRef, columnReorderService, columnInfoService, navigationService, sortService, scrollRequestService, localization, ctx, sizingService, adaptiveGridService, rowReorderService, dataMappingService) {
         this.supportService = supportService;
         this.selectionService = selectionService;
         this.cellSelectionService = cellSelectionService;
@@ -28610,9 +29220,9 @@ class GridComponent {
         this.localization = localization;
         this.ctx = ctx;
         this.sizingService = sizingService;
-        this.adaptiveService = adaptiveService;
         this.adaptiveGridService = adaptiveGridService;
         this.rowReorderService = rowReorderService;
+        this.dataMappingService = dataMappingService;
         const isValid = validatePackage(packageMetadata);
         this.showLicenseWatermark = shouldShowValidationUI(isValid);
         this.ctx.grid = this;
@@ -28719,6 +29329,11 @@ class GridComponent {
         this.initSelectionService();
         this.updateNavigationMetadata();
     }
+    ngDoCheck() {
+        if (!this.isScrollable) {
+            this.rowsToRender = this.dataMappingService.dataMapper(this.view, this.nonLockedLeafColumns, this.lockedLeafColumns, this.detailTemplate, this.showGroupFooters);
+        }
+    }
     ngOnChanges(changes) {
         if (isChanged$1("data", changes)) {
             this.onDataChange();
@@ -29040,12 +29655,12 @@ class GridComponent {
         this.sort = state.sort;
         this.group = state.group;
         this.filter = state.filter;
-        this.group = state.group;
         this.skip = state.skip;
         this.pageSize = state.take;
-        this.data = state.currentData;
-        this.changeNotification.notify();
-        this.changeDetectorRef.detectChanges();
+        if (state.currentData) {
+            this.data = state.currentData;
+        }
+        this.changeDetectorRef.markForCheck();
     }
     traverseColumns(columns, callback) {
         columns.forEach((column) => {
@@ -29256,6 +29871,9 @@ class GridComponent {
                 source.locked = target.locked;
             }
             this.columnsContainer.refresh();
+            if (this.virtualColumns) {
+                this.listComponent.updateViewportColumns();
+            }
             this.changeDetectorRef.markForCheck();
         });
     }
@@ -29414,10 +30032,7 @@ class GridComponent {
             if (this.columnList.filter(x => x.locked && x.parent && !x.parent.isLocked).length) {
                 throw new Error(ColumnConfigurationErrorMessages.lockedParent);
             }
-            if ((this.rowHeight || this.detailRowHeight) && !this.isVirtual) {
-                console.warn(GridConfigurationErrorMessages.rowHeightVirtual);
-            }
-            if (!this.rowHeight && this.isVirtual) {
+            if (this.detailRowHeight && !this.isVirtual) {
                 console.warn(GridConfigurationErrorMessages.rowHeightVirtual);
             }
             if (!this.detailRowHeight && this.isVirtual && this.detailTemplate) {
@@ -29464,9 +30079,6 @@ class GridComponent {
                 }
                 this.dataStateChange.emit(x);
                 hasObservers(this.gridStateChange) && this.gridStateChange.emit({ ...this.currentState, ...x });
-                if (this.undoRedoService) {
-                    this.undoRedoService.originalEvent = x;
-                }
             });
         this.stateChangeSubscription.add(merge(this.columnReorder, this.columnResize, this.columnVisibilityChange, this.columnLockedChange, this.columnStickyChange).pipe(flatMap(() => this.ngZone.onStable.pipe(take(1))))
             .subscribe(() => this.ngZone.run(() => hasObservers(this.gridStateChange) && this.gridStateChange.emit(this.currentState))));
@@ -29684,7 +30296,8 @@ class GridComponent {
                 column = toAdd.shift();
                 viewportColumns.push(column);
                 if (column.isColumnGroup) {
-                    toAdd.unshift(...column.childrenArray);
+                    const children = columnsArray.filter(c => c.parent && c.parent.id === column.id);
+                    toAdd.unshift(...children);
                 }
             }
             const lastFromGroup = viewportColumns[viewportColumns.length - 1];
@@ -29740,8 +30353,8 @@ class GridComponent {
         }
         if (this.groupsService.isExpanded({ groupIndex: index }) !== expand) {
             this.groupsService.toggleRow({ index }, false);
-            if (this.ctx.groupBindingDirective) {
-                this.ctx.groupBindingDirective[`group${expand ? 'Expand' : 'Collapse'}`]({ groupIndex: index });
+            if (this.ctx.dataBindingDirective && this.ctx.dataBindingDirective instanceof GroupBindingDirective) {
+                this.ctx.dataBindingDirective[`group${expand ? 'Expand' : 'Collapse'}`]({ groupIndex: index });
             }
         }
     }
@@ -29762,7 +30375,7 @@ class GridComponent {
         this.dragTargetContainer?.notify();
         this.dropTargetContainer?.notify();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridComponent, deps: [{ token: BrowserSupportService }, { token: SelectionService }, { token: CellSelectionService }, { token: i0.ElementRef }, { token: GroupInfoService }, { token: GroupsService }, { token: ChangeNotificationService }, { token: DetailsService }, { token: EditService }, { token: FilterService }, { token: PDFService }, { token: ResponsiveService }, { token: i0.Renderer2 }, { token: ExcelService }, { token: i0.NgZone }, { token: ScrollSyncService }, { token: DomEventsService }, { token: ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: ColumnReorderService }, { token: ColumnInfoService }, { token: NavigationService }, { token: SortService }, { token: ScrollRequestService }, { token: i1$2.LocalizationService }, { token: ContextService }, { token: SizingOptionsService }, { token: i2$1.AdaptiveService }, { token: AdaptiveGridService }, { token: RowReorderService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridComponent, deps: [{ token: BrowserSupportService }, { token: SelectionService }, { token: CellSelectionService }, { token: i0.ElementRef }, { token: GroupInfoService }, { token: GroupsService }, { token: ChangeNotificationService }, { token: DetailsService }, { token: EditService }, { token: FilterService }, { token: PDFService }, { token: ResponsiveService }, { token: i0.Renderer2 }, { token: ExcelService }, { token: i0.NgZone }, { token: ScrollSyncService }, { token: DomEventsService }, { token: ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: ColumnReorderService }, { token: ColumnInfoService }, { token: NavigationService }, { token: SortService }, { token: ScrollRequestService }, { token: i1$2.LocalizationService }, { token: ContextService }, { token: SizingOptionsService }, { token: AdaptiveGridService }, { token: RowReorderService }, { token: DataMappingService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridComponent, isStandalone: true, selector: "kendo-grid", inputs: { data: "data", pageSize: "pageSize", height: "height", rowHeight: "rowHeight", adaptiveMode: "adaptiveMode", detailRowHeight: "detailRowHeight", skip: "skip", scrollable: "scrollable", selectable: "selectable", sort: "sort", size: "size", trackBy: "trackBy", filter: "filter", group: "group", virtualColumns: "virtualColumns", filterable: "filterable", sortable: "sortable", pageable: "pageable", groupable: "groupable", gridResizable: "gridResizable", rowReorderable: "rowReorderable", navigable: "navigable", autoSize: "autoSize", rowClass: "rowClass", rowSticky: "rowSticky", rowSelected: "rowSelected", isRowSelectable: "isRowSelectable", cellSelected: "cellSelected", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", showInactiveTools: "showInactiveTools", isDetailExpanded: "isDetailExpanded", isGroupExpanded: "isGroupExpanded" }, outputs: { filterChange: "filterChange", pageChange: "pageChange", groupChange: "groupChange", sortChange: "sortChange", selectionChange: "selectionChange", rowReorder: "rowReorder", dataStateChange: "dataStateChange", gridStateChange: "gridStateChange", groupExpand: "groupExpand", groupCollapse: "groupCollapse", detailExpand: "detailExpand", detailCollapse: "detailCollapse", edit: "edit", cancel: "cancel", save: "save", remove: "remove", add: "add", cellClose: "cellClose", cellClick: "cellClick", pdfExport: "pdfExport", excelExport: "excelExport", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", columnStickyChange: "columnStickyChange", scrollBottom: "scrollBottom", contentScroll: "contentScroll" }, host: { properties: { "attr.dir": "this.dir", "class.k-grid": "this.hostClass", "class.k-grid-sm": "this.sizeSmallClass", "class.k-grid-md": "this.sizeMediumClass", "class.k-grid-lockedcolumns": "this.lockedClasses", "class.k-grid-virtual": "this.virtualClasses", "class.k-grid-no-scrollbar": "this.noScrollbarClass", "class.k-grid-resizable": "this.isResizable", "style.minWidth": "this.minWidth", "style.maxWidth": "this.maxWidth", "style.minHeight": "this.minHeight", "style.maxHeight": "this.maxHeight" } }, providers: [
             BrowserSupportService,
             LocalizationService,
@@ -29812,8 +30425,9 @@ class GridComponent {
             RowspanService,
             AdaptiveGridService,
             ColumnMenuService,
-            MenuTabbingService
-        ], 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: "dialogContainer", first: true, predicate: ["dialogContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "adaptiveRenderer", first: true, predicate: AdaptiveRendererComponent, descendants: true }, { propertyName: "footer", predicate: ["footer"], descendants: true }], exportAs: ["kendoGrid"], usesOnChanges: true, ngImport: i0, template: `
+            MenuTabbingService,
+            DataMappingService
+        ], 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: "dialogContainer", first: true, predicate: ["dialogContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "adaptiveRenderer", first: true, predicate: AdaptiveRendererComponent, descendants: true }, { propertyName: "listComponent", first: true, predicate: ListComponent, 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"
@@ -30464,7 +31078,7 @@ class GridComponent {
                     <tbody kendoGridTableBody
                         [isLoading]="loading"
                         [groups]="group"
-                        [data]="$any(view)"
+                        [rowsToRender]="rowsToRender"
                         [skip]="skip"
                         [columns]="$any(leafColumns)"
                         [totalColumnsCount]="leafColumns.length"
@@ -30473,7 +31087,6 @@ class GridComponent {
                         [filterable]="filterable"
                         [noRecordsTemplate]="noRecordsTemplate"
                         [detailTemplate]="detailTemplate"
-                        [showGroupFooters]="showGroupFooters"
                         [trackBy]="trackBy"
                         [rowClass]="rowClass"
                         kendoDraggable
@@ -30580,7 +31193,7 @@ class GridComponent {
         <kendo-grid-adaptive-renderer *ngIf="isAdaptiveModeEnabled"></kendo-grid-adaptive-renderer>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { kind: "component", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { kind: "directive", type: TableDirective, selector: "[kendoGridResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "directive", type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { kind: "component", type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "totalColumns", "tabIndex", "size"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { kind: "component", 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"] }, { kind: "directive", type: DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode", "cursorStyle", "hintContext"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { kind: "directive", type: DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }, { kind: "component", type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex", "totalColumns", "totalColumnsCount"] }, { kind: "component", 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", "totalColumns", "rowClass"] }, { kind: "component", type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { kind: "component", type: StatusBarComponent, selector: "kendo-grid-status-bar", inputs: ["statusBarTemplate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }, { kind: "component", type: i51.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i51.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i51.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["showPageText", "size"] }, { kind: "component", type: i51.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i51.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i51.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["showItemsText", "pageSizes", "size", "adaptiveMode"] }, { kind: "component", type: i51.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i51.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i51.PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive", "adaptiveMode"], outputs: ["pageChange", "pageSizeChange", "pagerInputVisibilityChange", "pageTextVisibilityChange", "itemsTextVisibilityChange"], exportAs: ["kendoDataPager", "kendoPager"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-grid-adaptive-renderer" }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { kind: "component", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { kind: "directive", type: TableDirective, selector: "[kendoGridResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "directive", type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { kind: "component", type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "totalColumns", "tabIndex", "size"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { kind: "component", type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { kind: "directive", type: DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode", "cursorStyle", "hintContext"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { kind: "directive", type: DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }, { kind: "component", type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex", "totalColumns", "totalColumnsCount"] }, { kind: "component", type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "rowsToRender", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "totalColumns", "rowClass"] }, { kind: "component", type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { kind: "component", type: StatusBarComponent, selector: "kendo-grid-status-bar", inputs: ["statusBarTemplate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }, { kind: "component", type: i51.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i51.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i51.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["showPageText", "size"] }, { kind: "component", type: i51.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i51.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i51.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["showItemsText", "pageSizes", "size", "adaptiveMode"] }, { kind: "component", type: i51.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i51.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i51.PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive", "adaptiveMode"], outputs: ["pageChange", "pageSizeChange", "pagerInputVisibilityChange", "pageTextVisibilityChange", "itemsTextVisibilityChange"], exportAs: ["kendoDataPager", "kendoPager"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-grid-adaptive-renderer" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
@@ -30636,7 +31249,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         RowspanService,
                         AdaptiveGridService,
                         ColumnMenuService,
-                        MenuTabbingService
+                        MenuTabbingService,
+                        DataMappingService
                     ],
                     selector: 'kendo-grid',
                     template: `
@@ -31290,7 +31904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     <tbody kendoGridTableBody
                         [isLoading]="loading"
                         [groups]="group"
-                        [data]="$any(view)"
+                        [rowsToRender]="rowsToRender"
                         [skip]="skip"
                         [columns]="$any(leafColumns)"
                         [totalColumnsCount]="leafColumns.length"
@@ -31299,7 +31913,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         [filterable]="filterable"
                         [noRecordsTemplate]="noRecordsTemplate"
                         [detailTemplate]="detailTemplate"
-                        [showGroupFooters]="showGroupFooters"
                         [trackBy]="trackBy"
                         [rowClass]="rowClass"
                         kendoDraggable
@@ -31416,7 +32029,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         IconWrapperComponent, WatermarkOverlayComponent, ...KENDO_PAGER, NgTemplateOutlet, AdaptiveRendererComponent
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: BrowserSupportService }, { type: SelectionService }, { type: CellSelectionService }, { type: i0.ElementRef }, { type: GroupInfoService }, { type: GroupsService }, { type: ChangeNotificationService }, { type: DetailsService }, { type: EditService }, { type: FilterService }, { type: PDFService }, { type: ResponsiveService }, { type: i0.Renderer2 }, { type: ExcelService }, { type: i0.NgZone }, { type: ScrollSyncService }, { type: DomEventsService }, { type: ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: ColumnReorderService }, { type: ColumnInfoService }, { type: NavigationService }, { type: SortService }, { type: ScrollRequestService }, { type: i1$2.LocalizationService }, { type: ContextService }, { type: SizingOptionsService }, { type: i2$1.AdaptiveService }, { type: AdaptiveGridService }, { type: RowReorderService }]; }, propDecorators: { data: [{
+        }], ctorParameters: function () { return [{ type: BrowserSupportService }, { type: SelectionService }, { type: CellSelectionService }, { type: i0.ElementRef }, { type: GroupInfoService }, { type: GroupsService }, { type: ChangeNotificationService }, { type: DetailsService }, { type: EditService }, { type: FilterService }, { type: PDFService }, { type: ResponsiveService }, { type: i0.Renderer2 }, { type: ExcelService }, { type: i0.NgZone }, { type: ScrollSyncService }, { type: DomEventsService }, { type: ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: ColumnReorderService }, { type: ColumnInfoService }, { type: NavigationService }, { type: SortService }, { type: ScrollRequestService }, { type: i1$2.LocalizationService }, { type: ContextService }, { type: SizingOptionsService }, { type: AdaptiveGridService }, { type: RowReorderService }, { type: DataMappingService }]; }, propDecorators: { data: [{
                 type: Input
             }], pageSize: [{
                 type: Input
@@ -31631,6 +32244,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], adaptiveRenderer: [{
                 type: ViewChild,
                 args: [AdaptiveRendererComponent]
+            }], listComponent: [{
+                type: ViewChild,
+                args: [ListComponent]
             }] } });
 
 /**
@@ -31679,207 +32295,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$2.LocalizationService }]; } });
 
-/**
- * A directive that handles in-memory data operations like [paging]({% slug paging_grid %}),
- * [sorting]({% slug sorting_grid %}), and [grouping]({% slug grouping_grid %}).
- *
- * Use this directive with local data and enable the Grid data operations with minimal configuration.
- * ([More information and examples]({% slug local_data_grid %}#toc-using-the-data-binding-directive)).
- *
- * @example
- * ```html
- * <kendo-grid [kendoGridBinding]="gridData"></kendo-grid>
- * ```
- * @remarks
- * Applied to: {@link GridComponent}.
- */
-class DataBindingDirective {
-    grid;
-    changeDetector;
-    localDataChangesService;
-    rowReorderService;
-    /**
-     * Sets the number of records to skip in the Grid.
-     *
-     * @default 0
-     */
-    set skip(value) {
-        if (!isPresent(value)) {
-            value = 0;
-        }
-        this.grid.skip = this.state.skip = value;
-        if (this.rowReorderService) {
-            this.rowReorderService.skip = value;
-        }
-    }
-    /**
-     * Sets the sort descriptors for the Grid data.
-     *
-     */
-    set sort(value) {
-        this.grid.sort = this.state.sort = value;
-    }
-    /**
-     * Sets the filter descriptor for the Grid data.
-     *
-     */
-    set filter(value) {
-        this.grid.filter = this.state.filter = value;
-    }
-    /**
-     * Sets the page size for the Grid pager.
-     *
-     */
-    set pageSize(value) {
-        this.grid.pageSize = this.state.take = value;
-    }
-    /**
-     * Sets the group descriptors for the Grid data.
-     *
-     */
-    set group(value) {
-        this.grid.group = this.state.group = value;
-    }
-    /**
-     * Sets the data array for the Grid.
-     *
-     */
-    set data(value) {
-        this.originalData = value || [];
-        if (this.localDataChangesService) {
-            this.localDataChangesService.data = value;
-        }
-        this.dataChanged = true;
-    }
-    state = {
-        skip: 0
-    };
-    originalData = [];
-    dataChanged;
-    stateChangeSubscription;
-    dataChangedSubscription;
-    rowReorderSubscription;
-    constructor(grid, changeDetector, localDataChangesService, rowReorderService) {
-        this.grid = grid;
-        this.changeDetector = changeDetector;
-        this.localDataChangesService = localDataChangesService;
-        this.rowReorderService = rowReorderService;
-        if (localDataChangesService) {
-            this.dataChangedSubscription = this.localDataChangesService.changes.subscribe(this.rebind.bind(this));
-        }
-    }
-    /**
-     * @hidden
-     */
-    ngOnInit() {
-        this.applyState(this.state);
-        this.stateChangeSubscription = this.grid
-            .dataStateChange
-            .subscribe(this.onStateChange.bind(this));
-        if (this.rowReorderService) {
-            this.rowReorderSubscription = this.grid
-                .rowReorder
-                .subscribe(this.onRowReorder.bind(this));
-        }
-    }
-    /**
-     * @hidden
-     */
-    ngOnDestroy() {
-        if (this.stateChangeSubscription) {
-            this.stateChangeSubscription.unsubscribe();
-        }
-        if (this.dataChangedSubscription) {
-            this.dataChangedSubscription.unsubscribe();
-        }
-        if (this.rowReorderSubscription) {
-            this.rowReorderSubscription.unsubscribe();
-        }
-    }
-    /**
-     * @hidden
-     */
-    ngOnChanges(changes) {
-        if (anyChanged(["pageSize", "skip", "sort", "group", "filter"], changes)) {
-            this.rebind();
-        }
-    }
-    ngDoCheck() {
-        if (this.dataChanged) {
-            this.updateGridData();
-        }
-    }
-    /**
-     * @hidden
-     */
-    onStateChange(state) {
-        this.applyState(state);
-        this.rebind();
-    }
-    /**
-     * @hidden
-     */
-    onRowReorder(ev) {
-        this.rowReorderService.reorderRows(ev, this.originalData);
-        this.rebind();
-    }
-    /**
-     * @hidden
-     */
-    rebind() {
-        this.data = this.originalData;
-        this.updateGridData();
-        this.notifyDataChange();
-    }
-    /**
-     * Notifies the Grid that its data has changed.
-     */
-    notifyDataChange() {
-        this.grid.onDataChange();
-        if (this.changeDetector) {
-            this.changeDetector.markForCheck();
-        }
-    }
-    process(state) {
-        return process(this.originalData, state);
-    }
-    applyState({ skip, take, sort, group, filter }) {
-        this.skip = skip;
-        this.pageSize = take;
-        this.sort = sort;
-        this.group = group;
-        this.filter = filter;
-    }
-    updateGridData() {
-        this.grid.data = this.process(this.state);
-        this.grid.updateNavigationMetadata();
-        this.dataChanged = false;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataBindingDirective, deps: [{ token: GridComponent }, { token: i0.ChangeDetectorRef }, { token: LocalDataChangesService }, { token: RowReorderService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DataBindingDirective, isStandalone: true, selector: "[kendoGridBinding]", inputs: { skip: "skip", sort: "sort", filter: "filter", pageSize: "pageSize", group: "group", data: ["kendoGridBinding", "data"] }, exportAs: ["kendoGridBinding"], usesOnChanges: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataBindingDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridBinding]',
-                    exportAs: 'kendoGridBinding',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: GridComponent }, { type: i0.ChangeDetectorRef }, { type: LocalDataChangesService }, { type: RowReorderService }]; }, propDecorators: { skip: [{
-                type: Input
-            }], sort: [{
-                type: Input
-            }], filter: [{
-                type: Input
-            }], pageSize: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }], data: [{
-                type: Input,
-                args: ["kendoGridBinding"]
-            }] } });
-
 /**
  * Stores the row selection state of the Grid in memory
  * ([see example]({% slug selection_grid %}#toc-toggling-the-selection-functionality)).
@@ -32782,330 +33197,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-const hasGroups = (items) => items && items.length && items[0].field && items[0].items;
-const groupDescriptorsPresent = (descriptors) => isPresent(descriptors) && descriptors.length > 0;
-const processGroups = (data, state) => process(data, state).data;
-const removeParentDescriptors = (parents, owner) => g => g.field !== owner.field && !parents.some(y => y.field === g.field);
-const findGroup = (groupIndex, groups) => {
-    const parents = [];
-    return {
-        group: groupIndex.split("_").reduce((acc, x) => {
-            const idx = parseInt(x, 10);
-            if (acc.items) {
-                parents.push(acc);
-                return acc.items[idx];
-            }
-            return isArray(acc) ? acc[idx] : acc;
-        }, groups),
-        parents
-    };
-};
-const findChildren = (data, parents) => {
-    const filters = parents.map(p => ({ field: p.field, operator: "eq", value: p.value }));
-    return filterBy(data, {
-        filters: filters,
-        logic: "and"
-    });
-};
-/**
- * @hidden
- */
-const count = (groups, includeFooters = false) => (groups.reduce((acc, group) => {
-    if (!group.skipHeader) {
-        acc++;
-    }
-    if (group.items) {
-        const children = count(group.items, includeFooters);
-        if (includeFooters && children && !group.hideFooter) {
-            acc++;
-        }
-        acc += children;
-    }
-    return acc;
-}, 0));
-/**
- * @hidden
- */
-const noDescriptors = (descriptors) => !isPresent(descriptors) || !descriptors.length;
-/**
- * @hidden
- */
-const slice = (groups, skip, take, includeFooters = false) => {
-    if (!isPresent(take)) {
-        return groups;
-    }
-    const result = [];
-    for (let idx = 0, length = groups.length; idx < length; idx++) {
-        if (take <= 0) {
-            break;
-        }
-        const group = groups[idx];
-        const groupItems = group.items;
-        let itemCount = count(groupItems, includeFooters);
-        if (includeFooters && groupItems.length) {
-            itemCount++;
-        }
-        const skipHeader = skip > 0;
-        if (skip) {
-            skip--;
-            if (itemCount && skip >= itemCount) {
-                skip -= itemCount;
-                continue;
-            }
-        }
-        if (!skipHeader || itemCount) {
-            const items = [];
-            let hideFooter = true;
-            if (!skipHeader) {
-                take--;
-            }
-            if (take) {
-                if (hasGroups(groupItems)) {
-                    const children = slice(groupItems, skip, take, includeFooters);
-                    items.push(...children);
-                    take -= count(children, includeFooters);
-                }
-                else {
-                    items.push(...groupItems.slice(skip, Math.min(skip + take, groupItems.length)));
-                    take -= items.length;
-                }
-                if (take && includeFooters) {
-                    hideFooter = false;
-                    take--;
-                }
-                skip = 0;
-            }
-            result.push({
-                aggregates: group.aggregates,
-                field: group.field,
-                hideFooter,
-                items,
-                offset: idx,
-                skipHeader,
-                value: group.value
-            });
-        }
-    }
-    return result;
-};
-const skippedHeaders = (groupItem) => {
-    let total = 0;
-    while (groupItem) {
-        if (groupItem.skipHeader) {
-            total++;
-        }
-        groupItem = groupItem.items && groupItem.items[0] || null;
-    }
-    return total;
-};
-/**
- * A directive which encapsulates the in-memory handling of grouping with virtual scrolling.
- * @remarks
- * Applied to: {@link GridComponent}.
- */
-class GroupBindingDirective extends DataBindingDirective {
-    groupsService;
-    /**
-     * The array of data which will be used to populate the Grid.
-     */
-    set kendoGridGroupBinding(value) {
-        this.groups = null;
-        this.grid.resetGroupsState();
-        this.data = value;
-    }
-    /**
-     * @hidden
-     */
-    set data(value) {
-        this.originalData = value || [];
-        this.dataChanged = true;
-    }
-    /**
-     * Defines the descriptors by which the data will be sorted.
-     */
-    set sort(value) {
-        const noCurrentDescriptors = noDescriptors(this.state.sort);
-        const noIncomingDescriptors = noDescriptors(value);
-        const clear = this.state.sort !== value && !(noCurrentDescriptors && noIncomingDescriptors);
-        this.grid.sort = this.state.sort = value;
-        if (clear) {
-            this.groups = null;
-            this.grid.resetGroupsState();
-        }
-    }
-    /**
-     * Defines the descriptor by which the data will be filtered.
-     */
-    set filter(value) {
-        const clear = diffFilters(this.state.filter, value);
-        if (clear) {
-            this.state.filter = value;
-            this.grid.filter = cloneFilters(value);
-            this.groups = null;
-            this.grid.resetGroupsState();
-        }
-    }
-    /**
-     * Defines the descriptors by which the data will be grouped.
-     */
-    set group(value) {
-        // don't clear if no groups are present in previous and current value
-        const groupsPresent = groupDescriptorsPresent(this.state.group) || groupDescriptorsPresent(value);
-        const clear = this.state.group !== value && groupsPresent;
-        this.grid.group = this.state.group = value;
-        if (clear) {
-            this.groups = null;
-            this.grid.resetGroupsState();
-            this.skip = 0;
-        }
-    }
-    groups;
-    gridSubs = new Subscription();
-    constructor(changeDetector, localDataChangesService, ctxService, groupsService) {
-        super(ctxService.grid, changeDetector, localDataChangesService);
-        this.groupsService = groupsService;
-        ctxService.groupBindingDirective = this;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.gridSubs.add(this.grid.groupExpand.subscribe(this.groupExpand.bind(this)));
-        this.gridSubs.add(this.grid.groupCollapse.subscribe(this.groupCollapse.bind(this)));
-    }
-    ngAfterContentInit() {
-        if (isDevMode() && this.grid.isGroupExpanded) {
-            throw new Error(GridConfigurationErrorMessages.groupBindingDirectives);
-        }
-    }
-    ngOnDestroy() {
-        this.gridSubs.unsubscribe();
-    }
-    /**
-     * @hidden
-     */
-    toggleAll(expand) {
-        this.skip = 0;
-        this.grid.scrollTo({ row: 0, column: 0 });
-        this.groups.forEach((gr, idx) => {
-            const expanded = this.groupsService.isExpanded({
-                group: gr,
-                groupIndex: idx.toString(),
-                parentGroup: undefined
-            });
-            const performToggle = (expand && !expanded) || (!expand && expanded);
-            if (performToggle) {
-                this.grid.groupsService.toggleRow({
-                    type: 'group',
-                    data: gr,
-                    index: idx.toString(),
-                    level: 0,
-                    parentGroup: undefined
-                });
-                this[expand ? 'groupExpand' : 'groupCollapse']({ groupIndex: idx.toString() });
-            }
-        });
-    }
-    /**
-     * Collapses all expanded root level groups.
-     */
-    collapseAll() {
-        this.toggleAll(false);
-    }
-    /**
-     * Expands all expanded root level groups.
-     */
-    expandAll() {
-        this.toggleAll(true);
-    }
-    /**
-     * @hidden
-     */
-    groupExpand({ groupIndex }) {
-        const { group, parents } = findGroup(groupIndex, this.groups);
-        if (!group) {
-            return;
-        }
-        this.groupsService.expandChildren(groupIndex);
-        if (!group.items.length) {
-            const descriptors = this.state.group.filter(removeParentDescriptors(parents, group));
-            const children = findChildren(this.originalData, parents.concat(group));
-            group.items = processGroups(children, {
-                filter: this.state.filter,
-                group: descriptors,
-                sort: this.state.sort
-            });
-        }
-        this.grid.data = this.dataResult(this.state.skip, this.state.take);
-    }
-    /**
-     * @hidden
-     */
-    groupCollapse({ groupIndex }) {
-        const { group } = findGroup(groupIndex, this.groups);
-        if (group) {
-            group.items = [];
-        }
-        else {
-            return;
-        }
-        this.grid.data = this.dataResult(this.state.skip, this.state.take);
-    }
-    process(state) {
-        if (state.group && state.group.length) {
-            const groups = this.processGroups(state);
-            this.grid.skip -= skippedHeaders(groups.data[0]);
-            return groups;
-        }
-        else {
-            this.groups = null;
-        }
-        return super.process(state);
-    }
-    processGroups(state) {
-        if (!this.groups || !this.groups.length) {
-            this.groups = processGroups(this.originalData, {
-                filter: state.filter,
-                group: state.group,
-                sort: state.sort
-            });
-        }
-        return this.dataResult(state.skip, state.take);
-    }
-    dataResult(skip, take) {
-        const includeFooters = this.grid.showGroupFooters;
-        return {
-            data: slice(this.groups, skip, take, includeFooters),
-            total: count(this.groups, includeFooters)
-        };
-    }
-    applyState({ skip, take, sort, group, filter }) {
-        this.skip = skip;
-        this.state.take = take;
-        // this.pageSize = take; // do need to update take as the process with slice correctly
-        this.sort = sort;
-        this.group = group;
-        this.filter = filter;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupBindingDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: LocalDataChangesService }, { token: ContextService }, { token: GroupsService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GroupBindingDirective, isStandalone: true, selector: "[kendoGridGroupBinding]", inputs: { kendoGridGroupBinding: "kendoGridGroupBinding", sort: "sort", filter: "filter", group: "group" }, exportAs: ["kendoGridGroupBinding"], usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupBindingDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridGroupBinding]',
-                    exportAs: 'kendoGridGroupBinding',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: LocalDataChangesService }, { type: ContextService }, { type: GroupsService }]; }, propDecorators: { kendoGridGroupBinding: [{
-                type: Input,
-                args: ["kendoGridGroupBinding"]
-            }], sort: [{
-                type: Input
-            }], filter: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }] } });
-
 /**
  * Represents the Kendo UI GridSpacer component for Angular.
  * Used to give additional white space between the Pager inner elements,
@@ -33758,6 +33849,12 @@ class UndoRedoStack {
         this.currentNode = this.currentNode.previous;
         return this.currentNode.state;
     }
+    peekNext() {
+        return this.currentNode.next?.state || null;
+    }
+    peekPrev() {
+        return this.currentNode.previous?.state || null;
+    }
     /**
      * Performs a redo operation, moving to the next state
      * @returns The next state or null if can't redo
@@ -33880,7 +33977,6 @@ class UndoRedoService {
     onUndo = new Subject();
     onRedo = new Subject();
     stackEndReached = new Subject();
-    setState = new Subject();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UndoRedoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UndoRedoService });
 }
@@ -33904,11 +34000,17 @@ class UndoRedoDirective {
     editService;
     undoRedoService;
     changeNotification;
+    ctx;
+    localDataChangesService;
     /**
      * Sets the maximum number of actions to keep in the undo-redo stack.
      * @default 10
      */
     maxStoredStates = 10;
+    /**
+     * Defines the property name of the data item unique key that will be used to identify the items when performing undo-redo actions.
+     */
+    itemIdKey;
     /**
      * Fires when you perform the undo action. Provides the Grid state to apply.
      */
@@ -33926,11 +34028,13 @@ class UndoRedoDirective {
     stack;
     subs = new Subscription();
     addToState = true;
-    constructor(host, editService, undoRedoService, changeNotification) {
+    constructor(host, editService, undoRedoService, changeNotification, ctx, localDataChangesService) {
         this.host = host;
         this.editService = editService;
         this.undoRedoService = undoRedoService;
         this.changeNotification = changeNotification;
+        this.ctx = ctx;
+        this.localDataChangesService = localDataChangesService;
         this.host.undoRedoService = this.undoRedoService;
     }
     ngOnInit() {
@@ -33942,7 +34046,7 @@ class UndoRedoDirective {
                 sort: this.host.sort,
                 filter: this.host.filter,
                 group: this.host.group
-            }, gridState: structuredClone(this.host.currentState)
+            }, gridState: this.host.currentState
         });
         this.subs = this.host.gridStateChange.subscribe((state) => {
             if (this.addToState) {
@@ -33954,7 +34058,7 @@ class UndoRedoDirective {
                         filter: state.filter,
                         group: state.group
                     },
-                    gridState: structuredClone(state)
+                    gridState: state
                 });
             }
             let stackEndPointReached;
@@ -33967,36 +34071,72 @@ class UndoRedoDirective {
             this.undoRedoService.stackEndReached.next(stackEndPointReached);
         });
         this.subs.add(this.editService.changes
-            .pipe(filter(event => event.action === 'save' || event.action === 'remove'), tap(event => this.undoRedoService.originalEvent = event))
+            .pipe(filter((event) => event.action === 'save' || event.action === 'remove'))
             .subscribe(event => {
             this.stack.add({
-                originalEvent: event,
-                gridState: structuredClone(this.host.currentState)
+                originalEvent: { ...event, dataItem: structuredClone(event.dataItem) },
+                gridState: this.host.currentState
             });
             this.addToState = false;
             this.host.gridStateChange.emit(this.stack.current.gridState);
             this.addToState = true;
             this.updateUndoRedoDisabled();
         }));
-        this.subs.add(this.changeNotification.changes.subscribe(() => this.stack.current.gridState = this.host.currentState));
+        this.subs.add(this.changeNotification.changes.subscribe(() => {
+            if (!this.ctx.dataBindingDirective) {
+                this.stack.current.gridState = this.host.currentState;
+            }
+        }));
         ['Undo', 'Redo'].forEach((action) => {
             this.subs.add(this.undoRedoService[`on${action}`].subscribe(() => {
                 if (!this.stack[`can${action}`]) {
                     return;
                 }
-                this.stack[`${action.toLowerCase()}`]();
+                let eventData;
+                if (action === 'Undo') {
+                    const isSaveOrRemove = this.stack.current.originalEvent.action === 'save' || this.stack.current.originalEvent.action === 'remove';
+                    eventData = isSaveOrRemove ? this.stack.current : this.stack.peekPrev();
+                }
+                else {
+                    eventData = this.stack.peekNext();
+                }
+                const event = new UndoRedoEvent(eventData);
                 if (hasObservers(this[`on${action}`])) {
-                    const event = new UndoRedoEvent(this.stack.current);
                     this[`on${action}`].emit(event);
                     if (event.isDefaultPrevented()) {
                         return;
                     }
                 }
+                this.stack[`${action.toLowerCase()}`]();
                 this.updateUndoRedoDisabled();
-                this.host.loadState(this.stack.current.gridState);
+                const originalAction = event.originalEvent.action;
+                const isLocalData = isPresent$1(this.ctx?.dataBindingDirective);
+                if (!isLocalData) {
+                    return;
+                }
+                const isSaveOrRemove = originalAction === 'save' || originalAction === 'remove';
+                if (isSaveOrRemove) {
+                    if (originalAction === 'save') {
+                        const stateItem = this.getGridDataItems(this.stack.current.gridState.currentData).find(item => item[this.itemIdKey] === event.originalEvent.dataItem[this.itemIdKey]);
+                        Object.assign(event.originalEvent.originalDataItem, stateItem);
+                    }
+                    else if (action === 'Undo') {
+                        this.localDataChangesService?.data.splice(event.originalEvent.rowIndex, 0, event.originalEvent.dataItem);
+                    }
+                    else {
+                        this.localDataChangesService?.data.splice(event.originalEvent.rowIndex, 1);
+                    }
+                    this.localDataChangesService?.changes.emit();
+                }
+                else {
+                    this.host.loadState({ ...this.stack.current.gridState, currentData: null });
+                    if (this.isDataStateChangeEvent(event.originalEvent)) {
+                        const { skip, take, sort, filter, group } = this.stack.current.gridState;
+                        this.host.dataStateChange.emit({ skip, take, sort, filter, group });
+                    }
+                }
             }));
         });
-        this.subs.add(this.undoRedoService.setState.subscribe((state) => this.stack.add({ originalEvent: 'dataChange', gridState: state })));
     }
     ngOnDestroy() {
         this.stack.clear();
@@ -34038,8 +34178,15 @@ class UndoRedoDirective {
         }
         this.undoRedoService.stackEndReached.next(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UndoRedoDirective, deps: [{ token: GridComponent }, { token: EditService }, { token: UndoRedoService }, { token: ChangeNotificationService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: UndoRedoDirective, isStandalone: true, selector: "[kendoGridUndoRedo]", inputs: { maxStoredStates: "maxStoredStates" }, outputs: { onUndo: "undo", onRedo: "redo" }, providers: [UndoRedoService], exportAs: ["kendoGridUndoRedo"], ngImport: i0 });
+    getGridDataItems(data) {
+        return Array.isArray(data) ? data.flatMap(recursiveFlatMap) :
+            data.data.flatMap(recursiveFlatMap);
+    }
+    isDataStateChangeEvent(event) {
+        return event && ['skip', 'take', 'sort', 'filter', 'group'].some(prop => prop in event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UndoRedoDirective, deps: [{ token: GridComponent }, { token: EditService }, { token: UndoRedoService }, { token: ChangeNotificationService }, { token: ContextService }, { token: LocalDataChangesService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: UndoRedoDirective, isStandalone: true, selector: "[kendoGridUndoRedo]", inputs: { maxStoredStates: "maxStoredStates", itemIdKey: "itemIdKey" }, outputs: { onUndo: "undo", onRedo: "redo" }, providers: [UndoRedoService], exportAs: ["kendoGridUndoRedo"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UndoRedoDirective, decorators: [{
             type: Directive,
@@ -34049,7 +34196,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     exportAs: 'kendoGridUndoRedo',
                     providers: [UndoRedoService]
                 }]
-        }], ctorParameters: function () { return [{ type: GridComponent }, { type: EditService }, { type: UndoRedoService }, { type: ChangeNotificationService }]; }, propDecorators: { maxStoredStates: [{
+        }], ctorParameters: function () { return [{ type: GridComponent }, { type: EditService }, { type: UndoRedoService }, { type: ChangeNotificationService }, { type: ContextService }, { type: LocalDataChangesService }]; }, propDecorators: { maxStoredStates: [{
+                type: Input
+            }], itemIdKey: [{
                 type: Input
             }], onUndo: [{
                 type: Output,