Hello everyone,

Here are the highlights of the new online resources we published this week from 10 Nov 2025 to 17 Nov 2025:

Article: https://www.telerik.com/kendo-angular-ui/components/up-to-date
Summary: This article explains how Kendo UI for Angular aligns with current Angular releases and documents version compatibility for Angular, TypeScript, RxJS, Node, and the CLI. It provides upgrade guidance—peer dependency ranges, recommended update steps, and commands (npm/ng update)—so you can safely update @progress/kendo-angular-* packages and keep your application consistent with supported versions.

Article: https://www.telerik.com/kendo-angular-ui/components/ai-components
Summary: Use Kendo UI for Angular AI components to build LLM features in your app: AIPrompt captures structured input (instructions, context, attachments, model parameters) and AIOutput renders streamed responses with markdown and code blocks. The article shows how to connect these components to OpenAI/Azure OpenAI or other LLM endpoints, manage history and streaming with Angular services/RxJS, and customize sections, templates, and events to fit your workflow.

Article: https://www.telerik.com/kendo-angular-ui/components/listbox/events
Summary: This article documents the Kendo UI for Angular ListBox events and how to handle them for selection changes, item transfers between lists, reordering, and drag-and-drop. It explains when each event fires, the event payload (affected items and indices, original DOM event), and shows how to subscribe via Angular event bindings to update application state and implement custom logic.

Article: https://www.telerik.com/kendo-angular-ui/components/diagrams/tooltips
Summary: Learn how to add and configure tooltips in the Kendo UI for Angular Diagram to display contextual information for shapes (nodes) and connections. You enable tooltips, define a template for the content, control show/hide behavior and positioning, and use the tooltip context to access the hovered item’s data for binding.

Article: https://www.telerik.com/kendo-angular-ui/components/listbox/selection
Summary: This article shows how to configure and use selection in the Kendo UI for Angular ListBox, including single and multiple selection with mouse, keyboard (Ctrl/Shift), and touch interactions. You’ll learn how to control selection programmatically and handle the selectionChange event to react to user actions, synchronize state, and drive transfer/reorder operations based on the selected items.

Article: https://www.telerik.com/kendo-angular-ui/components/assisted-migration
Summary: This article shows you how to use Kendo UI for Angular Assisted Migration to upgrade across major versions by automatically applying code transformations for breaking changes in Kendo Angular components and APIs. You’ll run the migration via the VS Code Productivity Tools or Angular schematics, review suggested edits, and finalize updates while handling any remaining manual changes in templates, TypeScript, and styles. It outlines prerequisites, supported versions and packages, and known limitations so you can verify the upgrade safely.

Article: https://www.telerik.com/kendo-angular-ui/components/available-codemods
Summary: This article catalogs the available Kendo UI for Angular codemods and describes the API changes each one automates, helping you handle breaking changes during Angular and Kendo UI upgrades. For every codemod, it outlines the affected packages and the transformations applied to Angular templates and TypeScript, so you can choose and run the correct automated refactor for your project.

Article: https://www.telerik.com/kendo-angular-ui/components/migrate-from-jquery
Summary: Migrate a Kendo UI for jQuery app to Kendo UI for Angular by replacing jQuery widgets with native Angular components and refactoring initialization, templates, events, and data binding into Angular patterns. The article explains key differences—no jQuery DataSource (use Angular services/Observables with @progress/kendo-data-query), component-specific changes for Grid and form inputs, and updated theming/localization—and outlines a practical, phased, component-by-component migration strategy to preserve behavior and performance.

Article: https://www.telerik.com/kendo-angular-ui/components/spreadsheet/globalization
Summary: Configure globalization for the Kendo UI for Angular Spreadsheet by loading CLDR locale data and setting the culture via IntlService to apply locale-specific number, date, and currency formats in cells. Localize the Spreadsheet UI by providing message translations through @progress/kendo-angular-l10n, with support for switching cultures at runtime.

Article: https://www.telerik.com/kendo-angular-ui/components/changelogs/rendering-changes
Summary: This article documents rendering changes in Kendo UI for Angular components, including updates to DOM structure, CSS class names, and markup that may introduce breaking changes. As you upgrade, use it to identify impacted components and apply the migration guidance to update custom CSS, selectors, and automated tests.

