Ran this on StackBlitz 

import { Component } from '@angular/core';
import {
  LegendLabelsContentArgs,
  SeriesClickEvent,
} from '@progress/kendo-angular-charts';
import { IntlService } from '@progress/kendo-angular-intl';

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart
      (plotAreaClick)="onClick($event)"
      [transitions]="false"
      title="World Population by Broad Age Groups"
    >
      <kendo-chart-legend position="bottom"></kendo-chart-legend>
      <kendo-chart-series>
        <kendo-chart-series-item
          type="donut"
          [data]="pieData"
          field="value"
          categoryField="category"
          explodeField="exploded"
          [labels]="{ visible: true, content: labelContent }"
        >
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `,
})
export class AppComponent {
  public pieData: Array<{
    category: string;
    value: number;
    exploded: boolean;
  }> = [
    { category: '0-14', value: 0.2545, exploded: false },
    { category: '15-24', value: 0.1552, exploded: false },
    { category: '25-54', value: 0.4059, exploded: false },
    { category: '55-64', value: 0.0911, exploded: false },
    { category: '65+', value: 0.0933, exploded: false },
  ];

  constructor(private intl: IntlService) {
    this.labelContent = this.labelContent.bind(this);
  }

  public labelContent(args: LegendLabelsContentArgs): string {
    return `${args.dataItem.category} years old: ${this.intl.formatNumber(
      args.dataItem.value,
      'p2'
    )}`;
  }

  public onClick(event: any): void {
    console.log('Click');
  }
}

When the event is seriesClick, it works as expected, and if I change the type to bar, it works as expected, but when it's as shown as above, the onClick event isn't triggered. 

As I have donuts/pies that might not have data in it, I needed to use plotAreaClick (which I have done for the bar charts)

Thanks,

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.

I am using below piece of code inside <kendo-grid>. Here, I am using a dropdown and kendo excel export button inside toolbar. dropdown is in left and button is right aligned. Earlier, it was working till Kendo 18. When I upgraded to kendo 19, it stopped working. 

Root Cause is kendo-dropdownlist contains an array button. When we click on button to expand dropdown, excel export button gets the focus and dropdown loses focus. When we click on dropdown button, 'k-focus' class is applied on 'excel-export'. Because of this, dropdown is not working. 

Code:

<ng-template kendoGridToolbarTemplate>

        <div class="toolbar-container" style="display: flex; align-items: center; gap: 16px; width: 100%;">

            <!-- Dropdown Wrapper -->

            <div style="flex-shrink: 0;">

                <kendo-dropdownlist [data]="data"

                    [(ngModel)]="someField" [valuePrimitive]="true" (valueChange)="perform()"

                    [popupSettings]="{ appendTo: 'component' }" style="width: 175px;">

                </kendo-dropdownlist>

            </div>

            <!-- Spacer to push button to right -->

            <div style="flex-grow: 1;"></div>

            <!-- Excel Export Button -->

            <div style="flex-shrink: 0;">

                <button type="button" kendoGridExcelCommand>Export</button>

            </div>

        </div>

    </ng-template>

If the pane is scrolled, the dark highlight shown when grabbing the splitter is misaligned like this:

Stackblitz repro can be found here

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.

./node_modules/@progress/kendo-angular-layout/fesm2022/progress-kendo-angular-layout.mjs:19:0-75 - Error: Module not found: Error: Can't resolve '@progress/kendo-angular-progressbar' in 'C:\LiveMRIProjects\MRI.AgoraInsightsAnywhere-Angular\node_modules\@progress\kendo-angular-layout\fesm2022'

./node_modules/@progress/kendo-angular-layout/fesm2022/progress-kendo-angular-layout.mjs:22:0-56 - Error: Module not found: Error: Can't resolve '@progress/kendo-angular-intl' in 'C:\LiveMRIProjects\MRI.AgoraInsightsAnywhere-Angular\node_modules\@progress\kendo-angular-layout\fesm2022'

this is the error is coming

when we add kendo thing into module.ts file

Hi,

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

Please select the top-most button, then press TAB until the focus is on the button in the last grid cell.
Then press tab again => the focus moves to the last cell itself.
Press tab again => the focus moves back to the last button. 
=> here we got into an endless loop, you cannot navigate to the button below the grid.

Interestingly, you can leave the grid if you navigate backwards with shift+tab.

best regards,

Michael

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

The FileManger Widget in Kendo for JQuery is a component which is extremely useful in lots of use cases. However, there is not such a component in Kendo for Angular - and adding JQuery to a new Angular app doesn't seem to be the way to go in 2025.

Therefore I'd like to suggest adding a FileManager component to Kendo for Angular- I would be willing to pay extra for that, btw ;-)

The page numbers and total items within a pager do not appear to respect the currently loaded i18n locale. For example, there's no comma in the thousands place for the en locale. What makes me believe this is a bug is that the page input which can appear DOES have i18n applied to it so the discrepancy is clearly visible between the two.

As there's no demo with such large page numbers I've created an example as well as a screenshot:
B187rdik (forked) - StackBlitz

When increasing the browser zoom level while using a kendo-splitter with two kendo-splitter-pane elements, one of the panes exceeds the boundaries of the kendo-splitter. As a result, part of the content becomes hidden.

Steps to Reproduce:

1.  Use a  kendo-splitter with two kendo-splitter-pane elements.
2.  Resize one of the panes
3.  Increase the browser zoom level.

Template:

<kendo-splitter>
  <kendo-splitter-pane [collapsible]="true" size="30%">
    <div>
      <h3>Inner splitter / left pane</h3>
      <p>Resizable and collapsible.</p>
    </div>
  </kendo-splitter-pane>

  <kendo-splitter-pane>
    <div>
      <h3>Inner splitter / center pane</h3>
      <p>Resizable only.</p>
    </div>
  </kendo-splitter-pane>

  <kendo-splitter-pane [collapsible]="true" size="30%">
    <div>
      <h3>Inner splitter / right pane</h3>
      <p>Resizable and collapsible.</p>
    </div>
  </kendo-splitter-pane>
</kendo-splitter>

Hi ,

I want the kendoGridFocussable to apply the FocusableDirective on an anchor tag. This should allow the user to reach the anchor element using only the arrow keys without pressing Enter. (Example : Please, check out the following StackBlitz demo: https://stackblitz.com/edit/angular-rqqzam)

Regards,
Uzma

By default the grid pagination only works taking count of the actual records instead of (alternatively) taking in consideration the groups count.

It would be nice to have the possibility to choose between those 2 when using groupBy and process functions.

This pagination feature is already implemented in the Kendo Ui for Asp.Net Core, but it is not available in functions such as process, groupBy or (toDataSourceRequest/toDataSourceRequestString/toOdataString)

Here you can find the related documentation page for the Asp.Net implementation.

Right now the only possible way to achieve this behavior in combo with a KendoAngularGrid is to use the (toDataSourceRequest/toDataSourceRequestString), then into the controller you'll have to mutate the DataSourceRequest Object like following:

[HttpGet]
public async Task<IActionResult> GetData([DataSourceRequest] DataSourceRequest request, CancellationToken cancellationToken) {
    var data = //...  ;

    request. Skip = (request.DataSourceRequest.Page - 1) * request.DataSourceRequest.PageSize;
    request.Take = request.DataSourceRequest.PageSize;
    request.IsExcelExportRequest = true; // without this the items property of the GroupResult type will be null
    request.GroupPaging = true;

    return Ok(await data.ToDataSourceResultAsync(request, cancellationToken);
}

Add functionality to the Java Spring Boot sample application to support server-side data operations, such as sorting, filtering, and pagination. Currently, the demo uses the process method to do the operations on the client.

https://github.com/telerik/kendo-angular/tree/master/examples-standalone/kendoangular-java-integration

When typing into the Angular Datepicker on iOS devices, the page scrolls unexpectedly after entering the first character of any date part (day, month, year). The scroll occurs on each subsequent character input (2nd, 3rd, etc.), making it difficult to use the input field.

Steps to Reproduce:

1. Open a webpage with a Kendo UI Datepicker on an iPhone (iOS v16+, any model). Ensure the datepicker is positioned far enough down the page that scrolling is required to reach it. Example can be seen at https://angular-v7j3ag.stackblitz.io/
2. Focus on the Datepicker input field.
3. Enter a date manually using the on-screen keyboard.
4. After typing the first character into any date part, the page behaves normally, but it scrolls up to the top of the page on subsequent character inputs.

Expected Behaviour: The page should remain in place when typing, allowing smooth input without scrolling.

Observed Behaviour: The page scrolls up after entering the second character of any date part (day, month, or year) and continues to do so on each further input.

Reproduction: The issue was recreated using Kendo's own Datepicker example (with added spacing to demonstrate the scroll behaviour). https://stackblitz.com/edit/angular-v7j3ag

Affected Platforms:

• All iPhone models (tested 11 - 15) with iOS v16+ (reproducible on Safari and Chrome browsers).
• Does not occur on desktop or Android devices.

Additional Notes:

• A video demonstrating the behaviour is attached.
• This has been reproduced on both BrowserStack and physical iPhone devices.

I couldn’t find an existing bug report related to this issue, so I would appreciate it if you could confirm whether this has been reported or provide further guidance.