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,

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

`@progress/kendo-intl` incorrectly formats timezone offsets whose minute component is non-zero.

For example, a JavaScript `Date` with the historical Warsaw offset `UTC+01:24` is formatted as `+01:04` instead of `+01:24`.

This affects all tested `Z`, `X`, and `x` timezone format variants.

Environment

- `@progress/kendo-angular-intl`: `24.2.0`
- `@progress/kendo-intl`: `3.2.1`

- Browser/Node timezone: `Europe/Warsaw`
- Operating system: Windows
- Format: `yyyy-MM-ddTHH:mm:ssZZZZZ`

The same formatting implementation appears in `@progress/kendo-intl` versions `3.1.2` and `3.2.1`.

Reproduction

const { formatDate } = require('@progress/kendo-intl');

process.env.TZ = 'Europe/Warsaw';

const date = new Date(1900, 0, 1, 16, 0, 0);

console.log(date.toString());
console.log(date.getTimezoneOffset());
console.log(formatDate(date, 'yyyy-MM-ddTHH:mm:ssZZZZZ'));

Actual Result

Mon Jan 01 1900 16:00:00 GMT+0124
-84
1900-01-01T16:00:00+01:04

Expected Result

1900-01-01T16:00:00+01:24

Date#getTimezoneOffset() returns -84, meaning the local timezone is 84 minutes ahead of UTC:

84 minutes = 1 hour 24 minutes

Other Examples

The issue is not limited to positive offsets:

UTC is also formatted differently depending on the token, but that behavior may be intentional:

Tested Format Specifiers

All applicable format variants use the same incorrect minute calculation:

Z      -> +0104
ZZ     -> +0104
ZZZ    -> +0104
ZZZZ   -> GMT+01:04
ZZZZZ  -> +01:04

X      -> +0104
XX     -> +0104
XXX    -> +01:04
XXXX   -> +0104
XXXXX  -> +01:04

x      -> +0104
xxx    -> +01:04
xxxxx  -> +01:04

Changing from ZZZZZ to XXXXX or XXX therefore does not resolve the problem.

Suspected Root Cause

The current formatter appears to perform approximately this calculation:

const offset = date.getTimezoneOffset() / 60;
const hoursMinutes = Math.abs(offset).toString().split('.');
const minutes = hoursMinutes[1] || 0;

For an 84-minute offset:

84 / 60 = 1.4

The decimal portion "4" is then treated as four minutes and padded to "04".

However, the fractional part represents a fraction of an hour:

0.4 hours * 60 = 24 minutes

Likewise, for 210 minutes:

210 / 60 = 3.5

The formatter produces 03:05, although 0.5 hours is 30 minutes.

Suggested Fix

Timezone offsets should remain integer minute values throughout formatting:

function formatTimeZone(date, info, options) {
    const totalMinutes = date.getTimezoneOffset();
    const absoluteMinutes = Math.abs(totalMinutes);
    const hours = Math.floor(absoluteMinutes / 60);
    const minutes = absoluteMinutes % 60;
    const sign = totalMinutes <= 0 ? '+' : '-';

    // Continue applying shortHours, separator, optionalMinutes,
    // localizedName and zZeroOffset options using hours and minutes.
}

The important calculations are:

const hours = Math.floor(Math.abs(offsetMinutes) / 60);
const minutes = Math.abs(offsetMinutes) % 60;

Converting the offset to a decimal hour and splitting its string representation is not reliable.

Suggested Regression Tests

it('formats a positive timezone offset with minutes', () => {
    const date = new Date(2024, 5, 25, 12, 7, 5);
    vi.spyOn(date, 'getTimezoneOffset').mockReturnValue(-84);

    expect(formatDate(date, 'yyyy-MM-ddTHH:mm:ssZZZZZ'))
        .toBe('2024-06-25T12:07:05+01:24');
});

it('formats a negative timezone offset with minutes', () => {
    const date = new Date(2024, 5, 25, 12, 7, 5);
    vi.spyOn(date, 'getTimezoneOffset').mockReturnValue(210);

    expect(formatDate(date, 'yyyy-MM-ddTHH:mm:ssZZZZZ'))
        .toBe('2024-06-25T12:07:05-03:30');
});

