@progress/kendo-angular-grid 19.3.1-develop.4 → 20.0.0-develop.1

package/esm2022/rendering/list.component.mjs

@@ -76,8 +76,8 @@ export const SCROLLER_FACTORY_TOKEN = new InjectionToken('grid-scroll-service-fa
 /**
  * @hidden
  */
-export function DEFAULT_SCROLLER_FACTORY(observable) {
-    return new ScrollerService(observable);
+export function DEFAULT_SCROLLER_FACTORY(observable, ctx) {
+    return new ScrollerService(observable, ctx);
 }
 const wheelDeltaY = (e) => {
     const deltaY = e.wheelDeltaY;
@@ -94,7 +94,7 @@ const preventLockedScroll = (args, element) => {
     const scrollTop = element.scrollTop;
     const allowScroll = (scrollTop === 0 && 0 < delta) || (element.scrollHeight <= element.offsetHeight + scrollTop && delta < 0);
     if (!allowScroll) {
-        event.preventDefault();
+        args.preventDefault();
     }
 };
 const translateY = (renderer, value) => el => renderer.setStyle(el, "transform", `translateY(${value}px)`);
@@ -150,9 +150,9 @@ export class ListComponent {
     contentScroll = new EventEmitter();
     pageChange = new EventEmitter();
     scrollBottom = new EventEmitter();
-    totalHeight;
     columnsStartIdx = 0;
     allItems = [];
+    itemsToRender = [];
     get showFooter() {
         return this.groupable && this.groupable.showFooter;
     }
@@ -178,6 +178,7 @@ export class ListComponent {
     columnsEndIdx;
     viewportColumnsWidth;
     scrollLeft = 0;
+    virtualPageSize;
     observer;
     get lockedLeafColumns() {
         return this.columns.lockedLeafColumns;
@@ -211,6 +212,8 @@ export class ListComponent {
     columnUpdateFrame;
     hasLockedContainer;
     minRowHeight;
+    handleSkipOnData = false;
+    scrollToIndex = null;
     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;
@@ -228,14 +231,24 @@ export class ListComponent {
         this.pdfService = pdfService;
         this.columnInfo = columnInfo;
         this.dataMappingService = dataMappingService;
-        this.scroller = scrollerFactory(this.dispatcher);
-        this.subscriptions = detailsService.changes.subscribe(x => this.detailExpand(x));
+        this.scroller = this.ctx.scroller = scrollerFactory(this.dispatcher, this.ctx);
+        this.subscriptions = detailsService.changes.subscribe(() => this.detailExpand());
         this.subscriptions.add(scrollRequestService.requests.subscribe(req => isPresent(req.adjustIndex) ? this.scrollTo(req.request, req.adjustIndex) : this.scrollToItem(req.request)));
+        this.subscriptions.add(this.pdfService.restoreDOMVirtualization.subscribe(() => {
+            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                this.init();
+                this.setScrollerOptions();
+                this.scroller.update();
+            });
+        }));
     }
     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.groupsService.changes.subscribe(() => {
+            this.skipScroll = this.isVirtual;
+        }));
         this.subscriptions.add(this.ngZone.runOutsideAngular(this.handleRowNavigationLocked.bind(this)));
         this.subscriptions.add(merge(this.columns.changes, this.resizeService.changes).subscribe(() => {
             if (this.virtualColumns) {
@@ -254,48 +267,110 @@ export class ListComponent {
         const changesInSkip = changes['skip'];
         const hasInitialSkip = changesInSkip && changesInSkip.firstChange && changesInSkip.currentValue > 0;
         if (hasInitialSkip) {
-            this.handleInitialScrollToSkip();
+            this.handleSkipOnData = true;
+        }
+        if (isChanged('isVirtual', changes)) {
+            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                this.scroller.reset();
+                this.rowHeightService = this.scroller.rowHeightService = new RowHeightService(this.total, this.rowHeight || this.minRowHeight);
+                this.setScrollerOptions();
+                this.scroller.update();
+            });
         }
         if (isChanged("skip", changes) && !this.rebind) {
             this.skipScroll = true;
-            this.container.nativeElement.scrollTop = this.rowHeightService.offset(this.skip);
+            this.container.nativeElement.scrollTop = (this.isVirtual && this.ctx.grid?.pageable) ? 0 : this.rowHeightService.offset(this.skip);
         }
         if (anyChanged(['total', 'take'], changes)) {
             this.init();
         }
         this.rebind = false;
     }
+    zoneSub;
+    get totalIsAllItems() {
+        return this.isVirtual && (Boolean(this.ctx.grid?.pageable || this.ctx.grid?.group?.length));
+    }
     ngDoCheck() {
         if (this.virtualColumns && (!this.viewportColumns || this.viewportWidthChange())) {
             this.updateViewportColumns();
         }
-        const shouldCalculatePageSize = isDocumentAvailable() && this.isVirtual && this.ctx.grid && !isPresent(this.ctx.grid.pageSize);
-        if (shouldCalculatePageSize) {
-            const calculatedPageSize = this.calcVirtualPageSize();
+        if (!isPresent(this.virtualPageSize) && !this.ctx.grid?.pageable && isPresent(this.ctx.grid?.pageSize)) {
+            this.virtualPageSize = this.ctx.grid.pageSize;
+        }
+        const shouldCalculatePageSize = isDocumentAvailable() && this.isVirtual && !isPresent(this.virtualPageSize) && (!isPresent(this.ctx.grid?.pageSize) || this.ctx.grid?.pageable);
+        const previousTotal = this.allItems.length;
+        this.allItems = this.dataMappingService.dataMapper(this.data, this.nonLockedColumnsToRender, this.lockedLeafColumns, this.detailTemplate, this.showFooter);
+        if (!this.isVirtual || (this.isVirtual && !this.ctx.grid?.pageable && !this.ctx.grid?.group?.length)) {
+            this.itemsToRender = this.allItems;
+        }
+        const totalChanged = previousTotal !== this.allItems.length;
+        if (this.totalIsAllItems && totalChanged) {
+            this.scroller.reset(this.skipScroll);
+            this.scroller.total = this.allItems.length;
+        }
+        if (shouldCalculatePageSize || !isPresent(this.scroller.rowHeightService)) {
+            const calculatedPageSize = this.virtualPageSize ?? this.calcVirtualPageSize();
             if (calculatedPageSize > 0) {
                 this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-                    this.ctx.grid.pageSize = calculatedPageSize;
-                    this.ngZone.run(() => {
-                        this.pageChange.emit({
-                            skip: this.skip || 0,
-                            take: calculatedPageSize
+                    if (!isPresent(this.ctx.grid?.pageSize)) {
+                        this.ctx.grid.pageSize = calculatedPageSize;
+                        this.ngZone.run(() => {
+                            this.pageChange.emit({
+                                skip: this.skip || 0,
+                                take: calculatedPageSize
+                            });
                         });
-                    });
+                    }
+                    if (this.ctx.grid?.pageable || this.ctx.grid?.group?.length) {
+                        this.virtualPageSize = this.scroller.virtualPageSize = calculatedPageSize;
+                        this.ngZone.run(() => this.itemsToRender = this.allItems.slice(this.scroller.virtualSkip, this.scroller.virtualSkip + this.virtualPageSize));
+                    }
                 });
             }
         }
-        this.allItems = this.dataMappingService.dataMapper(this.data, this.nonLockedColumnsToRender, this.lockedLeafColumns, this.detailTemplate, this.showFooter);
+        if (!this.zoneSub) {
+            this.zoneSub = this.ngZone.onStable.subscribe(() => {
+                if (!this.scroller.rowHeightService) {
+                    const total = this.isVirtual && (this.ctx.grid?.pageable || this.ctx.grid?.group?.length) ? this.allItems.length : this.total;
+                    this.scroller.rowHeightService = this.rowHeightService = new RowHeightService(total, this.rowHeight || this.minRowHeight);
+                }
+                if (this.allItems.length && this.handleSkipOnData && this.isVirtual && this.skip > 0 && this.total > 0) {
+                    this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                        this.scroller.adjustScroll(this.scroller.rowHeightService.offset(this.skip), true);
+                        this.handleSkipOnData = false;
+                    });
+                }
+                if (this.isVirtual && this.ctx.grid?.group?.length && this.scroller.total !== this.allItems.length) {
+                    this.scroller.total = this.allItems.length;
+                    this.rowHeightService = this.scroller.rowHeightService = new RowHeightService(this.scroller.total, this.rowHeight || this.minRowHeight);
+                }
+                this.isVirtual && this.scroller.update();
+                // Item outside of the viewport is scrolled to programmatically.
+                // RowHeightService offset for given index still may not match the current scrollTop
+                // depending on the varying row heights, so we need to adjust the scroll position.
+                if (isPresent(this.scrollToIndex)) {
+                    const offset = this.scroller.rowHeightService.offset(this.scrollToIndex);
+                    if (offset > this.container.nativeElement.scrollTop) {
+                        this.scroller.adjustScroll(offset - this.container.nativeElement.scrollTop);
+                    }
+                    this.scrollToIndex = null;
+                }
+                if (this.isVirtual) {
+                    this.ctx.grid?.updateNavigationMetadata();
+                    this.resetNavigationViewport();
+                }
+                this.zoneSub.unsubscribe();
+                this.zoneSub = null;
+            });
+        }
     }
     ngAfterViewInit() {
         if (!isDocumentAvailable()) {
             return;
         }
-        if (this.skip && this.isVirtual) {
-            this.container.nativeElement.scrollTop = this.rowHeightService.offset(this.skip);
-        }
-        this.resetNavigationViewport();
         this.attachContainerScroll();
         this.initResizeService();
+        this.setScrollerOptions();
     }
     ngAfterViewChecked() {
         const isLocked = this.isLocked;
@@ -313,6 +388,10 @@ export class ListComponent {
         if (this.subscriptions) {
             this.subscriptions.unsubscribe();
         }
+        if (this.zoneSub) {
+            this.zoneSub.unsubscribe();
+            this.zoneSub = null;
+        }
         if (this.resizeService) {
             this.resizeService.destroy();
         }
@@ -323,10 +402,16 @@ export class ListComponent {
         if (this.suspendService.scroll) {
             return;
         }
-        this.rowHeightService = new RowHeightService(this.total, this.rowHeight || this.minRowHeight, this.detailRowHeight);
-        this.totalHeight = this.rowHeightService.totalHeight();
+        const total = this.isVirtual && this.ctx.grid?.pageable ? this.ctx.grid.pageSize : this.total;
+        this.rowHeightService = this.scroller.rowHeightService = new RowHeightService(total, this.rowHeight || this.minRowHeight);
         if (!isUniversal()) {
-            this.ngZone.runOutsideAngular(this.createScroller.bind(this));
+            if (this.skipScroll) {
+                this.setScrollerOptions();
+                this.scroller.update();
+            }
+            else {
+                this.ngZone.runOutsideAngular(this.createScroller.bind(this));
+            }
         }
     }
     lockedScroll() {
@@ -390,14 +475,47 @@ export class ListComponent {
     get isStacked() {
         return this.ctx.grid?.isStacked;
     }
-    detailExpand({ index, expand }) {
-        if (expand) {
-            this.rowHeightService.expandDetail(index);
+    resetNavigationViewport() {
+        if (!isDocumentAvailable) {
+            return;
         }
-        else {
-            this.rowHeightService.collapseDetail(index);
+        if (this.skipScroll || this.scroller.scrollSyncing) {
+            this.ngZone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    this.skipScroll = this.scroller.scrollSyncing = false;
+                });
+            });
+            return;
+        }
+        if (!this.container || !this.navigationService.tableEnabled ||
+            !this.navigationService.needsViewport() || this.allItems.length === 0) {
+            return;
         }
-        this.totalHeight = this.rowHeightService.totalHeight();
+        const { scrollTop, offsetHeight } = this.container.nativeElement;
+        const scrollBottom = scrollTop + offsetHeight;
+        const firstItemIndex = this.rowHeightService.index(scrollTop);
+        const lastItemIndex = this.rowHeightService.index(scrollBottom);
+        const lastItemOffset = this.rowHeightService.offset(lastItemIndex);
+        let viewportStart = firstItemIndex;
+        let viewportEnd = lastItemIndex;
+        if (isPresent(this.detailTemplate)) {
+            viewportStart *= 2;
+            viewportEnd *= 2;
+            const firstItemHeight = this.rowHeightService.offset(firstItemIndex);
+            if (firstItemHeight + this.rowHeight < scrollTop) {
+                viewportStart++;
+            }
+            const lastItemHeight = this.rowHeightService.height(lastItemIndex);
+            const lastItemExpanded = this.scroller.isExpanded(lastItemIndex);
+            const lastItemDetailOverflows = lastItemOffset + lastItemHeight > scrollBottom;
+            if (lastItemExpanded && !lastItemDetailOverflows) {
+                viewportEnd++;
+            }
+        }
+        const offset = this.isVirtual && this.ctx.grid?.pageable ? this.skip : 0;
+        this.navigationService.setViewport(viewportStart + offset, viewportEnd + offset);
+    }
+    detailExpand() {
         this.resetNavigationViewport();
     }
     attachContainerScroll() {
@@ -441,12 +559,16 @@ export class ListComponent {
         this.scrollerSubscription.add(observable.pipe(filter((x) => x instanceof ScrollBottomAction))
             .subscribe(() => this.scrollBottom.emit()));
     }
-    scroll({ offset = 0 }) {
+    scroll(scrollActionArgs) {
+        this.skipScroll = false;
         if (this.isVirtual) {
             [
                 maybeNativeElement(this.table),
                 maybeNativeElement(this.lockedTable)
-            ].filter(isPresent).forEach(translateY(this.renderer, offset));
+            ].filter(isPresent).forEach(translateY(this.renderer, scrollActionArgs.offset));
+            if (this.virtualPageSize && scrollActionArgs.changeVirtualData && (this.ctx.grid.pageable || this.ctx.grid.group?.length)) {
+                this.ngZone.run(() => this.itemsToRender = this.allItems.slice(this.scroller.virtualSkip, this.scroller.virtualSkip + this.virtualPageSize));
+            }
         }
         this.resetNavigationViewport();
     }
@@ -456,24 +578,13 @@ export class ListComponent {
             this.lockedContainer.nativeElement.scrollTop = scrollTop;
         }
     }
-    handleInitialScrollToSkip() {
-        const shouldScroll = () => this.isVirtual && this.skip > 0 && this.total > 0;
-        const sub = this.changeNotification.changes
-            .pipe(filter(shouldScroll))
-            .subscribe(() => {
-            this.scrollTo({ row: this.skip });
-            sub.unsubscribe();
-        });
-    }
     handleRowSync() {
         const isLocked = () => isPresent(this.lockedContainer);
         const onStable = () => this.ngZone.onStable.asObservable().pipe(take(1));
         return merge(this.changeNotification.changes, this.groupsService.changes
             .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.resetNavigationViewport();
-        }), filter(isLocked))
+            .pipe(filter(isLocked))
             .subscribe(() => {
             const scrollTop = this.container.nativeElement.scrollTop;
             const scrollLeft = this.container.nativeElement.scrollLeft;
@@ -502,9 +613,9 @@ export class ListComponent {
         if (isPresent(this.detailTemplate) && adjustIndexForDetailTemplate) {
             itemIndex = Math.floor(itemIndex / 2);
         }
-        const offset = this.rowHeightService.offset(itemIndex, !adjustIndexForDetailTemplate);
+        const offset = this.rowHeightService.offset(itemIndex);
         this.container.nativeElement.scrollTop = offset;
-        this.resetNavigationViewport();
+        this.scrollToIndex = itemIndex;
     }
     scrollTo({ row, column }, adjustIndex = false) {
         if (isNumber(row)) {
@@ -557,39 +668,8 @@ export class ListComponent {
                 return dataAttribute && +dataAttribute === this.ctx.grid.skip + dataItemIndex;
             });
             row && row.scrollIntoView();
-            this.isVirtual && this.resetNavigationViewport();
-        }
-    }
-    resetNavigationViewport() {
-        if (!isDocumentAvailable) {
-            return;
-        }
-        if (!this.container || !this.navigationService.tableEnabled ||
-            !this.navigationService.needsViewport() || this.data.length === 0) {
-            return;
-        }
-        const { scrollTop, offsetHeight } = this.container.nativeElement;
-        const scrollBottom = scrollTop + offsetHeight;
-        const firstItemIndex = this.rowHeightService.index(scrollTop);
-        const lastItemIndex = this.rowHeightService.index(scrollBottom);
-        const lastItemOffset = this.rowHeightService.offset(lastItemIndex);
-        let viewportStart = firstItemIndex;
-        let viewportEnd = lastItemIndex;
-        if (isPresent(this.detailTemplate)) {
-            viewportStart *= 2;
-            viewportEnd *= 2;
-            const firstItemHeight = this.rowHeightService.offset(firstItemIndex);
-            if (firstItemHeight + this.rowHeight < scrollTop) {
-                viewportStart++;
-            }
-            const lastItemHeight = this.rowHeightService.height(lastItemIndex);
-            const lastItemExpanded = this.rowHeightService.isExpanded(lastItemIndex);
-            const lastItemDetailOverflows = lastItemOffset + lastItemHeight > scrollBottom;
-            if (lastItemExpanded && !lastItemDetailOverflows) {
-                viewportEnd++;
-            }
+            this.resetNavigationViewport();
         }
-        this.navigationService.setViewport(viewportStart, viewportEnd);
     }
     cleanupScroller() {
         if (this.scrollerSubscription) {
@@ -693,6 +773,14 @@ export class ListComponent {
         }
         return 0;
     };
+    setScrollerOptions() {
+        this.scroller.scrollableVirtual = this.isVirtual;
+        this.scroller.table = this.table.nativeElement;
+        this.scroller.tableBody = this.table.nativeElement.tBodies[0];
+        this.scroller.container = this.container.nativeElement;
+        this.scroller.scrollHeightContainer = this.container.nativeElement.querySelector('.k-height-container');
+        this.scroller.total = this.isVirtual && !this.ctx.grid?.pageable ? this.total : this.allItems.length;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListComponent, deps: [{ token: SCROLLER_FACTORY_TOKEN }, { token: i1.DetailsService }, { token: i2.ChangeNotificationService }, { token: i3.SuspendService }, { token: i4.GroupsService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i5.ScrollSyncService }, { token: i6.ResizeService }, { token: i7.EditService }, { token: i8.BrowserSupportService }, { token: i9.NavigationService }, { token: i10.ScrollRequestService }, { token: i11.ContextService }, { token: i12.ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: i13.PDFService }, { token: i14.ColumnInfoService }, { token: i15.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: [
             {
@@ -730,7 +818,9 @@ export class ListComponent {
                     role="presentation"
                     [groups]="groups"
                     [isLocked]="true"
-                    [rowsToRender]="allItems"
+                    [rowsToRender]="itemsToRender"
+                    [rowHeight]="rowHeight"
+                    [detailRowHeight]="detailRowHeight"
                     [noRecordsText]="''"
                     [columns]="$any(lockedLeafColumns)"
                     [totalColumnsCount]="leafColumns.length"
@@ -748,8 +838,8 @@ export class ListComponent {
             </table>
             <kendo-resize-sensor></kendo-resize-sensor>
         </div>
-        <div *ngIf="isVirtual" class="k-height-container" role="presentation">
-            <div [style.height.px]="totalHeight"></div>
+        <div class="k-height-container" *ngIf="isVirtual" role="presentation">
+            <div></div>
         </div>
     </div>
     <div 
@@ -777,7 +867,7 @@ export class ListComponent {
                 <tbody kendoGridTableBody
                     role="rowgroup"
                     [skipGroupDecoration]="isLocked"
-                    [rowsToRender]="allItems"
+                    [rowsToRender]="itemsToRender"
                     [groups]="groups"
                     [columns]="$any(nonLockedColumnsToRender)"
                     [allColumns]="$any(nonLockedLeafColumns)"
@@ -795,20 +885,22 @@ export class ListComponent {
                     [virtualColumns]="virtualColumns"
                     [isLoading]="loading"
                     [isVirtual]="isVirtual"
-                    [cellLoadingTemplate]="cellLoadingTemplate">
+                    [cellLoadingTemplate]="cellLoadingTemplate"
+                    [rowHeight]="rowHeight"
+                    [detailRowHeight]="detailRowHeight">
                 </tbody>
             </table>
             <kendo-resize-sensor *ngIf="isLocked"></kendo-resize-sensor>
         </div>
         <kendo-resize-sensor *ngIf="isLocked || virtualColumns"></kendo-resize-sensor>
         <div *ngIf="isVirtual" class="k-height-container" role="presentation">
-            <div [style.height.px]="totalHeight"></div>
+            <div></div>
         </div>
         <div *ngIf="virtualColumns && !isStacked" class="k-width-container" role="presentation">
             <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", "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"] }] });
+    `, 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", "rowHeight", "detailRowHeight"] }, { 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,
@@ -851,7 +943,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     role="presentation"
                     [groups]="groups"
                     [isLocked]="true"
-                    [rowsToRender]="allItems"
+                    [rowsToRender]="itemsToRender"
+                    [rowHeight]="rowHeight"
+                    [detailRowHeight]="detailRowHeight"
                     [noRecordsText]="''"
                     [columns]="$any(lockedLeafColumns)"
                     [totalColumnsCount]="leafColumns.length"
@@ -869,8 +963,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             </table>
             <kendo-resize-sensor></kendo-resize-sensor>
         </div>
-        <div *ngIf="isVirtual" class="k-height-container" role="presentation">
-            <div [style.height.px]="totalHeight"></div>
+        <div class="k-height-container" *ngIf="isVirtual" role="presentation">
+            <div></div>
         </div>
     </div>
     <div 
@@ -898,7 +992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 <tbody kendoGridTableBody
                     role="rowgroup"
                     [skipGroupDecoration]="isLocked"
-                    [rowsToRender]="allItems"
+                    [rowsToRender]="itemsToRender"
                     [groups]="groups"
                     [columns]="$any(nonLockedColumnsToRender)"
                     [allColumns]="$any(nonLockedLeafColumns)"
@@ -916,14 +1010,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [virtualColumns]="virtualColumns"
                     [isLoading]="loading"
                     [isVirtual]="isVirtual"
-                    [cellLoadingTemplate]="cellLoadingTemplate">
+                    [cellLoadingTemplate]="cellLoadingTemplate"
+                    [rowHeight]="rowHeight"
+                    [detailRowHeight]="detailRowHeight">
                 </tbody>
             </table>
             <kendo-resize-sensor *ngIf="isLocked"></kendo-resize-sensor>
         </div>
         <kendo-resize-sensor *ngIf="isLocked || virtualColumns"></kendo-resize-sensor>
         <div *ngIf="isVirtual" class="k-height-container" role="presentation">
-            <div [style.height.px]="totalHeight"></div>
+            <div></div>
         </div>
         <div *ngIf="virtualColumns && !isStacked" class="k-width-container" role="presentation">
             <div [style.width.px]="totalWidth"></div>

package/esm2022/rendering/table-body.component.mjs

@@ -96,6 +96,8 @@ export class TableBodyComponent {
     rowSticky;
     totalColumns;
     rowClass = () => null;
+    rowHeight;
+    detailRowHeight;
     hostClass = true;
     groupHeaderSlaveCellsCount;
     groupHeaderColumns;
@@ -208,7 +210,8 @@ export class TableBodyComponent {
         }
     }
     logicalRowIndex(rowIndex) {
-        let pos = this.skip + rowIndex;
+        const skip = this.skip + (this.ctx.scroller?.virtualSkip ?? 0);
+        let pos = rowIndex + skip;
         if (this.hasDetailTemplate && !this.isStackedMode) {
             pos *= 2;
         }
@@ -300,9 +303,6 @@ export class TableBodyComponent {
         }, []);
         return colsToRender;
     }
-    showGroupHeader(item) {
-        return !item.data.skipHeader;
-    }
     addStickyColumnStyles(column) {
         const stickyStyles = this.columnInfoService.stickyColumnsStyles(column);
         return { ...column.style, ...stickyStyles };
@@ -466,9 +466,10 @@ export class TableBodyComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableBodyComponent, deps: [{ token: i1.DetailsService }, { token: i2.GroupsService }, { token: i3.ChangeNotificationService }, { token: i4.EditService }, { token: i5.ContextService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i6.DomEventsService }, { token: i7.SelectionService }, { token: i8.CellSelectionService }, { token: i9.ColumnInfoService }, { token: i10.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: `
+    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", rowHeight: "rowHeight", detailRowHeight: "detailRowHeight" }, 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"
+            [style.height.px]="rowHeight"
             kendoGridLogicalRow
                 [logicalRowIndex]="addRowLogicalIndex()"
                 [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
@@ -538,6 +539,7 @@ export class TableBodyComponent {
     </tr>
     <ng-container *ngFor="let item of rowsToRender; trackBy: trackByWrapper; let rowIndex = index;">
         <tr *ngIf="item.type === 'group'"
+            [style.height.px]="rowHeight"
             kendoGridGroupHeader
                 [columns]="columns"
                 [groups]="groups"
@@ -556,6 +558,7 @@ export class TableBodyComponent {
                 [logicalSlaveCellsCount]="groupHeaderSlaveCellsCount">
         </tr>
         <tr *ngIf="item.showDataItem"
+            [style.height.px]="rowHeight"
             kendoGridLogicalRow
                 [dataRowIndex]="$any(item).index"
                 [dataItem]="item.data"
@@ -657,6 +660,7 @@ export class TableBodyComponent {
         </tr>
         <tr *ngIf="item.showDetailRow"
             class="k-detail-row"
+            [style.height.px]="detailRowHeight"
             kendoGridLogicalRow
                 [dataRowIndex]="$any(item).index"
                 [dataItem]="item.data"
@@ -711,6 +715,7 @@ export class TableBodyComponent {
         </tr>
         <tr *ngIf="item.type === 'footer'"
             class="k-group-footer"
+            [style.height.px]="rowHeight"
             kendoGridLogicalRow
                 [logicalRowIndex]="logicalRowIndex(rowIndex)"
                 [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
@@ -784,6 +789,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     template: `
     <ng-container *ngIf="editService.hasNewItem">
         <tr class="k-grid-add-row k-grid-edit-row k-master-row"
+            [style.height.px]="rowHeight"
             kendoGridLogicalRow
                 [logicalRowIndex]="addRowLogicalIndex()"
                 [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
@@ -853,6 +859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     </tr>
     <ng-container *ngFor="let item of rowsToRender; trackBy: trackByWrapper; let rowIndex = index;">
         <tr *ngIf="item.type === 'group'"
+            [style.height.px]="rowHeight"
             kendoGridGroupHeader
                 [columns]="columns"
                 [groups]="groups"
@@ -871,6 +878,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [logicalSlaveCellsCount]="groupHeaderSlaveCellsCount">
         </tr>
         <tr *ngIf="item.showDataItem"
+            [style.height.px]="rowHeight"
             kendoGridLogicalRow
                 [dataRowIndex]="$any(item).index"
                 [dataItem]="item.data"
@@ -972,6 +980,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </tr>
         <tr *ngIf="item.showDetailRow"
             class="k-detail-row"
+            [style.height.px]="detailRowHeight"
             kendoGridLogicalRow
                 [dataRowIndex]="$any(item).index"
                 [dataItem]="item.data"
@@ -1026,6 +1035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </tr>
         <tr *ngIf="item.type === 'footer'"
             class="k-group-footer"
+            [style.height.px]="rowHeight"
             kendoGridLogicalRow
                 [logicalRowIndex]="logicalRowIndex(rowIndex)"
                 [logicalSlaveRow]="lockedColumnsCount > 0 && !isStackedMode"
@@ -1141,6 +1151,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], rowClass: [{
                 type: Input
+            }], rowHeight: [{
+                type: Input
+            }], detailRowHeight: [{
+                type: Input
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-table-tbody']