@progress/kendo-angular-grid 18.0.1-develop.3 → 18.1.0-develop.10

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

@@ -32,6 +32,7 @@ import { CellComponent } from './cell.component';
 import { LogicalCellDirective } from '../navigation/logical-cell.directive';
 import { LogicalRowDirective } from '../navigation/logical-row.directive';
 import { NgIf, NgFor, NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
+import { RowspanService } from './rowspan.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./details/details.service";
 import * as i2 from "../grouping/groups.service";
@@ -43,6 +44,7 @@ import * as i7 from "../selection/selection.service";
 import * as i8 from "../selection/cell-selection.service";
 import * as i9 from "../common/column-info.service";
 import * as i10 from "../navigation/navigation.service";
+import * as i11 from "./rowspan.service";
 const columnCellIndex = (cell, cells) => {
     let cellIndex = 0;
     for (let idx = 0; idx < cells.length; idx++) {
@@ -71,6 +73,7 @@ export class TableBodyComponent {
     cellSelectionService;
     columnInfoService;
     navigationService;
+    rowspanService;
     columns = [];
     allColumns;
     groups = [];
@@ -93,6 +96,7 @@ export class TableBodyComponent {
     trackBy = defaultTrackBy;
     rowSticky;
     totalColumns;
+    rowClass = () => null;
     hostClass = true;
     groupHeaderSlaveCellsCount;
     groupHeaderColumns;
@@ -103,8 +107,9 @@ export class TableBodyComponent {
     clickTimeout;
     minusIcon = minusIcon;
     plusIcon = plusIcon;
-    rowClass = () => null;
-    constructor(detailsService, groupsService, changeNotification, editService, ctx, ngZone, renderer, element, domEvents, selectionService, cellSelectionService, columnInfoService, navigationService) {
+    dataArray;
+    rerender = false;
+    constructor(detailsService, groupsService, changeNotification, editService, ctx, ngZone, renderer, element, domEvents, selectionService, cellSelectionService, columnInfoService, navigationService, rowspanService) {
         this.detailsService = detailsService;
         this.groupsService = groupsService;
         this.changeNotification = changeNotification;
@@ -118,6 +123,7 @@ export 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);
@@ -126,6 +132,12 @@ export 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;
@@ -139,6 +151,24 @@ export class TableBodyComponent {
         const headerFooterColumnsCount = this.totalColumnsCount - this.lockedColumnsCount - (this.allColumns || this.columns).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;
+    }
     isAriaSelected(item, column) {
         return this.cellSelectionService.isCellSelected(item, column) ||
             this.isRowSelected(item) ? 'true' : 'false';
@@ -442,7 +472,7 @@ 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 ɵ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 }, { token: i11.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: `
     <ng-container *ngIf="editService.hasNewItem">
         <tr class="k-grid-add-row k-grid-edit-row k-master-row"
@@ -558,35 +588,41 @@ export class TableBodyComponent {
                         [svgIcon]="detailButtonSvgIcon(item)"></kendo-icon-wrapper>
                 </a>
             </td>
-            <td
-                kendoGridCell
-                    [rowIndex]="$any(item).index"
-                    [columnIndex]="lockedColumnsCount + columnIndex"
-                    [attr.data-kendo-grid-column-index]="lockedColumnsCount + columnIndex"
-                    [column]="column"
-                    [dataItem]="item.data"
-                    [isLoading]="isLoading"
-                    [isVirtual]="isVirtual"
-                    [loadingTemplate]="cellLoadingTemplate"
-                kendoGridLogicalCell
-                    [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                    [logicalColIndex]="logicalColIndex(column)"
-                    [dataRowIndex]="$any(item).index"
-                    [dataItem]="item.data"
-                    [colIndex]="columnIndex"
-                    [colSpan]="column.colspan"
-                    [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"
-                    [class.k-grid-content-sticky]="column.sticky"
-                    [class.k-touch-action-none]="isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag"
-                [ngClass]="column.cssClass"
-                [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)"
-                *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;">
-            </td>
+            <ng-container *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;">
+                <td *ngIf="column.cellRowspan ? !shouldSkipCell(rowIndex, lockedColumnsCount + columnIndex) : true"
+                    kendoGridCell
+                        [rowIndex]="$any(item).index"
+                        [columnIndex]="lockedColumnsCount + columnIndex"
+                        [attr.data-kendo-grid-column-index]="lockedColumnsCount + columnIndex"
+                        [column]="column"
+                        [dataItem]="item.data"
+                        [isLoading]="isLoading"
+                        [isVirtual]="isVirtual"
+                        [loadingTemplate]="cellLoadingTemplate"
+                    kendoGridLogicalCell
+                        [logicalRowIndex]="logicalRowIndex(rowIndex)"
+                        [logicalColIndex]="logicalColIndex(column)"
+                        [dataRowIndex]="$any(item).index"
+                        [dataItem]="item.data"
+                        [colIndex]="columnIndex"
+                        [colSpan]="column.colspan"
+                        [rowSpan]="column.cellRowspan ? getRowspan({
+                                index: rowIndex,
+                                dataItem: item
+                            }, column, lockedColumnsCount + columnIndex) : 1"
+                        [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"
+                        [class.k-grid-content-sticky]="column.sticky"
+                        [class.k-touch-action-none]="isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag"
+                    [ngClass]="column.cssClass"
+                    [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)"
+                    >
+                </td>
+            </ng-container>
         </tr>
         <tr *ngIf="isDataItem(item) &&
                 (!$any(item).group || isDataItemInExpandedGroup($any(item))) &&
@@ -787,35 +823,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         [svgIcon]="detailButtonSvgIcon(item)"></kendo-icon-wrapper>
                 </a>
             </td>
-            <td
-                kendoGridCell
-                    [rowIndex]="$any(item).index"
-                    [columnIndex]="lockedColumnsCount + columnIndex"
-                    [attr.data-kendo-grid-column-index]="lockedColumnsCount + columnIndex"
-                    [column]="column"
-                    [dataItem]="item.data"
-                    [isLoading]="isLoading"
-                    [isVirtual]="isVirtual"
-                    [loadingTemplate]="cellLoadingTemplate"
-                kendoGridLogicalCell
-                    [logicalRowIndex]="logicalRowIndex(rowIndex)"
-                    [logicalColIndex]="logicalColIndex(column)"
-                    [dataRowIndex]="$any(item).index"
-                    [dataItem]="item.data"
-                    [colIndex]="columnIndex"
-                    [colSpan]="column.colspan"
-                    [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"
-                    [class.k-grid-content-sticky]="column.sticky"
-                    [class.k-touch-action-none]="isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag"
-                [ngClass]="column.cssClass"
-                [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)"
-                *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;">
-            </td>
+            <ng-container *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;">
+                <td *ngIf="column.cellRowspan ? !shouldSkipCell(rowIndex, lockedColumnsCount + columnIndex) : true"
+                    kendoGridCell
+                        [rowIndex]="$any(item).index"
+                        [columnIndex]="lockedColumnsCount + columnIndex"
+                        [attr.data-kendo-grid-column-index]="lockedColumnsCount + columnIndex"
+                        [column]="column"
+                        [dataItem]="item.data"
+                        [isLoading]="isLoading"
+                        [isVirtual]="isVirtual"
+                        [loadingTemplate]="cellLoadingTemplate"
+                    kendoGridLogicalCell
+                        [logicalRowIndex]="logicalRowIndex(rowIndex)"
+                        [logicalColIndex]="logicalColIndex(column)"
+                        [dataRowIndex]="$any(item).index"
+                        [dataItem]="item.data"
+                        [colIndex]="columnIndex"
+                        [colSpan]="column.colspan"
+                        [rowSpan]="column.cellRowspan ? getRowspan({
+                                index: rowIndex,
+                                dataItem: item
+                            }, column, lockedColumnsCount + columnIndex) : 1"
+                        [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"
+                        [class.k-grid-content-sticky]="column.sticky"
+                        [class.k-touch-action-none]="isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag"
+                    [ngClass]="column.cssClass"
+                    [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)"
+                    >
+                </td>
+            </ng-container>
         </tr>
         <tr *ngIf="isDataItem(item) &&
                 (!$any(item).group || isDataItemInExpandedGroup($any(item))) &&
@@ -902,7 +944,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         GroupHeaderComponent, IconWrapperComponent, NgTemplateOutlet, ResizeSensorComponent
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.DetailsService }, { type: i2.GroupsService }, { type: i3.ChangeNotificationService }, { type: i4.EditService }, { type: i5.ContextService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i6.DomEventsService }, { type: i7.SelectionService }, { type: i8.CellSelectionService }, { type: i9.ColumnInfoService }, { type: i10.NavigationService }]; }, propDecorators: { columns: [{
+        }], ctorParameters: function () { return [{ type: i1.DetailsService }, { type: i2.GroupsService }, { type: i3.ChangeNotificationService }, { type: i4.EditService }, { type: i5.ContextService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i6.DomEventsService }, { type: i7.SelectionService }, { type: i8.CellSelectionService }, { type: i9.ColumnInfoService }, { type: i10.NavigationService }, { type: i11.RowspanService }]; }, propDecorators: { columns: [{
                 type: Input
             }], allColumns: [{
                 type: Input
@@ -946,9 +988,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], totalColumns: [{
                 type: Input
+            }], rowClass: [{
+                type: Input
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-table-tbody']
-            }], rowClass: [{
-                type: Input
             }] } });

package/esm2022/selection/selection-default.mjs

@@ -72,7 +72,7 @@ export class Selection {
             this.ctx.grid.rowSelected = (row) => this.rowSelectionState.has(this.getItemKey(row));
         }
         if (!isPresent(this.ctx.grid.isRowSelectable)) {
-            this.ctx.grid.isRowSelectable = (_row) => Boolean(this.ctx.grid.selectable);
+            this.ctx.grid.isRowSelectable = () => Boolean(this.ctx.grid.selectable);
         }
         if (!isPresent(this.ctx.grid.cellSelected)) {
             this.ctx.grid.cellSelected = (row, column, colIndex) => {