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?

Hi,

Is there a way to customize or override that drag clue behavior?

In our setup, some columns are fixed (non-reorderable) while the rest can be reordered. What we’d like to achieve is that when users try to move a reorderable column next to or into a fixed column, the “+” drag clue icon should not appear to visually indicate that the action isn’t allowed.

Thanks!

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.