Questions on Kendo UI for Angular Forum

1 answer

9 views

Version 19 Grid that is selectable is preventing space bar input for elements inside the grid

In version 19, if a grid is selectable you can't type spaces into inputs inside of a cell detail template inside the grid. With the template below I am not able to type spaces in the textarea. If I change selectable to false, the text area allows spaces. If I revert to version 18 it works as expected.

<kendo-grid [selectable]="true" [kendoGridBinding]="[{name: 'bill', age: 55}]">
  <kendo-grid-column field="name" title="Name"></kendo-grid-column>
  <kendo-grid-column field="age" title="Age"></kendo-grid-column>
  <ng-template kendoGridDetailTemplate>
    <textarea rows="3"></textarea>
  </ng-template>
  
</kendo-grid>

Grid

answered on 04 Jun 2025

0 answers

15 views

kendoTooltip placement with zoneless

Angular v20 introduced the ability to go zonless with "provideZonelessChangeDetection" but the popup placement of kendoTooltip with zoneless is offset. If I add back the zone.js dependency then it works fine, but of course that's not ideal.

Code to reproduce is very simple:

<button kendoTooltip title="test tooltip">
  hi there
</button>

or here's a code sandbox sample forked from the tooltip overview example

Would you please modify this to work with zoneless?

Thank You.

Tooltip

updated question on 03 Jun 2025

1 answer

9 views

kendo-theme-material v11 not backwards compatible

I was previously setting primary, secondary, and error colors and then importing the all.scss from kendo-theme-material - it worked great.

Now, I'm trying to import the material-2.scss and most of the controls have styling issues, almost like it is still trying to render Material 3 styles which take up a lot more space.

If I want to import like this, am I doing something wrong, or is the material-2 scss simply not working yet?

$kendo-color-primary: COLORGOESHERE;
$kendo-color-secondary: COLORGOESHERE;
$kendo-color-error: COLORGOESHERE;
@import '@progress/kendo-theme-material/dist/material-2.scss';
//@import '@progress/kendo-theme-material/dist/all.scss';

Styling

answered on 30 May 2025

0 answers

10 views

Kendo combo box fields are not differentiating between the uppercase and lowercase letters.

Hi,

We are using the kendo-combbox to display the list of item that is retrieved from the backend server.

Please see an example in https://stackblitz.com/edit/angular-wb3zbjqs?file=src%2Fapp%2Fapp.component.ts

When we enter Pah it defaults to PAH (all uppercase). Is there anyway to achieve this?

Here is the data passed to the combobox.

export class AppComponent {
  public allowCustom = true;
  public selectedValues: string = 'Baseball';
  public listItems: Array<string> = [
    'Baseball',
    'Basketball',
    'Cricket',
    'Field Hockey',
    'Football',
    'Table Tennis',
    'Tennis',
    'Volleyball',
    'PAH',
    'PaH',
    'Pah',
  ];
}

Regards,

Jyothi

ComboBox

asked on 29 May 2025

2 answers

271 views

ComboBox not usable with VoiceOver

Hi,

we are using Kendo UI for Angular. We failed our external accessibility review because the Kendo UI ComboBox is not usable using Apple VoiceOver with iOS 15, although this page says ComboBox is accissble by screen readers.

Repro:

Swipe until VoiceOver selects the dropdown button
Double tap to open the the options popup of the ComboBox (so far so good)
Swipe right to navigate trough the options => Failure: VoiceOver navigates to the next input field of the form

Expectation: We would expect VoiceOver to navigate trough the options by swiping left or right when the ComboBox popup is opened. Double tap should then set the currently selected option as value and close the popup.

We found this issue in the GitHub Repo, which describes the same issue aswell but unfortunately there is no further information in the ticket.

ComboBox

answered on 27 May 2025

1 answer

11 views

Module Federation Font Icons not loaded in Shell

Hello, I currently having a problem loading my font Icons in the Shell of my module federated frontend. It cant load the kendo-font-icons.ttf file anyone have a solution for this?

General Discussions

Icon

answered on 22 May 2025

1 answer

33 views

Error validating a license key

I have received the updated license and I have applied the same on my machine using the steps listed below.
https://www.telerik.com/kendo-angular-ui/components/licensing

I get the success message (have replaced actual values with 'X' below)
[INFO][Telerik and Kendo UI Licensing] Telerik and Kendo UI License Key found at: ****/****/**/telerik-license.txt
License issued at X/XX/2025, X:XX:XX PM to x*******.x****.x***@x**.com