Feel free to check them out and share your thoughts!

The Telerik Team

---------------------------------------------------------------------------------------------------------------------------------------------------------

Hello everyone,

Here are the highlights of the new online resources we published this week from 05 Nov 2025 to 10 Nov 2025:

Article: https://www.telerik.com/blogs/building-apps-angular-graphql-part-1
Summary: This article introduces GraphQL fundamentals for Angular developers and walks you through integrating Apollo Angular. You set up a GraphQL client, write and execute queries against a GraphQL API, and bind the results in a component—laying the groundwork for mutations, caching, and more advanced patterns in later parts.

Feel free to check them out and share your thoughts!

The Telerik Team

---------------------------------------------------------------------------------------------------------------------------------------------------------

Hello everyone,

Here are the highlights of the new online resources we published this week from 29 Oct 2025 to 05 Nov 2025:

Article: https://www.telerik.com/blogs/clean-code-using-smart-dumb-components-angular
Summary: Apply the smart (container) vs dumb (presentational) component pattern to keep Angular code clean: put data fetching, state, and navigation in smart components via services and RxJS, and restrict dumb components to rendering and UI events with @Input and @Output. Refactor step by step to pass data down via Observables/async pipe, emit events up, and simplify testing by isolating side effects from the view.

Feel free to check them out and share your thoughts!

The Telerik Team

Hi,

I use MessageService for translation Kendo components, it works properly, but for some reason after the application starts, 'No-translation found for ...' warnings appear in the console.

combobox.component.html:3 No translation found for "7708502966028483300" ("NO DATA FOUND" - "kendo.combobox.noDataText").
combobox.component.html:3 No translation found for "2025597431468961462" ("clear" - "kendo.combobox.clearTitle").

I use Nx(21.4.1) monorepo with Angular (20.1.8) and Kendo (20.0.3).

How can I solve the issue so that the warnings don't appear?

Thanks!

export const translations: () => Record<string, string> = () => ({
  'kendo.textbox.clear': $localize`:@@component_textbox_clear:Törlés`,
  'kendo.label.optional': $localize`:@@component_label_required:Kötelező`,
  'kendo.combobox.noDataText': $localize`:@@component_combobox_noDataText:Nincs találat`,
  'kendo.combobox.clearTitle': $localize`:The title of the clear button.@@component_combobox_clearTitle:Törlés`,
});

import { Injectable } from'@angular/core';
import { MessageServiceasKendoMessageService } from'@progress/kendo-angular-l10n';
import { translations } from'../const/translation';

@Injectable({
  providedIn: 'root',
})
exportclassMessageServiceextendsKendoMessageService {
  publictranslations: Record<string, string> = translations();

  publicoverrideget(key: string): string {
    returnthis.translations[key] ?? key;
  }
}
             

//app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
         { provide: KendoMessageService, useClass: MessageService },
],
};

We’re experiencing a performance slowdown in our Angular application whenever a tooltip is hovered. Upon inspection in Chrome DevTools, we observed multiple warnings such as

These violations appear only during tooltip hover events, causing noticeable UI lag.

Environment:

• Framework: Angular 19.2.14

• Browser: Chrome (140.0.7339.208)

