Hi,
This works with Angular 20, must be a change related to that.
If I assign data to the TreeView synchronously, it works, but e.g. in a setTimeout, it doesn't any more. (I assign the full array, change detection is set to eager.)
Reproduction can be found here: https://codesandbox.io/p/devbox/mutable-glade-39twhs?workspaceId=ws_P4gPDf6RC2r5W8xExWQehV
Best regards,
Michael
Hi Michael,
Starting with Angular v21, zoneless change detection is enabled by default. Since Kendo components still do not provide support for zoneless, it is expected to face some issues, especially for operations that require change detection.
To keep the Kendo components functioning as expected, it's crucial to add the provideZoneChangeDetection({ eventCoalescing: true }) in the main.ts file providers:
main.ts:
import { provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
import { App } from './app/app';
bootstrapApplication(App, {
providers: [
provideBrowserGlobalErrorListeners(),
provideAnimations(),
provideZoneChangeDetection({ eventCoalescing: true }),
],
}).catch((err) => console.error(err));
zone.js still needs to be provided in the polyfills array of the angular.json file.
You mentioned that Zone is being used, but based on the provided details so far, I am not sure how Zone.js is actually being enabled for an Angular 21 application.
Please follow the suggestions above and let us know how it goes after using provideZoneChangeDetection in main.ts.
Regards,
Martin Bechev
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Hi Martin,
thank you for your detailed explanation!
My example was somewhat unfortunate, because we do use Zone in our project, still the Treeview components don't update. Our code works with the same Kendo version but with Angular 20. (Using Zone in both cases, Eager CD strategy.)
Sadly I was not able to create a minimal reproduction, but what's interesting: calling detectChanges on the Treeview manually doesn't do anything, but calling detectChanges on the change detector injected in TreeViewGroupComponent does work. But in production code, everything works out of the box, only unoptimized code is affected.
I assume you cannot do anything without the minimal reproduction, but this bug is only one of the Kendo-related bugs we are facing after the Angular update, something seems to be off with Angular 21-22, but only Kendo components are affected?
Best regards,
Michael
Hi Michael,
Thank you for the prepared demo.
The zoneless change detection is enabled by default from Angular v21. Since Kendo Angular components still do not provide full support for it, the developer needs to:
1. Install the zone.js package and then import it in the angular.json polyfills array.
2. Provide provideZoneChangeDetection({ eventCoalescing: true }) in the app.config.ts file (or directly in main.ts).
The steps can also be found in this article:
We are currently actively working on providing support for zoneless, but at this point we cannot commit to an exact date when this will be available for the TreeView.
Some smaller components already have the proper configuration to support zoneless, but bigger ones require some more time to refactor and adjust the code. Until full zoneless support is provided, please use the approach suggested above.
Here is the updated demo:
https://codesandbox.io/p/sandbox/kendo-angular-treeview-cd-problem-forked-kx5s2k
Do let us know how it goes.
Regards,
Martin Bechev
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.