Further Environment Informations
Component: @progress/kendo-angular-treeview
Severity: regression (worked in v23, broken in v24)
rxjs: 7.8.2
zone.js 0.15.1 (zone-based, not zoneless)
typescript 6.0.3
Summary
When a flat [nodes] array is bound to kendo-treeview and the array reference is replaced after the first change-detection pass, the TreeView keeps rendering the initial nodes and never reflects the new data. In v23.x the same binding updated correctly.
Minimal reproduction (standalone, drop into a blank Angular 22 app / StackBlitz)
import { Component, signal } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { TreeViewModule } from '@progress/kendo-angular-treeview';
interface Node { name: string; }
@Component({
selector: 'app-root',
standalone: true,
imports: [TreeViewModule],
template: `
<button (click)="replaceNodes()">Replace nodes</button>
<p>Plain list (control — reflects the current data):</p>
<ul>
@for (n of nodes(); track n.name) { <li>{{ n.name }}</li> }
</ul>
<p>Kendo TreeView (bug — stays on the initial data):</p>
<kendo-treeview
[nodes]="nodes()"
textField="name"
[kendoTreeViewSelectable]="{ enabled: false }"
>
<ng-template kendoTreeViewNodeTemplate let-dataItem>
{{ dataItem.name }}
</ng-template>
</kendo-treeview>
`,
})
export class AppComponent {
protected readonly nodes = signal<Node[]>([{ name: 'A' }, { name: 'B' }]);
protected replaceNodes(): void {
this.nodes.set([{ name: 'X' }, { name: 'Y' }, { name: 'Z' }]);
}
}
bootstrapApplication(AppComponent).catch(err => console.error(err));
Steps to reproduce
1. Load the component — TreeView renders A, B.
2. Click Replace nodes (assigns a brand-new array [X, Y, Z]).
Expected
The TreeView re-renders and shows X, Y, Z (like the plain <ul> control right above it, which updates correctly — proving the data really changed and change detection ran).
Actual (v24.2.2)
The TreeView still shows A, B. The new [nodes] reference is ignored.
Regression
Identical code updated correctly on @progress/kendo-angular-treeview 23.x. It broke on the upgrade to 24.x. Bisecting across 24.0.0 → 24.2.2 would pinpoint the exact patch.
Current workaround
Force the TreeView to be destroyed and recreated whenever the data reference changes:
@for (nodes of [data()]; track nodes) {
<kendo-treeview [nodes]="nodes" textField="name" ...>...</kendo-treeview>
}
This works but is obviously undesirable (full teardown/rebuild on every data change, loss of internal state).
Hi,
in a Treeview bound to flat data (probably does not matter), if I have 3 items, and I drop the first 2 in the last, the loading indicator is stuck.
Stackblitz repro: https://stackblitz.com/edit/angular-xiwrcwsx?file=src%2Fapp%2Fapp.component.ts
Can you please take a look at it?
Best regards,
Michael
When using the "checkBy" attribute to configure the data field for the key definition, then the indeterminate state of parent nodes is broken.
To reproduce the issue have a look to this StackBlitz: https://stackblitz.com/edit/angular-okpokx