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 localizing 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);
}