@progress/kendo-angular-treelist 13.2.0 → 13.2.1-develop.10

package/fesm2015/progress-kendo-angular-treelist.mjs

@@ -48,8 +48,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-treelist',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1689688799,
-    version: '13.2.0',
+    publishDate: 1690460620,
+    version: '13.2.1-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -2305,7 +2305,7 @@ const filterHierarchy = (list, predicate) => {
             }
         }
     });
-    return result;
+    return result.sort((a, b) => Number(b.locked) - Number(a.locked));
 };
 /**
  * @hidden
@@ -3061,17 +3061,17 @@ const updateClass = (element, valid, svg) => {
         const path = valid ? plusIcon.content : cancelIcon.content;
         icon.firstElementChild.innerHTML = path + icon.firstElementChild.innerHTML;
     }
-    icon.className = icon.className.replace(/(plus|cancel)/, valid ? 'plus' : 'cancel');
+    icon.setAttribute('class', icon.getAttribute('class').replace(/(plus|cancel)/, valid ? 'plus' : 'cancel'));
 };
 const updateLock = (element, locked = null, svg) => {
     const icon = element.querySelectorAll('.k-icon, .k-svg-icon')[1];
     const value = locked === null ? '' : (locked ? `k${svg ? '-svg' : ''}-i-lock` : `k${svg ? '-svg' : ''}-i-unlock`);
     if (svg) {
-        icon.className = icon.className.replace(/(k-svg-i-unlock|k-svg-i-lock)/, '').trim() + ` ${value}`;
+        icon.setAttribute('class', icon.getAttribute('class').replace(/(k-svg-i-unlock|k-svg-i-lock)/, '').trim() + ` ${value}`);
         icon.firstElementChild.innerHTML = locked ? lockIcon.content : unlockIcon.content;
     }
     else {
-        icon.className = icon.className.replace(/(k-i-unlock|k-i-lock)/, '').trim() + ` ${value}`;
+        icon.setAttribute('class', icon.getAttribute('class').replace(/(k-i-unlock|k-i-lock)/, '').trim() + ` ${value}`);
     }
 };
 const decorate = (element) => {
@@ -3087,15 +3087,15 @@ const svgIconsMarkup = (viewBox, content, safeTitle) => `
             viewBox="${viewBox}"
             aria-hidden="true">
             ${content}
-            <span class="k-svg-icon k-icon-modifier">
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                    viewBox="${viewBox}"
-                    aria-hidden="true">
-                </svg>
-            </span>
         </svg>
+        <span class="k-svg-icon k-icon-modifier">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                viewBox="${viewBox}"
+                aria-hidden="true">
+            </svg>
+        </span>
     </span>
     ${safeTitle}`;
 const fontIconsMarkup = (safeTitle) => `
@@ -4295,7 +4295,7 @@ const targetCell = (target, treelistElement) => {
     const cell = treelistCell(target, treelistElement);
     const row = closest(cell, matchesNodeName('tr'));
     if (cell && row) {
-        let rowIndex = row.getAttribute('aria-rowindex');
+        let rowIndex = row.getAttribute('aria-rowindex') || row.getAttribute('data-kendo-treelist-row-index');
         rowIndex = rowIndex ? parseInt(rowIndex, 10) - 1 : null;
         let colIndex = cell.getAttribute('aria-colindex');
         colIndex = colIndex ? parseInt(colIndex, 10) - 1 : null;
@@ -9829,18 +9829,35 @@ class LogicalRowDirective {
         return this.logicalSlaveRow ? 'presentation' : 'row';
     }
     get ariaRowIndex() {
-        if (this.navigation.enabled) {
-            return this.logicalRowIndex + 1;
-        }
+        return this.logicalSlaveRow ? null : this.logicalRowIndex + 1;
+    }
+    get rowIndex() {
+        return this.logicalSlaveRow ? this.logicalRowIndex + 1 : null;
     }
     get ariaOwns() {
-        if (!this.navigation.enabled || this.logicalSlaveRow || this.logicalSlaveCellsCount === 0) {
+        if (this.logicalSlaveRow || this.logicalSlaveCellsCount === 0) {
             return undefined;
         }
         const ids = [];
-        const total = this.logicalCellsCount + this.logicalSlaveCellsCount;
-        for (let cellIndex = this.logicalCellsCount; cellIndex < total; cellIndex++) {
-            ids.push(this.idService.cellId(this.logicalRowIndex, cellIndex));
+        if (this.dataRowIndex < 0) {
+            let total = this.logicalCellsCount + this.logicalSlaveCellsCount;
+            this.columnsArray.forEach(column => {
+                if (column.isSpanColumn) {
+                    total += column.colspan - 1;
+                }
+            });
+            for (let cellIndex = this.logicalCellsCount; cellIndex < total; cellIndex++) {
+                ids.push(this.idService.cellId(this.logicalRowIndex, cellIndex));
+            }
+        }
+        else {
+            let columnIndex = 0;
+            this.columnsArray.forEach(column => {
+                if (!column.isLocked) {
+                    ids.push(this.idService.cellId(this.logicalRowIndex, columnIndex));
+                }
+                columnIndex += column.isSpanColumn ? column.colspan : 1;
+            });
         }
         return ids.join(' ');
     }
@@ -9863,9 +9880,13 @@ class LogicalRowDirective {
     ngOnDestroy() {
         this.navigation.unregisterRow(this.logicalRowIndex, this);
     }
+    get columnsArray() {
+        var _a;
+        return ((_a = this.totalColumns) === null || _a === void 0 ? void 0 : _a.allColumns.toArray()) || [];
+    }
 }
 LogicalRowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LogicalRowDirective, deps: [{ token: IdService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Directive });
-LogicalRowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: { logicalRowIndex: "logicalRowIndex", logicalSlaveRow: "logicalSlaveRow", logicalCellsCount: "logicalCellsCount", logicalSlaveCellsCount: "logicalSlaveCellsCount", dataRowIndex: "dataRowIndex", dataItem: "dataItem", isNew: "isNew" }, host: { properties: { "attr.role": "this.hostRole", "attr.aria-rowindex": "this.ariaRowIndex", "attr.aria-owns": "this.ariaOwns", "class.k-table-row": "this.tableRowClass" } }, usesOnChanges: true, ngImport: i0 });
+LogicalRowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: { logicalRowIndex: "logicalRowIndex", logicalSlaveRow: "logicalSlaveRow", logicalCellsCount: "logicalCellsCount", logicalSlaveCellsCount: "logicalSlaveCellsCount", dataRowIndex: "dataRowIndex", dataItem: "dataItem", isNew: "isNew", totalColumns: "totalColumns" }, host: { properties: { "attr.role": "this.hostRole", "attr.aria-rowindex": "this.ariaRowIndex", "attr.data-kendo-treelist-row-index": "this.rowIndex", "attr.aria-owns": "this.ariaOwns", "class.k-table-row": "this.tableRowClass" } }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LogicalRowDirective, decorators: [{
             type: Directive,
             args: [{
@@ -9885,12 +9906,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], isNew: [{
                 type: Input
+            }], totalColumns: [{
+                type: Input
             }], hostRole: [{
                 type: HostBinding,
                 args: ['attr.role']
             }], ariaRowIndex: [{
                 type: HostBinding,
                 args: ['attr.aria-rowindex']
+            }], rowIndex: [{
+                type: HostBinding,
+                args: ['attr.data-kendo-treelist-row-index']
             }], ariaOwns: [{
                 type: HostBinding,
                 args: ['attr.aria-owns']
@@ -10567,12 +10593,13 @@ class HeaderComponent {
     }
 }
 HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, deps: [{ token: SinglePopupService }, { token: DragHintService }, { token: DropCueService }, { token: ColumnReorderService }, { token: SortService }, { token: SelectionService }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: HeaderComponent, 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" }, 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: `
+HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: HeaderComponent, 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: `
         <tr *ngFor="let i of columnLevels; let levelIndex = index" role="row"
             kendoTreeListLogicalRow
                 [logicalRowIndex]="levelIndex"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
                 [logicalCellsCount]="columns.length"
+                [totalColumns]="totalColumns"
                 [logicalSlaveCellsCount]="unlockedColumnsCount">
             <ng-template ngFor let-column="$implicit" [ngForOf]="columnsForLevel(levelIndex)" [ngForTrackBy]="trackByIndex" let-columnIndex="index" let-last="last">
                 <th *ngIf="!isColumnGroupComponent(column)"
@@ -10746,13 +10773,14 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             [filter]="filter"
             [lockedColumnsCount]="lockedColumnsCount"
             kendoTreeListLogicalRow
+            [totalColumns]="totalColumns"
             [logicalRowIndex]="totalColumnLevels + 1"
             [logicalSlaveRow]="lockedColumnsCount > 0"
             [logicalCellsCount]="columns.length"
             [logicalSlaveCellsCount]="unlockedColumnsCount"
         >
         </tr>
-    `, isInline: true, components: [{ type: FilterMenuComponent, selector: "kendo-treelist-filter-menu", inputs: ["column", "filter"] }, { type: ColumnMenuComponent, selector: "kendo-treelist-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: FilterRowComponent, selector: "[kendoTreeListFilterRow]", inputs: ["columns", "filter", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i1$3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: ColumnHandleDirective, selector: "[kendoTreeListColumnHandle]", inputs: ["columns", "column"] }] });
+    `, isInline: true, components: [{ type: FilterMenuComponent, selector: "kendo-treelist-filter-menu", inputs: ["column", "filter"] }, { type: ColumnMenuComponent, selector: "kendo-treelist-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: FilterRowComponent, selector: "[kendoTreeListFilterRow]", inputs: ["columns", "filter", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew", "totalColumns"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i1$3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: ColumnHandleDirective, selector: "[kendoTreeListColumnHandle]", inputs: ["columns", "column"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -10763,6 +10791,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [logicalRowIndex]="levelIndex"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
                 [logicalCellsCount]="columns.length"
+                [totalColumns]="totalColumns"
                 [logicalSlaveCellsCount]="unlockedColumnsCount">
             <ng-template ngFor let-column="$implicit" [ngForOf]="columnsForLevel(levelIndex)" [ngForTrackBy]="trackByIndex" let-columnIndex="index" let-last="last">
                 <th *ngIf="!isColumnGroupComponent(column)"
@@ -10936,6 +10965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [filter]="filter"
             [lockedColumnsCount]="lockedColumnsCount"
             kendoTreeListLogicalRow
+            [totalColumns]="totalColumns"
             [logicalRowIndex]="totalColumnLevels + 1"
             [logicalSlaveRow]="lockedColumnsCount > 0"
             [logicalCellsCount]="columns.length"
@@ -10970,6 +11000,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], totalColumnsCount: [{
                 type: Input
+            }], totalColumns: [{
+                type: Input
             }], headerClass: [{
                 type: HostBinding,
                 args: ['class.k-grid-header']
@@ -11554,8 +11586,17 @@ class TableBodyComponent {
         return this.editService.newDataItem;
     }
     // Number of unlocked columns in the next table, if any
-    get unlockedColumnsCount() {
-        return this.totalColumnsCount - this.lockedColumnsCount - (this.allColumns || this.columns).length;
+    unlockedColumnsCount(item) {
+        const allColumns = this.allColumns || this.columns;
+        let allColumnsCount = allColumns.length;
+        allColumns.forEach(column => {
+            if (column.isSpanColumn) {
+                allColumnsCount += column.colspan - 1;
+            }
+        });
+        const contentColumnsCount = this.totalColumnsCount - this.lockedColumnsCount - allColumnsCount;
+        const headerFooterColumnsCount = this.totalColumnsCount - this.lockedColumnsCount - (this.allColumns || this.columns).length;
+        return item && item.type === 'data' ? contentColumnsCount : headerFooterColumnsCount;
     }
     get hasData() {
         const view = this.view;
@@ -11594,7 +11635,10 @@ class TableBodyComponent {
         return true;
     }
     ariaRowExpanded(item) {
-        return Boolean(item.expanded);
+        return this.lockedColumnsCount < 1 ? Boolean(item.expanded) : undefined;
+    }
+    ariaRowSelected(item) {
+        return this.lockedColumnsCount < 1 ? Boolean(item.selected) : undefined;
     }
     ariaExpanded(item, column) {
         if (!column.expandable || !item.hasChildren) {
@@ -11806,7 +11850,7 @@ class TableBodyComponent {
     }
 }
 TableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableBodyComponent, deps: [{ token: ChangeNotificationService }, { token: EditService }, { token: i1$1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DomEventsService }, { token: ColumnInfoService }, { token: NavigationService }, { token: ExpandStateService }, { token: SelectionService }], target: i0.ɵɵFactoryTarget.Component });
-TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: { columns: "columns", allColumns: "allColumns", noRecordsTemplate: "noRecordsTemplate", view: "view", skip: "skip", filterable: "filterable", noRecordsText: "noRecordsText", isLocked: "isLocked", lockedColumnsCount: "lockedColumnsCount", totalColumnsCount: "totalColumnsCount", virtualColumns: "virtualColumns", expandIcons: "expandIcons", trackBy: "trackBy", rowClass: "rowClass" }, host: { properties: { "class.k-table-tbody": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
+TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: { columns: "columns", allColumns: "allColumns", noRecordsTemplate: "noRecordsTemplate", view: "view", skip: "skip", filterable: "filterable", noRecordsText: "noRecordsText", isLocked: "isLocked", lockedColumnsCount: "lockedColumnsCount", totalColumnsCount: "totalColumnsCount", virtualColumns: "virtualColumns", expandIcons: "expandIcons", trackBy: "trackBy", totalColumns: "totalColumns", rowClass: "rowClass" }, host: { properties: { "class.k-table-tbody": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
     <tr *ngIf="!hasData" class="k-grid-norecords">
         <td [attr.colspan]="colSpan" class="k-table-td">
             <ng-container *ngIf="noRecordsTemplate?.templateRef" [ngTemplateOutlet]="noRecordsTemplate.templateRef">
@@ -11824,14 +11868,15 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
             [logicalSlaveRow]="lockedColumnsCount > 0"
             [logicalCellsCount]="columns.length"
-            [logicalSlaveCellsCount]="unlockedColumnsCount"
+            [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
+            [totalColumns]="totalColumns"
             [isNew]="item.isNew"
             [attr.aria-expanded]="ariaRowExpanded(item)"
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             class="k-table-row{{isOdd(item) ? ' k-alt k-table-alt-row' : ''}}"
             [class.k-grid-edit-row]="isEditingRow(item)"
             [class.k-grid-add-row]="item.isNew"
-            [attr.aria-selected]="item.selected"
+            [attr.aria-selected]="ariaRowSelected(item)"
             [class.k-selected]="item.selected"
             [attr.data-treelist-view-index]="rowIndex">
 
@@ -11856,8 +11901,8 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                     [colSpan]="column.colspan"
                     [expandable]="cellExpandable(item, column)"
                     role="gridcell"
-                    [attr.aria-expanded]="ariaExpanded(item, column)"
-                    [attr.aria-selected]="ariaSelected(item, column, lockedColumnsCount + columnIndex)"
+                    [attr.aria-expanded]="lockedColumnsCount < 1 ? ariaExpanded(item, column) : undefined"
+                    [attr.aria-selected]="lockedColumnsCount < 1 ? ariaSelected(item, column, lockedColumnsCount + columnIndex) : undefined"
                 class="k-table-td"
                 [ngClass]="column.cssClass"
                 [class.k-grid-edit-cell]="isEditingCell(item, column)"
@@ -11874,8 +11919,8 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
                 [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="unlockedColumnsCount">
-
+                [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
+                [totalColumns]="totalColumns">
             <td kendoTreeListLogicalCell
                     [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
                     [logicalColIndex]="logicalColIndex(column)"
@@ -11903,7 +11948,7 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
            </td>
         </tr>
     </ng-container>
-    `, isInline: true, components: [{ type: CellComponent, selector: "[kendoTreeListCell]", inputs: ["column", "columnIndex", "isNew", "level", "hasChildren", "isExpanded", "loading", "expandIcons", "selected", "dataItem", "viewItem"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "levelItems": LevelItemsPipe } });
+    `, isInline: true, components: [{ type: CellComponent, selector: "[kendoTreeListCell]", inputs: ["column", "columnIndex", "isNew", "level", "hasChildren", "isExpanded", "loading", "expandIcons", "selected", "dataItem", "viewItem"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew", "totalColumns"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "levelItems": LevelItemsPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableBodyComponent, decorators: [{
             type: Component,
             args: [{
@@ -11926,14 +11971,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
             [logicalSlaveRow]="lockedColumnsCount > 0"
             [logicalCellsCount]="columns.length"
-            [logicalSlaveCellsCount]="unlockedColumnsCount"
+            [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
+            [totalColumns]="totalColumns"
             [isNew]="item.isNew"
             [attr.aria-expanded]="ariaRowExpanded(item)"
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             class="k-table-row{{isOdd(item) ? ' k-alt k-table-alt-row' : ''}}"
             [class.k-grid-edit-row]="isEditingRow(item)"
             [class.k-grid-add-row]="item.isNew"
-            [attr.aria-selected]="item.selected"
+            [attr.aria-selected]="ariaRowSelected(item)"
             [class.k-selected]="item.selected"
             [attr.data-treelist-view-index]="rowIndex">
 
@@ -11958,8 +12004,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [colSpan]="column.colspan"
                     [expandable]="cellExpandable(item, column)"
                     role="gridcell"
-                    [attr.aria-expanded]="ariaExpanded(item, column)"
-                    [attr.aria-selected]="ariaSelected(item, column, lockedColumnsCount + columnIndex)"
+                    [attr.aria-expanded]="lockedColumnsCount < 1 ? ariaExpanded(item, column) : undefined"
+                    [attr.aria-selected]="lockedColumnsCount < 1 ? ariaSelected(item, column, lockedColumnsCount + columnIndex) : undefined"
                 class="k-table-td"
                 [ngClass]="column.cssClass"
                 [class.k-grid-edit-cell]="isEditingCell(item, column)"
@@ -11976,8 +12022,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
                 [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="unlockedColumnsCount">
-
+                [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
+                [totalColumns]="totalColumns">
             <td kendoTreeListLogicalCell
                     [logicalRowIndex]="logicalRowIndex(item.rowIndex)"
                     [logicalColIndex]="logicalColIndex(column)"
@@ -12036,6 +12082,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], trackBy: [{
                 type: Input
+            }], totalColumns: [{
+                type: Input
             }], rowClass: [{
                 type: Input
             }] } });
@@ -12736,6 +12784,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                     [noRecordsText]="''"
                     [columns]="$any(lockedLeafColumns)"
                     [totalColumnsCount]="leafColumns.length"
+                    [totalColumns]="columns"
                     [skip]="skip"
                     [trackBy]="trackBy"
                     [filterable]="filterable"
@@ -12770,6 +12819,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                     [noRecordsTemplate]="noRecordsTemplate"
                     [lockedColumnsCount]="lockedLeafColumns.length"
                     [totalColumnsCount]="leafColumns.length"
+                    [totalColumns]="columns"
                     [skip]="skip"
                     [trackBy]="trackBy"
                     [filterable]="filterable"
@@ -12790,7 +12840,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
     </div>
     <div *ngIf="loading" kendoTreeListLoading>
     </div>
-    `, isInline: true, components: [{ type: ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "rowClass"] }, { type: i1$3.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: LoadingComponent, selector: "[kendoTreeListLoading]" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }] });
+    `, isInline: true, components: [{ type: ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "totalColumns", "rowClass"] }, { type: i1$3.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: LoadingComponent, selector: "[kendoTreeListLoading]" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{
@@ -12822,6 +12872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [noRecordsText]="''"
                     [columns]="$any(lockedLeafColumns)"
                     [totalColumnsCount]="leafColumns.length"
+                    [totalColumns]="columns"
                     [skip]="skip"
                     [trackBy]="trackBy"
                     [filterable]="filterable"
@@ -12856,6 +12907,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [noRecordsTemplate]="noRecordsTemplate"
                     [lockedColumnsCount]="lockedLeafColumns.length"
                     [totalColumnsCount]="leafColumns.length"
+                    [totalColumns]="columns"
                     [skip]="skip"
                     [trackBy]="trackBy"
                     [filterable]="filterable"
@@ -16490,7 +16542,8 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                                 [sortable]="sortable"
                                 [columnMenu]="columnMenuOptions"
                                 [columnMenuTemplate]="columnMenuTemplate"
-                                [totalColumnsCount]="leafColumns.length">
+                                [totalColumnsCount]="leafColumns.length"
+                                [totalColumns]="columnsContainer">
                             </thead>
                         </table>
                     </div>
@@ -16520,7 +16573,8 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                                 [columnMenu]="columnMenuOptions"
                                 [columnMenuTemplate]="columnMenuTemplate"
                                 [lockedColumnsCount]="lockedLeafColumns.length"
-                                [totalColumnsCount]="leafColumns.length">
+                                [totalColumnsCount]="leafColumns.length"
+                                [totalColumns]="columnsContainer">
                             </thead>
                         </table>
                         <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
@@ -16571,7 +16625,8 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                         [filter]="filter"
                         [filterable]="filterable"
                         [columnMenu]="columnMenuOptions"
-                        [columnMenuTemplate]="columnMenuTemplate">
+                        [columnMenuTemplate]="columnMenuTemplate"
+                        [totalColumns]="columnsContainer">
                     </thead>
                     <tbody kendoTreeListTableBody
                         [view]="view"
@@ -16620,7 +16675,7 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             </kendo-icon-wrapper>
             {{hintText}}
         </ng-template>
-    `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-treelist-toolbar", inputs: ["position", "navigable"] }, { type: ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { type: HeaderComponent, selector: "[kendoTreeListHeader]", inputs: ["totalColumnLevels", "columns", "scrollable", "filterable", "sort", "filter", "sortable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount"] }, { type: ListComponent, selector: "kendo-treelist-list", inputs: ["view", "total", "rowHeight", "take", "skip", "columns", "noRecordsTemplate", "filterable", "rowClass", "loading", "trackBy", "virtualColumns", "isVirtual", "expandIcons"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "rowClass"] }, { type: LoadingComponent, selector: "[kendoTreeListLoading]" }, { type: PagerComponent, selector: "kendo-treelist-pager", inputs: ["allCount", "total", "skip", "navigable", "pageSize", "options", "template"], outputs: ["pageChange"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoTreeListLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i32.DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { type: i32.DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }, { type: i1$3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: MarqueeDirective, selector: "[kendoTreeListSelectionMarquee]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-treelist-toolbar", inputs: ["position", "navigable"] }, { type: ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { type: HeaderComponent, selector: "[kendoTreeListHeader]", inputs: ["totalColumnLevels", "columns", "scrollable", "filterable", "sort", "filter", "sortable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "totalColumns"] }, { type: ListComponent, selector: "kendo-treelist-list", inputs: ["view", "total", "rowHeight", "take", "skip", "columns", "noRecordsTemplate", "filterable", "rowClass", "loading", "trackBy", "virtualColumns", "isVirtual", "expandIcons"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "totalColumns", "rowClass"] }, { type: LoadingComponent, selector: "[kendoTreeListLoading]" }, { type: PagerComponent, selector: "kendo-treelist-pager", inputs: ["allCount", "total", "skip", "navigable", "pageSize", "options", "template"], outputs: ["pageChange"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoTreeListLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i32.DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { type: i32.DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }, { type: i1$3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: MarqueeDirective, selector: "[kendoTreeListSelectionMarquee]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeListComponent, decorators: [{
             type: Component,
             args: [{
@@ -16917,7 +16972,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 [sortable]="sortable"
                                 [columnMenu]="columnMenuOptions"
                                 [columnMenuTemplate]="columnMenuTemplate"
-                                [totalColumnsCount]="leafColumns.length">
+                                [totalColumnsCount]="leafColumns.length"
+                                [totalColumns]="columnsContainer">
                             </thead>
                         </table>
                     </div>
@@ -16947,7 +17003,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 [columnMenu]="columnMenuOptions"
                                 [columnMenuTemplate]="columnMenuTemplate"
                                 [lockedColumnsCount]="lockedLeafColumns.length"
-                                [totalColumnsCount]="leafColumns.length">
+                                [totalColumnsCount]="leafColumns.length"
+                                [totalColumns]="columnsContainer">
                             </thead>
                         </table>
                         <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
@@ -16998,7 +17055,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         [filter]="filter"
                         [filterable]="filterable"
                         [columnMenu]="columnMenuOptions"
-                        [columnMenuTemplate]="columnMenuTemplate">
+                        [columnMenuTemplate]="columnMenuTemplate"
+                        [totalColumns]="columnsContainer">
                     </thead>
                     <tbody kendoTreeListTableBody
                         [view]="view"