Other useful cases include:

-345 -> +05:45
-330 -> +05:30
210 -> -03:30
0 -> Z or +00:00, depending on the selected token

Impact

This can corrupt serialized date-time values when they are passed to systems that honor the emitted offset, including .NET DateTimeOffset.

Example:

Intended: 1900-01-01T16:00:00+01:24
Emitted:  1900-01-01T16:00:00+01:04

These values represent instants 20 minutes apart.

The issue affects:

• Historical dates from regions that previously used local mean time.
• Current timezones with half-hour or quarter-hour offsets.
• Any test or custom Date implementation returning a non-whole-hour offset.

Examples of modern fractional offsets include UTC+05:30, UTC+05:45, UTC+09:30, and UTC-03:30.

Additional Context

We initially encountered this with Europe/Warsaw and 1900-01-01. The JavaScript runtime correctly reports Warsaw's historical offset as UTC+01:24. The incorrect UTC+01:04 value is introduced only during Kendo formatting.

We have implemented a temporary application-level workaround that formats the date portion with Kendo and calculates the timezone offset directly from integer minutes.

StackBlitz

Hello,

I have prepared an example, here's how you reproduce the bug (https://stackblitz.com/edit/angular-2nwrn7db?file=src%2Fapp%2Fapp.component.ts):

1. Move the Product Name column between the Category and Unit Price columns
2. Save the Grid state using the Save State button
3. Reload the page
4. Restore the saved state using the Load State button
5. The multi-column Test (k-grid0-col4) has the wrong OrderIndex (0 instead of 4)

Best regards,

Igor

When dateinput format is "d/M/y" and "allowCaretMode" is enabled, users are unable to enter valid dates. Tested with dateinput and datepicker components.

Steps to reproduce

1. Setup a kendo-dateinput component with "allowCaretMode" set to "true" and the "format" set to "d/M/y" (see stackblitz below).
2. Enter a valid single-digit day and valid single-digit month into the input.
3. Try typing a year.
4. Observe that only one character of the year can be entered and the input locks up, preventing the user from completing a valid date.
5. Try typing a double digit month.
6. Observe that only one character of the month can be entered and the input locks up.
7. Try typing a double digit day.
8. Observe that only one character of the day can be entered and the input locks up.

Stackblitz example - angular v22 + kendo v24

https://stackblitz.com/edit/angular-kendo-dateinput-bug-rdocwtvr

Expected Behaviour:

The user should be able to enter a full year, month, and day after typing a valid single-digit day and month.

Observed Behaviour:

After entering a single-digit day and month, the input locks up, preventing the user from typing more than one character for the year or month. This prevents users from entering valid dates, making the input unusable in this scenario.

Thanks

For the Kendo DatePicker, if you try to set the size on a kendo-datepicker with plain text, it will not render and give a console error of "ERROR TypeError: Cannot read properties of undefined (reading 'nativeElement')".

Errors:

// HTML
<kendo-datepicker size="small" ... />

---

But on the other hand, it does work if you create a field of type "DateInputSize" and pass that variable to the size.

// TS
protected size: DateInputSize = 'small';
 

// HTML
<kendo-datepicker [size]="size" ... />

Please repeat the following steps to reproduce this critical accessibility issue:

Hi,

We're heavily using the Scheduler component, but we've hit a problem with `slotClick` in scenarios involving multiple scheduler instances on the same page.

With two schedulers on one page, slot detection for the second scheduler (used in context-menu flows via slotByPosition) can be wrong.

Detaild repro: Stackblitz

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 enabling the showSelectAll option in a checkbox column on the TreeList component, a checkbox is rendered with the TreeListSelectAllCheckboxDirective. In its constructor, this directive includes some logic that causes the TreeList to instantiate a new ViewCollection every time a selection change occurs. However, the call to ViewCollection.loadView() does not pass the service responsible for determining expanded nodes, so the default fallback (which returns true for all nodes) is used.