But, I also get the below error message
[WARN][Telerik and Kendo UI Licensing] TKL101: Kendo UI for Angular is not listed in your current license file.
Learn more about Kendo UI for Angular licensing at https://www.telerik.com/kendo-angular-ui/my-license/

On the purchasing page, all the license types show 'Kendo UI for Angular' included. So, I don't understand if the issue is with my license key or am I missing anything while applying the license.
I have the 'DevCraft UI' package

I have gone through the link:
https://www.telerik.com/kendo-angular-ui/components/licensing/license-errors-and-warnings

Licensing

answered on 14 May 2025

1 answer

25 views

Kendo-Grid - Accessibility test - issue with Aria role

Hi Team,

We are using the Kendo grid and getting below warnings for Aria role with accessibility check. the code is simply to display the data from DB and non editable & Sortable.

Please help to resolve the below 4 warnings for single Kendo grid.

Using the Kendo grid version 18.0.0

1.

Title: WCAG 1.3.1: Ensure elements with an ARIA role that require child roles contain them (thead)
Tags: Accessibility, WCAG 1.3.1, aria-required-children

Issue: Ensure elements with an ARIA role that require child roles contain them (aria-required-children - https://accessibilityinsights.io/info-examples/web/aria-required-children)

Target application:  ***************

Element path: #k-8d34ce03-5f96-4632-b56a-ea5497e2d1e5 > .k-grid-header[role="presentation"] > .k-grid-header-wrap[data-scrollable=""][role="presentation"] > .k-grid-header-table > thead

Snippet: <thead kendogridheader="" role="rowgroup" class="k-table-thead">

How to fix: 
Fix any of the following:
  Element has children which are not allowed: [role=columnheader]

Environment: Microsoft Edge version 136.0.0.0

2

Title: WCAG 1.3.1: Ensure elements with an ARIA role that require child roles contain them (#k-8d34ce03-5f96-4632-b56a-ea5497e2d1e5)
Tags: Accessibility, WCAG 1.3.1, aria-required-children

Issue: Ensure elements with an ARIA role that require child roles contain them (aria-required-children - https://accessibilityinsights.io/info-examples/web/aria-required-children)

Target application: **********

Element path: #k-8d34ce03-5f96-4632-b56a-ea5497e2d1e5

Snippet: <div role="grid" kendodragtargetcontainer="" kendodroptargetcontainer="" mode="manual" class="k-grid-aria-root" id="k-8d34ce03-5f96-4632-b56a-ea5497e2d1e5" aria-label="Data table" aria-rowcount="2" aria-colcount="22">

How to fix: 
Fix any of the following:
  Element has children which are not allowed: [role=presentation], [role=columnheader], [role=gridcell]

Environment: Microsoft Edge version 136.0.0.0

3

Title: WCAG 2.1.1: Ensure elements that have scrollable content are accessible by keyboard (.k-grid-content.k-virtual-content)
Tags: Accessibility, WCAG 2.1.1, scrollable-region-focusable

Issue: Ensure elements that have scrollable content are accessible by keyboard (scrollable-region-focusable - https://accessibilityinsights.io/info-examples/web/scrollable-region-focusable)

Target application: *****************

Element path: #k-8d34ce03-5f96-4632-b56a-ea5497e2d1e5 > kendo-grid-list > .k-grid-content.k-virtual-content

Snippet: <div class="k-grid-content k-virtual-content" style="width: 1588px;">

How to fix: 
Fix any of the following:
  Element should have focusable content
  Element should be focusable

Environment: Microsoft Edge version 136.0.0.0

4

Title: WCAG 1.3.1: Ensure elements with an ARIA role that require child roles contain them (tbody)
Tags: Accessibility, WCAG 1.3.1, aria-required-children

Issue: Ensure elements with an ARIA role that require child roles contain them (aria-required-children - https://accessibilityinsights.io/info-examples/web/aria-required-children)

Target application: ***************

Element path: #k-8d34ce03-5f96-4632-b56a-ea5497e2d1e5 > kendo-grid-list > .k-grid-content.k-virtual-content > div[role="presentation"] > .k-grid-table > tbody

Snippet: <tbody kendogridtablebody="" role="rowgroup" class="k-table-tbody">

How to fix: 
Fix any of the following:
  Element has children which are not allowed: [role=gridcell]

Environment: Microsoft Edge version 136.0.0.0

Accessibility

Grid

answered on 13 May 2025

0 answers

23 views

Kendo Grid - Jump scrolling when adding / removing rows with virtual scrolling

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

Move row with 'Enter' key:

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