@progress/kendo-angular-treelist 18.2.1-develop.2 → 18.3.0-develop.1

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

@@ -11,7 +11,9 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { Keys, DraggableDirective, TemplateContextDirective } from '@progress/kendo-angular-common';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { sortAscSmallIcon, sortDescSmallIcon } from '@progress/kendo-svg-icons';
+import { isColumnComponent } from '../../columns/column.component';
 import { isColumnGroupComponent } from '../../columns/column-group.component';
+import { isCheckboxColumn } from '../../columns/column-base';
 import { normalize } from '../../columns/sort-settings';
 import { and, isNullOrEmptyString, isPresent, isTruthy, not, observe } from '../../utils';
 import { columnsToRender, sortColumns, isInSpanColumn } from "../../columns/column-common";
@@ -37,14 +39,23 @@ import { LogicalCellDirective } from '../../navigation/logical-cell.directive';
 import { LogicalRowDirective } from '../../navigation/logical-row.directive';
 import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
 import { TreeListSelectAllCheckboxDirective } from './select-all-checkbox.directive';
+import { ColumnInfoService } from '../../common/column-info.service';
+import { ContextService } from '../../common/provider.service';
+import { NavigationService } from '../../navigation/navigation.service';
+import { IdService } from '../../common/id.service';
+import { ColumnReorderEvent } from '../../dragdrop/column-reorder-event';
 import * as i0 from "@angular/core";
 import * as i1 from "../../common/single-popup.service";
 import * as i2 from "../../dragdrop/drag-hint.service";
 import * as i3 from "../../dragdrop/drop-cue.service";
 import * as i4 from "../../dragdrop/column-reorder.service";
-import * as i5 from "../../common/sort.service";
-import * as i6 from "../../selection/selection.service";
-import * as i7 from "@progress/kendo-angular-l10n";
+import * as i5 from "../../common/id.service";
+import * as i6 from "../../common/sort.service";
+import * as i7 from "../../selection/selection.service";
+import * as i8 from "@progress/kendo-angular-l10n";
+import * as i9 from "../../common/column-info.service";
+import * as i10 from "../../common/provider.service";
+import * as i11 from "../../navigation/navigation.service";
 const mergeObjects = (...args) => Object.assign.apply(null, [{}].concat(args));
 const directions = initialDirection => initialDirection === "asc" ? ["asc", "desc"] : ["desc", "asc"];
 /**
@@ -65,6 +76,7 @@ const reorderable = ({ draggable }) => draggable.context.column.reorderable;
 const lockable = ({ draggable, target }) => draggable.context.column.lockable !== false ||
     draggable.context.column.isLocked === target.context.column.isLocked;
 const rules = and(ofColumnType, reorderable, notInSpanColumn, notSameElement, sameParent, not(lastNonLocked), lockable);
+const modifierKeys = ['alt', 'ctrl', 'shift', 'meta'];
 /**
  * @hidden
  */
