@progress/kendo-angular-treelist 16.9.0-develop.1 → 16.9.0-develop.3

package/column-menu/column-menu.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { TemplateRef, OnChanges, OnDestroy } from '@angular/core';
+import { TemplateRef, OnChanges, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { SVGIcon } from '@progress/kendo-svg-icons';
 import { SinglePopupService } from '../common/single-popup.service';
@@ -16,6 +16,7 @@ export declare class ColumnMenuComponent implements OnChanges, OnDestroy {
     protected popupService: SinglePopupService;
     localization: LocalizationService;
     service: ColumnMenuService;
+    private cdr;
     /**
      * @hidden
      */
@@ -57,7 +58,7 @@ export declare class ColumnMenuComponent implements OnChanges, OnDestroy {
     moreVerticalIcon: SVGIcon;
     private popupRef;
     private closeSubscription;
-    constructor(popupService: SinglePopupService, localization: LocalizationService, service: ColumnMenuService);
+    constructor(popupService: SinglePopupService, localization: LocalizationService, service: ColumnMenuService, cdr: ChangeDetectorRef);
     /**
      * @hidden
      */

package/esm2020/column-menu/column-chooser.component.mjs

@@ -102,6 +102,7 @@ export class ColumnChooserComponent {
         if (this.popupRef) {
             this.popupRef.close();
             this.popupRef = null;
+            this.changeDetector.markForCheck();
         }
         this.detachClose();
     }

package/esm2020/column-menu/column-menu.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input, TemplateRef, HostBinding } from '@angular/core';
+import { Component, Input, TemplateRef, HostBinding, ChangeDetectorRef } from '@angular/core';
 import { NgClass, NgTemplateOutlet, NgIf } from '@angular/common';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { moreVerticalIcon } from '@progress/kendo-svg-icons';
@@ -24,10 +24,11 @@ const POPUP_CLASSES = 'k-grid-columnmenu-popup k-column-menu';
  * Represents the [column menu]({% slug columnmenu_treelist %}) component of the TreeList.
  */
 export class ColumnMenuComponent {
-    constructor(popupService, localization, service) {
+    constructor(popupService, localization, service, cdr) {
         this.popupService = popupService;
         this.localization = localization;
         this.service = service;
+        this.cdr = cdr;
         /**
          * @hidden
          */
@@ -107,6 +108,7 @@ export class ColumnMenuComponent {
     close() {
         this.popupService.destroy();
         this.popupRef = null;
+        this.cdr.markForCheck();
     }
     /**
      * @hidden
@@ -123,7 +125,7 @@ export class ColumnMenuComponent {
         this.expandedColumns = false;
     }
 }
-ColumnMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.LocalizationService }, { token: i3.ColumnMenuService }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.LocalizationService }, { token: i3.ColumnMenuService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColumnMenuComponent, isStandalone: true, selector: "kendo-treelist-column-menu", inputs: { standalone: "standalone", column: "column", settings: "settings", sort: "sort", filter: "filter", sortable: "sortable", columnMenuTemplate: "columnMenuTemplate" }, host: { properties: { "class.k-grid-column-menu-standalone": "this.standalone" } }, providers: [ColumnMenuService], usesOnChanges: true, ngImport: i0, template: `
         <a #anchor
             class="k-grid-column-menu k-grid-header-menu"
@@ -192,7 +194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     standalone: true,
                     imports: [NgClass, IconWrapperComponent, NgTemplateOutlet, NgIf, ColumnMenuSortComponent, ColumnMenuLockComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.SinglePopupService }, { type: i2.LocalizationService }, { type: i3.ColumnMenuService }]; }, propDecorators: { standalone: [{
+        }], ctorParameters: function () { return [{ type: i1.SinglePopupService }, { type: i2.LocalizationService }, { type: i3.ColumnMenuService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { standalone: [{
                 type: HostBinding,
                 args: ['class.k-grid-column-menu-standalone']
             }, {

package/esm2020/package-metadata.mjs

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

package/esm2020/rendering/list.component.mjs

@@ -19,7 +19,7 @@ import { SuspendService } from '../scrolling/suspend.service';
 import { expandColumns, sumColumnWidths } from "../columns/column-common";
 import { ScrollSyncService } from "../scrolling/scroll-sync.service";
 import { ResizeService } from "../layout/resize.service";
-import { ResizeSensorComponent } from "@progress/kendo-angular-common";
+import { EventsOutsideAngularDirective, ResizeSensorComponent } from "@progress/kendo-angular-common";
 import { BrowserSupportService } from "../layout/browser-support.service";
 import { EditService } from '../editing/edit.service';
 import { NavigationService } from '../navigation/navigation.service';
@@ -81,10 +81,10 @@ const wheelDeltaY = (e) => {
     }
     return 0;
 };
-const preventLockedScroll = el => event => {
-    const delta = wheelDeltaY(event);
-    const scrollTop = el.scrollTop;
-    const allowScroll = (scrollTop === 0 && 0 < delta) || (el.scrollHeight <= el.offsetHeight + scrollTop && delta < 0);
+const preventLockedScroll = (args, element) => {
+    const delta = wheelDeltaY(args);
+    const scrollTop = element.scrollTop;
+    const allowScroll = (scrollTop === 0 && 0 < delta) || (element.scrollHeight <= element.offsetHeight + scrollTop && delta < 0);
     if (!allowScroll) {
         event.preventDefault();
     }
@@ -204,6 +204,13 @@ export class ListComponent {
         this.attachContainerScroll();
         this.initResizeService();
     }
+    ngAfterViewChecked() {
+        const isLocked = this.isLocked;
+        if (isLocked && !this.hasLockedContainer) {
+            this.syncRowsHeight();
+        }
+        this.hasLockedContainer = isLocked;
+    }
     syncRowsHeight() {
         if (this.lockedContainer) {
             syncRowsHeight(this.lockedTable.nativeElement, this.table.nativeElement);
@@ -228,6 +235,29 @@ export class ListComponent {
             this.ngZone.runOutsideAngular(this.createScroller.bind(this));
         }
     }
+    lockedScroll() {
+        if (!this.suspendService.scroll) {
+            const lockedScrollTop = this.lockedContainer.nativeElement.scrollTop;
+            if (lockedScrollTop !== this.containerScrollTop) {
+                this.container.nativeElement.scrollTop = this.containerScrollTop = lockedScrollTop;
+            }
+        }
+    }
+    lockedMousewheel(args) {
+        if (!args.ctrlKey) {
+            preventLockedScroll(args, this.container.nativeElement);
+            const scrollDelta = wheelDeltaY(args);
+            this.container.nativeElement.scrollTop -= scrollDelta;
+        }
+    }
+    lockedKeydown(args) {
+        if (args.keyCode === Keys.PageDown || args.keyCode === Keys.PageUp) {
+            const dir = args.keyCode === Keys.PageDown ? 1 : -1;
+            const element = this.container.nativeElement;
+            element.scrollTop += element.offsetHeight * dir * 0.8;
+            args.preventDefault();
+        }
+    }
     attachContainerScroll() {
         if (isUniversal()) {
             return;
@@ -252,26 +282,6 @@ export class ListComponent {
             })).subscribe(this.dispatcher));
         });
         this.scrollSyncService.registerEmitter(this.container.nativeElement, "body");
-        if (this.lockedContainer) {
-            this.ngZone.runOutsideAngular(() => {
-                this.subscriptions.add(merge(fromEvent(this.lockedContainer.nativeElement, 'mousewheel'), fromEvent(this.lockedContainer.nativeElement, 'DOMMouseScroll')).pipe(filter((event) => !event.ctrlKey), tap(preventLockedScroll(this.container.nativeElement)), map(wheelDeltaY))
-                    .subscribe(x => this.container.nativeElement.scrollTop -= x));
-                this.subscriptions.add(fromEvent(this.lockedContainer.nativeElement, 'scroll').pipe(filter(() => !this.suspendService.scroll))
-                    .subscribe(() => {
-                    const lockedScrollTop = this.lockedContainer.nativeElement.scrollTop;
-                    if (lockedScrollTop !== this.containerScrollTop) {
-                        this.container.nativeElement.scrollTop = this.containerScrollTop = lockedScrollTop;
-                    }
-                }));
-                this.subscriptions.add(fromEvent(this.lockedContainer.nativeElement, 'keydown').pipe(filter((event) => event.keyCode === Keys.PageDown || event.keyCode === Keys.PageUp)).subscribe((event) => {
-                    const dir = event.keyCode === Keys.PageDown ? 1 : -1;
-                    const element = this.container.nativeElement;
-                    element.scrollTop += element.offsetHeight * dir * 0.8;
-                    event.preventDefault();
-                }));
-            });
-            this.syncRowsHeight();
-        }
     }
     createScroller() {
         this.cleanupScroller();
@@ -515,7 +525,14 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
         }
     ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true, static: true }, { propertyName: "lockedContainer", first: true, predicate: ["lockedContainer"], descendants: true }, { propertyName: "lockedTable", first: true, predicate: ["lockedTable"], descendants: true }, { propertyName: "resizeSensors", predicate: ResizeSensorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div #lockedContainer class="k-grid-content-locked" role="presentation"
-        *ngIf="isLocked" [style.width.px]="lockedWidth">
+        *ngIf="isLocked" [style.width.px]="lockedWidth"
+        [kendoEventsOutsideAngular]="{
+            keydown: lockedKeydown,
+            scroll: lockedScroll,
+            mousewheel: lockedMousewheel,
+            DOMMouseScroll: lockedMousewheel
+        }"
+        [scope]="this">
         <div role="presentation" class="k-grid-table-wrap">
             <table
                 kendoTreeListResizableTable
@@ -596,7 +613,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
     </div>
     <div *ngIf="loading" kendoTreeListLoading>
     </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TableDirective, selector: "[kendoTreeListResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { kind: "component", type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "totalColumns", "rowClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }, { kind: "component", type: LoadingComponent, selector: "[kendoTreeListLoading]" }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: TableDirective, selector: "[kendoTreeListResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { kind: "component", type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "totalColumns", "rowClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }, { kind: "component", type: LoadingComponent, selector: "[kendoTreeListLoading]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{
@@ -609,7 +626,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     selector: 'kendo-treelist-list',
                     template: `
     <div #lockedContainer class="k-grid-content-locked" role="presentation"
-        *ngIf="isLocked" [style.width.px]="lockedWidth">
+        *ngIf="isLocked" [style.width.px]="lockedWidth"
+        [kendoEventsOutsideAngular]="{
+            keydown: lockedKeydown,
+            scroll: lockedScroll,
+            mousewheel: lockedMousewheel,
+            DOMMouseScroll: lockedMousewheel
+        }"
+        [scope]="this">
         <div role="presentation" class="k-grid-table-wrap">
             <table
                 kendoTreeListResizableTable
@@ -692,7 +716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
     </div>
     `,
                     standalone: true,
-                    imports: [NgIf, TableDirective, ColGroupComponent, TableBodyComponent, ResizeSensorComponent, ResizableContainerDirective, LoadingComponent]
+                    imports: [NgIf, EventsOutsideAngularDirective, TableDirective, ColGroupComponent, TableBodyComponent, ResizeSensorComponent, ResizableContainerDirective, LoadingComponent]
                 }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,

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

@@ -47,8 +47,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-treelist',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1724748547,
-    version: '16.9.0-develop.1',
+    publishDate: 1724759402,
+    version: '16.9.0-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -8668,10 +8668,10 @@ const wheelDeltaY = (e) => {
     }
     return 0;
 };
-const preventLockedScroll = el => event => {
-    const delta = wheelDeltaY(event);
-    const scrollTop = el.scrollTop;
-    const allowScroll = (scrollTop === 0 && 0 < delta) || (el.scrollHeight <= el.offsetHeight + scrollTop && delta < 0);
+const preventLockedScroll = (args, element) => {
+    const delta = wheelDeltaY(args);
+    const scrollTop = element.scrollTop;
+    const allowScroll = (scrollTop === 0 && 0 < delta) || (element.scrollHeight <= element.offsetHeight + scrollTop && delta < 0);
     if (!allowScroll) {
         event.preventDefault();
     }
@@ -8791,6 +8791,13 @@ class ListComponent {
         this.attachContainerScroll();
         this.initResizeService();
     }
+    ngAfterViewChecked() {
+        const isLocked = this.isLocked;
+        if (isLocked && !this.hasLockedContainer) {
+            this.syncRowsHeight();
+        }
+        this.hasLockedContainer = isLocked;
+    }
     syncRowsHeight() {
         if (this.lockedContainer) {
             syncRowsHeight(this.lockedTable.nativeElement, this.table.nativeElement);
@@ -8815,6 +8822,29 @@ class ListComponent {
             this.ngZone.runOutsideAngular(this.createScroller.bind(this));
         }
     }
+    lockedScroll() {
+        if (!this.suspendService.scroll) {
+            const lockedScrollTop = this.lockedContainer.nativeElement.scrollTop;
+            if (lockedScrollTop !== this.containerScrollTop) {
+                this.container.nativeElement.scrollTop = this.containerScrollTop = lockedScrollTop;
+            }
+        }
+    }
+    lockedMousewheel(args) {
+        if (!args.ctrlKey) {
+            preventLockedScroll(args, this.container.nativeElement);
+            const scrollDelta = wheelDeltaY(args);
+            this.container.nativeElement.scrollTop -= scrollDelta;
+        }
+    }
+    lockedKeydown(args) {
+        if (args.keyCode === Keys.PageDown || args.keyCode === Keys.PageUp) {
+            const dir = args.keyCode === Keys.PageDown ? 1 : -1;
+            const element = this.container.nativeElement;
+            element.scrollTop += element.offsetHeight * dir * 0.8;
+            args.preventDefault();
+        }
+    }
     attachContainerScroll() {
         if (isUniversal()) {
             return;
@@ -8839,26 +8869,6 @@ class ListComponent {
             })).subscribe(this.dispatcher));
         });
         this.scrollSyncService.registerEmitter(this.container.nativeElement, "body");
-        if (this.lockedContainer) {
-            this.ngZone.runOutsideAngular(() => {
-                this.subscriptions.add(merge(fromEvent(this.lockedContainer.nativeElement, 'mousewheel'), fromEvent(this.lockedContainer.nativeElement, 'DOMMouseScroll')).pipe(filter((event) => !event.ctrlKey), tap(preventLockedScroll(this.container.nativeElement)), map(wheelDeltaY))
-                    .subscribe(x => this.container.nativeElement.scrollTop -= x));
-                this.subscriptions.add(fromEvent(this.lockedContainer.nativeElement, 'scroll').pipe(filter(() => !this.suspendService.scroll))
-                    .subscribe(() => {
-                    const lockedScrollTop = this.lockedContainer.nativeElement.scrollTop;
-                    if (lockedScrollTop !== this.containerScrollTop) {
-                        this.container.nativeElement.scrollTop = this.containerScrollTop = lockedScrollTop;
-                    }
-                }));
-                this.subscriptions.add(fromEvent(this.lockedContainer.nativeElement, 'keydown').pipe(filter((event) => event.keyCode === Keys.PageDown || event.keyCode === Keys.PageUp)).subscribe((event) => {
-                    const dir = event.keyCode === Keys.PageDown ? 1 : -1;
-                    const element = this.container.nativeElement;
-                    element.scrollTop += element.offsetHeight * dir * 0.8;
-                    event.preventDefault();
-                }));
-            });
-            this.syncRowsHeight();
-        }
     }
     createScroller() {
         this.cleanupScroller();
@@ -9102,7 +9112,14 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
         }
     ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true, static: true }, { propertyName: "lockedContainer", first: true, predicate: ["lockedContainer"], descendants: true }, { propertyName: "lockedTable", first: true, predicate: ["lockedTable"], descendants: true }, { propertyName: "resizeSensors", predicate: ResizeSensorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div #lockedContainer class="k-grid-content-locked" role="presentation"
-        *ngIf="isLocked" [style.width.px]="lockedWidth">
+        *ngIf="isLocked" [style.width.px]="lockedWidth"
+        [kendoEventsOutsideAngular]="{
+            keydown: lockedKeydown,
+            scroll: lockedScroll,
+            mousewheel: lockedMousewheel,
+            DOMMouseScroll: lockedMousewheel
+        }"
+        [scope]="this">
         <div role="presentation" class="k-grid-table-wrap">
             <table
                 kendoTreeListResizableTable
@@ -9183,7 +9200,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
     </div>
     <div *ngIf="loading" kendoTreeListLoading>
     </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TableDirective, selector: "[kendoTreeListResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { kind: "component", type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "totalColumns", "rowClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }, { kind: "component", type: LoadingComponent, selector: "[kendoTreeListLoading]" }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: TableDirective, selector: "[kendoTreeListResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { kind: "component", type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "totalColumns", "rowClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }, { kind: "component", type: LoadingComponent, selector: "[kendoTreeListLoading]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{
@@ -9196,7 +9213,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     selector: 'kendo-treelist-list',
                     template: `
     <div #lockedContainer class="k-grid-content-locked" role="presentation"
-        *ngIf="isLocked" [style.width.px]="lockedWidth">
+        *ngIf="isLocked" [style.width.px]="lockedWidth"
+        [kendoEventsOutsideAngular]="{
+            keydown: lockedKeydown,
+            scroll: lockedScroll,
+            mousewheel: lockedMousewheel,
+            DOMMouseScroll: lockedMousewheel
+        }"
+        [scope]="this">
         <div role="presentation" class="k-grid-table-wrap">
             <table
                 kendoTreeListResizableTable
@@ -9279,7 +9303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
     </div>
     `,
                     standalone: true,
-                    imports: [NgIf, TableDirective, ColGroupComponent, TableBodyComponent, ResizeSensorComponent, ResizableContainerDirective, LoadingComponent]
+                    imports: [NgIf, EventsOutsideAngularDirective, TableDirective, ColGroupComponent, TableBodyComponent, ResizeSensorComponent, ResizableContainerDirective, LoadingComponent]
                 }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
@@ -13602,10 +13626,11 @@ const POPUP_CLASSES = 'k-grid-columnmenu-popup k-column-menu';
  * Represents the [column menu]({% slug columnmenu_treelist %}) component of the TreeList.
  */
 class ColumnMenuComponent {
-    constructor(popupService, localization, service) {
+    constructor(popupService, localization, service, cdr) {
         this.popupService = popupService;
         this.localization = localization;
         this.service = service;
+        this.cdr = cdr;
         /**
          * @hidden
          */
@@ -13685,6 +13710,7 @@ class ColumnMenuComponent {
     close() {
         this.popupService.destroy();
         this.popupRef = null;
+        this.cdr.markForCheck();
     }
     /**
      * @hidden
@@ -13701,7 +13727,7 @@ class ColumnMenuComponent {
         this.expandedColumns = false;
     }
 }
-ColumnMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: SinglePopupService }, { token: i1$1.LocalizationService }, { token: ColumnMenuService }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: SinglePopupService }, { token: i1$1.LocalizationService }, { token: ColumnMenuService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColumnMenuComponent, isStandalone: true, selector: "kendo-treelist-column-menu", inputs: { standalone: "standalone", column: "column", settings: "settings", sort: "sort", filter: "filter", sortable: "sortable", columnMenuTemplate: "columnMenuTemplate" }, host: { properties: { "class.k-grid-column-menu-standalone": "this.standalone" } }, providers: [ColumnMenuService], usesOnChanges: true, ngImport: i0, template: `
         <a #anchor
             class="k-grid-column-menu k-grid-header-menu"
@@ -13770,7 +13796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     standalone: true,
                     imports: [NgClass, IconWrapperComponent, NgTemplateOutlet, NgIf, ColumnMenuSortComponent, ColumnMenuLockComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: SinglePopupService }, { type: i1$1.LocalizationService }, { type: ColumnMenuService }]; }, propDecorators: { standalone: [{
+        }], ctorParameters: function () { return [{ type: SinglePopupService }, { type: i1$1.LocalizationService }, { type: ColumnMenuService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { standalone: [{
                 type: HostBinding,
                 args: ['class.k-grid-column-menu-standalone']
             }, {
@@ -20068,6 +20094,7 @@ class ColumnChooserComponent {
         if (this.popupRef) {
             this.popupRef.close();
             this.popupRef = null;
+            this.changeDetector.markForCheck();
         }
         this.detachClose();
     }

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

@@ -47,8 +47,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-treelist',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1724748547,
-    version: '16.9.0-develop.1',
+    publishDate: 1724759402,
+    version: '16.9.0-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -8632,10 +8632,10 @@ const wheelDeltaY = (e) => {
     }
     return 0;
 };
-const preventLockedScroll = el => event => {
-    const delta = wheelDeltaY(event);
-    const scrollTop = el.scrollTop;
-    const allowScroll = (scrollTop === 0 && 0 < delta) || (el.scrollHeight <= el.offsetHeight + scrollTop && delta < 0);
+const preventLockedScroll = (args, element) => {
+    const delta = wheelDeltaY(args);
+    const scrollTop = element.scrollTop;
+    const allowScroll = (scrollTop === 0 && 0 < delta) || (element.scrollHeight <= element.offsetHeight + scrollTop && delta < 0);
     if (!allowScroll) {
         event.preventDefault();
     }
@@ -8755,6 +8755,13 @@ class ListComponent {
         this.attachContainerScroll();
         this.initResizeService();
     }
+    ngAfterViewChecked() {
+        const isLocked = this.isLocked;
+        if (isLocked && !this.hasLockedContainer) {
+            this.syncRowsHeight();
+        }
+        this.hasLockedContainer = isLocked;
+    }
     syncRowsHeight() {
         if (this.lockedContainer) {
             syncRowsHeight(this.lockedTable.nativeElement, this.table.nativeElement);
@@ -8779,6 +8786,29 @@ class ListComponent {
             this.ngZone.runOutsideAngular(this.createScroller.bind(this));
         }
     }
+    lockedScroll() {
+        if (!this.suspendService.scroll) {
+            const lockedScrollTop = this.lockedContainer.nativeElement.scrollTop;
+            if (lockedScrollTop !== this.containerScrollTop) {
+                this.container.nativeElement.scrollTop = this.containerScrollTop = lockedScrollTop;
+            }
+        }
+    }
+    lockedMousewheel(args) {
+        if (!args.ctrlKey) {
+            preventLockedScroll(args, this.container.nativeElement);
+            const scrollDelta = wheelDeltaY(args);
+            this.container.nativeElement.scrollTop -= scrollDelta;
+        }
+    }
+    lockedKeydown(args) {
+        if (args.keyCode === Keys.PageDown || args.keyCode === Keys.PageUp) {
+            const dir = args.keyCode === Keys.PageDown ? 1 : -1;
+            const element = this.container.nativeElement;
+            element.scrollTop += element.offsetHeight * dir * 0.8;
+            args.preventDefault();
+        }
+    }
     attachContainerScroll() {
         if (isUniversal()) {
             return;
@@ -8803,26 +8833,6 @@ class ListComponent {
             })).subscribe(this.dispatcher));
         });
         this.scrollSyncService.registerEmitter(this.container.nativeElement, "body");
-        if (this.lockedContainer) {
-            this.ngZone.runOutsideAngular(() => {
-                this.subscriptions.add(merge(fromEvent(this.lockedContainer.nativeElement, 'mousewheel'), fromEvent(this.lockedContainer.nativeElement, 'DOMMouseScroll')).pipe(filter((event) => !event.ctrlKey), tap(preventLockedScroll(this.container.nativeElement)), map(wheelDeltaY))
-                    .subscribe(x => this.container.nativeElement.scrollTop -= x));
-                this.subscriptions.add(fromEvent(this.lockedContainer.nativeElement, 'scroll').pipe(filter(() => !this.suspendService.scroll))
-                    .subscribe(() => {
-                    const lockedScrollTop = this.lockedContainer.nativeElement.scrollTop;
-                    if (lockedScrollTop !== this.containerScrollTop) {
-                        this.container.nativeElement.scrollTop = this.containerScrollTop = lockedScrollTop;
-                    }
-                }));
-                this.subscriptions.add(fromEvent(this.lockedContainer.nativeElement, 'keydown').pipe(filter((event) => event.keyCode === Keys.PageDown || event.keyCode === Keys.PageUp)).subscribe((event) => {
-                    const dir = event.keyCode === Keys.PageDown ? 1 : -1;
-                    const element = this.container.nativeElement;
-                    element.scrollTop += element.offsetHeight * dir * 0.8;
-                    event.preventDefault();
-                }));
-            });
-            this.syncRowsHeight();
-        }
     }
     createScroller() {
         this.cleanupScroller();
@@ -9066,7 +9076,14 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
         }
     ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true, static: true }, { propertyName: "lockedContainer", first: true, predicate: ["lockedContainer"], descendants: true }, { propertyName: "lockedTable", first: true, predicate: ["lockedTable"], descendants: true }, { propertyName: "resizeSensors", predicate: ResizeSensorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div #lockedContainer class="k-grid-content-locked" role="presentation"
-        *ngIf="isLocked" [style.width.px]="lockedWidth">
+        *ngIf="isLocked" [style.width.px]="lockedWidth"
+        [kendoEventsOutsideAngular]="{
+            keydown: lockedKeydown,
+            scroll: lockedScroll,
+            mousewheel: lockedMousewheel,
+            DOMMouseScroll: lockedMousewheel
+        }"
+        [scope]="this">
         <div role="presentation" class="k-grid-table-wrap">
             <table
                 kendoTreeListResizableTable
@@ -9147,7 +9164,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
     </div>
     <div *ngIf="loading" kendoTreeListLoading>
     </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TableDirective, selector: "[kendoTreeListResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { kind: "component", type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "totalColumns", "rowClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }, { kind: "component", type: LoadingComponent, selector: "[kendoTreeListLoading]" }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: TableDirective, selector: "[kendoTreeListResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { kind: "component", type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "totalColumns", "rowClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }, { kind: "component", type: LoadingComponent, selector: "[kendoTreeListLoading]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{
@@ -9160,7 +9177,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     selector: 'kendo-treelist-list',
                     template: `
     <div #lockedContainer class="k-grid-content-locked" role="presentation"
-        *ngIf="isLocked" [style.width.px]="lockedWidth">
+        *ngIf="isLocked" [style.width.px]="lockedWidth"
+        [kendoEventsOutsideAngular]="{
+            keydown: lockedKeydown,
+            scroll: lockedScroll,
+            mousewheel: lockedMousewheel,
+            DOMMouseScroll: lockedMousewheel
+        }"
+        [scope]="this">
         <div role="presentation" class="k-grid-table-wrap">
             <table
                 kendoTreeListResizableTable
@@ -9243,7 +9267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
     </div>
     `,
                     standalone: true,
-                    imports: [NgIf, TableDirective, ColGroupComponent, TableBodyComponent, ResizeSensorComponent, ResizableContainerDirective, LoadingComponent]
+                    imports: [NgIf, EventsOutsideAngularDirective, TableDirective, ColGroupComponent, TableBodyComponent, ResizeSensorComponent, ResizableContainerDirective, LoadingComponent]
                 }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
@@ -13551,10 +13575,11 @@ const POPUP_CLASSES = 'k-grid-columnmenu-popup k-column-menu';
  * Represents the [column menu]({% slug columnmenu_treelist %}) component of the TreeList.
  */
 class ColumnMenuComponent {
-    constructor(popupService, localization, service) {
+    constructor(popupService, localization, service, cdr) {
         this.popupService = popupService;
         this.localization = localization;
         this.service = service;
+        this.cdr = cdr;
         /**
          * @hidden
          */
@@ -13634,6 +13659,7 @@ class ColumnMenuComponent {
     close() {
         this.popupService.destroy();
         this.popupRef = null;
+        this.cdr.markForCheck();
     }
     /**
      * @hidden
@@ -13650,7 +13676,7 @@ class ColumnMenuComponent {
         this.expandedColumns = false;
     }
 }
-ColumnMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: SinglePopupService }, { token: i1$1.LocalizationService }, { token: ColumnMenuService }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: SinglePopupService }, { token: i1$1.LocalizationService }, { token: ColumnMenuService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColumnMenuComponent, isStandalone: true, selector: "kendo-treelist-column-menu", inputs: { standalone: "standalone", column: "column", settings: "settings", sort: "sort", filter: "filter", sortable: "sortable", columnMenuTemplate: "columnMenuTemplate" }, host: { properties: { "class.k-grid-column-menu-standalone": "this.standalone" } }, providers: [ColumnMenuService], usesOnChanges: true, ngImport: i0, template: `
         <a #anchor
             class="k-grid-column-menu k-grid-header-menu"
@@ -13719,7 +13745,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     standalone: true,
                     imports: [NgClass, IconWrapperComponent, NgTemplateOutlet, NgIf, ColumnMenuSortComponent, ColumnMenuLockComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: SinglePopupService }, { type: i1$1.LocalizationService }, { type: ColumnMenuService }]; }, propDecorators: { standalone: [{
+        }], ctorParameters: function () { return [{ type: SinglePopupService }, { type: i1$1.LocalizationService }, { type: ColumnMenuService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { standalone: [{
                 type: HostBinding,
                 args: ['class.k-grid-column-menu-standalone']
             }, {
@@ -20003,6 +20029,7 @@ class ColumnChooserComponent {
         if (this.popupRef) {
             this.popupRef.close();
             this.popupRef = null;
+            this.changeDetector.markForCheck();
         }
         this.detachClose();
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-treelist",
-  "version": "16.9.0-develop.1",
+  "version": "16.9.0-develop.3",
   "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,24 +31,24 @@
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-drawing": "^1.19.0",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "16.9.0-develop.1",
-    "@progress/kendo-angular-common": "16.9.0-develop.1",
-    "@progress/kendo-angular-dateinputs": "16.9.0-develop.1",
-    "@progress/kendo-angular-dropdowns": "16.9.0-develop.1",
-    "@progress/kendo-angular-excel-export": "16.9.0-develop.1",
-    "@progress/kendo-angular-icons": "16.9.0-develop.1",
-    "@progress/kendo-angular-inputs": "16.9.0-develop.1",
-    "@progress/kendo-angular-intl": "16.9.0-develop.1",
-    "@progress/kendo-angular-l10n": "16.9.0-develop.1",
-    "@progress/kendo-angular-label": "16.9.0-develop.1",
-    "@progress/kendo-angular-pdf-export": "16.9.0-develop.1",
-    "@progress/kendo-angular-popup": "16.9.0-develop.1",
-    "@progress/kendo-angular-utils": "16.9.0-develop.1",
+    "@progress/kendo-angular-buttons": "16.9.0-develop.3",
+    "@progress/kendo-angular-common": "16.9.0-develop.3",
+    "@progress/kendo-angular-dateinputs": "16.9.0-develop.3",
+    "@progress/kendo-angular-dropdowns": "16.9.0-develop.3",
+    "@progress/kendo-angular-excel-export": "16.9.0-develop.3",
+    "@progress/kendo-angular-icons": "16.9.0-develop.3",
+    "@progress/kendo-angular-inputs": "16.9.0-develop.3",
+    "@progress/kendo-angular-intl": "16.9.0-develop.3",
+    "@progress/kendo-angular-l10n": "16.9.0-develop.3",
+    "@progress/kendo-angular-label": "16.9.0-develop.3",
+    "@progress/kendo-angular-pdf-export": "16.9.0-develop.3",
+    "@progress/kendo-angular-popup": "16.9.0-develop.3",
+    "@progress/kendo-angular-utils": "16.9.0-develop.3",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "16.9.0-develop.1",
+    "@progress/kendo-angular-schematics": "16.9.0-develop.3",
     "@progress/kendo-common": "^0.2.0",
     "@progress/kendo-file-saver": "^1.0.0"
   },

package/rendering/list.component.d.ts

@@ -99,6 +99,7 @@ export declare class ListComponent implements OnInit, OnDestroy, AfterViewInit,
     get isLocked(): boolean;
     private rtl;
     private columnUpdateFrame;
+    private hasLockedContainer;
     constructor(scrollerFactory: any, changeNotification: ChangeNotificationService, suspendService: SuspendService, ngZone: NgZone, renderer: Renderer2, scrollSyncService: ScrollSyncService, resizeService: ResizeService, editService: EditService, supportService: BrowserSupportService, navigationService: NavigationService, scrollRequestService: ScrollRequestService, localization: LocalizationService, columnResizingService: ColumnResizingService, changeDetector: ChangeDetectorRef, pdfService: PDFService, columnInfo: ColumnInfoService);
     ngOnInit(): void;
     ngOnChanges(changes: {
@@ -106,9 +107,13 @@ export declare class ListComponent implements OnInit, OnDestroy, AfterViewInit,
     }): void;
     ngDoCheck(): void;
     ngAfterViewInit(): void;
+    ngAfterViewChecked(): void;
     syncRowsHeight(): void;
     ngOnDestroy(): void;
     init(): void;
+    lockedScroll(): void;
+    lockedMousewheel(args: any): void;
+    lockedKeydown(args: any): void;
     private attachContainerScroll;
     private createScroller;
     private scroll;

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': '16.9.0-develop.1',
+            '@progress/kendo-angular-treeview': '16.9.0-develop.3',
             // peer dependency of kendo-angular-inputs
-            '@progress/kendo-angular-dialog': '16.9.0-develop.1',
+            '@progress/kendo-angular-dialog': '16.9.0-develop.3',
             // peer dependency of kendo-angular-icons
             '@progress/kendo-svg-icons': '^3.0.0',
             // peer dependency of kendo-angular-dateinputs
-            '@progress/kendo-angular-navigation': '16.9.0-develop.1',
+            '@progress/kendo-angular-navigation': '16.9.0-develop.3',
         } });
     return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
 }