24 Nov to 01 Dec 2025: highlights of the new online resources that we published last week.

Blog: https://www.telerik.com/blogs/angular-21-my-favorite-new-features-quick-demo-look-whats-next
Summary: You’ll get a concise, code-first walkthrough of Angular 21 new features and how to enable and use them in a quick demo. The article also outlines upgrade steps, potential breaking changes, and what’s next on the Angular roadmap, helping you plan adoption in your projects.

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

17 Nov to 24 Nov 2025: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/kendo-angular-ui/components/ai-tools/ai-assistant/changelog
Summary: Use the Kendo UI for Angular AI Assistant changelog to track versioned release notes for the AI Tools > AI Assistant component, including new features, bug fixes, and breaking changes. It helps you verify Angular and Kendo package compatibility, identify deprecated or modified APIs and configuration, and plan code and template migrations per release.

Article: https://www.telerik.com/kendo-angular-ui/components/dateinputs/daterange/disabled-dates
Summary: Use the Kendo UI for Angular DateRangePicker [disabledDates] input to prevent selection of specific days, supplying either an array of Date objects or a predicate function (for example, disable weekends or holidays), and combine it with [min]/[max] for boundary constraints. Disabled dates are not selectable as range start/end and are validated for both calendar selection and typed input, keeping the start/end fields consistent.

Article: https://www.telerik.com/kendo-angular-ui/components/ai-tools/agentic-ui-generator/changelog
Summary: This changelog for the Kendo UI for Angular Agentic UI Generator lists versioned release notes, including new features, improvements, bug fixes, and breaking changes. Use it to track updates and compatibility, plan upgrades, and identify API or behavior changes to the AI tools and supported components in your Angular app.

Article: https://www.telerik.com/kendo-angular-ui/components/dateinputs/daterange/calendar-configuration
Summary: This article shows how to configure the two calendars inside the Kendo UI for Angular DateRange, including controlling the active/top/bottom views, setting the initial focused date, and toggling week numbers per calendar. You’ll learn how to apply per‑calendar settings so the start and end calendars can use different views and navigation, with concise examples to implement these options in your components.

Article: https://www.telerik.com/kendo-angular-ui/components/ai-tools/agentic-ui-generator/prompt-library
Summary: Use the Prompt Library in the Kendo UI for Angular Agentic UI Generator to browse and run predefined prompts for scaffolding components (Grid, Form, Chart) or to create and manage your own prompts. The article documents the prompt schema (metadata, categories, variables), editing/tagging workflows, and import/export options to keep prompts organized and outputs reproducible.

Article: https://www.telerik.com/kendo-angular-ui/components/ai-tools/agentic-ui-generator/getting-started
Summary: You will set up the Kendo UI for Angular Agentic UI Generator by installing the AI tools, configuring an LLM provider (OpenAI or Azure OpenAI), importing the module, and adding the generator component to your template. The article shows how to supply prompts and domain schema/metadata to generate Kendo UI forms and grids, and how to handle output and events to integrate the generated UI into your Angular application.

Blog: https://www.telerik.com/blogs/turn-prompts-pages-telerik-agentic-ui-generator
Summary: This article shows you how to use the Telerik Agentic UI Generator to turn a natural-language prompt into a UI page built with Kendo UI/Telerik components and export the generated markup and code to your project. It explains the agent workflow (planning, component selection, layout and configuration), prompt-writing tips to refine results, and considerations for supported frameworks and integration.

Blog: https://www.telerik.com/blogs/angular-signal-forms-vs-reactive-forms
Summary: This article helps you compare Angular Signal Forms and Angular Reactive Forms, focusing on the reactivity model (signals vs RxJS observables), change detection, typing, validation/async validation, and performance. It walks you through side-by-side code for creating controls, updating values, reading form state via computed signals/effects, and handling validators and errors. Use it to decide when to adopt signal-based forms, when to keep Reactive Forms, and how to integrate or migrate incrementally without a full rewrite.

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

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 wanted to apply "zh-cn" intl in my angular project.

1) i ran ng add @progress/kendo-angular-intl

2) at my app.module.ts

import { IntlModule } from '@progress/kendo-angular-intl';
import '@progress/kendo-angular-intl/locales/zh';

i can't find zh-cn on my node_modules local folder.

i got the below error:

./src/app/app.module.ts:20:0-49 - Error: Module not found: Error: Can't resolve '@progress/kendo-angular-intl/locales/zh' in 'O:\_Hcsms\src\hcsms.solution-angular-client\src\app'

btw, i did the above stesp after reading the below web page:
https://www.telerik.com/kendo-angular-ui/components/globalization/internationalization/loading-data

can you please help?

thank you.

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