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

package/esm2022/rendering/list.component.mjs

@@ -10,7 +10,7 @@ import { ScrollerService, PageAction, ScrollAction, ScrollBottomAction } from '.
 import { ScrollRequestService } from '../scrolling/scroll-request.service';
 import { ColumnBase } from '../columns/column-base';
 import { DetailTemplateDirective } from './details/detail-template.directive';
-import { isChanged, isPresent, isUniversal, anyChanged, isNumber, requestAnimationFrame, cancelAnimationFrame, recursiveFlatMap } from '../utils';
+import { isChanged, isPresent, isUniversal, anyChanged, isNumber, requestAnimationFrame, cancelAnimationFrame, recursiveFlatMap, calcRowHeight } from '../utils';
 import { DetailsService } from './details/details.service';
 import { ColumnsContainer } from '../columns/columns-container';
 import { ChangeNotificationService } from '../data/change-notification.service';
@@ -40,7 +40,7 @@ import { ColGroupComponent } from './common/col-group.component';
 import { GridTableDirective } from './grid-table.directive';
 import { TableDirective } from '../column-resizing/table.directive';
 import { NgIf } from '@angular/common';
-import { RowspanService } from './rowspan.service';
+import { DataMappingService } from '../data/data-mapping.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./details/details.service";
 import * as i2 from "../data/change-notification.service";
@@ -56,7 +56,7 @@ import * as i11 from "../common/provider.service";
 import * as i12 from "../column-resizing/column-resizing.service";
 import * as i13 from "../pdf/pdf.service";
 import * as i14 from "../common/column-info.service";
-import * as i15 from "./rowspan.service";
+import * as i15 from "../data/data-mapping.service";
 const elementAt = (index, elements, elementOffset) => {
     for (let idx = 0, elementIdx = 0; idx < elements.length; idx++) {
         const offset = elementOffset(elements[idx]);
@@ -121,14 +121,13 @@ export class ListComponent {
     changeDetector;
     pdfService;
     columnInfo;
-    rowspanService;
+    dataMappingService;
     hostClass = true;
     hostRole = 'presentation';
     data;
     groups = [];
     total;
     rowHeight;
-    stickyRowHeight;
     detailRowHeight;
     take;
     skip = 0;
@@ -153,6 +152,7 @@ export class ListComponent {
     scrollBottom = new EventEmitter();
     totalHeight;
     columnsStartIdx = 0;
+    allItems = [];
     get showFooter() {
         return this.groupable && this.groupable.showFooter;
     }
@@ -178,6 +178,7 @@ export class ListComponent {
     columnsEndIdx;
     viewportColumnsWidth;
     scrollLeft = 0;
+    recalculateRowspan = true;
     observer;
     get lockedLeafColumns() {
         return this.columns.lockedLeafColumns;
@@ -210,7 +211,8 @@ export 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;
@@ -226,12 +228,13 @@ export 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)));
@@ -267,6 +270,22 @@ export 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()) {
@@ -305,7 +324,7 @@ export 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));
@@ -334,6 +353,36 @@ export 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);
@@ -374,10 +423,10 @@ export 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))
@@ -416,7 +465,6 @@ export 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(() => {
@@ -560,36 +608,6 @@ export 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;
@@ -661,8 +679,15 @@ export 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: 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.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: 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: [
             {
                 provide: SCROLLER_FACTORY_TOKEN,
                 useValue: DEFAULT_SCROLLER_FACTORY
@@ -698,13 +723,12 @@ export 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"
@@ -746,9 +770,8 @@ export class ListComponent {
                 <tbody kendoGridTableBody
                     role="rowgroup"
                     [skipGroupDecoration]="isLocked"
-                    [data]="data"
+                    [rowsToRender]="allItems"
                     [groups]="groups"
-                    [showGroupFooters]="showFooter"
                     [columns]="$any(nonLockedColumnsToRender)"
                     [allColumns]="$any(nonLockedLeafColumns)"
                     [detailTemplate]="detailTemplate"
@@ -778,7 +801,7 @@ export 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,
@@ -821,13 +844,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"
@@ -869,9 +891,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"
@@ -908,7 +929,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: i1.DetailsService }, { type: i2.ChangeNotificationService }, { type: i3.SuspendService }, { type: i4.GroupsService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i5.ScrollSyncService }, { type: i6.ResizeService }, { type: i7.EditService }, { type: i8.BrowserSupportService }, { type: i9.NavigationService }, { type: i10.ScrollRequestService }, { type: i11.ContextService }, { type: i12.ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: i13.PDFService }, { type: i14.ColumnInfoService }, { type: i15.RowspanService }]; }, propDecorators: { hostClass: [{
+                }] }, { type: i1.DetailsService }, { type: i2.ChangeNotificationService }, { type: i3.SuspendService }, { type: i4.GroupsService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i5.ScrollSyncService }, { type: i6.ResizeService }, { type: i7.EditService }, { type: i8.BrowserSupportService }, { type: i9.NavigationService }, { type: i10.ScrollRequestService }, { type: i11.ContextService }, { type: i12.ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: i13.PDFService }, { type: i14.ColumnInfoService }, { type: i15.DataMappingService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-grid-container']
             }], hostRole: [{
@@ -922,8 +943,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], rowHeight: [{
                 type: Input
-            }], stickyRowHeight: [{
-                type: Input
             }], detailRowHeight: [{
                 type: Input
             }], take: [{
@@ -973,10 +992,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 }]