Problem

• Unnecessary and potentially expensive backend calls

• Performance degradation, especially with large datasets

• Inefficient "select all" logic that does not respect the current loaded/visible state

This behavior appears to ignore the fact that TreeList is configured for remote data binding with lazy-loaded children.

Expected Behavior

• showSelectAll should only evaluate the currently loaded and visible items

• fetchChildren() should not be called for every node

• Integration with remote/lazy-loaded data should be respected

Suggested Solutions

1. Update TreeListSelectAllCheckboxDirective to properly integrate with the expanded node detection logic or allow injection of a custom service.

2. Provide an override or callback to control the behavior of the "select all" checkbox manually in remote scenarios.

Steps to Reproduce

1. Configure a TreeList with hasChildren and children to fetch child nodes lazily.

2. Enable selection with checkbox column and showSelectAll: true.

3. Click any checkbox inside the TreeList.

4. Observe that fetchChildren() is triggered for all nodes, not just expanded ones.

StackBlitz repro:

Open console and click on the first cell. 

https://stackblitz.com/edit/angular-e2ai4pjx?file=src%2Fapp%2Fapp.component.ts,angular.json

Description

When you move the cursor to a new series item, the tooltip position does not move until you leave the chart area and re-enter. It changes the content based on where the cursor is pointing, but does not change the position.

Steps To Reproduce

1. Create a new Angular application
2. Add the Kendo UI Chart and paste the following code in the app.component.ts file:

import { Component } from '@angular/core';
import {KENDO_CHARTS} from "@progress/kendo-angular-charts";

@Component({
  selector: 'app-root',
  imports: [KENDO_CHARTS],
  template: `
    <kendo-chart>
      <kendo-chart-legend position="bottom"></kendo-chart-legend>
      <kendo-chart-series>
        <kendo-chart-series-item
          type="donut"
          [data]="data"
          field="value"
          categoryField="category"
          colorField="color"
          [holeSize]="60"
          [tooltip]="{
            visible: true,
            format: '{0:C0}'
          }"
          [highlight]="{ visible: true }"
        >
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
`,
})
export class App {
  public data = [
    { category: "Electronics", value: 245000, color: "#0058e9" },
    { category: "Clothing", value: 189000, color: "#37b400" },
    { category: "Home & Garden", value: 156000, color: "#f59c1a" },
    { category: "Sports", value: 134000, color: "#ff6358" },
    { category: "Books", value: 98000, color: "#8c43ff" },
    { category: "Toys", value: 78000, color: "#00acc1" },
  ];
}

3. Run the application

Screenshots or video

Actual Behavior

The Tooltip position only changes when you leave and reenter the Chart area. It does not change when you move the cursor from one series item to other, it updates the content displayed in the Tooltip though.

Expected Behavior

The Tooltip position should move with the cursor as seen in the screen recording below:

Because of the CSS, if a parent element has used translate (transform: translateX(0px); ) every child element  under it is no longer fixed.

This causes components like kendo-dialog to be relatively positioned inside the drawer - usually cut off.

Even turning off animation still leaves the style rule.

