@progress/kendo-angular-grid 21.1.1-develop.2 → 21.2.0-develop.10

package/esm2022/rendering/header/header.component.mjs

@@ -16,7 +16,7 @@ import { columnsToRender, sortColumns, isInSpanColumn } from "../../columns/colu
 import { SinglePopupService } from '../../common/single-popup.service';
 import { hasFilterMenu, hasFilterRow } from '../../filtering/filterable';
 import { IdService } from '../../common/id.service';
-import { DraggableDirective, isDocumentAvailable, Keys, normalizeNumpadKeys, TemplateContextDirective } from '@progress/kendo-angular-common';
+import { DraggableDirective, isDocumentAvailable, Keys, normalizeKeys, TemplateContextDirective } from '@progress/kendo-angular-common';
 import { DropTargetDirective } from '../../dragdrop/drop-target.directive';
 import { DraggableColumnDirective } from '../../dragdrop/draggable-column.directive';
 import { DragHintService } from '../../dragdrop/drag-hint.service';
@@ -39,7 +39,7 @@ import { FocusableDirective } from '../../navigation/focusable.directive';
 import { SelectAllCheckboxDirective } from '../../selection/selectall-checkbox.directive';
 import { LogicalCellDirective } from '../../navigation/logical-cell.directive';
 import { LogicalRowDirective } from '../../navigation/logical-row.directive';
-import { NgFor, NgIf, NgClass, NgStyle } from '@angular/common';
+import { NgClass, NgStyle } from '@angular/common';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
 import * as i0 from "@angular/core";
