@progress/kendo-angular-grid 13.2.0 → 13.2.1-develop.2

package/esm2020/columns/column-list.mjs

@@ -37,7 +37,7 @@ const filterHierarchy = (list, predicate) => {
             }
         }
     });
-    return result;
+    return result.sort((a, b) => Number(b.locked) - Number(a.locked));
 };
 /**
  * @hidden

package/esm2020/filtering/filter-row.component.mjs

@@ -33,6 +33,10 @@ export class FilterRowComponent {
         const columnName = column.title || column.field;
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
+    getLogicalColIndex(columnIndex) {
+        const colIndex = this.lockedColumnsCount + columnIndex;
+        return this.detailTemplate?.templateRef ? colIndex + 1 : colIndex;
+    }
 }
 FilterRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterRowComponent, deps: [{ token: i1.ContextService }, { token: i2.ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
 FilterRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: { columns: "columns", filter: "filter", groups: "groups", detailTemplate: "detailTemplate", logicalRowIndex: "logicalRowIndex", lockedColumnsCount: "lockedColumnsCount" }, host: { properties: { "class.k-filter-row": "this.filterRowClass" } }, ngImport: i0, template: `
@@ -59,7 +63,7 @@ FilterRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 [filter]="filter"
             kendoGridLogicalCell
                 [logicalRowIndex]="logicalRowIndex"
-                [logicalColIndex]="lockedColumnsCount + columnIndex"
+                [logicalColIndex]="getLogicalColIndex(columnIndex)"
       ></td>
     `, isInline: true, components: [{ type: i3.FilterCellComponent, selector: "[kendoGridFilterCell]", inputs: ["column", "filter", "size"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterRowComponent, decorators: [{
@@ -90,7 +94,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [filter]="filter"
             kendoGridLogicalCell
                 [logicalRowIndex]="logicalRowIndex"
-                [logicalColIndex]="lockedColumnsCount + columnIndex"
+                [logicalColIndex]="getLogicalColIndex(columnIndex)"
       ></td>
     `
                 }]

package/esm2020/grid.component.mjs

@@ -2352,6 +2352,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                                 [columnMenu]="columnMenuOptions"
                                 [columnMenuTemplate]="columnMenuTemplate"
                                 [totalColumnsCount]="leafColumns.length"
+                                [totalColumns]="columnsContainer"
                                 [detailTemplate]="detailTemplate"
                                 [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
                             </thead>
@@ -2389,6 +2390,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                                 [columnMenuTemplate]="columnMenuTemplate"
                                 [lockedColumnsCount]="lockedLeafColumns.length"
                                 [totalColumnsCount]="leafColumns.length"
+                                [totalColumns]="columnsContainer"
                                 [detailTemplate]="detailTemplate"
                                 [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
                             </thead>
@@ -2471,7 +2473,8 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                                 [groups]="group"
                                 [columns]="$any(lockedLeafColumns)"
                                 [detailTemplate]="detailTemplate"
-                                [logicalRowIndex]="ariaRowCount">
+                                [logicalRowIndex]="ariaRowCount"
+                                [totalColumns]="columnsContainer">
                             </tfoot>
                         </table>
                     </div>
@@ -2496,7 +2499,8 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                                 [groups]="isLocked ? [] : group"
                                 [columns]="$any(nonLockedLeafColumns)"
                                 [lockedColumnsCount]="lockedLeafColumns.length"
-                                [detailTemplate]="detailTemplate">
+                                [detailTemplate]="detailTemplate"
+                                [totalColumns]="columnsContainer">
                             </tfoot>
                         </table>
                     </div>
@@ -2518,6 +2522,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                         [scrollable]="false"
                         [columns]="$any(visibleColumns)"
                         [totalColumnLevels]="totalColumnLevels"
+                        [totalColumns]="columnsContainer"
                         [groups]="group"
                         [groupable]="showGroupPanel"
                         [reorderable]="reorderable"
@@ -2553,7 +2558,8 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                         [logicalRowIndex]="ariaRowCount"
                         [groups]="group"
                         [columns]="$any(leafColumns)"
-                        [detailTemplate]="detailTemplate">
+                        [detailTemplate]="detailTemplate"
+                        [totalColumns]="columnsContainer">
                     </tfoot>
                 </table>
             </ng-container>
@@ -2594,7 +2600,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             </kendo-icon-wrapper>
             {{hintText}}
         </ng-template>
-    `, isInline: true, components: [{ type: i25.ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { type: i26.PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "size", "template"], outputs: ["pageChange"] }, { type: i27.GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { type: i28.ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: i29.HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex", "size"] }, { type: i30.ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: i31.FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: i32.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", "rowClass"] }, { type: i33.LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { type: i34.StatusBarComponent, selector: "kendo-grid-status-bar", inputs: ["statusBarTemplate"] }, { type: i35.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i36.LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i37.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i38.TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: i39.GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: i40.ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i41.DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { type: i41.DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { type: i42.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i43.GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, components: [{ type: i25.ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { type: i26.PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "size", "template"], outputs: ["pageChange"] }, { type: i27.GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { type: i28.ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: i29.HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "totalColumns", "tabIndex", "size"] }, { type: i30.ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: i31.FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex", "totalColumns"] }, { type: i32.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"] }, { type: i33.LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { type: i34.StatusBarComponent, selector: "kendo-grid-status-bar", inputs: ["statusBarTemplate"] }, { type: i35.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i36.LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i37.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i38.TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: i39.GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: i40.ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i41.DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { type: i41.DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { type: i42.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i43.GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
             args: [{
@@ -2968,6 +2974,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 [columnMenu]="columnMenuOptions"
                                 [columnMenuTemplate]="columnMenuTemplate"
                                 [totalColumnsCount]="leafColumns.length"
+                                [totalColumns]="columnsContainer"
                                 [detailTemplate]="detailTemplate"
                                 [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
                             </thead>
@@ -3005,6 +3012,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 [columnMenuTemplate]="columnMenuTemplate"
                                 [lockedColumnsCount]="lockedLeafColumns.length"
                                 [totalColumnsCount]="leafColumns.length"
+                                [totalColumns]="columnsContainer"
                                 [detailTemplate]="detailTemplate"
                                 [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
                             </thead>
@@ -3087,7 +3095,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 [groups]="group"
                                 [columns]="$any(lockedLeafColumns)"
                                 [detailTemplate]="detailTemplate"
-                                [logicalRowIndex]="ariaRowCount">
+                                [logicalRowIndex]="ariaRowCount"
+                                [totalColumns]="columnsContainer">
                             </tfoot>
                         </table>
                     </div>
@@ -3112,7 +3121,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 [groups]="isLocked ? [] : group"
                                 [columns]="$any(nonLockedLeafColumns)"
                                 [lockedColumnsCount]="lockedLeafColumns.length"
-                                [detailTemplate]="detailTemplate">
+                                [detailTemplate]="detailTemplate"
+                                [totalColumns]="columnsContainer">
                             </tfoot>
                         </table>
                     </div>
@@ -3134,6 +3144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         [scrollable]="false"
                         [columns]="$any(visibleColumns)"
                         [totalColumnLevels]="totalColumnLevels"
+                        [totalColumns]="columnsContainer"
                         [groups]="group"
                         [groupable]="showGroupPanel"
                         [reorderable]="reorderable"
@@ -3169,7 +3180,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         [logicalRowIndex]="ariaRowCount"
                         [groups]="group"
                         [columns]="$any(leafColumns)"
-                        [detailTemplate]="detailTemplate">
+                        [detailTemplate]="detailTemplate"
+                        [totalColumns]="columnsContainer">
                     </tfoot>
                 </table>
             </ng-container>

package/esm2020/navigation/logical-row.directive.mjs

@@ -6,6 +6,7 @@ import { Directive, HostBinding, Input } from '@angular/core';
 import { IdService } from '../common/id.service';
 import { NavigationService } from './navigation.service';
 import { anyChanged } from '@progress/kendo-angular-common';
+import { ColumnsContainer } from '../columns/columns-container';
 import * as i0 from "@angular/core";
 import * as i1 from "../common/id.service";
 import * as i2 from "./navigation.service";
@@ -30,16 +31,35 @@ export class LogicalRowDirective {
         return this.logicalSlaveRow ? 'presentation' : 'row';
     }
     get ariaRowIndex() {
-        return this.logicalRowIndex + 1;
+        return this.logicalSlaveRow ? null : this.logicalRowIndex + 1;
+    }
+    get rowIndex() {
+        return this.logicalSlaveRow ? this.logicalRowIndex + 1 : null;
     }
     get ariaOwns() {
-        if (!this.navigation.enabled || this.logicalSlaveRow || this.logicalSlaveCellsCount === 0) {
+        if (this.logicalSlaveRow || this.logicalSlaveCellsCount === 0) {
             return undefined;
         }
         const ids = [];
-        const total = this.logicalCellsCount + this.logicalSlaveCellsCount;
-        for (let cellIndex = this.logicalCellsCount; cellIndex < total; cellIndex++) {
-            ids.push(this.idService.cellId(this.logicalRowIndex, cellIndex));
+        if (this.dataRowIndex < 0) {
+            let total = this.logicalCellsCount + this.logicalSlaveCellsCount;
+            this.columnsArray.forEach(column => {
+                if (column.isSpanColumn) {
+                    total += column.colspan - 1;
+                }
+            });
+            for (let cellIndex = this.logicalCellsCount; cellIndex < total; cellIndex++) {
+                ids.push(this.idService.cellId(this.logicalRowIndex, cellIndex));
+            }
+        }
+        else {
+            let columnIndex = 0;
+            this.columnsArray.forEach(column => {
+                if (!column.isLocked) {
+                    ids.push(this.idService.cellId(this.logicalRowIndex, columnIndex));
+                }
+                columnIndex += column.isSpanColumn ? column.colspan : 1;
+            });
         }
         return ids.join(' ');
     }
@@ -61,9 +81,12 @@ export class LogicalRowDirective {
     ngOnDestroy() {
         this.navigation.unregisterRow(this.logicalRowIndex, this);
     }
+    get columnsArray() {
+        return this.totalColumns?.allColumns.toArray() || [];
+    }
 }
 LogicalRowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LogicalRowDirective, deps: [{ token: i1.IdService }, { token: i2.NavigationService }], target: i0.ɵɵFactoryTarget.Directive });
-LogicalRowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: { logicalRowIndex: "logicalRowIndex", logicalSlaveRow: "logicalSlaveRow", logicalCellsCount: "logicalCellsCount", logicalSlaveCellsCount: "logicalSlaveCellsCount", dataRowIndex: "dataRowIndex", dataItem: "dataItem" }, host: { properties: { "attr.role": "this.hostRole", "attr.aria-rowindex": "this.ariaRowIndex", "class.k-table-row": "this.tableRowClass", "attr.aria-owns": "this.ariaOwns" } }, usesOnChanges: true, ngImport: i0 });
+LogicalRowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: { logicalRowIndex: "logicalRowIndex", logicalSlaveRow: "logicalSlaveRow", logicalCellsCount: "logicalCellsCount", logicalSlaveCellsCount: "logicalSlaveCellsCount", dataRowIndex: "dataRowIndex", dataItem: "dataItem", totalColumns: "totalColumns" }, host: { properties: { "attr.role": "this.hostRole", "attr.aria-rowindex": "this.ariaRowIndex", "attr.data-kendo-grid-row-index": "this.rowIndex", "class.k-table-row": "this.tableRowClass", "attr.aria-owns": "this.ariaOwns" } }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LogicalRowDirective, decorators: [{
             type: Directive,
             args: [{
@@ -81,12 +104,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], dataItem: [{
                 type: Input
+            }], totalColumns: [{
+                type: Input
             }], hostRole: [{
                 type: HostBinding,
                 args: ['attr.role']
             }], ariaRowIndex: [{
                 type: HostBinding,
                 args: ['attr.aria-rowindex']
+            }], rowIndex: [{
+                type: HostBinding,
+                args: ['attr.data-kendo-grid-row-index']
             }], tableRowClass: [{
                 type: HostBinding,
                 args: ['class.k-table-row']

package/esm2020/navigation/navigation-cursor.mjs

@@ -3,6 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Subject } from 'rxjs';
+import { isPresent } from '../utils';
 /**
  * @hidden
  */
