Completed
Last Updated: 07 Aug 2026 12:26 by ADMIN
Torben
Created on: 03 Aug 2026 07:24
Category: TreeView
Type: Bug Report
0
TreeView does not reflect [nodes] changes after initialization

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).

1 comment
ADMIN
Martin Bechev
Posted on: 07 Aug 2026 12:26

Hi Torben,

You correctly use zone.js in Angular 22, Kendo Angular still not provide zoneless support for all components (this include signals as well). With that, make sure the zone.js is part of the polyfills array in angular,json file. Also make sure the provideZoneChangeDetection({ eventCoalescing: true }) is provided in the main.ts file. This is crucial to still provide zone change detection:

https://www.telerik.com/kendo-angular-ui/components/knowledge-base/cannot-read-properties-of-undefined-grid#solution

I tried to reproduce it in an Angular 22 app, but the TreeList was updated correctly (even with the signals approach which is not officialy suported yet). I am attaching the runnable app used for testing. To run the app install the dependecies (npm install), and execute ng serve command.

We recommend until zoneless suport is provided for the TreeView to update the TreeView dataset without using signals:

import { Component } from '@angular/core';
import { KENDO_TREEVIEW } from '@progress/kendo-angular-treeview';

interface Node {
  name: string;
}

@Component({
  selector: 'app-root',
  imports: [KENDO_TREEVIEW],
  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 App {
  protected nodes: Node[] = [{ name: 'A' }, { name: 'B' }];
  protected replaceNodes(): void {
    this.nodes = [{ name: 'X' }, { name: 'Y' }, { name: 'Z' }];
  }
}

I am happy to announce that the developemnt team is currently working on providing zoneless support for Kendo components and first batch of components already support zoneless change detection. This can be checked in our changelog.

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.

Attached Files: