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

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

@@ -2279,6 +2279,10 @@ class ColumnBase {
      *
      */
     footerClass;
+    /**
+     * Defines a function that is used to determine the rowspan of each column cell.
+     */
+    cellRowspan;
     /**
      * @hidden
      */
@@ -2373,8 +2377,13 @@ class ColumnBase {
             throw new Error(ColumnConfigurationErrorMessages.columnNested);
         }
     }
+    ngOnChanges(changes) {
+        if (isDevMode() && changes['cellRowspan'] && typeof changes['cellRowspan'].currentValue !== 'function') {
+            throw new Error(GridConfigurationErrorMessages.functionType('cellRowspan', changes['cellRowspan'].currentValue));
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnBase, deps: [{ token: ColumnBase }, { token: IdService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnBase, selector: "kendo-grid-column-base", inputs: { resizable: "resizable", reorderable: "reorderable", minResizableWidth: "minResizableWidth", maxResizableWidth: "maxResizableWidth", title: "title", width: "width", autoSize: "autoSize", locked: "locked", sticky: "sticky", hidden: "hidden", media: "media", lockable: "lockable", stickable: "stickable", columnMenu: "columnMenu", includeInChooser: "includeInChooser", tableCellsRole: "tableCellsRole", style: "style", headerStyle: "headerStyle", filterStyle: "filterStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", filterClass: "filterClass", footerClass: "footerClass" }, queries: [{ propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "headerTemplates", predicate: HeaderTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], ngImport: i0, template: ``, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnBase, selector: "kendo-grid-column-base", inputs: { resizable: "resizable", reorderable: "reorderable", minResizableWidth: "minResizableWidth", maxResizableWidth: "maxResizableWidth", title: "title", width: "width", autoSize: "autoSize", locked: "locked", sticky: "sticky", hidden: "hidden", media: "media", lockable: "lockable", stickable: "stickable", columnMenu: "columnMenu", includeInChooser: "includeInChooser", tableCellsRole: "tableCellsRole", style: "style", headerStyle: "headerStyle", filterStyle: "filterStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", filterClass: "filterClass", footerClass: "footerClass", cellRowspan: "cellRowspan" }, queries: [{ propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "headerTemplates", predicate: HeaderTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], usesOnChanges: true, ngImport: i0, template: ``, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnBase, decorators: [{
             type: Component,
@@ -2431,6 +2440,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], footerClass: [{
                 type: Input
+            }], cellRowspan: [{
+                type: Input
             }], headerTemplates: [{
                 type: ContentChildren,
                 args: [HeaderTemplateDirective, { descendants: false }]
@@ -3310,6 +3321,7 @@ class NavigationService {
     pagerIsNavigable = false;
     tableIsNavigable = false;
     toolbarIsNavigable = false;
+    lastCellRowIndex;
     get activeDataRow() {
         return Math.max(0, this.activeRowIndex - this.meta.headerRows);
     }
@@ -3578,78 +3590,62 @@ class NavigationService {
             .forEach(cell => cell.focusGroup && cell.focusGroup.activate());
     }
     moveCursorFwd() {
+        this.lastCellRowIndex = this.activeCell.rowIndex;
         return this.ctx.localization.rtl ? this.cursor.moveLeft() : this.cursor.moveRight();
     }
     moveCursorBwd() {
+        this.lastCellRowIndex = this.activeCell.rowIndex;
         return this.ctx.localization.rtl ? this.cursor.moveRight() : this.cursor.moveLeft();
     }
     onCursorKeydown(args) {
         let preventDefault = false;
         const modifier = args.ctrlKey || args.metaKey;
-        const step = modifier ? 5 : 1;
+        let step = modifier ? 5 : 1;
+        const rowspan = +args.target?.getAttribute('rowspan');
+        let rowspanOffset = 0;
         if (!this.onCellKeydown(args)) {
             return;
         }
         const row = this.cursor.row;
+        const dir = args.keyCode === Keys.ArrowDown ? 'Down' : 'Up';
+        const right = args.keyCode === Keys.ArrowRight;
         switch (args.keyCode) {
             case Keys.ArrowDown:
-                if (args.shiftKey) {
-                    if (this.ctx.grid.blockArrowSelection) {
-                        return;
-                    }
-                    preventDefault = this.cursor.moveDown(step);
-                    if (this.activeRow?.dataItem) {
-                        this.handleVerticalArrowSelection(step);
-                    }
-                }
-                else {
-                    preventDefault = this.cursor.moveDown(step);
-                }
-                break;
             case Keys.ArrowUp:
+                if (rowspan > 1) {
+                    rowspanOffset = this.calculateRowspanOffset(dir, rowspan);
+                    step += rowspanOffset;
+                }
                 if (args.shiftKey) {
                     if (this.ctx.grid.blockArrowSelection) {
                         return;
                     }
-                    preventDefault = this.cursor.moveUp(step);
+                    preventDefault = this.cursor[`move${dir}`](step);
                     if (this.activeRow?.dataItem) {
-                        this.handleVerticalArrowSelection(-step);
+                        const sign = dir === 'Down' ? 1 : -1;
+                        this.handleVerticalArrowSelection(sign * step);
                     }
                 }
                 else {
-                    preventDefault = this.cursor.moveUp(step);
+                    preventDefault = this.cursor[`move${dir}`](step);
                 }
+                this.lastCellRowIndex = this.activeRowIndex;
                 break;
             case Keys.ArrowRight:
-                if (args.altKey && this.ctx.grid.resizable && this.isColumnResizable) {
-                    this.columnResize(true);
-                    break;
-                }
-                if (args.shiftKey) {
-                    if (this.ctx.grid.blockArrowSelection) {
-                        return;
-                    }
-                    preventDefault = this.moveCursorFwd();
-                    this.handleHorizontalArrowSelection(args);
-                }
-                else {
-                    preventDefault = this.moveCursorFwd();
-                }
-                break;
             case Keys.ArrowLeft:
                 if (args.altKey && this.ctx.grid.resizable && this.isColumnResizable) {
-                    this.columnResize(false);
+                    this.columnResize(right);
                     break;
                 }
                 if (args.shiftKey) {
                     if (this.ctx.grid.blockArrowSelection) {
                         return;
                     }
-                    preventDefault = this.moveCursorBwd();
+                    preventDefault = this[`moveCursor${right ? 'Fwd' : 'Bwd'}`]();
                     this.handleHorizontalArrowSelection(args);
                 }
                 else {
-                    preventDefault = this.moveCursorBwd();
+                    preventDefault = this[`moveCursor${right ? 'Fwd' : 'Bwd'}`]();
                 }
                 break;
             case Keys.PageDown:
@@ -3902,6 +3898,13 @@ class NavigationService {
         const ev = rowSelectionService.selectRange(startRowIndex, endRowIndex);
         rowSelectionService.changes.emit(ev);
     }
+    calculateRowspanOffset(direction, cellRowspan) {
+        if (!isPresent$1(this.lastCellRowIndex)) {
+            return 0;
+        }
+        const offset = direction === 'Up' ? Math.abs(this.lastCellRowIndex - this.activeRowIndex) : (this.activeRowIndex + cellRowspan - this.lastCellRowIndex - 1);
+        return offset;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, deps: [{ token: i0.NgZone }, { token: DomEventsService }, { token: i44.PagerContextService }, { token: ScrollRequestService }, { token: GroupsService }, { token: DetailsService }, { token: FocusRoot }, { token: EditService }, { token: i0.ChangeDetectorRef }, { token: ContextService }, { token: ColumnResizingService }, { token: FocusableDirective, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService });
 }
@@ -3957,13 +3960,13 @@ class DraggableColumnDirective {
         this.renderer = renderer;
     }
     ngOnInit() {
-        this.subscriptions.add(this.zone.runOutsideAngular(() => this.draggable.kendoPress.pipe(filter(_ => this.enabled), filter(({ originalEvent: { target } }) => target === this.element.nativeElement || skipButtons(target)), tap((e) => {
+        this.subscriptions.add(this.zone.runOutsideAngular(() => this.draggable.kendoPress.pipe(filter(() => this.enabled), filter(({ originalEvent: { target } }) => target === this.element.nativeElement || skipButtons(target)), tap((e) => {
             const originalEvent = e.originalEvent;
             if (!e.isTouch) {
                 originalEvent.preventDefault();
             }
             this.nav.navigateTo(originalEvent.target);
-        }), switchMap(preventOnDblClick$1(this.draggable.kendoRelease)), tap((_) => {
+        }), switchMap(preventOnDblClick$1(this.draggable.kendoRelease)), tap(() => {
             this.hint.create(this.context.hint);
             this.cue.create();
         }), switchMap(down => this.draggable.kendoDrag.pipe(tap((e) => {
@@ -4269,7 +4272,7 @@ class ColGroupComponent {
     get columnsToRender() {
         return columnsToRender(this.columns);
     }
-    trackBy(index, _item) {
+    trackBy(index) {
         return index;
     }
     isSorted(column) {
@@ -4758,6 +4761,9 @@ class LogicalCellDirective {
             return this.idService.cellId(this.logicalRowIndex, this.logicalColIndex);
         }
     }
+    get cellRowspan() {
+        return String(this.rowSpan);
+    }
     get ariaColIndex() {
         if (this.logicalSlaveCell || this.logicalColIndex === -1) {
             return undefined;
@@ -4864,7 +4870,7 @@ class LogicalCellDirective {
         return this.navigationService.isCellFocused(this);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LogicalCellDirective, deps: [{ token: FocusGroup }, { token: i0.ElementRef }, { token: ColumnInfoService }, { token: IdService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: CELL_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LogicalCellDirective, isStandalone: true, selector: "[kendoGridLogicalCell]", inputs: { logicalColIndex: "logicalColIndex", logicalRowIndex: "logicalRowIndex", logicalSlaveCell: "logicalSlaveCell", colIndex: "colIndex", colSpan: "colSpan", rowSpan: "rowSpan", groupItem: "groupItem", dataRowIndex: "dataRowIndex", dataItem: "dataItem", detailExpandCell: "detailExpandCell", headerLabelText: "headerLabelText" }, host: { properties: { "attr.id": "this.id", "attr.aria-colindex": "this.ariaColIndex" } }, providers: [{
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LogicalCellDirective, isStandalone: true, selector: "[kendoGridLogicalCell]", inputs: { logicalColIndex: "logicalColIndex", logicalRowIndex: "logicalRowIndex", logicalSlaveCell: "logicalSlaveCell", colIndex: "colIndex", colSpan: "colSpan", rowSpan: "rowSpan", groupItem: "groupItem", dataRowIndex: "dataRowIndex", dataItem: "dataItem", detailExpandCell: "detailExpandCell", headerLabelText: "headerLabelText" }, host: { properties: { "attr.id": "this.id", "attr.rowspan": "this.cellRowspan", "attr.aria-colindex": "this.ariaColIndex" } }, providers: [{
                 provide: FocusGroup,
                 deps: [FocusRoot],
                 useClass: FocusGroup
@@ -4911,6 +4917,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], id: [{
                 type: HostBinding,
                 args: ['attr.id']
+            }], cellRowspan: [{
+                type: HostBinding,
+                args: ['attr.rowspan']
             }], ariaColIndex: [{
                 type: HostBinding,
                 args: ['attr.aria-colindex']
@@ -5719,7 +5728,7 @@ class GroupPanelComponent {
             .reduce((acc, target) => merge(acc, target.leave), from([]));
         const dropStream = this.dropTargets
             .reduce((acc, target) => merge(acc, target.drop), from([]));
-        this.targetSubscription.add(enterStream.pipe(tap(_ => {
+        this.targetSubscription.add(enterStream.pipe(tap(() => {
             this.hint.removeLock();
             this.destroyMenu();
         }), filter(({ draggable, target }) => this.canDrop(draggable.context, target.context)), tap(this.enter.bind(this)), switchMapTo(dropStream.pipe(takeUntil(leaveStream.pipe(tap(this.leave.bind(this))))))).subscribe(this.drop.bind(this)));
@@ -14243,7 +14252,7 @@ class PDFComponent extends PDFExportComponent {
     /**
      * @hidden
      */
-    saveAs(_) {
+    saveAs() {
         throw new Error(GridConfigurationErrorMessages.unsupportedMethod('saveAs', 'GridComponent.saveAsPDF'));
     }
     /**
@@ -14927,7 +14936,7 @@ class CellSelectionAggregateService {
         return true;
     }
     init() {
-        this.sub.add(this.ctx.grid.dataStateChange.subscribe(_ => {
+        this.sub.add(this.ctx.grid.dataStateChange.subscribe(() => {
             // nullifies aggregates and sets default count to avoid mismatching state -
             // https://github.com/telerik/kendo-angular-private/issues/2964
             this.nullifyAggregates();
@@ -16241,7 +16250,7 @@ class HeaderComponent {
     }
     canDrop(draggable, target) {
         isDocumentAvailable() && this.zone.runOutsideAngular(() => {
-            document.addEventListener('pointerup', e => {
+            document.addEventListener('pointerup', () => {
                 this.stopSorting = true;
                 setTimeout(() => this.stopSorting = false);
             }, {
@@ -16266,7 +16275,7 @@ class HeaderComponent {
     isCheckboxColumn(column) {
         return isCheckboxColumn(column) && !column.templateRef;
     }
-    trackByIndex(index, _item) {
+    trackByIndex(index) {
         return index;
     }
     addStickyStyles(column) {
@@ -16919,7 +16928,7 @@ class FooterComponent {
     get columnsToRender() {
         return columnsToRender(this.columns || []);
     }
-    trackByIndex(index, _item) {
+    trackByIndex(index) {
         return index;
     }
     logicalColumnIndex(column) {
@@ -17518,7 +17527,7 @@ class CellComponent {
     ngDoCheck() {
         this.updateCellContext();
     }
-    ngOnChanges(_changes) {
+    ngOnChanges() {
         this.updateTemplateContext();
     }
     ngAfterContentChecked() {
@@ -17772,6 +17781,27 @@ 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++) {
@@ -17800,6 +17830,7 @@ class TableBodyComponent {
     cellSelectionService;
     columnInfoService;
     navigationService;
+    rowspanService;
     columns = [];
     allColumns;
     groups = [];
@@ -17822,6 +17853,7 @@ class TableBodyComponent {
     trackBy = defaultTrackBy;
     rowSticky;
     totalColumns;
+    rowClass = () => null;
     hostClass = true;
     groupHeaderSlaveCellsCount;
     groupHeaderColumns;
@@ -17832,8 +17864,9 @@ 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;
@@ -17847,6 +17880,7 @@ 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);
@@ -17855,6 +17889,12 @@ 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;
@@ -17868,6 +17908,24 @@ 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';
@@ -18171,7 +18229,7 @@ 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 }], target: i0.ɵɵFactoryTarget.Component });
+    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: `
     <ng-container *ngIf="editService.hasNewItem">
         <tr class="k-grid-add-row k-grid-edit-row k-master-row"
@@ -18287,35 +18345,41 @@ 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))) &&
@@ -18516,35 +18580,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))) &&
@@ -18631,7 +18701,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 }]; }, 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 }, { type: RowspanService }]; }, propDecorators: { columns: [{
                 type: Input
             }], allColumns: [{
                 type: Input
@@ -18675,11 +18745,11 @@ 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
             }] } });
 
 /**
@@ -19410,8 +19480,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1738076727,
-    version: '18.0.1-develop.3',
+    publishDate: 1738357372,
+    version: '18.1.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -19965,7 +20035,7 @@ 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) => {
@@ -21486,6 +21556,7 @@ class ListComponent {
     changeDetector;
     pdfService;
     columnInfo;
+    rowspanService;
     hostClass = true;
     hostRole = 'presentation';
     data;
@@ -21542,6 +21613,7 @@ class ListComponent {
     columnsEndIdx;
     viewportColumnsWidth;
     scrollLeft = 0;
+    observer;
     get lockedLeafColumns() {
         return this.columns.lockedLeafColumns;
     }
@@ -21573,7 +21645,7 @@ 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) {
+    constructor(scrollerFactory, detailsService, changeNotification, suspendService, groupsService, ngZone, renderer, scrollSyncService, resizeService, editService, supportService, navigationService, scrollRequestService, ctx, columnResizingService, changeDetector, pdfService, columnInfo, rowspanService) {
         this.changeNotification = changeNotification;
         this.suspendService = suspendService;
         this.groupsService = groupsService;
@@ -21589,6 +21661,7 @@ class ListComponent {
         this.changeDetector = changeDetector;
         this.pdfService = pdfService;
         this.columnInfo = columnInfo;
+        this.rowspanService = rowspanService;
         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)));
@@ -21660,6 +21733,7 @@ class ListComponent {
         if (this.resizeService) {
             this.resizeService.destroy();
         }
+        this.observer?.disconnect();
         this.cleanupScroller();
     }
     init() {
@@ -21765,7 +21839,7 @@ class ListComponent {
         const shouldScroll = () => this.isVirtual && this.skip > 0 && this.total > 0;
         const sub = this.changeNotification.changes
             .pipe(filter(shouldScroll))
-            .subscribe(_ => {
+            .subscribe(() => {
             this.scrollTo({ row: this.skip });
             sub.unsubscribe();
         });
@@ -21776,7 +21850,10 @@ class ListComponent {
         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(tap(() => {
+            this.ngZone.run(() => this.rowspanService.reset());
+            this.resetNavigationViewport();
+        }), filter(isLocked))
             .subscribe(() => {
             const scrollTop = this.container.nativeElement.scrollTop;
             const scrollLeft = this.container.nativeElement.scrollLeft;
@@ -22019,7 +22096,7 @@ 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 }], target: i0.ɵɵFactoryTarget.Component });
+    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: [
             {
                 provide: SCROLLER_FACTORY_TOKEN,
@@ -22266,7 +22343,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 }]; }, 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: RowspanService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-grid-container']
             }], hostRole: [{
@@ -25052,7 +25129,7 @@ class GridComponent {
     applyAutoSize() {
         const cols = this.columns.filter((c) => this.autoSize ? c.autoSize !== false : c.autoSize);
         if (cols.length > 0) {
-            this.ngZone.onStable.pipe(take(1)).subscribe(_ => this.autoFitColumns(cols));
+            this.ngZone.onStable.pipe(take(1)).subscribe(() => this.autoFitColumns(cols));
         }
     }
     onColumnRangeChange(range) {
@@ -25196,7 +25273,8 @@ class GridComponent {
             ContextService,
             SizingOptionsService,
             RowReorderService,
-            ClipboardService
+            ClipboardService,
+            RowspanService
         ], queries: [{ propertyName: "columns", predicate: ColumnBase }, { propertyName: "detailTemplateChildren", predicate: DetailTemplateDirective }, { propertyName: "cellLoadingTemplateChildren", predicate: CellLoadingTemplateDirective }, { propertyName: "loadingTemplateChildren", predicate: LoadingTemplateDirective }, { propertyName: "statusBarTemplateChildren", predicate: StatusBarTemplateDirective }, { propertyName: "noRecordsTemplateChildren", predicate: NoRecordsTemplateDirective }, { propertyName: "pagerTemplateChildren", predicate: PagerTemplateDirective }, { propertyName: "toolbarTemplateChildren", predicate: ToolbarTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], viewQueries: [{ propertyName: "lockedHeader", first: true, predicate: ["lockedHeader"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "ariaRoot", first: true, predicate: ["ariaRoot"], descendants: true, static: true }, { propertyName: "dragTargetContainer", first: true, predicate: DragTargetContainerDirective, descendants: true }, { propertyName: "dropTargetContainer", first: true, predicate: DropTargetContainerDirective, descendants: true }, { propertyName: "footer", predicate: ["footer"], descendants: true }], exportAs: ["kendoGrid"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoGridLocalizedMessages
             i18n-groupPanelEmpty="kendo.grid.groupPanelEmpty|The label visible in the Grid group panel when it is empty"
@@ -25903,7 +25981,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ContextService,
                         SizingOptionsService,
                         RowReorderService,
-                        ClipboardService
+                        ClipboardService,
+                        RowspanService
                     ],
                     selector: 'kendo-grid',
                     template: `
@@ -27194,7 +27273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * @hidden
  */
 class LocalRowEditService extends LocalEditService {
-    update(_item) {
+    update() {
         this.dataChanged();
     }
 }