@@ -15,6 +16,20 @@ export class NavigationCursor {
         this.virtualCol = 0;
         this.virtualRow = 0;
     }
+    set metadata(value) {
+        this._metadata = value;
+        if (isPresent(value)) {
+            const newActiveCol = value.hasDetailTemplate ? 1 : 0;
+            const shouldChange = this.activeRow < value.headerRows && this.activeCol === 0;
+            if (shouldChange && newActiveCol !== this.activeCol) {
+                this.activeCol = newActiveCol;
+                this.reset();
+            }
+        }
+    }
+    get metadata() {
+        return this._metadata;
+    }
     get row() {
         return this.model.findRow(this.activeRow);
     }
@@ -126,6 +141,10 @@ export class NavigationCursor {
         if (!cell && this.metadata.virtualColumns) {
             return this.activate(nextRowIndex, nextColIndex);
         }
+        if (!cell && this.metadata.hasDetailTemplate) {
+            this.virtualCol += 1;
+            return false;
+        }
         if (cell.colSpan > 1 && cell.colIndex <= virtualCol && virtualCol < cell.colIndex + cell.colSpan) {
             nextColIndex = offset > 0 ? Math.min(cell.colIndex + cell.colSpan, lastIndex) : Math.max(0, cell.colIndex + offset);
             const nextCell = this.model.findCell(nextColIndex, prevRow);
@@ -158,6 +177,9 @@ export class NavigationCursor {
             if (nextRow) {
                 // remove duplication
                 let cell = this.model.findCell(this.virtualCol, nextRow);
+                if (!cell) {
+                    return;
+                }
                 if (cell.rowIndex <= this.virtualRow && offset > 0 && cell.rowSpan > 1) {
                     cell = this.model.findCell(this.virtualCol, this.model.findRow(cell.rowIndex + cell.rowSpan - 1 + offset));
                 }
@@ -176,7 +198,7 @@ export class NavigationCursor {
             const nextPos = cell.rowIndex + cell.rowSpan - 1 + offset;
             cell = this.model.findCell(this.virtualCol, this.model.findRow(nextPos));
         }
-        if (!cell && this.metadata.virtualColumns) {
+        if (!cell && (this.metadata.virtualColumns || this.metadata.hasDetailTemplate)) {
             return this.activate(this.virtualRow + offset, this.virtualCol);
         }
         this.virtualRow = cell.rowIndex;

package/esm2020/navigation/navigation.service.mjs

@@ -45,7 +45,7 @@ const targetCell = (target, gridElement) => {
     const cell = gridCell(target, gridElement);
     const row = closest(cell, matchesNodeName('tr'));
     if (cell && row) {
-        let rowIndex = row.getAttribute('aria-rowindex');
+        let rowIndex = row.getAttribute('aria-rowindex') || row.getAttribute('data-kendo-grid-row-index');
         rowIndex = rowIndex ? parseInt(rowIndex, 10) - 1 : null;
         let colIndex = cell.getAttribute('aria-colindex');
         colIndex = colIndex ? parseInt(colIndex, 10) - 1 : null;
@@ -446,7 +446,11 @@ export class NavigationService {
                     }
                 }
                 else {
-                    this.cursor.reset(row.index, 0, false);
+                    let firstColumnIndex = 0;
+                    if (this.meta.hasDetailTemplate && row.index < this.meta.headerRows) {
+                        firstColumnIndex = 1;
+                    }
+                    this.cursor.reset(row.index, firstColumnIndex, false);
                 }
                 preventDefault = true;
                 break;

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1689688777,
-    version: '13.2.0',
+    publishDate: 1689771247,
+    version: '13.2.1-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/rendering/footer/footer.component.mjs

@@ -7,6 +7,7 @@ import { Component, Input, HostBinding } from '@angular/core';
 import { DetailTemplateDirective } from '../details/detail-template.directive';
 import { columnsToRender } from '../../columns/column-common';
 import { isPresent } from '../../utils';
+import { ColumnsContainer } from '../../columns/columns-container';
 import * as i0 from "@angular/core";
 import * as i1 from "./../../common/column-info.service";
 import * as i2 from "../../navigation/logical-row.directive";
@@ -45,7 +46,7 @@ export class FooterComponent {
     }
 }
 FooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FooterComponent, deps: [{ token: i1.ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
-FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FooterComponent, selector: "[kendoGridFooter]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", lockedColumnsCount: "lockedColumnsCount", logicalRowIndex: "logicalRowIndex" }, host: { properties: { "class.k-grid-footer": "this.footerClass", "class.k-table-tfoot": "this.hostClass", "attr.role": "this.hostRole" } }, ngImport: i0, template: `
+FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FooterComponent, selector: "[kendoGridFooter]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", lockedColumnsCount: "lockedColumnsCount", logicalRowIndex: "logicalRowIndex", totalColumns: "totalColumns" }, host: { properties: { "class.k-grid-footer": "this.footerClass", "class.k-table-tfoot": "this.hostClass", "attr.role": "this.hostRole" } }, ngImport: i0, template: `
     <ng-container>
         <tr
             [class.k-footer-template]="true"
@@ -54,6 +55,7 @@ FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 [logicalSlaveRow]="lockedColumnsCount > 0"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="columns.length - lockedColumnsCount"
+                [totalColumns]="totalColumns"
             >
             <td
                 class="k-table-td k-group-cell"
@@ -87,7 +89,7 @@ FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             </td>
         </tr>
     </ng-container>
-    `, isInline: true, directives: [{ type: i2.LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+    `, isInline: true, directives: [{ type: i2.LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FooterComponent, decorators: [{
             type: Component,
             args: [{
@@ -101,6 +103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [logicalSlaveRow]="lockedColumnsCount > 0"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="columns.length - lockedColumnsCount"
+                [totalColumns]="totalColumns"
             >
             <td
                 class="k-table-td k-group-cell"
@@ -148,6 +151,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], logicalRowIndex: [{
                 type: Input
+            }], totalColumns: [{
+                type: Input
             }], footerClass: [{
                 type: HostBinding,
                 args: ['class.k-grid-footer']

package/esm2020/rendering/header/header.component.mjs

@@ -30,6 +30,7 @@ import { ColumnMenuComponent } from '../../column-menu/column-menu.component';
 import { sortAscSmallIcon, sortDescSmallIcon } from '@progress/kendo-svg-icons';
 import { ContextService } from '../../common/provider.service';
 import { ColumnReorderEvent } from '../../dragdrop/column-reorder-event';
+import { ColumnsContainer } from '../../columns/columns-container';
 import * as i0 from "@angular/core";
 import * as i1 from "../../common/single-popup.service";
 import * as i2 from "../../dragdrop/drag-hint.service";
@@ -464,26 +465,23 @@ export class HeaderComponent {
     }
 }
 HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.DragHintService }, { token: i3.DropCueService }, { token: i4.ColumnReorderService }, { token: i5.IdService }, { token: i6.SortService }, { token: i7.ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: i8.ContextService }], target: i0.ɵɵFactoryTarget.Component });
-HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: HeaderComponent, selector: "[kendoGridHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", groupable: "groupable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount", tabIndex: "tabIndex", size: "size" }, host: { properties: { "class.k-grid-header": "this.headerClass", "class.k-table-thead": "this.hostClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }, { propertyName: "filterMenus", predicate: FilterMenuComponent, descendants: true }, { propertyName: "columnMenus", predicate: ColumnMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: HeaderComponent, selector: "[kendoGridHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", groupable: "groupable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount", totalColumns: "totalColumns", tabIndex: "tabIndex", size: "size" }, host: { properties: { "class.k-grid-header": "this.headerClass", "class.k-table-thead": "this.hostClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }, { propertyName: "filterMenus", predicate: FilterMenuComponent, descendants: true }, { propertyName: "columnMenus", predicate: ColumnMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <ng-container>
         <tr *ngFor="let i of columnLevels; let levelIndex = index"
             kendoGridLogicalRow
                 [logicalRowIndex]="levelIndex"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
                 [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="unlockedColumnsCount">
+                [logicalSlaveCellsCount]="unlockedColumnsCount"
+                [totalColumns]="totalColumns">
             <th
                 class="k-group-cell k-header k-table-th"
                 role="presentation"
                 *ngFor="let g of groups">
             </th>
             <th class="k-hierarchy-cell k-header k-table-th"
-                role="gridcell"
+                role="presentation"
                 *ngIf="detailTemplate?.templateRef"
-                kendoGridLogicalCell
-                    [logicalRowIndex]="levelIndex"
-                    [logicalColIndex]="0"
-                    aria-selected="false"
             >
             </th>
             <ng-container *ngFor="let column of columnsForLevel(levelIndex); trackBy: trackByIndex; let columnIndex = index; let last = last;">
@@ -687,9 +685,10 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 [logicalSlaveRow]="lockedColumnsCount > 0"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount"
+                [totalColumns]="totalColumns"
         ></tr>
     </ng-container>
-    `, isInline: true, components: [{ type: i9.FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { type: i10.ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { type: i11.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i12.FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i14.LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i15.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i16.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i17.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i18.DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i19.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i20.SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { type: i21.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i22.ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }] });
+    `, isInline: true, components: [{ type: i9.FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { type: i10.ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { type: i11.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i12.FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i14.LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i15.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i16.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i17.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i18.DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i19.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i20.SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { type: i21.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i22.ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -701,19 +700,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [logicalRowIndex]="levelIndex"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
                 [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="unlockedColumnsCount">
+                [logicalSlaveCellsCount]="unlockedColumnsCount"
+                [totalColumns]="totalColumns">
             <th
                 class="k-group-cell k-header k-table-th"
                 role="presentation"
                 *ngFor="let g of groups">
             </th>
             <th class="k-hierarchy-cell k-header k-table-th"
-                role="gridcell"
+                role="presentation"
                 *ngIf="detailTemplate?.templateRef"
-                kendoGridLogicalCell
-                    [logicalRowIndex]="levelIndex"
-                    [logicalColIndex]="0"
-                    aria-selected="false"
             >
             </th>
             <ng-container *ngFor="let column of columnsForLevel(levelIndex); trackBy: trackByIndex; let columnIndex = index; let last = last;">
@@ -917,6 +913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [logicalSlaveRow]="lockedColumnsCount > 0"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount"
+                [totalColumns]="totalColumns"
         ></tr>
     </ng-container>
     `
@@ -953,6 +950,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], totalColumnsCount: [{
                 type: Input
+            }], totalColumns: [{
+                type: Input
             }], tabIndex: [{
                 type: Input
             }], size: [{

package/esm2020/rendering/list.component.mjs

@@ -627,6 +627,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                     [noRecordsText]="''"
                     [columns]="$any(lockedLeafColumns)"
                     [totalColumnsCount]="leafColumns.length"
+                    [totalColumns]="columns"
                     [detailTemplate]="detailTemplate"
                     [showGroupFooters]="showFooter"
                     [skip]="skip"
@@ -678,6 +679,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                     [noRecordsTemplate]="noRecordsTemplate"
                     [lockedColumnsCount]="lockedLeafColumns.length"
                     [totalColumnsCount]="leafColumns.length"
+                    [totalColumns]="columns"
                     [skip]="skip"
                     [selectable]="selectable"
                     [trackBy]="trackBy"
@@ -700,7 +702,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             <div [style.width.px]="totalWidth"></div>
         </div>
     </div>
-    `, isInline: true, components: [{ type: i15.ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: i16.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", "rowClass"] }, { type: i17.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i18.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i17.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i19.TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: i20.GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: i21.ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }] });
+    `, isInline: true, components: [{ type: i15.ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: i16.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"] }, { type: i17.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i18.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i17.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i19.TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: i20.GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: i21.ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{
@@ -745,6 +747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [noRecordsText]="''"
                     [columns]="$any(lockedLeafColumns)"
                     [totalColumnsCount]="leafColumns.length"
+                    [totalColumns]="columns"
                     [detailTemplate]="detailTemplate"
                     [showGroupFooters]="showFooter"
                     [skip]="skip"
@@ -796,6 +799,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [noRecordsTemplate]="noRecordsTemplate"
                     [lockedColumnsCount]="lockedLeafColumns.length"
                     [totalColumnsCount]="leafColumns.length"
+                    [totalColumns]="columns"
                     [skip]="skip"
                     [selectable]="selectable"
                     [trackBy]="trackBy"