@@ -73,10 +85,14 @@ export class HeaderComponent {
     hint;
     cue;
     reorderService;
+    idService;
     sortService;
     selectionService;
     localization;
     cd;
+    columnInfoService;
+    contextService;
+    navigationService;
     /**
      * @hidden
      */
@@ -94,6 +110,10 @@ export class HeaderComponent {
     columnMenuTemplate;
     totalColumnsCount = 0;
     totalColumns;
+    tabIndex;
+    get isNavigable() {
+        return this.navigationService.enabled;
+    }
     sortedFields = {};
     get headerClass() {
         return !this.scrollable;
@@ -106,6 +126,8 @@ export class HeaderComponent {
         return this.columnMenu;
     }
     dropTargets = new QueryList();
+    filterMenus;
+    columnMenus;
     // Number of unlocked columns in the next table, if any
     get unlockedColumnsCount() {
         return this.totalColumnsCount - this.lockedColumnsCount - this.columns.length;
@@ -114,38 +136,134 @@ export class HeaderComponent {
     sortDescSmallIcon = sortDescSmallIcon;
     subscription = new Subscription();
     targetSubscription;
+    stopSorting = false;
     _leafColumns;
-    constructor(popupService, hint, cue, reorderService, sortService, selectionService, localization, cd) {
+    constructor(popupService, hint, cue, reorderService, idService, sortService, selectionService, localization, cd, columnInfoService, contextService, navigationService) {
         this.popupService = popupService;
         this.hint = hint;
         this.cue = cue;
         this.reorderService = reorderService;
+        this.idService = idService;
         this.sortService = sortService;
         this.selectionService = selectionService;
         this.localization = localization;
         this.cd = cd;
+        this.columnInfoService = columnInfoService;
+        this.contextService = contextService;
+        this.navigationService = navigationService;
+    }
+    ngAfterViewInit() {
+        this.subscription.add(observe(this.dropTargets)
+            .subscribe(this.attachTargets.bind(this)));
+    }
+    ngDoCheck() {
+        this._leafColumns = columnsToRender(this.columns || []).filter(x => !isColumnGroupComponent(x));
+    }
+    ngOnChanges(changes) {
+        const sortChange = changes.sort;
+        if (sortChange && !sortChange.isFirstChange()) {
+            sortChange.currentValue.forEach(change => {
+                this.sortedFields[change.field] = true;
+            });
+        }
+    }
+    ngOnInit() {
+        this.subscription.add(this.localization.changes
+            .subscribe(() => this.cd.markForCheck()));
+    }
+    ngOnDestroy() {
+        if (this.targetSubscription) {
+            this.targetSubscription.unsubscribe();
+        }
+        if (this.popupService) {
+            this.popupService.destroy();
+        }
+        this.subscription.unsubscribe();
     }
     getColumnComponent(column) {
         return column;
     }
-    sortColumn(column, event, link) {
-        const target = event ? event.target : null;
+    onSortClick(column, event, link) {
+        if (this.stopSorting) {
+            this.stopSorting = false;
+            return;
+        }
+        const target = event.target;
         if (column.headerTemplateRef && target !== link) {
             const hasFocusableParent = Boolean(closestInScope(target, isFocusable, link));
             if (hasFocusableParent) {
-                return target.type === 'checkbox'; // prevent navigation only if the element is not checkbox
+                // Do not sort when clicking focusable template elements.
+                return;
             }
         }
-        this.sortService.sort(this.toggleSort(column));
-        // Prevent navigation
-        return false;
+        const modifier = this.matchModifier(event);
+        const toggledColumn = this.toggleSort(column, modifier);
+        this.sortColumn(toggledColumn);
+    }
+    selectAllCheckboxId() {
+        return this.idService.selectAllCheckboxId();
+    }
+    get selectAllCheckboxLabel() {
+        return this.contextService.localization.get('selectAllRowsCheckboxLabel');
+    }
+    sortColumn(descriptor) {
+        this.sortService.sort(descriptor);
+    }
+    /**
+     *
+     * Determines whether the modifier key (if any) passed
+     * with a click/keyboard event matches the user-defined multiSortKey.
+     */
+    matchModifier(event) {
+        const { multiSortKey } = normalize(this.sortable);
+        if (multiSortKey === 'none') {
+            return modifierKeys.every(key => !event[`${key}Key`]);
+        }
+        return multiSortKey === 'ctrl'
+            ? event.ctrlKey || event.metaKey
+            : event[`${multiSortKey}Key`];
     }
     onHeaderKeydown(column, args) {
+        if (args.keyCode === Keys.ArrowDown && args.altKey && this.showFilterMenu) {
+            args.preventDefault();
+            args.stopImmediatePropagation();
+            const filterMenu = this.filterMenus.find(fm => fm.column === column);
+            filterMenu.toggle(filterMenu.anchor.nativeElement, filterMenu.template);
+            return;
+        }
+        if (args.keyCode === Keys.ArrowDown && args.altKey && this.showColumnMenu(column)) {
+            args.preventDefault();
+            args.stopImmediatePropagation();
+            const columnMenu = this.columnMenus.find(cm => cm.column === column);
+            columnMenu.toggle(null, columnMenu.anchor.nativeElement, columnMenu.template);
+            return;
+        }
+        const isCtrlOrMeta = args.ctrlKey || args.metaKey;
+        const isLeftOrRightArrow = args.keyCode === Keys.ArrowLeft || args.keyCode === Keys.ArrowRight;
+        const isReorderingKeyShortcut = isLeftOrRightArrow && isCtrlOrMeta;
+        if (isReorderingKeyShortcut && this.isReorderable(column)) {
+            args.preventDefault();
+            const columnsCount = this.columnInfoService.leafNamedColumns.length;
+            const reorderDirection = args.keyCode === Keys.ArrowLeft ? -1 : 1;
+            const rtlMultiplier = this.contextService.localization.rtl ? -1 : 1;
+            const reorderDirectionOffset = reorderDirection * rtlMultiplier;
+            const newIndex = column.leafIndex + reorderDirectionOffset;
+            const normalizedNewIndex = Math.min(Math.max(0, newIndex), columnsCount - 1);
+            const gridInstance = this.contextService.treelist;
+            gridInstance.reorderColumn(column, normalizedNewIndex, { before: reorderDirectionOffset < 0 });
+            gridInstance.columnReorder.emit(new ColumnReorderEvent({
+                column,
+                newIndex: normalizedNewIndex,
+                oldIndex: column.leafIndex
+            }));
+            return;
+        }
         if (!this.sortable || args.defaultPrevented || column.sortable === false) {
             return;
         }
-        if (args.keyCode === Keys.Enter) {
-            this.sortService.sort(this.toggleSort(column));
+        if (args.keyCode === Keys.Enter && isPresent(column.field)) {
+            const modifier = this.matchModifier(args);
+            this.sortService.sort(this.toggleSort(column, modifier));
         }
     }
     showSortNumbering(column) {
@@ -173,42 +291,20 @@ export class HeaderComponent {
             return 'descending';
         }
     }
-    toggleSort(column) {
+    /**
+     *
+     * @param column
+     * @param modifier - Indicates whether the client-defined `multiSortKey` modifier is met. Defaults to `true`.
+     * @returns - SortDescriptor[]
+     */
+    toggleSort(column, modifier = true) {
         const { allowUnsort, mode, initialDirection } = normalize(this.sortable, column.sortable);
         const descriptor = this.toggleDirection(column.field, allowUnsort, initialDirection);
-        if (mode === 'single') {
+        if (mode === 'single' || !modifier) {
             return [descriptor];
         }
         return [...this.sort.filter(desc => desc.field !== column.field), descriptor];
     }
-    ngAfterViewInit() {
-        this.subscription.add(observe(this.dropTargets)
-            .subscribe(this.attachTargets.bind(this)));
-    }
-    ngDoCheck() {
-        this._leafColumns = columnsToRender(this.columns || []).filter(x => !isColumnGroupComponent(x));
-    }
-    ngOnChanges(changes) {
-        const sortChange = changes.sort;
-        if (sortChange && !sortChange.isFirstChange()) {
-            sortChange.currentValue.forEach(change => {
-                this.sortedFields[change.field] = true;
-            });
-        }
-    }
-    ngOnInit() {
-        this.subscription.add(this.localization.changes
-            .subscribe(() => this.cd.markForCheck()));
-    }
-    ngOnDestroy() {
-        if (this.targetSubscription) {
-            this.targetSubscription.unsubscribe();
-        }
-        if (this.popupService) {
-            this.popupService.destroy();
-        }
-        this.subscription.unsubscribe();
-    }
     isFirstOnRow(column, index) {
         const isTailing = (c) => c &&
             (this.columnsForLevel(c.level).indexOf(c) > 0 || isTailing(c.parent));
@@ -228,7 +324,7 @@ export class HeaderComponent {
         return hasFilterRow(this.filterable);
     }
     showColumnMenu(column) {
-        return this.columnMenu && column.columnMenu &&
+        return this.columnMenu && !isCheckboxColumn(column) && column.columnMenu &&
             (this.columnMenuTemplate || column.columnMenuTemplates.length || hasItems(this.columnMenu, column));
     }
     isFilterable(column) {
@@ -237,9 +333,6 @@ export class HeaderComponent {
     canDrop(draggable, target) {
         return this.reorderable && rules({ draggable, target });
     }
-    shouldActivate(column) {
-        return this.reorderable && column.reorderable;
-    }
     isSortable(column) {
         return !isNullOrEmptyString(column.field)
             && isTruthy(this.sortable) && isTruthy(column.sortable);
@@ -247,6 +340,23 @@ export class HeaderComponent {
     trackByIndex(index, _item) {
         return index;
     }
+    shouldActivate(column) {
+        const canReorder = this.isReorderable(column);
+        if (!canReorder && !isColumnComponent(column)) {
+            return false;
+        }
+        return canReorder;
+    }
+    isInteractive(column, prop) {
+        return !isNullOrEmptyString(column.field)
+            && isTruthy(this[prop]) && isTruthy(column[prop]);
+    }
+    isCheckboxColumn(column) {
+        return isCheckboxColumn(column) && !column.templateRef;
+    }
+    isReorderable(column) {
+        return this.reorderable && column.reorderable;
+    }
     toggleDirection(field, allowUnsort, initialDirection) {
         const descriptor = this.sortDescriptor(field);
         const [first, second] = directions(initialDirection);
@@ -362,8 +472,8 @@ export class HeaderComponent {
             target: target.context.column
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.DragHintService }, { token: i3.DropCueService }, { token: i4.ColumnReorderService }, { token: i5.SortService }, { token: i6.SelectionService }, { token: i7.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HeaderComponent, isStandalone: true, selector: "[kendoTreeListHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount", totalColumns: "totalColumns" }, host: { properties: { "class.k-grid-header": "this.headerClass", "class.k-table-thead": "this.hostClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.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.SelectionService }, { token: i8.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i9.ColumnInfoService }, { token: i10.ContextService }, { token: i11.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HeaderComponent, isStandalone: true, selector: "[kendoTreeListHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount", totalColumns: "totalColumns", tabIndex: "tabIndex" }, 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: `
         <tr *ngFor="let i of columnLevels; let levelIndex = index" role="row"
             kendoTreeListLogicalRow
                 [logicalRowIndex]="levelIndex"
@@ -376,11 +486,13 @@ export class HeaderComponent {
                     kendoTreeListLogicalCell
                     [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
@@ -395,40 +507,50 @@ export class HeaderComponent {
                     }"
                     class="k-header k-table-th"
                     [class.k-filterable]="(showFilterMenu && isFilterable(getColumnComponent(column))) || showColumnMenu(column)"
-                    [attr.aria-haspopup]="(showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined"
                     [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
                     [ngClass]="column.headerClass"
                     [ngStyle]="column.headerStyle"
                     [attr.rowspan]="column.rowspan(totalColumnLevels)"
-                    [attr.colspan]="column.colspan">
-                    <ng-template [ngIf]="!isSortable(getColumnComponent(column))">
-                        <kendo-treelist-filter-menu
-                            *ngIf="showFilterMenu && isFilterable(getColumnComponent(column))"
-                            [column]="getColumnComponent(column)"
-                            [filter]="filter">
-                        </kendo-treelist-filter-menu>
-                        <kendo-treelist-column-menu *ngIf="showColumnMenu(column)"
-                            [standalone]="false"
-                            [settings]="columnMenuSettings"
-                            [column]="column"
-                            [columnMenuTemplate]="columnMenuTemplate"
-                            [sort]="sort"
-                            [filter]="filter"
-                            [sortable]="sortable">
-                        </kendo-treelist-column-menu>
-                        <ng-template
-                            [templateContext]="{
-                                templateRef: column.headerTemplateRef,
-                                columnIndex: column.leafIndex,
-                                column: column,
-                                $implicit: column
-                            }">
-                        </ng-template>
-                        <ng-template [ngIf]="!column.headerTemplateRef">{{column.displayTitle}}</ng-template>
-                    </ng-template>
-                    <ng-template [ngIf]="isSortable(getColumnComponent(column))">
+                    [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), '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-treelist-filter-menu
+                                *ngIf="showFilterMenu && isFilterable(getColumnComponent(column))"
+                                [column]="getColumnComponent(column)"
+                                [filter]="filter"
+                                [tabIndex]="tabIndex">
+                            </kendo-treelist-filter-menu>
+                            <kendo-treelist-column-menu *ngIf="showColumnMenu(column)"
+                                [standalone]="false"
+                                [settings]="columnMenuSettings"
+                                [column]="column"
+                                [columnMenuTemplate]="columnMenuTemplate"
+                                [sort]="sort"
+                                [filter]="filter"
+                                [sortable]="sortable"
+                                [tabIndex]="tabIndex">
+                            </kendo-treelist-column-menu>
+                        </span>
+                    </ng-container>
+                    <ng-container *ngIf="isInteractive(getColumnComponent(column), 'sortable')">
                         <span class="k-cell-inner">
-                            <span #link class="k-link" (click)="sortColumn(getColumnComponent(column), $event, link)">  
+                            <span #link class="k-link" (click)="onSortClick(getColumnComponent(column), $event, link)">  
                                 <ng-template
                                     [templateContext]="{
                                         templateRef: column.headerTemplateRef,
@@ -453,7 +575,8 @@ export class HeaderComponent {
                             <kendo-treelist-filter-menu
                                 *ngIf="showFilterMenu && isFilterable(getColumnComponent(column))"
                                 [column]="getColumnComponent(column)"
-                                [filter]="filter">
+                                [filter]="filter"
+                                [tabIndex]="tabIndex">
                             </kendo-treelist-filter-menu>
                             <kendo-treelist-column-menu *ngIf="showColumnMenu(column)"
                                 [standalone]="false"
@@ -462,18 +585,20 @@ export class HeaderComponent {
                                 [columnMenuTemplate]="columnMenuTemplate"
                                 [sort]="sort"
                                 [filter]="filter"
-                                [sortable]="sortable">
+                                [sortable]="sortable"
+                                [tabIndex]="tabIndex">
                             </kendo-treelist-column-menu>
                         </span>
-                    </ng-template>
-                    <ng-template [ngIf]="renderSelectAll(column)">
+                    </ng-container>
+                    <ng-container *ngIf="isCheckboxColumn(column) && !column.headerTemplateRef && $any(column).showSelectAll">
                         <kendo-checkbox
-                            [inputAttributes]="{'aria-label': messageFor('selectAllRowsCheckboxLabel')}"
-                            kendoTreeListFocusable
+                            [attr.id]="selectAllCheckboxId()"
+                            [inputAttributes]="{'aria-label': selectAllCheckboxLabel}"
                             kendoTreeListSelectAllCheckbox
+                            kendoTreeListFocusable
                             (checkedStateChange)="selectAllChange($event)"
                         ></kendo-checkbox>
-                    </ng-template>
+                    </ng-container>
                     <span kendoTreeListColumnHandle
                         kendoDraggable
                         class="k-column-resizer"
@@ -488,6 +613,7 @@ export class HeaderComponent {
                     [logicalColIndex]="logicalColumnIndex(column)"
                     [rowSpan]="column.rowspan(totalColumnLevels)"
                     [colSpan]="column.colspan"
+                    [headerLabelText]="column.title || getColumnComponent(column).field"
                     kendoDropTarget
                     kendoDraggable
                     kendoDraggableColumn
@@ -500,28 +626,34 @@ export class HeaderComponent {
                     }"
                     class="k-header k-table-th"
                     [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
-                    [attr.aria-haspopup]="(showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined"
-                    [class.k-filterable]="showColumnMenu(column)"
-                    [attr.aria-expanded]="showColumnMenu(column)"
+                    [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"
                     [ngClass]="column.headerClass"
                     [ngStyle]="column.headerStyle"
                     [attr.rowspan]="column.rowspan(totalColumnLevels)"
                     [attr.colspan]="column.colspan">
-                        <kendo-treelist-column-menu *ngIf="showColumnMenu(column)"
-                            [standalone]="false"
-                            [settings]="columnMenuSettings"
-                            [column]="column"
-                            [columnMenuTemplate]="columnMenuTemplate">
-                        </kendo-treelist-column-menu>
-                        <ng-template
-                            [templateContext]="{
-                                templateRef: column.headerTemplateRef,
-                                columnIndex: lockedColumnsCount + columnIndex,
-                                column: column,
-                                $implicit: column
-                            }">
-                        </ng-template>
-                        <ng-template [ngIf]="!column.headerTemplateRef">{{column.displayTitle}}</ng-template>
+                        <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-treelist-column-menu *ngIf="showColumnMenu(column)"
+                                [standalone]="false"
+                                [settings]="columnMenuSettings"
+                                [column]="column"
+                                [columnMenuTemplate]="columnMenuTemplate">
+                            </kendo-treelist-column-menu>
+                        </span>
                         <span kendoTreeListColumnHandle
                             kendoDraggable
                             class="k-column-resizer"
@@ -534,18 +666,16 @@ export class HeaderComponent {
         </tr>
         <tr *ngIf="showFilterRow"
             kendoTreeListFilterRow
-            [columns]="leafColumns"
-            [filter]="filter"
-            [lockedColumnsCount]="lockedColumnsCount"
+                [columns]="leafColumns"
+                [filter]="filter"
+                [lockedColumnsCount]="lockedColumnsCount"
             kendoTreeListLogicalRow
-            [totalColumns]="totalColumns"
-            [logicalRowIndex]="totalColumnLevels + 1"
-            [logicalSlaveRow]="lockedColumnsCount > 0"
-            [logicalCellsCount]="columns.length"
-            [logicalSlaveCellsCount]="unlockedColumnsCount"
-        >
-        </tr>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew", "totalColumns"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable"] }, { 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: "component", type: FilterMenuComponent, selector: "kendo-treelist-filter-menu", inputs: ["column", "filter"] }, { kind: "component", type: ColumnMenuComponent, selector: "kendo-treelist-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { kind: "directive", type: ColumnHandleDirective, selector: "[kendoTreeListColumnHandle]", inputs: ["columns", "column"] }, { kind: "component", type: FilterRowComponent, selector: "[kendoTreeListFilterRow]", inputs: ["columns", "filter", "logicalRowIndex", "lockedColumnsCount"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "directive", type: TreeListSelectAllCheckboxDirective, selector: "[kendoTreeListSelectAllCheckbox]" }] });
+                [totalColumns]="totalColumns"
+                [logicalRowIndex]="totalColumnLevels + 1"
+                [logicalSlaveRow]="lockedColumnsCount > 0"
+                [logicalCellsCount]="columns.length"
+                [logicalSlaveCellsCount]="unlockedColumnsCount"></tr>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew", "totalColumns"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable", "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: "component", type: FilterMenuComponent, selector: "kendo-treelist-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { kind: "component", type: ColumnMenuComponent, selector: "kendo-treelist-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { kind: "directive", type: ColumnHandleDirective, selector: "[kendoTreeListColumnHandle]", inputs: ["columns", "column"] }, { kind: "component", type: FilterRowComponent, selector: "[kendoTreeListFilterRow]", inputs: ["columns", "filter", "logicalRowIndex", "lockedColumnsCount"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "directive", type: TreeListSelectAllCheckboxDirective, selector: "[kendoTreeListSelectAllCheckbox]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
@@ -564,11 +694,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     kendoTreeListLogicalCell
                     [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
@@ -583,40 +715,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     }"
                     class="k-header k-table-th"
                     [class.k-filterable]="(showFilterMenu && isFilterable(getColumnComponent(column))) || showColumnMenu(column)"
-                    [attr.aria-haspopup]="(showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined"
                     [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
                     [ngClass]="column.headerClass"
                     [ngStyle]="column.headerStyle"
                     [attr.rowspan]="column.rowspan(totalColumnLevels)"
-                    [attr.colspan]="column.colspan">
-                    <ng-template [ngIf]="!isSortable(getColumnComponent(column))">
-                        <kendo-treelist-filter-menu
-                            *ngIf="showFilterMenu && isFilterable(getColumnComponent(column))"
-                            [column]="getColumnComponent(column)"
-                            [filter]="filter">
-                        </kendo-treelist-filter-menu>
-                        <kendo-treelist-column-menu *ngIf="showColumnMenu(column)"
-                            [standalone]="false"
-                            [settings]="columnMenuSettings"
-                            [column]="column"
-                            [columnMenuTemplate]="columnMenuTemplate"
-                            [sort]="sort"
-                            [filter]="filter"
-                            [sortable]="sortable">
-                        </kendo-treelist-column-menu>
-                        <ng-template
-                            [templateContext]="{
-                                templateRef: column.headerTemplateRef,
-                                columnIndex: column.leafIndex,
-                                column: column,
-                                $implicit: column
-                            }">
-                        </ng-template>
-                        <ng-template [ngIf]="!column.headerTemplateRef">{{column.displayTitle}}</ng-template>
-                    </ng-template>
-                    <ng-template [ngIf]="isSortable(getColumnComponent(column))">
+                    [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 #link class="k-link" (click)="sortColumn(getColumnComponent(column), $event, link)">  
+                            <span class="k-link" [class.!k-cursor-default]="!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-treelist-filter-menu
+                                *ngIf="showFilterMenu && isFilterable(getColumnComponent(column))"
+                                [column]="getColumnComponent(column)"
+                                [filter]="filter"
+                                [tabIndex]="tabIndex">
+                            </kendo-treelist-filter-menu>
+                            <kendo-treelist-column-menu *ngIf="showColumnMenu(column)"
+                                [standalone]="false"
+                                [settings]="columnMenuSettings"
+                                [column]="column"
+                                [columnMenuTemplate]="columnMenuTemplate"
+                                [sort]="sort"
+                                [filter]="filter"
+                                [sortable]="sortable"
+                                [tabIndex]="tabIndex">
+                            </kendo-treelist-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
                                     [templateContext]="{
                                         templateRef: column.headerTemplateRef,
@@ -641,7 +783,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             <kendo-treelist-filter-menu
                                 *ngIf="showFilterMenu && isFilterable(getColumnComponent(column))"
                                 [column]="getColumnComponent(column)"
-                                [filter]="filter">
+                                [filter]="filter"
+                                [tabIndex]="tabIndex">
                             </kendo-treelist-filter-menu>
                             <kendo-treelist-column-menu *ngIf="showColumnMenu(column)"
                                 [standalone]="false"
@@ -650,18 +793,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                                 [columnMenuTemplate]="columnMenuTemplate"
                                 [sort]="sort"
                                 [filter]="filter"
-                                [sortable]="sortable">
+                                [sortable]="sortable"
+                                [tabIndex]="tabIndex">
                             </kendo-treelist-column-menu>
                         </span>
-                    </ng-template>
-                    <ng-template [ngIf]="renderSelectAll(column)">
+                    </ng-container>
+                    <ng-container *ngIf="isCheckboxColumn(column) && !column.headerTemplateRef && $any(column).showSelectAll">
                         <kendo-checkbox
-                            [inputAttributes]="{'aria-label': messageFor('selectAllRowsCheckboxLabel')}"
-                            kendoTreeListFocusable
+                            [attr.id]="selectAllCheckboxId()"
+                            [inputAttributes]="{'aria-label': selectAllCheckboxLabel}"
                             kendoTreeListSelectAllCheckbox
+                            kendoTreeListFocusable
                             (checkedStateChange)="selectAllChange($event)"
                         ></kendo-checkbox>
-                    </ng-template>
+                    </ng-container>
                     <span kendoTreeListColumnHandle
                         kendoDraggable
                         class="k-column-resizer"
@@ -676,6 +821,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [logicalColIndex]="logicalColumnIndex(column)"
                     [rowSpan]="column.rowspan(totalColumnLevels)"
                     [colSpan]="column.colspan"
+                    [headerLabelText]="column.title || getColumnComponent(column).field"
                     kendoDropTarget
                     kendoDraggable
                     kendoDraggableColumn
@@ -688,28 +834,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     }"
                     class="k-header k-table-th"
                     [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
-                    [attr.aria-haspopup]="(showFilterMenu || showColumnMenu(column)) ? 'dialog' : undefined"
-                    [class.k-filterable]="showColumnMenu(column)"
-                    [attr.aria-expanded]="showColumnMenu(column)"
+                    [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"
                     [ngClass]="column.headerClass"
                     [ngStyle]="column.headerStyle"
                     [attr.rowspan]="column.rowspan(totalColumnLevels)"
                     [attr.colspan]="column.colspan">
-                        <kendo-treelist-column-menu *ngIf="showColumnMenu(column)"
-                            [standalone]="false"
-                            [settings]="columnMenuSettings"
-                            [column]="column"
-                            [columnMenuTemplate]="columnMenuTemplate">
-                        </kendo-treelist-column-menu>
-                        <ng-template
-                            [templateContext]="{
-                                templateRef: column.headerTemplateRef,
-                                columnIndex: lockedColumnsCount + columnIndex,
-                                column: column,
-                                $implicit: column
-                            }">
-                        </ng-template>
-                        <ng-template [ngIf]="!column.headerTemplateRef">{{column.displayTitle}}</ng-template>
+                        <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-treelist-column-menu *ngIf="showColumnMenu(column)"
+                                [standalone]="false"
+                                [settings]="columnMenuSettings"
+                                [column]="column"
+                                [columnMenuTemplate]="columnMenuTemplate">
+                            </kendo-treelist-column-menu>
+                        </span>
                         <span kendoTreeListColumnHandle
                             kendoDraggable
                             class="k-column-resizer"
@@ -722,24 +874,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </tr>
         <tr *ngIf="showFilterRow"
             kendoTreeListFilterRow
-            [columns]="leafColumns"
-            [filter]="filter"
-            [lockedColumnsCount]="lockedColumnsCount"
+                [columns]="leafColumns"
+                [filter]="filter"
+                [lockedColumnsCount]="lockedColumnsCount"
             kendoTreeListLogicalRow
-            [totalColumns]="totalColumns"
-            [logicalRowIndex]="totalColumnLevels + 1"
-            [logicalSlaveRow]="lockedColumnsCount > 0"
-            [logicalCellsCount]="columns.length"
-            [logicalSlaveCellsCount]="unlockedColumnsCount"
-        >
-        </tr>
+                [totalColumns]="totalColumns"
+                [logicalRowIndex]="totalColumnLevels + 1"
+                [logicalSlaveRow]="lockedColumnsCount > 0"
+                [logicalCellsCount]="columns.length"
+                [logicalSlaveCellsCount]="unlockedColumnsCount"></tr>
     `,
                     standalone: true,
                     imports: [NgFor, LogicalRowDirective, NgIf, LogicalCellDirective, DropTargetDirective, DraggableDirective, DraggableColumnDirective, NgClass, NgStyle,
                         FilterMenuComponent, ColumnMenuComponent, TemplateContextDirective, IconWrapperComponent, FocusableDirective, ColumnHandleDirective, FilterRowComponent,
                         CheckBoxComponent, TreeListSelectAllCheckboxDirective]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.SinglePopupService }, { type: i2.DragHintService }, { type: i3.DropCueService }, { type: i4.ColumnReorderService }, { type: i5.SortService }, { type: i6.SelectionService }, { type: i7.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { totalColumnLevels: [{
+        }], ctorParameters: function () { return [{ type: i1.SinglePopupService }, { type: i2.DragHintService }, { type: i3.DropCueService }, { type: i4.ColumnReorderService }, { type: i5.IdService }, { type: i6.SortService }, { type: i7.SelectionService }, { type: i8.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i9.ColumnInfoService }, { type: i10.ContextService }, { type: i11.NavigationService }]; }, propDecorators: { totalColumnLevels: [{
                 type: Input
             }], columns: [{
                 type: Input
@@ -767,6 +917,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], totalColumns: [{
                 type: Input
+            }], tabIndex: [{
+                type: Input
             }], headerClass: [{
                 type: HostBinding,
                 args: ['class.k-grid-header']
@@ -776,4 +928,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], dropTargets: [{
                 type: ViewChildren,
                 args: [DropTargetDirective]
+            }], filterMenus: [{
+                type: ViewChildren,
+                args: [FilterMenuComponent]
+            }], columnMenus: [{
+                type: ViewChildren,
+                args: [ColumnMenuComponent]
             }] } });