@progress/kendo-angular-treelist 17.0.2-develop.8 → 17.0.2-develop.9

package/esm2022/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-treelist',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1731677297,
-    version: '17.0.2-develop.8',
+    publishDate: 1731923537,
+    version: '17.0.2-develop.9',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/rendering/header/select-all-checkbox.directive.mjs

@@ -2,31 +2,46 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ChangeDetectorRef, Directive, ElementRef, NgZone, Renderer2 } from '@angular/core';
+import { ChangeDetectorRef, Directive, ElementRef, Renderer2 } from '@angular/core';
 import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
 import { SelectionService } from '../../selection/selection.service';
 import { Subscription } from 'rxjs';
-import { SelectableDirective } from '../../selection/selectable.directive';
 import { isPresent } from '@progress/kendo-angular-common';
+import { ViewCollection } from '../../data/data.collection';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-inputs";
 import * as i2 from "../../selection/selection.service";
-import * as i3 from "../../selection/selectable.directive";
 /**
  * @hidden
  */
 export class TreeListSelectAllCheckboxDirective {
     sub = new Subscription();
     setState = true;
-    constructor(host, hostEl, selectionService, selectableDirective, cdr, zone, renderer) {
+    constructor(host, hostEl, selectionService, cdr, renderer) {
         this.sub = selectionService.changes.subscribe(eventData => {
             // omit setting the state when the selection change comes from clicking the checkbox, and clear the flag
             if (!this.setState) {
                 this.setState = true;
                 return;
             }
-            const allSelected = eventData.sender.view.total === selectableDirective.stateArray.length;
-            const noneSelected = selectableDirective.stateArray.length === 0;
+            const view = eventData.sender.view;
+            let total;
+            ViewCollection.loadView({
+                fields: Object.assign({}, view.fieldAccessor(), {
+                    hasFooter: false,
+                    pageable: false,
+                    isVirtual: false
+                }),
+                loaded: view.loaded,
+                selectionState: view.selectionState
+            }).subscribe(view => {
+                if (!view) {
+                    return;
+                }
+                total = view.data.length;
+            });
+            const allSelected = total === selectionService.state.length;
+            const noneSelected = selectionService.state.length === 0;
             const someSelected = !noneSelected && !allSelected;
             if (allSelected && host.checkedState !== true) {
                 host.checkedState = true;
@@ -37,7 +52,7 @@ export class TreeListSelectAllCheckboxDirective {
             else if (noneSelected && host.checkedState !== false) {
                 host.checkedState = false;
             }
-            cdr.markForCheck();
+            cdr.detectChanges();
         });
         // set flag for conditional checkbox state logic
         ['pointerdown', 'keydown'].forEach(eventName => this.sub.add(renderer.listen(hostEl.nativeElement, eventName, (e) => {
@@ -49,7 +64,7 @@ export class TreeListSelectAllCheckboxDirective {
     ngOnDestroy() {
         this.sub && this.sub.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListSelectAllCheckboxDirective, deps: [{ token: i1.CheckBoxComponent }, { token: i0.ElementRef }, { token: i2.SelectionService }, { token: i3.SelectableDirective }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListSelectAllCheckboxDirective, deps: [{ token: i1.CheckBoxComponent }, { token: i0.ElementRef }, { token: i2.SelectionService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TreeListSelectAllCheckboxDirective, isStandalone: true, selector: "[kendoTreeListSelectAllCheckbox]", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListSelectAllCheckboxDirective, decorators: [{
@@ -58,4 +73,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoTreeListSelectAllCheckbox]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.CheckBoxComponent }, { type: i0.ElementRef }, { type: i2.SelectionService }, { type: i3.SelectableDirective }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; } });
+        }], ctorParameters: function () { return [{ type: i1.CheckBoxComponent }, { type: i0.ElementRef }, { type: i2.SelectionService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; } });

package/esm2022/selection/selectable.directive.mjs

@@ -7,14 +7,17 @@ import { TreeListComponent } from '../treelist.component';
 import { getter } from '@progress/kendo-common';
 import { isString } from '../utils';
 import { createState, RowSelectionState } from './selection-state';
+import { SelectionService } from './selection.service';
 import * as i0 from "@angular/core";
 import * as i1 from "../treelist.component";
+import * as i2 from "./selection.service";
 const defaultColumnKeyGetter = (_column, columnIndex) => columnIndex;
 /**
  * A directive which controls the selection state. [See example](slug:selection_treelist).
  */
 export class SelectableDirective {
     treelist;
+    selectionService;
     /**
      * @hidden
      */
@@ -78,12 +81,6 @@ export class SelectableDirective {
             this._columnKeyGetter = value;
         }
     }
-    /**
-     * @hidden
-     */
-    get stateArray() {
-        return this.state.toArray();
-    }
     get keyGetter() {
         return this._keyGetter || this.treelist.idGetter;
     }
@@ -97,8 +94,9 @@ export class SelectableDirective {
     _columnKeyGetter;
     _keyGetter;
     _selectedItems = [];
-    constructor(treelist) {
+    constructor(treelist, selectionService) {
         this.treelist = treelist;
+        this.selectionService = selectionService;
         this.cellSelected = this.cellSelected.bind(this);
         this.rowSelected = this.rowSelected.bind(this);
         this.selectionChange = this.selectionChange.bind(this);
@@ -137,7 +135,7 @@ export class SelectableDirective {
         this.emitSelectedItemsChange();
     }
     emitSelectedItemsChange() {
-        this.lastChange = this.state.toArray();
+        this.selectionService.state = this.lastChange = this.state.toArray();
         this.selectedItemsChange.emit(this.lastChange);
     }
     subscribeSelection() {
@@ -176,7 +174,7 @@ export class SelectableDirective {
     get leafColumns() {
         return this.treelist.lockedLeafColumns.toArray().concat(this.treelist.nonLockedLeafColumns.toArray());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectableDirective, deps: [{ token: i1.TreeListComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectableDirective, deps: [{ token: i1.TreeListComponent }, { token: i2.SelectionService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SelectableDirective, isStandalone: true, selector: "[kendoTreeListSelectable]", inputs: { selectable: "selectable", selectedItems: "selectedItems", itemKey: "itemKey", columnKey: "columnKey" }, outputs: { selectedItemsChange: "selectedItemsChange" }, exportAs: ["kendoTreeListSelectable"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectableDirective, decorators: [{
@@ -186,7 +184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoTreeListSelectable]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.TreeListComponent }]; }, propDecorators: { selectable: [{
+        }], ctorParameters: function () { return [{ type: i1.TreeListComponent }, { type: i2.SelectionService }]; }, propDecorators: { selectable: [{
                 type: Input
             }], selectedItems: [{
                 type: Input

package/esm2022/selection/selection.service.mjs

@@ -18,6 +18,7 @@ const noop = () => false;
  */
 export class SelectionService {
     changes = new Subject();
+    state = [];
     set settings(value) {
         if (typeof value === 'object') {
             this._settings = value;

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

@@ -46,8 +46,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-treelist',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1731677297,
-    version: '17.0.2-develop.8',
+    publishDate: 1731923537,
+    version: '17.0.2-develop.9',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -4214,6 +4214,7 @@ const noop = () => false;
  */
 class SelectionService {
     changes = new Subject();
+    state = [];
     set settings(value) {
         if (typeof value === 'object') {
             this._settings = value;
@@ -13309,210 +13310,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-const defaultColumnKeyGetter = (_column, columnIndex) => columnIndex;
-/**
- * A directive which controls the selection state. [See example](slug:selection_treelist).
- */
-class SelectableDirective {
-    treelist;
-    /**
-     * @hidden
-     */
-    set selectable(value) {
-        if (typeof value === 'object') { // add method to normalize this
-            this._settings = value;
-        }
-        else {
-            this._settings = {
-                enabled: value
-            };
-        }
-        this.state = createState(this._settings);
-        this.state.fromArray(this._selectedItems || []);
-        if (this._settings.enabled !== false) {
-            this.treelist.isSelected = this._settings.mode === 'cell' ? this.cellSelected : this.rowSelected;
-            this.subscribeSelection();
-        }
-        else {
-            this.treelist.isSelected = () => false;
-            this.unsubscribeSelection();
-        }
-        this.treelist.updateView();
-    }
-    /**
-     * Specifies the selected items.
-     */
-    set selectedItems(value) {
-        if (!value) {
-            this.state.clear();
-        }
-        else if (value !== this.lastChange) {
-            this.state.fromArray(value);
-            this.treelist.updateView();
-        }
-        this._selectedItems = value;
-    }
-    /**
-     * Fires when the selected items are changed.
-     */
-    selectedItemsChange = new EventEmitter();
-    /**
-     * The field name or a function that specify the dataItems key.
-     */
-    set itemKey(value) {
-        if (isString(value)) {
-            this._keyGetter = getter(String(value));
-        }
-        else {
-            this._keyGetter = value;
-        }
-    }
-    /**
-     * The field name or a function that specify the columns key.
-     */
-    set columnKey(value) {
-        if (isString(value)) {
-            this._columnKeyGetter = getter(String(value));
-        }
-        else if (value) {
-            this._columnKeyGetter = value;
-        }
-    }
-    /**
-     * @hidden
-     */
-    get stateArray() {
-        return this.state.toArray();
-    }
-    get keyGetter() {
-        return this._keyGetter || this.treelist.idGetter;
-    }
-    get columnKeyGetter() {
-        return this._columnKeyGetter || defaultColumnKeyGetter;
-    }
-    subscriptions;
-    state = new RowSelectionState();
-    _settings;
-    lastChange;
-    _columnKeyGetter;
-    _keyGetter;
-    _selectedItems = [];
-    constructor(treelist) {
-        this.treelist = treelist;
-        this.cellSelected = this.cellSelected.bind(this);
-        this.rowSelected = this.rowSelected.bind(this);
-        this.selectionChange = this.selectionChange.bind(this);
-        this.updateColumnIndices = this.updateColumnIndices.bind(this);
-        this.treelist.selectable = this.selectable = true;
-    }
-    ngOnDestroy() {
-        this.unsubscribeSelection();
-    }
-    /**
-     * @hidden
-     */
-    cellSelected(dataItem, column, columnIndex) {
-        return this.state.has(this.keyGetter(dataItem), this.columnKeyGetter(column, columnIndex));
-    }
-    /**
-     * @hidden
-     */
-    rowSelected(dataItem) {
-        return this.state.has(this.keyGetter(dataItem));
-    }
-    selectionChange({ action, items }) {
-        if (action === 'select' || action === 'add') {
-            if (action === 'select') {
-                this.state.clear();
-            }
-            items.forEach(item => {
-                this.state.add(this.keyGetter(item.dataItem), this.columnKeyGetter(item.column, item.columnIndex));
-            });
-        }
-        else {
-            items.forEach(item => {
-                this.state.remove(this.keyGetter(item.dataItem), this.columnKeyGetter(item.column, item.columnIndex));
-            });
-        }
-        this.emitSelectedItemsChange();
-    }
-    emitSelectedItemsChange() {
-        this.lastChange = this.state.toArray();
-        this.selectedItemsChange.emit(this.lastChange);
-    }
-    subscribeSelection() {
-        this.unsubscribeSelection();
-        this.subscriptions = this.treelist.selectionChange.subscribe(this.selectionChange);
-        if (this._settings.mode === 'cell') {
-            this.subscriptions.add(this.treelist.columnOrderChange.subscribe(this.updateColumnIndices));
-            this.subscriptions.add(this.treelist.columnLockedChange.subscribe(this.updateColumnIndices));
-        }
-    }
-    unsubscribeSelection() {
-        if (this.subscriptions) {
-            this.subscriptions.unsubscribe();
-            this.subscriptions = null;
-        }
-    }
-    updateColumnIndices() {
-        if (!this._columnKeyGetter) {
-            const changes = new Map();
-            const currentIndices = [];
-            this.leafColumns.forEach((column) => {
-                currentIndices.push(column);
-            });
-            this.treelist.columnsContainer.refresh();
-            const leafColumns = this.leafColumns;
-            currentIndices.forEach((column, index) => {
-                if (column !== leafColumns[index]) {
-                    changes.set(index, leafColumns.indexOf(column));
-                }
-            });
-            if (changes.size && this.state.updateColumKeys(changes)) {
-                this.emitSelectedItemsChange();
-            }
-        }
-    }
-    get leafColumns() {
-        return this.treelist.lockedLeafColumns.toArray().concat(this.treelist.nonLockedLeafColumns.toArray());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectableDirective, deps: [{ token: TreeListComponent }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SelectableDirective, isStandalone: true, selector: "[kendoTreeListSelectable]", inputs: { selectable: "selectable", selectedItems: "selectedItems", itemKey: "itemKey", columnKey: "columnKey" }, outputs: { selectedItemsChange: "selectedItemsChange" }, exportAs: ["kendoTreeListSelectable"], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    exportAs: 'kendoTreeListSelectable',
-                    selector: '[kendoTreeListSelectable]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: TreeListComponent }]; }, propDecorators: { selectable: [{
-                type: Input
-            }], selectedItems: [{
-                type: Input
-            }], selectedItemsChange: [{
-                type: Output
-            }], itemKey: [{
-                type: Input
-            }], columnKey: [{
-                type: Input
-            }] } });
-
 /**
  * @hidden
  */
 class TreeListSelectAllCheckboxDirective {
     sub = new Subscription();
     setState = true;
-    constructor(host, hostEl, selectionService, selectableDirective, cdr, zone, renderer) {
+    constructor(host, hostEl, selectionService, cdr, renderer) {
         this.sub = selectionService.changes.subscribe(eventData => {
             // omit setting the state when the selection change comes from clicking the checkbox, and clear the flag
             if (!this.setState) {
                 this.setState = true;
                 return;
             }
-            const allSelected = eventData.sender.view.total === selectableDirective.stateArray.length;
-            const noneSelected = selectableDirective.stateArray.length === 0;
+            const view = eventData.sender.view;
+            let total;
+            ViewCollection.loadView({
+                fields: Object.assign({}, view.fieldAccessor(), {
+                    hasFooter: false,
+                    pageable: false,
+                    isVirtual: false
+                }),
+                loaded: view.loaded,
+                selectionState: view.selectionState
+            }).subscribe(view => {
+                if (!view) {
+                    return;
+                }
+                total = view.data.length;
+            });
+            const allSelected = total === selectionService.state.length;
+            const noneSelected = selectionService.state.length === 0;
             const someSelected = !noneSelected && !allSelected;
             if (allSelected && host.checkedState !== true) {
                 host.checkedState = true;
@@ -13523,7 +13351,7 @@ class TreeListSelectAllCheckboxDirective {
             else if (noneSelected && host.checkedState !== false) {
                 host.checkedState = false;
             }
-            cdr.markForCheck();
+            cdr.detectChanges();
         });
         // set flag for conditional checkbox state logic
         ['pointerdown', 'keydown'].forEach(eventName => this.sub.add(renderer.listen(hostEl.nativeElement, eventName, (e) => {
@@ -13535,7 +13363,7 @@ class TreeListSelectAllCheckboxDirective {
     ngOnDestroy() {
         this.sub && this.sub.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListSelectAllCheckboxDirective, deps: [{ token: i1$5.CheckBoxComponent }, { token: i0.ElementRef }, { token: SelectionService }, { token: SelectableDirective }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListSelectAllCheckboxDirective, deps: [{ token: i1$5.CheckBoxComponent }, { token: i0.ElementRef }, { token: SelectionService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TreeListSelectAllCheckboxDirective, isStandalone: true, selector: "[kendoTreeListSelectAllCheckbox]", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListSelectAllCheckboxDirective, decorators: [{
@@ -13544,7 +13372,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoTreeListSelectAllCheckbox]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1$5.CheckBoxComponent }, { type: i0.ElementRef }, { type: SelectionService }, { type: SelectableDirective }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; } });
+        }], ctorParameters: function () { return [{ type: i1$5.CheckBoxComponent }, { type: i0.ElementRef }, { type: SelectionService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; } });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const mergeObjects = (...args) => Object.assign.apply(null, [{}].concat(args));
@@ -18750,6 +18578,191 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+const defaultColumnKeyGetter = (_column, columnIndex) => columnIndex;
+/**
+ * A directive which controls the selection state. [See example](slug:selection_treelist).
+ */
+class SelectableDirective {
+    treelist;
+    selectionService;
+    /**
+     * @hidden
+     */
+    set selectable(value) {
+        if (typeof value === 'object') { // add method to normalize this
+            this._settings = value;
+        }
+        else {
+            this._settings = {
+                enabled: value
+            };
+        }
+        this.state = createState(this._settings);
+        this.state.fromArray(this._selectedItems || []);
+        if (this._settings.enabled !== false) {
+            this.treelist.isSelected = this._settings.mode === 'cell' ? this.cellSelected : this.rowSelected;
+            this.subscribeSelection();
+        }
+        else {
+            this.treelist.isSelected = () => false;
+            this.unsubscribeSelection();
+        }
+        this.treelist.updateView();
+    }
+    /**
+     * Specifies the selected items.
+     */
+    set selectedItems(value) {
+        if (!value) {
+            this.state.clear();
+        }
+        else if (value !== this.lastChange) {
+            this.state.fromArray(value);
+            this.treelist.updateView();
+        }
+        this._selectedItems = value;
+    }
+    /**
+     * Fires when the selected items are changed.
+     */
+    selectedItemsChange = new EventEmitter();
+    /**
+     * The field name or a function that specify the dataItems key.
+     */
+    set itemKey(value) {
+        if (isString(value)) {
+            this._keyGetter = getter(String(value));
+        }
+        else {
+            this._keyGetter = value;
+        }
+    }
+    /**
+     * The field name or a function that specify the columns key.
+     */
+    set columnKey(value) {
+        if (isString(value)) {
+            this._columnKeyGetter = getter(String(value));
+        }
+        else if (value) {
+            this._columnKeyGetter = value;
+        }
+    }
+    get keyGetter() {
+        return this._keyGetter || this.treelist.idGetter;
+    }
+    get columnKeyGetter() {
+        return this._columnKeyGetter || defaultColumnKeyGetter;
+    }
+    subscriptions;
+    state = new RowSelectionState();
+    _settings;
+    lastChange;
+    _columnKeyGetter;
+    _keyGetter;
+    _selectedItems = [];
+    constructor(treelist, selectionService) {
+        this.treelist = treelist;
+        this.selectionService = selectionService;
+        this.cellSelected = this.cellSelected.bind(this);
+        this.rowSelected = this.rowSelected.bind(this);
+        this.selectionChange = this.selectionChange.bind(this);
+        this.updateColumnIndices = this.updateColumnIndices.bind(this);
+        this.treelist.selectable = this.selectable = true;
+    }
+    ngOnDestroy() {
+        this.unsubscribeSelection();
+    }
+    /**
+     * @hidden
+     */
+    cellSelected(dataItem, column, columnIndex) {
+        return this.state.has(this.keyGetter(dataItem), this.columnKeyGetter(column, columnIndex));
+    }
+    /**
+     * @hidden
+     */
+    rowSelected(dataItem) {
+        return this.state.has(this.keyGetter(dataItem));
+    }
+    selectionChange({ action, items }) {
+        if (action === 'select' || action === 'add') {
+            if (action === 'select') {
+                this.state.clear();
+            }
+            items.forEach(item => {
+                this.state.add(this.keyGetter(item.dataItem), this.columnKeyGetter(item.column, item.columnIndex));
+            });
+        }
+        else {
+            items.forEach(item => {
+                this.state.remove(this.keyGetter(item.dataItem), this.columnKeyGetter(item.column, item.columnIndex));
+            });
+        }
+        this.emitSelectedItemsChange();
+    }
+    emitSelectedItemsChange() {
+        this.selectionService.state = this.lastChange = this.state.toArray();
+        this.selectedItemsChange.emit(this.lastChange);
+    }
+    subscribeSelection() {
+        this.unsubscribeSelection();
+        this.subscriptions = this.treelist.selectionChange.subscribe(this.selectionChange);
+        if (this._settings.mode === 'cell') {
+            this.subscriptions.add(this.treelist.columnOrderChange.subscribe(this.updateColumnIndices));
+            this.subscriptions.add(this.treelist.columnLockedChange.subscribe(this.updateColumnIndices));
+        }
+    }
+    unsubscribeSelection() {
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
+            this.subscriptions = null;
+        }
+    }
+    updateColumnIndices() {
+        if (!this._columnKeyGetter) {
+            const changes = new Map();
+            const currentIndices = [];
+            this.leafColumns.forEach((column) => {
+                currentIndices.push(column);
+            });
+            this.treelist.columnsContainer.refresh();
+            const leafColumns = this.leafColumns;
+            currentIndices.forEach((column, index) => {
+                if (column !== leafColumns[index]) {
+                    changes.set(index, leafColumns.indexOf(column));
+                }
+            });
+            if (changes.size && this.state.updateColumKeys(changes)) {
+                this.emitSelectedItemsChange();
+            }
+        }
+    }
+    get leafColumns() {
+        return this.treelist.lockedLeafColumns.toArray().concat(this.treelist.nonLockedLeafColumns.toArray());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectableDirective, deps: [{ token: TreeListComponent }, { token: SelectionService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SelectableDirective, isStandalone: true, selector: "[kendoTreeListSelectable]", inputs: { selectable: "selectable", selectedItems: "selectedItems", itemKey: "itemKey", columnKey: "columnKey" }, outputs: { selectedItemsChange: "selectedItemsChange" }, exportAs: ["kendoTreeListSelectable"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'kendoTreeListSelectable',
+                    selector: '[kendoTreeListSelectable]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: TreeListComponent }, { type: SelectionService }]; }, propDecorators: { selectable: [{
+                type: Input
+            }], selectedItems: [{
+                type: Input
+            }], selectedItemsChange: [{
+                type: Output
+            }], itemKey: [{
+                type: Input
+            }], columnKey: [{
+                type: Input
+            }] } });
+
 /**
  * Represents the Kendo UI TreeListSpacer component for Angular.
  * Used to give additional white space between the Pager inner elements,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-treelist",
-  "version": "17.0.2-develop.8",
+  "version": "17.0.2-develop.9",
   "description": "Kendo UI TreeList for Angular - Display hierarchical data in an Angular tree grid view that supports sorting, filtering, paging, and much more.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -31,26 +31,26 @@
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-drawing": "^1.21.0",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "17.0.2-develop.8",
-    "@progress/kendo-angular-common": "17.0.2-develop.8",
-    "@progress/kendo-angular-dateinputs": "17.0.2-develop.8",
-    "@progress/kendo-angular-dropdowns": "17.0.2-develop.8",
-    "@progress/kendo-angular-excel-export": "17.0.2-develop.8",
-    "@progress/kendo-angular-icons": "17.0.2-develop.8",
-    "@progress/kendo-angular-inputs": "17.0.2-develop.8",
-    "@progress/kendo-angular-intl": "17.0.2-develop.8",
-    "@progress/kendo-angular-l10n": "17.0.2-develop.8",
-    "@progress/kendo-angular-label": "17.0.2-develop.8",
-    "@progress/kendo-angular-pager": "17.0.2-develop.8",
-    "@progress/kendo-angular-pdf-export": "17.0.2-develop.8",
-    "@progress/kendo-angular-popup": "17.0.2-develop.8",
-    "@progress/kendo-angular-toolbar": "17.0.2-develop.8",
-    "@progress/kendo-angular-utils": "17.0.2-develop.8",
+    "@progress/kendo-angular-buttons": "17.0.2-develop.9",
+    "@progress/kendo-angular-common": "17.0.2-develop.9",
+    "@progress/kendo-angular-dateinputs": "17.0.2-develop.9",
+    "@progress/kendo-angular-dropdowns": "17.0.2-develop.9",
+    "@progress/kendo-angular-excel-export": "17.0.2-develop.9",
+    "@progress/kendo-angular-icons": "17.0.2-develop.9",
+    "@progress/kendo-angular-inputs": "17.0.2-develop.9",
+    "@progress/kendo-angular-intl": "17.0.2-develop.9",
+    "@progress/kendo-angular-l10n": "17.0.2-develop.9",
+    "@progress/kendo-angular-label": "17.0.2-develop.9",
+    "@progress/kendo-angular-pager": "17.0.2-develop.9",
+    "@progress/kendo-angular-pdf-export": "17.0.2-develop.9",
+    "@progress/kendo-angular-popup": "17.0.2-develop.9",
+    "@progress/kendo-angular-toolbar": "17.0.2-develop.9",
+    "@progress/kendo-angular-utils": "17.0.2-develop.9",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "17.0.2-develop.8",
+    "@progress/kendo-angular-schematics": "17.0.2-develop.9",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-file-saver": "^1.0.0"
   },

package/rendering/header/select-all-checkbox.directive.d.ts

@@ -2,10 +2,9 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ChangeDetectorRef, ElementRef, NgZone, OnDestroy, Renderer2 } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, OnDestroy, Renderer2 } from '@angular/core';
 import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
 import { SelectionService } from '../../selection/selection.service';
-import { SelectableDirective } from '../../selection/selectable.directive';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -13,7 +12,7 @@ import * as i0 from "@angular/core";
 export declare class TreeListSelectAllCheckboxDirective implements OnDestroy {
     private sub;
     private setState;
-    constructor(host: CheckBoxComponent, hostEl: ElementRef, selectionService: SelectionService, selectableDirective: SelectableDirective, cdr: ChangeDetectorRef, zone: NgZone, renderer: Renderer2);
+    constructor(host: CheckBoxComponent, hostEl: ElementRef, selectionService: SelectionService, cdr: ChangeDetectorRef, renderer: Renderer2);
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TreeListSelectAllCheckboxDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<TreeListSelectAllCheckboxDirective, "[kendoTreeListSelectAllCheckbox]", never, {}, {}, never, never, true, never>;

package/schematics/ngAdd/index.js

@@ -4,13 +4,13 @@ const schematics_1 = require("@angular-devkit/schematics");
 function default_1(options) {
     const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'TreeListModule', package: 'treelist', peerDependencies: {
             // peer dep of the dropdowns
-            '@progress/kendo-angular-treeview': '17.0.2-develop.8',
+            '@progress/kendo-angular-treeview': '17.0.2-develop.9',
             // peer dependency of kendo-angular-inputs
-            '@progress/kendo-angular-dialog': '17.0.2-develop.8',
+            '@progress/kendo-angular-dialog': '17.0.2-develop.9',
             // peer dependency of kendo-angular-icons
             '@progress/kendo-svg-icons': '^4.0.0',
             // peer dependency of kendo-angular-dateinputs
-            '@progress/kendo-angular-navigation': '17.0.2-develop.8',
+            '@progress/kendo-angular-navigation': '17.0.2-develop.9',
         } });
     return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
 }

package/selection/selectable.directive.d.ts

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { OnDestroy, EventEmitter } from '@angular/core';
 import { TreeListComponent } from '../treelist.component';
+import { SelectionService } from './selection.service';
 import * as i0 from "@angular/core";
 /**
  * The [`kendoTreeListSelectable`](slug:api_treelist_selectabledirective) state items.
@@ -23,6 +24,7 @@ export interface SelectionItem {
  */
 export declare class SelectableDirective implements OnDestroy {
     private treelist;
+    private selectionService;
     /**
      * @hidden
      */
@@ -43,10 +45,6 @@ export declare class SelectableDirective implements OnDestroy {
      * The field name or a function that specify the columns key.
      */
     set columnKey(value: string | ((column: any, columnIndex: number) => any));
-    /**
-     * @hidden
-     */
-    get stateArray(): any[];
     protected get keyGetter(): any;
     protected get columnKeyGetter(): any;
     protected subscriptions: any;
@@ -56,7 +54,7 @@ export declare class SelectableDirective implements OnDestroy {
     protected _columnKeyGetter: any;
     protected _keyGetter: any;
     private _selectedItems;
-    constructor(treelist: TreeListComponent);
+    constructor(treelist: TreeListComponent, selectionService: SelectionService);
     ngOnDestroy(): void;
     /**
      * @hidden

package/selection/selection.service.d.ts

@@ -14,6 +14,7 @@ export declare const defaultSelected: (_item: any) => boolean;
  */
 export declare class SelectionService {
     changes: Subject<SelectionChangeEvent>;
+    state: any[];
     set settings(value: any);
     get settings(): any;
     get enableMarquee(): boolean;