• Disabling animation should also ensure no related CSS is applied (like using transform: none at least)
• Provide a keyframe based animation instead of translateX (example http://jsfiddle.net/whnuLf6v/50/)

For Angular Kendo Scheduler, if the Work week view is selected (default Mon-Fri), and Sunday is selected on the mini calendar to select the date to display - the previous week will be displayed. This is confusing, as simply toggling to Week view will then display the different, current week.

https://www.telerik.com/kendo-angular-ui/components/scheduler/views/day-week/

Expected behaviour: current week on mini calendar corresponds to the current week displayed regardless of whether full week or work week view is selected

Actual behaviour: selecting any day up until the desired "work week's start" (even if it's customized to start on e.g. Tuesday - and selecting Monday) will show previous week; switching then to full week view switches the week displayed to the one selected on mini calendar

------

Curiously, this does not happen for Kendo scheduler for JQuery (https://demos.telerik.com/kendo-ui/scheduler/index):

In certain scenario, Popup of the Multiselect component is not quite opened on the correct position. I did not check but this issue is probably reproducible for other dropdown components  (such as Combobox, DropdownList, etc) as well.

It seems to me this happens when:

1. A width greater than the widht of the input is set
2. AND input is too close to the bottom-right edge of the window and as a result popup cannot be shown below the input element but above it instead
   

THEN in the very first render, the popup is not position quite right and moves a bit in the next render.

Precise steps to reproduce problem:

1. Make sure to use minimal reproducible example attached below.
2. Click and hold left button of a mouse inside the MultiSelect Component.
3. The popup should open up and be positioned above the input but not being quite aligned right with the window nor the input.
4. Release the left button of a mouse.
5. The popup recalculates its position.
6. Problem: The popup should have been positioned correctly when opened (NOT after releasing mouse button).

Minimal reproducible example:

import { Component, ViewEncapsulation } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  KENDO_DROPDOWNS,
  PopupSettings,
} from '@progress/kendo-angular-dropdowns';
import { KENDO_INPUTS } from '@progress/kendo-angular-inputs';
import { KENDO_LABELS } from '@progress/kendo-angular-label';

@Component({
  selector: 'my-app',
  imports: [FormsModule, KENDO_DROPDOWNS, KENDO_LABELS, KENDO_INPUTS],
  styles: [
    `
      .app-layout {
        padding: 1rem;
        height: 800px;
        display: grid;
        grid-template-columns: 1fr 230px;
      }

      .sidebar {
        height: 100%;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .unrelated-sidebar-content {
        height: 200px;
      }

      .box {
        border: 1px solid grey;
      }
    `,
  ],
  template: `
    <div class="app-layout">
      <main class="box"> Main Content </main>
      <aside class="box sidebar">
        <div class="box unrelated-sidebar-content">Imagine some other content here</div>
        <kendo-formfield showHints="always">
          <kendo-label text="Favorite sport:">
            <kendo-multiselect
              [data]="listItems"
              [(ngModel)]="value"
              [popupSettings]="popupSettings"
            ></kendo-multiselect>
          </kendo-label>
          <kendo-formhint
            >Add your favourite sport, if it is not in the
            list.</kendo-formhint
          >
        </kendo-formfield>
      </aside>
    </div>
  `,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  public listItems: Array<string> = [
    'Width Must Be Greater Than Width Of The Multiselect Component Because We Have Super Long Text',
    'When List Is Open, It Moves Slightly To The Right',
    'It Is Not Possible To Align Popup With The Right Edge',
    'It Is Not Possible To Set "anchorAlign" and "popupAlign"',
  ];
  public value: any = [];
  // @see https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning
  public popupSettings: PopupSettings = { width: 500 };
}

Alignment to the right

I believe, this could be simply solved if we were able to configure "anchorAlign" and "popupAlign" as described here: https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning  .

In addition, it would be a nice feature in general, to be able to align popup with the element's right edge. Currently, this is pretty much hard coded:

        const horizontalAlign = this.direction === "rtl" ? "right" : "left";
        const anchorPosition = <Align>{ horizontal: horizontalAlign, vertical: "bottom" };
        const popupPosition = <Align>{ horizontal: horizontalAlign, vertical: "top" };
        const appendToComponent = typeof this.popupSettings.appendTo === 'string' && this.popupSettings.appendTo === 'component';

        this.popupRef = this.popupService.open({
            anchor: this.wrapper,
            anchorAlign: anchorPosition,
            animate: this.popupSettings.animate,
            appendTo: this.appendTo,
            content: this.popupTemplate,
            popupAlign: popupPosition,
            popupClass: this.listContainerClasses,
            positionMode: appendToComponent ? 'fixed' : 'absolute'
        });

From the code above, it is clear that the "horizontalAlign" cannot be really configured. In simple terms, you could use "left" alignment as a default intead of it being hard-coded like that; and prefer alignment specified in the "popupSettings".

Please, let me know if something needs to be further clarified.

When Toolbar component is configured to

1. Have spacer between two elements: Angular ToolBar Control Types - Kendo UI for Angular
2. AND it uses `overflow=menu` strategy: Angular ToolBar Responsive ToolBar - Kendo UI for Angular
3. AND when there is sufficient space, so the Toolbar is NOT overflowing. In other words, the visibility of the overflow button is set to hidden.
   

THEN the elements are not properly aligned with the right edge of the Toolbar component. This is because the overflow button still occupies the space as is the bahviour of the `visibility` style: visibility CSS property - CSS | MDN

• The visibility CSS property shows or hides an element without changing the layout of a document.

Minimal reproducible example:

import { Component } from '@angular/core';
import { KENDO_TOOLBAR } from '@progress/kendo-angular-toolbar';
import { FormsModule } from '@angular/forms';
import { KENDO_INPUTS } from '@progress/kendo-angular-inputs';
import { KENDO_LABELS } from '@progress/kendo-angular-label';

@Component({
  selector: 'my-app',
  imports: [FormsModule, KENDO_TOOLBAR, KENDO_INPUTS, KENDO_LABELS],
  template: `
    <kendo-label [for]="width" text="Set toolbar width"></kendo-label>
    <kendo-slider
      #width
      [(ngModel)]="toolbarWidth"
      style="width: 100%; display: block;"
      [showButtons]="false"
      [min]="0"
      [max]="100"
      [largeStep]="1"
      tickPlacement="none"
    ></kendo-slider>

    <kendo-toolbar overflow="menu" [style.width.%]="toolbarWidth">
      <kendo-toolbar-button text="My Kendo Angular Toolbar Button A" />
      
      <kendo-toolbar-spacer></kendo-toolbar-spacer>
      
      <kendo-toolbar-button text="My Kendo Angular Toolbar Button B" />
    </kendo-toolbar>
  `,
})
export class AppComponent {
  toolbarWidth = 100;
}

Expected behaviour: The overflow button does not occupy that space in the scenario described above.

• EITHER has `display: none` OR it is completely removed from the DOM when there is sufficient space.

You're docs say

Open the example in a new window to evaluate it with Axe Core or other accessibility tools.  for the Kendo angular grid

When i do that i see the attached error, which is the same issue i get in our product when running playwright axe

That suggests to me that it is not WCAG 2.2 compliant

Ensure elements with an ARIA role that require child roles contain them

.demo-frame.loaded.demo-module--wrap--718a6 > .demo-module--demoWrap--d1437 > .demo-module--explorerWrap--4bf1f.flex-grow-1 > .demo-module--demoBody--97eee > iframe #k-fbe44131-4768-4755-93c3-e321b714780e

<div role="grid" kendodragtargetcontainer="" kendodroptargetcontainer="" mode="manual" class="k-grid-aria-root" id="k-fbe44131-4768-4755-93c3-e321b714780e" aria-label="Data table" aria-rowcount="62" aria-colcount="5">

<div tabindex="-1" class="k-grid-content k-virtual-content">
 
 

In firefox, open the Kendo Radio Button documentation and slowly resize the window (https://www.telerik.com/kendo-angular-ui/components/inputs/radiobutton)

The radio button will kind of jiggle around and occasionally the white dot in the radio button will become off-center.

This also seems to happen in response to some material bouncy (cubic-bezier) animation transitions.

Kendo timeline range in the gantt can be miscalculated if children have start and end days earlier that their parent.

This happens to due oversight in TimelineBaseViewService.getRange function. Two variables startResult and endResult are calculated using only top-level entities from the supplied data hierarchy.

This stackblitz shows 2 cases.

1. The item is out of the bounds on the left due to an earlier start date than its parent's start date.
   
2. The item is rendered either as three dots or out of bounds on the right side (depends on the browser. Firefox tend to display three dots, Chrome clips the right side) due to end date being later than its parent's end date.
   

That's mostly visible on Day and Week timelines, however I believe can be reproduced on monthly and yearly views if the date spread is large enough.