`@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

Signal Forms are now stable with Angular@22.

It would be nice to have an ability to use all kendo widgets with new form API.

The built-in kendoDropDownFilter directive normalizes text using String.prototype.toLowerCase() when caseSensitive: false. This is locale-insensitive and produces incorrect results for languages with non-standard case-folding rules, most notably Turkish.

The correct fix is to use String.prototype.toLocaleLowerCase(locale), which respects locale-specific case rules. The DropDownFilterSettings interface should expose a locale option for this:

filterSettings = {
  caseSensitive: false,
  operator: 'startsWith',
  locale: 'tr-TR'   // ← proposed new option
};

Affected components: kendoDropDownFilter directive (used with AutoCompleteComponent, ComboBoxComponent, MultiColumnComboBoxComponent, DropDownListComponent, MultiSelectComponent).

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">
 
 

Hi,

if I use both the features locked columns and sticky rows, the sticky rows do not stick in the locked columns.

For me it would be logical if they would stick there too (now the UI looks inconsistent):

Reproduction (forked from your example): https://stackblitz.com/edit/angular-wak7v99i 

Can you please take a look at it?

Best regards,
Michael

Hello,

we are searching for two components that we don’t find in your ANGULAR Library.

These components are:

• KANBAN Cards / TASK LISTS   
• Docking Manager

I have attached some print screens for existing components on the market...

Could you please check if there are any future/planned  developments concerning these two components with Telerik?

Thank you in advance…

Add support for Angular's Trusted Types to eliminate CSP compatibility issues and errors when using the Kendo UI for Angular components in applications with strict Trusted Types security policies.

At the moment, the internal logic of the Kendo UI for Angular components uses innerHTML in various scenarios, like placeholder content for virtualization, dynamic rendering of icons and indicators, etc.

Thus, when applications have strict CSP with Trusted Types enabled, developers encounter a "This document requires 'TrustedHTML' assignment" error. 

Although all content set via innerHTML is internally controlled and secure, the Kendo UI for Angular components should work seamlessly in applications with strict CSP and Trusted Types policies without requiring developers to modify their security configuration.

Issue 1: Flickering or Not Opening of Dropdown

• Steps to Reproduce:
  1. Click on the color picker.
  2. Click on any dropdown.
  3. Observe the behavior of the dropdown.

Issue 2: Clicking on Color Picker and Dropdowns (Dropdown not closing)

• Steps to Reproduce:
  1. Click on the color picker.
  2. Click on any dropdown.
  3. Repeat this with all dropdowns to get above screenshot.

It would be great if we could add footnotes in the Kendo editor, similar to how TinyMCE handles them, or a simpler version like the example found here: https://prosemirror.net/examples/footnote/

Kendo's Angular components that have optional inputs are not built correctly.

For example on the `kendo-avatar`component the input `imageSrc` is defined like this:

 @Input() imageSrc: string;

however, since it is an optional input it should be defined like this:

 @Input() imageSrc?: string;
// or
 @Input() imageSrc: string | undefined;

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.

Stackblitz example

https://angular-x4rvxqyp-qfq5b7mj.stackblitz.io

Expected Behaviour:

The user should be able to enter a full year 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. This prevents users from entering valid dates, making the input unusable in this scenario.

I couldn’t find an existing bug report related to this issue. Could you confirm whether this has already been reported or provide guidance on a potential fix or workaround?

Thanks

We could really do with a file explorer, I believe this is already available in your JQuery suite and is planned for .NET Core.

Syncfusion have already implemented an angular file manager which can use Azure Blob Storage as a backend (though other backends are also available).

In fact the syncfusion file explorer is based on your own component.  After some digging around looking for a similar solution I found their design document for the component which directly refers to the Telerik's own components.  You may want to consider contacting syncfusion on this because it appears to me that they may have breached your copyright. 

Same layout as TimePicker, except:
- first part (hours) allows negative sign. Popup will display hours from -23 through 23.
- boolean 'allowDays'. Displays a "days.hours:minutes" format. Negative sign still allowed on first part (which is now days instead of hours).
- boolean 'allowSeconds'. Displays also a seconds part.
- number 'value' property containing the current value. The integer part is days, the fractional part the hours and minutes. (Date object would also be nice, I don't see how to specify a negative value.)

Hello,

In our gantt component we need to add a marker on a specific date. (Our "Today" is not the real current day but a specific date)

There is an example for jquery version : https://docs.telerik.com/kendo-ui/knowledge-base/gantt-custom-time-marker

I understand that currentTimeMarker is meant to be used on the current time.. But an input to override and force another date could be useful.

Or maybe be able to add others TimeMarkers with a date as Input should not be difficult to implement as all the code should be almost the same.

Regards

Currently, the supported approach for setting values for the input properties of the Kendo UI for Angular components is by binding them to a DOM property. 

Please provide support for the ability to set values for the input properties programmatically.

Hi Team, 

Currently, the Kendo UI for Angular library relies on SVG icons as default icons. This means that developers would have to use a service to change the default icons inside components. This approach, however, does change all icons inside the project and is not suitable for cases where only a particular icon in a single component should be changed. 

Therefore, I would like to request a designated property or a specific approach that would allow developers to change particular icons inside particular components.