@@ -168,7 +168,7 @@ export class HeaderComponent {
         this.sortColumn(toggledColumn);
     }
     onHeaderKeydown(column, args) {
-        const code = normalizeNumpadKeys(args);
+        const code = normalizeKeys(args);
         if (code === Keys.ArrowDown && args.altKey && this.showFilterMenu && this.isFilterable(column)) {
             args.preventDefault();
             args.stopImmediatePropagation();
@@ -491,41 +491,46 @@ export class HeaderComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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 }, { token: i9.NavigationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: HeaderComponent, isStandalone: true, 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-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: `
-        <tr *ngFor="let i of columnLevels; let levelIndex = index"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: HeaderComponent, isStandalone: true, 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-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: `
+        @for (i of columnLevels; track i; let levelIndex = $index) {
+          <tr
             kendoGridLogicalRow
-                [logicalRowIndex]="levelIndex"
-                [logicalSlaveRow]="lockedColumnsCount > 0"
-                [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="unlockedColumnsCount"
-                [totalColumns]="totalColumns">
-            <th
+            [logicalRowIndex]="levelIndex"
+            [logicalSlaveRow]="lockedColumnsCount > 0"
+            [logicalCellsCount]="columns.length"
+            [logicalSlaveCellsCount]="unlockedColumnsCount"
+            [totalColumns]="totalColumns">
+            @for (g of groups; track g) {
+              <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"
+                >
+              </th>
+            }
+            @if (detailTemplate?.templateRef && !isStacked) {
+              <th class="k-hierarchy-cell k-header k-table-th"
                 role="presentation"
-                *ngIf="detailTemplate?.templateRef && !isStacked"
-            >
-            </th>
-            <ng-container *ngFor="let column of columnsForLevel(levelIndex); let columnIndex = index; let last = last;">
-                <th *ngIf="!isColumnGroupComponent(column)"
-                    kendoGridLogicalCell
-                    [logicalRowIndex]="levelIndex"
-                    [logicalColIndex]="logicalColumnIndex(column)"
-                    [headerLabelText]="column.title || getColumnComponent(column).field"
-                    [colSpan]="column.colspan"
-                    [rowSpan]="column.rowspan(totalColumnLevels)"
-                    role="columnheader"
-                    aria-selected="false"
-                    [attr.aria-sort]="sortState(getColumnComponent(column))"
-                    [class.k-sorted]="sortState(getColumnComponent(column))"
-                    (keydown)="onHeaderKeydown(getColumnComponent(column), $event)"
-                    kendoDropTarget
-                    kendoDraggable
-                    kendoDraggableColumn
-                    [enableDrag]="shouldActivate(column)"
+                >
+              </th>
+            }
+            @for (column of columnsForLevel(levelIndex); track column; let columnIndex = $index; let last = $last) {
+              @if (!isColumnGroupComponent(column)) {
+                <th
+                  kendoGridLogicalCell
+                  [logicalRowIndex]="levelIndex"
+                  [logicalColIndex]="logicalColumnIndex(column)"
+                  [headerLabelText]="column.title || getColumnComponent(column).field"
+                  [colSpan]="column.colspan"
+                  [rowSpan]="column.rowspan(totalColumnLevels)"
+                  role="columnheader"
+                  aria-selected="false"
+                  [attr.aria-sort]="sortState(getColumnComponent(column))"
+                  [class.k-sorted]="sortState(getColumnComponent(column))"
+                  (keydown)="onHeaderKeydown(getColumnComponent(column), $event)"
+                  kendoDropTarget
+                  kendoDraggable
+                  kendoDraggableColumn
+                  [enableDrag]="shouldActivate(column)"
                     [context]="{
                         field: getColumnComponent(column).field,
                         type: 'column',
@@ -533,223 +538,247 @@ export class HeaderComponent {
                         hint: column.title || getColumnComponent(column).field,
                         lastColumn: last && columnIndex === 0
                     }"
-                    class="k-header k-table-th"
-                    [class.k-filterable]="(showFilterMenu && isFilterable(getColumnComponent(column))) || showColumnMenu(column)"
-                    [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
-                    [class.k-grid-header-sticky]="column.sticky"
-                    [ngClass]="column.headerClass"
-                    [ngStyle]="column.sticky ? addStickyStyles(column) : column.headerStyle"
-                    [attr.rowspan]="column.rowspan(totalColumnLevels)"
-                    [attr.colspan]="column.colspan"
-                    [attr.aria-haspopup]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined"
-                    [attr.aria-expanded]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? false : undefined"
-                    [attr.aria-keyshortcuts]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'Alt + ArrowDown' : undefined">
-                    <ng-container *ngIf="!isInteractive(getColumnComponent(column), 'sortable')">
-                        <span class="k-cell-inner">
-                            <span class="k-link" [class.!k-cursor-default]="!isInteractive(getColumnComponent(column), 'groupable') && !isInteractive(getColumnComponent(column), 'reorderable')">
-                                <ng-template
+                  class="k-header k-table-th"
+                  [class.k-filterable]="(showFilterMenu && isFilterable(getColumnComponent(column))) || showColumnMenu(column)"
+                  [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
+                  [class.k-grid-header-sticky]="column.sticky"
+                  [ngClass]="column.headerClass"
+                  [ngStyle]="column.sticky ? addStickyStyles(column) : column.headerStyle"
+                  [attr.rowspan]="column.rowspan(totalColumnLevels)"
+                  [attr.colspan]="column.colspan"
+                  [attr.aria-haspopup]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined"
+                  [attr.aria-expanded]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? false : undefined"
+                  [attr.aria-keyshortcuts]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'Alt + ArrowDown' : undefined">
+                  @if (!isInteractive(getColumnComponent(column), 'sortable')) {
+                    <span class="k-cell-inner">
+                      <span class="k-link" [class.!k-cursor-default]="!isInteractive(getColumnComponent(column), 'groupable') && !isInteractive(getColumnComponent(column), 'reorderable')">
+                        <ng-template
                                     [templateContext]="{
                                         templateRef: column.headerTemplateRef,
                                         columnIndex: column.leafIndex,
                                         column: column,
                                         $implicit: column
                                     }">
-                                </ng-template>
-                                <ng-container *ngIf="!column.headerTemplateRef">
-                                    <span class="k-column-title">{{column.displayTitle}}</span>
-                                </ng-container>
-                            </span>
-                            <kendo-grid-filter-menu
-                                *ngIf="showFilterMenu && isFilterable(getColumnComponent(column))"
-                                [column]="getColumnComponent(column)"
-                                [filter]="filter"
-                                [tabIndex]="tabIndex">
-                            </kendo-grid-filter-menu>
-                            <kendo-grid-column-menu *ngIf="showColumnMenu(column)"
-                                [standalone]="false"
-                                [settings]="columnMenuSettings"
-                                [column]="column"
-                                [columnMenuTemplate]="columnMenuTemplate"
-                                [sort]="sort"
-                                [filter]="filter"
-                                [sortable]="sortable"
-                                [tabIndex]="tabIndex">
-                            </kendo-grid-column-menu>
-                        </span>
-                    </ng-container>
-                    <ng-container *ngIf="isInteractive(getColumnComponent(column), 'sortable')">
-                        <span class="k-cell-inner">
-                            <span #link class="k-link" (click)="onSortClick(getColumnComponent(column), $event, link)">
-                                <ng-template
+                        </ng-template>
+                        @if (!column.headerTemplateRef) {
+                          <span class="k-column-title">{{column.displayTitle}}</span>
+                        }
+                      </span>
+                      @if (showFilterMenu && isFilterable(getColumnComponent(column))) {
+                        <kendo-grid-filter-menu
+                          [column]="getColumnComponent(column)"
+                          [filter]="filter"
+                          [tabIndex]="tabIndex">
+                        </kendo-grid-filter-menu>
+                      }
+                      @if (showColumnMenu(column)) {
+                        <kendo-grid-column-menu
+                          [standalone]="false"
+                          [settings]="columnMenuSettings"
+                          [column]="column"
+                          [columnMenuTemplate]="columnMenuTemplate"
+                          [sort]="sort"
+                          [filter]="filter"
+                          [sortable]="sortable"
+                          [tabIndex]="tabIndex">
+                        </kendo-grid-column-menu>
+                      }
+                    </span>
+                  }
+                  @if (isInteractive(getColumnComponent(column), 'sortable')) {
+                    <span class="k-cell-inner">
+                      <span #link class="k-link" (click)="onSortClick(getColumnComponent(column), $event, link)">
+                        <ng-template
                                     [templateContext]="{
                                         templateRef: column.headerTemplateRef,
                                         columnIndex: column.leafIndex,
                                         column: column,
                                         $implicit: column
                                     }">
-                                </ng-template>
-                                <ng-container *ngIf="!column.headerTemplateRef">
-                                    <span class="k-column-title">{{column.displayTitle}}</span>
-                                </ng-container>
-                                <span [class.k-sort-icon]="sortDescriptor(getColumnComponent(column).field).dir">
-                                    <kendo-icon-wrapper
-                                        *ngIf="sortDescriptor(getColumnComponent(column).field).dir"
-                                        role="note" [attr.aria-label]="sortableLabel"
-                                        name="sort-{{sortDescriptor(getColumnComponent(column).field).dir}}-small"
-                                        [svgIcon]="sortDescriptor(getColumnComponent(column).field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon"
-                                        ></kendo-icon-wrapper>
-                                </span>
-                                <span *ngIf="showSortNumbering(getColumnComponent(column))" class="k-sort-order">{{sortOrder(getColumnComponent(column).field)}}</span>
-                            </span>
-                            <kendo-grid-filter-menu
-                                *ngIf="showFilterMenu && isFilterable(getColumnComponent(column))"
-                                [column]="getColumnComponent(column)"
-                                [filter]="filter"
-                                [tabIndex]="tabIndex">
-                            </kendo-grid-filter-menu>
-                            <kendo-grid-column-menu *ngIf="showColumnMenu(column)"
-                                [standalone]="false"
-                                [settings]="columnMenuSettings"
-                                [column]="column"
-                                [columnMenuTemplate]="columnMenuTemplate"
-                                [sort]="sort"
-                                [filter]="filter"
-                                [sortable]="sortable"
-                                [tabIndex]="tabIndex">
-                            </kendo-grid-column-menu>
+                        </ng-template>
+                        @if (!column.headerTemplateRef) {
+                          <span class="k-column-title">{{column.displayTitle}}</span>
+                        }
+                        <span [class.k-sort-icon]="sortDescriptor(getColumnComponent(column).field).dir">
+                          @if (sortDescriptor(getColumnComponent(column).field).dir) {
+                            <kendo-icon-wrapper
+                              role="note" [attr.aria-label]="sortableLabel"
+                              name="sort-{{sortDescriptor(getColumnComponent(column).field).dir}}-small"
+                              [svgIcon]="sortDescriptor(getColumnComponent(column).field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon"
+                            ></kendo-icon-wrapper>
+                          }
                         </span>
-                    </ng-container>
-                    <ng-container *ngIf="isCheckboxColumn(column) && !column.headerTemplateRef && $any(column).showSelectAll">
-                        <kendo-checkbox
-                            [attr.id]="selectAllCheckboxId()"
-                            [inputAttributes]="{'aria-label': selectAllCheckboxLabel}"
-                            kendoGridSelectAllCheckbox
-                            kendoGridFocusable
-                        ></kendo-checkbox>
-                    </ng-container>
+                        @if (showSortNumbering(getColumnComponent(column))) {
+                          <span class="k-sort-order">{{sortOrder(getColumnComponent(column).field)}}</span>
+                        }
+                      </span>
+                      @if (showFilterMenu && isFilterable(getColumnComponent(column))) {
+                        <kendo-grid-filter-menu
+                          [column]="getColumnComponent(column)"
+                          [filter]="filter"
+                          [tabIndex]="tabIndex">
+                        </kendo-grid-filter-menu>
+                      }
+                      @if (showColumnMenu(column)) {
+                        <kendo-grid-column-menu
+                          [standalone]="false"
+                          [settings]="columnMenuSettings"
+                          [column]="column"
+                          [columnMenuTemplate]="columnMenuTemplate"
+                          [sort]="sort"
+                          [filter]="filter"
+                          [sortable]="sortable"
+                          [tabIndex]="tabIndex">
+                        </kendo-grid-column-menu>
+                      }
+                    </span>
+                  }
+                  @if (isCheckboxColumn(column) && !column.headerTemplateRef && $any(column).showSelectAll) {
+                    <kendo-checkbox
+                      [attr.id]="selectAllCheckboxId()"
+                      [inputAttributes]="{'aria-label': selectAllCheckboxLabel}"
+                      kendoGridSelectAllCheckbox
+                      kendoGridFocusable
+                    ></kendo-checkbox>
+                  }
+                  @if (resizable) {
                     <span kendoGridColumnHandle
-                        kendoDraggable
-                        class="k-column-resizer"
-                        *ngIf="resizable"
-                        [isLast]="last"
-                        [column]="column"
-                        [columns]="columns">
+                      kendoDraggable
+                      class="k-column-resizer"
+                      [isLast]="last"
+                      [column]="column"
+                      [columns]="columns">
                     </span>
+                  }
                 </th>
-                <th *ngIf="isColumnGroupComponent(column)"
-                    kendoGridLogicalCell
-                    [logicalRowIndex]="levelIndex"
-                    [logicalColIndex]="logicalColumnIndex(column)"
-                    [rowSpan]="column.rowspan(totalColumnLevels)"
-                    [colSpan]="column.colspan"
-                    [headerLabelText]="column.title || getColumnComponent(column).field"
-                    kendoDropTarget
-                    kendoDraggable
-                    kendoDraggableColumn
-                    [enableDrag]="shouldActivate(column)"
+              }
+              @if (isColumnGroupComponent(column)) {
+                <th
+                  kendoGridLogicalCell
+                  [logicalRowIndex]="levelIndex"
+                  [logicalColIndex]="logicalColumnIndex(column)"
+                  [rowSpan]="column.rowspan(totalColumnLevels)"
+                  [colSpan]="column.colspan"
+                  [headerLabelText]="column.title || getColumnComponent(column).field"
+                  kendoDropTarget
+                  kendoDraggable
+                  kendoDraggableColumn
+                  [enableDrag]="shouldActivate(column)"
                     [context]="{
                         type: 'columnGroup',
                         column: column,
                         hint: column.title,
                         lastColumn: last && columnIndex === 0
                     }"
-                    class="k-header k-table-th"
-                    [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
-                    [class.k-filterable]="showColumnMenu(column)"
-                    [class.k-grid-content-sticky]="column.sticky"
-                    [ngClass]="column.headerClass"
-                    [ngStyle]="column.headerStyle"
-                    [attr.aria-haspopup]="(isNavigable && showColumnMenu(column)) ? 'dialog' : undefined"
-                    [attr.aria-expanded]="(isNavigable && showColumnMenu(column)) ? false : undefined"
-                    [attr.aria-keyshortcuts]="isNavigable && showColumnMenu(column) ? 'Alt + ArrowDown' : undefined"
-                    [attr.rowspan]="column.rowspan(totalColumnLevels)"
-                    [attr.colspan]="column.colspan">
-                    <span class="k-cell-inner">
-                        <span class="k-link" [class.!k-cursor-default]="!isInteractive(getColumnComponent(column), 'reorderable')">
-                            <ng-template
+                  class="k-header k-table-th"
+                  [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
+                  [class.k-filterable]="showColumnMenu(column)"
+                  [class.k-grid-content-sticky]="column.sticky"
+                  [ngClass]="column.headerClass"
+                  [ngStyle]="column.headerStyle"
+                  [attr.aria-haspopup]="(isNavigable && showColumnMenu(column)) ? 'dialog' : undefined"
+                  [attr.aria-expanded]="(isNavigable && showColumnMenu(column)) ? false : undefined"
+                  [attr.aria-keyshortcuts]="isNavigable && showColumnMenu(column) ? 'Alt + ArrowDown' : undefined"
+                  [attr.rowspan]="column.rowspan(totalColumnLevels)"
+                  [attr.colspan]="column.colspan">
+                  <span class="k-cell-inner">
+                    <span class="k-link" [class.!k-cursor-default]="!isInteractive(getColumnComponent(column), 'reorderable')">
+                      <ng-template
                                 [templateContext]="{
                                     templateRef: column.headerTemplateRef,
                                     columnIndex: lockedColumnsCount + columnIndex,
                                     column: column,
                                     $implicit: column
                                 }">
-                            </ng-template>
-                            <ng-container *ngIf="!column.headerTemplateRef">
-                                <span class="k-column-title">{{column.displayTitle}}</span>
-                            </ng-container>
-                        </span>
-                        <kendo-grid-column-menu *ngIf="showColumnMenu(column)"
-                            [standalone]="false"
-                            [settings]="columnMenuSettings"
-                            [column]="column"
-                            [columnMenuTemplate]="columnMenuTemplate">
-                        </kendo-grid-column-menu>
+                      </ng-template>
+                      @if (!column.headerTemplateRef) {
+                        <span class="k-column-title">{{column.displayTitle}}</span>
+                      }
                     </span>
-                    <span kendoGridColumnHandle
-                        kendoDraggable
-                        class="k-column-resizer"
-                        *ngIf="resizable"
-                        [isLast]="last"
+                    @if (showColumnMenu(column)) {
+                      <kendo-grid-column-menu
+                        [standalone]="false"
+                        [settings]="columnMenuSettings"
                         [column]="column"
-                        [columns]="columns">
+                        [columnMenuTemplate]="columnMenuTemplate">
+                      </kendo-grid-column-menu>
+                    }
+                  </span>
+                  @if (resizable) {
+                    <span kendoGridColumnHandle
+                      kendoDraggable
+                      class="k-column-resizer"
+                      [isLast]="last"
+                      [column]="column"
+                      [columns]="columns">
                     </span>
+                  }
                 </th>
-            </ng-container>
-        </tr>
-        <tr *ngIf="showFilterRow"
+              }
+            }
+          </tr>
+        }
+        @if (showFilterRow) {
+          <tr
             kendoGridFilterRow
-                [columns]="leafColumns"
-                [filter]="filter"
-                [groups]="groups"
-                [detailTemplate]="detailTemplate"
-                [lockedColumnsCount]="lockedColumnsCount"
+            [columns]="leafColumns"
+            [filter]="filter"
+            [groups]="groups"
+            [detailTemplate]="detailTemplate"
+            [lockedColumnsCount]="lockedColumnsCount"
             kendoGridLogicalRow
-                [logicalRowIndex]="totalColumnLevels + 1"
-                [logicalSlaveRow]="lockedColumnsCount > 0"
-                [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="unlockedColumnsCount"
-                [totalColumns]="totalColumns"></tr>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { kind: "component", type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["isLast", "columns", "column"] }, { kind: "component", type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
+            [logicalRowIndex]="totalColumnLevels + 1"
+            [logicalSlaveRow]="lockedColumnsCount > 0"
+            [logicalCellsCount]="columns.length"
+            [logicalSlaveCellsCount]="unlockedColumnsCount"
+          [totalColumns]="totalColumns"></tr>
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { kind: "component", type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["isLast", "columns", "column"] }, { kind: "component", type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoGridHeader]',
                     template: `
-        <tr *ngFor="let i of columnLevels; let levelIndex = index"
+        @for (i of columnLevels; track i; let levelIndex = $index) {
+          <tr
             kendoGridLogicalRow
-                [logicalRowIndex]="levelIndex"
-                [logicalSlaveRow]="lockedColumnsCount > 0"
-                [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="unlockedColumnsCount"
-                [totalColumns]="totalColumns">
-            <th
+            [logicalRowIndex]="levelIndex"
+            [logicalSlaveRow]="lockedColumnsCount > 0"
+            [logicalCellsCount]="columns.length"
+            [logicalSlaveCellsCount]="unlockedColumnsCount"
+            [totalColumns]="totalColumns">
+            @for (g of groups; track g) {
+              <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"
+                >
+              </th>
+            }
+            @if (detailTemplate?.templateRef && !isStacked) {
+              <th class="k-hierarchy-cell k-header k-table-th"
                 role="presentation"
-                *ngIf="detailTemplate?.templateRef && !isStacked"
-            >
-            </th>
-            <ng-container *ngFor="let column of columnsForLevel(levelIndex); let columnIndex = index; let last = last;">
-                <th *ngIf="!isColumnGroupComponent(column)"
-                    kendoGridLogicalCell
-                    [logicalRowIndex]="levelIndex"
-                    [logicalColIndex]="logicalColumnIndex(column)"
-                    [headerLabelText]="column.title || getColumnComponent(column).field"
-                    [colSpan]="column.colspan"
-                    [rowSpan]="column.rowspan(totalColumnLevels)"
-                    role="columnheader"
-                    aria-selected="false"
-                    [attr.aria-sort]="sortState(getColumnComponent(column))"
-                    [class.k-sorted]="sortState(getColumnComponent(column))"
-                    (keydown)="onHeaderKeydown(getColumnComponent(column), $event)"
-                    kendoDropTarget
-                    kendoDraggable
-                    kendoDraggableColumn
-                    [enableDrag]="shouldActivate(column)"
+                >
+              </th>
+            }
+            @for (column of columnsForLevel(levelIndex); track column; let columnIndex = $index; let last = $last) {
+              @if (!isColumnGroupComponent(column)) {
+                <th
+                  kendoGridLogicalCell
+                  [logicalRowIndex]="levelIndex"
+                  [logicalColIndex]="logicalColumnIndex(column)"
+                  [headerLabelText]="column.title || getColumnComponent(column).field"
+                  [colSpan]="column.colspan"
+                  [rowSpan]="column.rowspan(totalColumnLevels)"
+                  role="columnheader"
+                  aria-selected="false"
+                  [attr.aria-sort]="sortState(getColumnComponent(column))"
+                  [class.k-sorted]="sortState(getColumnComponent(column))"
+                  (keydown)="onHeaderKeydown(getColumnComponent(column), $event)"
+                  kendoDropTarget
+                  kendoDraggable
+                  kendoDraggableColumn
+                  [enableDrag]="shouldActivate(column)"
                     [context]="{
                         field: getColumnComponent(column).field,
                         type: 'column',
@@ -757,188 +786,220 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         hint: column.title || getColumnComponent(column).field,
                         lastColumn: last && columnIndex === 0
                     }"
-                    class="k-header k-table-th"
-                    [class.k-filterable]="(showFilterMenu && isFilterable(getColumnComponent(column))) || showColumnMenu(column)"
-                    [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
-                    [class.k-grid-header-sticky]="column.sticky"
-                    [ngClass]="column.headerClass"
-                    [ngStyle]="column.sticky ? addStickyStyles(column) : column.headerStyle"
-                    [attr.rowspan]="column.rowspan(totalColumnLevels)"
-                    [attr.colspan]="column.colspan"
-                    [attr.aria-haspopup]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined"
-                    [attr.aria-expanded]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? false : undefined"
-                    [attr.aria-keyshortcuts]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'Alt + ArrowDown' : undefined">
-                    <ng-container *ngIf="!isInteractive(getColumnComponent(column), 'sortable')">
-                        <span class="k-cell-inner">
-                            <span class="k-link" [class.!k-cursor-default]="!isInteractive(getColumnComponent(column), 'groupable') && !isInteractive(getColumnComponent(column), 'reorderable')">
-                                <ng-template
+                  class="k-header k-table-th"
+                  [class.k-filterable]="(showFilterMenu && isFilterable(getColumnComponent(column))) || showColumnMenu(column)"
+                  [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
+                  [class.k-grid-header-sticky]="column.sticky"
+                  [ngClass]="column.headerClass"
+                  [ngStyle]="column.sticky ? addStickyStyles(column) : column.headerStyle"
+                  [attr.rowspan]="column.rowspan(totalColumnLevels)"
+                  [attr.colspan]="column.colspan"
+                  [attr.aria-haspopup]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined"
+                  [attr.aria-expanded]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? false : undefined"
+                  [attr.aria-keyshortcuts]="isNavigable && (showFilterMenu || showColumnMenu(column)) ? 'Alt + ArrowDown' : undefined">
+                  @if (!isInteractive(getColumnComponent(column), 'sortable')) {
+                    <span class="k-cell-inner">
+                      <span class="k-link" [class.!k-cursor-default]="!isInteractive(getColumnComponent(column), 'groupable') && !isInteractive(getColumnComponent(column), 'reorderable')">
+                        <ng-template
                                     [templateContext]="{
                                         templateRef: column.headerTemplateRef,
                                         columnIndex: column.leafIndex,
                                         column: column,
                                         $implicit: column
                                     }">
-                                </ng-template>
-                                <ng-container *ngIf="!column.headerTemplateRef">
-                                    <span class="k-column-title">{{column.displayTitle}}</span>
-                                </ng-container>
-                            </span>
-                            <kendo-grid-filter-menu
-                                *ngIf="showFilterMenu && isFilterable(getColumnComponent(column))"
-                                [column]="getColumnComponent(column)"
-                                [filter]="filter"
-                                [tabIndex]="tabIndex">
-                            </kendo-grid-filter-menu>
-                            <kendo-grid-column-menu *ngIf="showColumnMenu(column)"
-                                [standalone]="false"
-                                [settings]="columnMenuSettings"
-                                [column]="column"
-                                [columnMenuTemplate]="columnMenuTemplate"
-                                [sort]="sort"
-                                [filter]="filter"
-                                [sortable]="sortable"
-                                [tabIndex]="tabIndex">
-                            </kendo-grid-column-menu>
-                        </span>
-                    </ng-container>
-                    <ng-container *ngIf="isInteractive(getColumnComponent(column), 'sortable')">
-                        <span class="k-cell-inner">
-                            <span #link class="k-link" (click)="onSortClick(getColumnComponent(column), $event, link)">
-                                <ng-template
+                        </ng-template>
+                        @if (!column.headerTemplateRef) {
+                          <span class="k-column-title">{{column.displayTitle}}</span>
+                        }
+                      </span>
+                      @if (showFilterMenu && isFilterable(getColumnComponent(column))) {
+                        <kendo-grid-filter-menu
+                          [column]="getColumnComponent(column)"
+                          [filter]="filter"
+                          [tabIndex]="tabIndex">
+                        </kendo-grid-filter-menu>
+                      }
+                      @if (showColumnMenu(column)) {
+                        <kendo-grid-column-menu
+                          [standalone]="false"
+                          [settings]="columnMenuSettings"
+                          [column]="column"
+                          [columnMenuTemplate]="columnMenuTemplate"
+                          [sort]="sort"
+                          [filter]="filter"
+                          [sortable]="sortable"
+                          [tabIndex]="tabIndex">
+                        </kendo-grid-column-menu>
+                      }
+                    </span>
+                  }
+                  @if (isInteractive(getColumnComponent(column), 'sortable')) {
+                    <span class="k-cell-inner">
+                      <span #link class="k-link" (click)="onSortClick(getColumnComponent(column), $event, link)">
+                        <ng-template
                                     [templateContext]="{
                                         templateRef: column.headerTemplateRef,
                                         columnIndex: column.leafIndex,
                                         column: column,
                                         $implicit: column
                                     }">
-                                </ng-template>
-                                <ng-container *ngIf="!column.headerTemplateRef">
-                                    <span class="k-column-title">{{column.displayTitle}}</span>
-                                </ng-container>
-                                <span [class.k-sort-icon]="sortDescriptor(getColumnComponent(column).field).dir">
-                                    <kendo-icon-wrapper
-                                        *ngIf="sortDescriptor(getColumnComponent(column).field).dir"
-                                        role="note" [attr.aria-label]="sortableLabel"
-                                        name="sort-{{sortDescriptor(getColumnComponent(column).field).dir}}-small"
-                                        [svgIcon]="sortDescriptor(getColumnComponent(column).field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon"
-                                        ></kendo-icon-wrapper>
-                                </span>
-                                <span *ngIf="showSortNumbering(getColumnComponent(column))" class="k-sort-order">{{sortOrder(getColumnComponent(column).field)}}</span>
-                            </span>
-                            <kendo-grid-filter-menu
-                                *ngIf="showFilterMenu && isFilterable(getColumnComponent(column))"
-                                [column]="getColumnComponent(column)"
-                                [filter]="filter"
-                                [tabIndex]="tabIndex">
-                            </kendo-grid-filter-menu>
-                            <kendo-grid-column-menu *ngIf="showColumnMenu(column)"
-                                [standalone]="false"
-                                [settings]="columnMenuSettings"
-                                [column]="column"
-                                [columnMenuTemplate]="columnMenuTemplate"
-                                [sort]="sort"
-                                [filter]="filter"
-                                [sortable]="sortable"
-                                [tabIndex]="tabIndex">
-                            </kendo-grid-column-menu>
+                        </ng-template>
+                        @if (!column.headerTemplateRef) {
+                          <span class="k-column-title">{{column.displayTitle}}</span>
+                        }
+                        <span [class.k-sort-icon]="sortDescriptor(getColumnComponent(column).field).dir">
+                          @if (sortDescriptor(getColumnComponent(column).field).dir) {
+                            <kendo-icon-wrapper
+                              role="note" [attr.aria-label]="sortableLabel"
+                              name="sort-{{sortDescriptor(getColumnComponent(column).field).dir}}-small"
+                              [svgIcon]="sortDescriptor(getColumnComponent(column).field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon"
+                            ></kendo-icon-wrapper>
+                          }
                         </span>
-                    </ng-container>
-                    <ng-container *ngIf="isCheckboxColumn(column) && !column.headerTemplateRef && $any(column).showSelectAll">
-                        <kendo-checkbox
-                            [attr.id]="selectAllCheckboxId()"
-                            [inputAttributes]="{'aria-label': selectAllCheckboxLabel}"
-                            kendoGridSelectAllCheckbox
-                            kendoGridFocusable
-                        ></kendo-checkbox>
-                    </ng-container>
+                        @if (showSortNumbering(getColumnComponent(column))) {
+                          <span class="k-sort-order">{{sortOrder(getColumnComponent(column).field)}}</span>
+                        }
+                      </span>
+                      @if (showFilterMenu && isFilterable(getColumnComponent(column))) {
+                        <kendo-grid-filter-menu
+                          [column]="getColumnComponent(column)"
+                          [filter]="filter"
+                          [tabIndex]="tabIndex">
+                        </kendo-grid-filter-menu>
+                      }
+                      @if (showColumnMenu(column)) {
+                        <kendo-grid-column-menu
+                          [standalone]="false"
+                          [settings]="columnMenuSettings"
+                          [column]="column"
+                          [columnMenuTemplate]="columnMenuTemplate"
+                          [sort]="sort"
+                          [filter]="filter"
+                          [sortable]="sortable"
+                          [tabIndex]="tabIndex">
+                        </kendo-grid-column-menu>
+                      }
+                    </span>
+                  }
+                  @if (isCheckboxColumn(column) && !column.headerTemplateRef && $any(column).showSelectAll) {
+                    <kendo-checkbox
+                      [attr.id]="selectAllCheckboxId()"
+                      [inputAttributes]="{'aria-label': selectAllCheckboxLabel}"
+                      kendoGridSelectAllCheckbox
+                      kendoGridFocusable
+                    ></kendo-checkbox>
+                  }
+                  @if (resizable) {
                     <span kendoGridColumnHandle
-                        kendoDraggable
-                        class="k-column-resizer"
-                        *ngIf="resizable"
-                        [isLast]="last"
-                        [column]="column"
-                        [columns]="columns">
+                      kendoDraggable
+                      class="k-column-resizer"
+                      [isLast]="last"
+                      [column]="column"
+                      [columns]="columns">
                     </span>
+                  }
                 </th>
-                <th *ngIf="isColumnGroupComponent(column)"
-                    kendoGridLogicalCell
-                    [logicalRowIndex]="levelIndex"
-                    [logicalColIndex]="logicalColumnIndex(column)"
-                    [rowSpan]="column.rowspan(totalColumnLevels)"
-                    [colSpan]="column.colspan"
-                    [headerLabelText]="column.title || getColumnComponent(column).field"
-                    kendoDropTarget
-                    kendoDraggable
-                    kendoDraggableColumn
-                    [enableDrag]="shouldActivate(column)"
+              }
+              @if (isColumnGroupComponent(column)) {
+                <th
+                  kendoGridLogicalCell
+                  [logicalRowIndex]="levelIndex"
+                  [logicalColIndex]="logicalColumnIndex(column)"
+                  [rowSpan]="column.rowspan(totalColumnLevels)"
+                  [colSpan]="column.colspan"
+                  [headerLabelText]="column.title || getColumnComponent(column).field"
+                  kendoDropTarget
+                  kendoDraggable
+                  kendoDraggableColumn
+                  [enableDrag]="shouldActivate(column)"
                     [context]="{
                         type: 'columnGroup',
                         column: column,
                         hint: column.title,
                         lastColumn: last && columnIndex === 0
                     }"
-                    class="k-header k-table-th"
-                    [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
-                    [class.k-filterable]="showColumnMenu(column)"
-                    [class.k-grid-content-sticky]="column.sticky"
-                    [ngClass]="column.headerClass"
-                    [ngStyle]="column.headerStyle"
-                    [attr.aria-haspopup]="(isNavigable && showColumnMenu(column)) ? 'dialog' : undefined"
-                    [attr.aria-expanded]="(isNavigable && showColumnMenu(column)) ? false : undefined"
-                    [attr.aria-keyshortcuts]="isNavigable && showColumnMenu(column) ? 'Alt + ArrowDown' : undefined"
-                    [attr.rowspan]="column.rowspan(totalColumnLevels)"
-                    [attr.colspan]="column.colspan">
-                    <span class="k-cell-inner">
-                        <span class="k-link" [class.!k-cursor-default]="!isInteractive(getColumnComponent(column), 'reorderable')">
-                            <ng-template
+                  class="k-header k-table-th"
+                  [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
+                  [class.k-filterable]="showColumnMenu(column)"
+                  [class.k-grid-content-sticky]="column.sticky"
+                  [ngClass]="column.headerClass"
+                  [ngStyle]="column.headerStyle"
+                  [attr.aria-haspopup]="(isNavigable && showColumnMenu(column)) ? 'dialog' : undefined"
+                  [attr.aria-expanded]="(isNavigable && showColumnMenu(column)) ? false : undefined"
+                  [attr.aria-keyshortcuts]="isNavigable && showColumnMenu(column) ? 'Alt + ArrowDown' : undefined"
+                  [attr.rowspan]="column.rowspan(totalColumnLevels)"
+                  [attr.colspan]="column.colspan">
+                  <span class="k-cell-inner">
+                    <span class="k-link" [class.!k-cursor-default]="!isInteractive(getColumnComponent(column), 'reorderable')">
+                      <ng-template
                                 [templateContext]="{
                                     templateRef: column.headerTemplateRef,
                                     columnIndex: lockedColumnsCount + columnIndex,
                                     column: column,
                                     $implicit: column
                                 }">
-                            </ng-template>
-                            <ng-container *ngIf="!column.headerTemplateRef">
-                                <span class="k-column-title">{{column.displayTitle}}</span>
-                            </ng-container>
-                        </span>
-                        <kendo-grid-column-menu *ngIf="showColumnMenu(column)"
-                            [standalone]="false"
-                            [settings]="columnMenuSettings"
-                            [column]="column"
-                            [columnMenuTemplate]="columnMenuTemplate">
-                        </kendo-grid-column-menu>
+                      </ng-template>
+                      @if (!column.headerTemplateRef) {
+                        <span class="k-column-title">{{column.displayTitle}}</span>
+                      }
                     </span>
-                    <span kendoGridColumnHandle
-                        kendoDraggable
-                        class="k-column-resizer"
-                        *ngIf="resizable"
-                        [isLast]="last"
+                    @if (showColumnMenu(column)) {
+                      <kendo-grid-column-menu
+                        [standalone]="false"
+                        [settings]="columnMenuSettings"
                         [column]="column"
-                        [columns]="columns">
+                        [columnMenuTemplate]="columnMenuTemplate">
+                      </kendo-grid-column-menu>
+                    }
+                  </span>
+                  @if (resizable) {
+                    <span kendoGridColumnHandle
+                      kendoDraggable
+                      class="k-column-resizer"
+                      [isLast]="last"
+                      [column]="column"
+                      [columns]="columns">
                     </span>
+                  }
                 </th>
-            </ng-container>
-        </tr>
-        <tr *ngIf="showFilterRow"
+              }
+            }
+          </tr>
+        }
+        @if (showFilterRow) {
+          <tr
             kendoGridFilterRow
-                [columns]="leafColumns"
-                [filter]="filter"
-                [groups]="groups"
-                [detailTemplate]="detailTemplate"
-                [lockedColumnsCount]="lockedColumnsCount"
+            [columns]="leafColumns"
+            [filter]="filter"
+            [groups]="groups"
+            [detailTemplate]="detailTemplate"
+            [lockedColumnsCount]="lockedColumnsCount"
             kendoGridLogicalRow
-                [logicalRowIndex]="totalColumnLevels + 1"
-                [logicalSlaveRow]="lockedColumnsCount > 0"
-                [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="unlockedColumnsCount"
-                [totalColumns]="totalColumns"></tr>
-    `,
+            [logicalRowIndex]="totalColumnLevels + 1"
+            [logicalSlaveRow]="lockedColumnsCount > 0"
+            [logicalCellsCount]="columns.length"
+            [logicalSlaveCellsCount]="unlockedColumnsCount"
+          [totalColumns]="totalColumns"></tr>
+        }
+        `,
                     standalone: true,
                     imports: [
-                        NgFor, LogicalRowDirective, NgIf, LogicalCellDirective, DropTargetDirective, DraggableDirective, DraggableColumnDirective,
-                        NgClass, NgStyle, TemplateContextDirective, FilterMenuComponent, ColumnMenuComponent, IconWrapperComponent, SelectAllCheckboxDirective,
-                        FocusableDirective, ColumnHandleDirective, FilterRowComponent, CheckBoxComponent
+                        LogicalRowDirective,
+                        LogicalCellDirective,
+                        DropTargetDirective,
+                        DraggableDirective,
+                        DraggableColumnDirective,
+                        NgClass,
+                        NgStyle,
+                        TemplateContextDirective,
+                        FilterMenuComponent,
+                        ColumnMenuComponent,
+                        IconWrapperComponent,
+                        SelectAllCheckboxDirective,
+                        FocusableDirective,
+                        ColumnHandleDirective,
+                        FilterRowComponent,
+                        CheckBoxComponent
                     ]
                 }]
         }], ctorParameters: () => [{ type: i1.SinglePopupService }, { type: i2.DragHintService }, { type: i3.DropCueService }, { type: i4.ColumnReorderService }, { type: i5.IdService }, { type: i6.SortService }, { type: i7.ColumnInfoService }, { type: i0.ChangeDetectorRef }, { type: i8.ContextService }, { type: i9.NavigationService }, { type: i0.NgZone }], propDecorators: { totalColumnLevels: [{