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 },
],
};

I'm rendering a kendo-grid that receives data dynamically in runtime and required to autofit the columns continuously as data arrives.

I've used autoFitColumns() on the ngAfterViewChecked lifecycle hook to keep autofitting with each new data arrival. but each autofit resets the view of the grid and the horizontal scroll is reset to the start.

I searched for other issues regarding the subjects but none worked for this scenario.
tried solutions:

1. using ngZone and subscribing to OnStable
2. saving the scrollLeft property of '.k-grid-content' and and assigning the value to it after the autoFitColumns() call
3. calling autoFitColumns on specific changes within ngOnChanges.

without autofit there are no issues despite many dynamic data changes.

template parameters:

<kendo-grid
#grid
[kendoGridBinding]="gridData"
[skip]="skip"
[resizeable]="true"
....>

component (simplified)

export class Component {
@Input() columns$: Observable<TableColumns[]>
@Input gridData: any[];
@ViewChild(GridComponent) grid: GridComponent;

ngOnInit(){
this.columns$?.pipe(filter((cols)=> !!cols && cols.length > 0)).subscribe......
}

ngAfterViewChecked() {
this.grid?.autoFitColumns();
}

Hi everyone,

I’m using Kendo PDF Export in my Angular project, and I’m facing an issue with section titles and their content being split across pages.

In my case, the content is dynamic, so its size can vary a lot. Each section has a title and a block of data (text, tables, etc.), and some sections can span multiple pages depending on the data length.

What I’d like to achieve is that a section title never appears at the bottom of one page while its content starts on the next page. In other words, the section should stay together as much as possible, or at least start on a new page when needed.

I’ve already tried several approaches (page-break-inside: avoid, wrapping sections in <div> containers, adjusting margins, etc.), but none of them have produced consistent results — especially when the section itself is large enough to span more than one page.

Has anyone encountered this issue and found a reliable way to keep section headers and their content together when exporting to PDF with Kendo?

Thanks in advance!

npm view @progress/kendo-drawing
npm ERR! code E502
npm ERR! 502 Bad Gateway - GET https://registry.npmjs.org/@progress%2fkendo-drawing

I got a simple custom dialog created with a <kendo-dialog> inside a component. The overlay works great and fills all the screens, except the matSideNav with Menu. The width of the overlay = screen wide.;

I tried to change z-Index of the k-overlay, but nothing works.

The only thing that works is using the Kendo Dialog Service with the outside of the nav container

<div kendoDialogContainer></div>
 

Any ideas?