• Tooltip Version :  (@progress/kendo-angular-tooltip": "18.5.2")
  
  can you help with that? Thanks in advance.

How to deal with strict rules at Content security policy are.

Using Angular 20 and Kendo 20 Version. 
Currently just importing "CheckBoxModule" (only) in NgModule of application got error in console

When removing the error disappear and application works.

I was following this: https://www.telerik.com/kendo-angular-ui/components/installation/migration/v18-to-v19

Gave the command: 

npx @progress/kendo-cli migrate --from=18 --to=19

And I got:

Why is it skipping v19? My Angular version is 19.2.x. I want to update to v19, test everything and only then migrate both Angular, Material, and Kendo to v20

Thanks in advance

Hi,

I am Kamal Hinduja Based Geneva, Switzerland(Swiss)  . Can anyone explain What are the themes supported by Kendo UI for Angular?

Thanks, Regards

Kamal Hinduja  Geneva, Switzerland

I have 2 Kendo Grids in my Angular application. In the 1st one, I use "virtual scrolling" because we have a lot of data (e.g. 10K records). The 2nd one is a "basic" Kendo Grid.

The functionality I want to achieve is to have the ability to "remove" (or hide - I don't know) the selected row from the 1st grid and add it to the 2nd one. The issue that I'm dealing with, is that if I transfer - let's say - 10-20 rows, when I start to scroll in my "virtual scrolling" grid, there is an annoying jump scrolling. I think that this "bug" is due to "hide" attribute that I'm adding to each removed row.

Virtual Scrolling Grid:

<kendo-grid
   #grid1 id="ours"
   (click)="onGridClick(0)"
   class="mb-1"
   [data]="gridViewN"
   [kendoGridBinding]="gridDataN"
   [skip]="skipN"
   [pageSize]="pageSizeNV"
   scrollable="virtual"
   [rowHeight]="24"
   [style.height]="'33%'"
   [rowClass]="rowCallback"
   [sortable]="sortSettings"
   [filterable]="'menu'"
   [loading]="isLoadingN"
   [navigable]="true"
   [resizable]="true"
   appGridCopy
   [selectable]="{ mode: 'single' }"
   [(selectedKeys)]="selectedRowInGrid[0]"
   kendoGridSelectBy="ID"
   (pageChange)="pageChange($event, 'N')"
   (sortChange)="sortChange($event, 'N')"
   (dblclick)="onDblRowClick(grid1, $event, 'N')"
   (keydown)="onKeyDown($event, grid1, 'N')"
   (filterChange)="filterChange($event)"
   (cellClick)="onCellClick($event)">

onKeyDown(event: KeyboardEvent, grid: any, gridID: 'N' | 'V' | 'selected') {
    event.preventDefault();
    switch (event.key) {
        case 'Enter':
            if (gridID === 'N' || gridID === 'V') {
                this.addToSelectedTable(grid, gridID);
            }
            break;
        case 'Backspace':
            if (gridID === 'selected') {
                this.removeFromSelectedTable(grid);
            }
            break;
    }
}

addToSelectedTable(grid: any, gridID: 'N' | 'V') {
    let row = grid.activeRow.dataItem;
    let item: any;

    if (gridID === 'N') {
        item = this.gridDataN.find(x => x.ID === row.ID);
        this.lastPrevIndexN = this.gridViewN.data.findIndex(tempItem => tempItem.ID === item.ID);
        row.from = 'N';
    } else {
        item = this.gridDataV.find(x => x.ID === row.ID);
        this.lastPrevIndexV = this.gridViewV.data.findIndex(tempItem => tempItem.ID === item.ID);
        row.from = 'V';
    }
    if (item) {
        row.newId = this.activeRow;
        this.gridSelected.push(structuredClone(row));
        this.activeRow++;
        this.gridSelectedSort = this.gridSelected.slice(0);
        item.hide = true;
    }
    this.loadRows(gridID);
    this.getSelectedTotal();
    this.getNextRowInGrid(gridID);
}

Hello,

When updating to the latest version of kendo-licensing the license isn't applied anymore via our pipeline/site.

The step in our azure devops pipeline gives the message that the license is found but if we start our application the message comes that the license needs to be activated/watermark applied.  

With version 1.5.1 we don't have any issues. There the license is applied correctly.

Devops step:

Step with 1.5.2 (doesn't apply the license)

Starting: Activate Kendo UI License
==============================================================================
Task         : Command line
Description  : Run a command line script using Bash on Linux and macOS and cmd.exe on Windows
Version      : 2.250.1
Author       : Microsoft Corporation
Help         : https://docs.microsoft.com/azure/devops/pipelines/tasks/utility/command-line
==============================================================================
Generating script.
Script contents: shell
call npx kendo-ui-license activate
========================== Starting Command Output ===========================
"C:\Windows\system32\cmd.exe" /D /E:ON /V:OFF /S /C "CALL "C:\agent\_work\_temp\f68efdff-b07b-4c99-8e1f-f36fc1d33941.cmd""
[INFO][Telerik and Kendo UI Licensing] Telerik and Kendo UI License Key found at: KENDO_UI_LICENSE
  License issued at 7/2/2024 11:45:22 to ******

Finishing: Activate Kendo UI License

Step with v1.5.1 (does apply the license).