Telerik Forums
Kendo UI for Angular Forum
1 answer
13 views

Hey,

I tried to play around with the new Toolbar inside the Grid.

From the documentation I copied:

<kendo-grid
    [data]="gridData"
    [selectable]="false"
    (selectionChange)="onRowSelected()"
    [filterable]="true"
  >

<kendo-toolbar overflow="scroll">
      <kendo-toolbar-button kendoGridFilterTool></kendo-toolbar-button>
      <kendo-toolbar-button kendoGridSortTool></kendo-toolbar-button>
      <kendo-toolbar-button kendoGridGroupTool></kendo-toolbar-button>
      <kendo-toolbar-separator></kendo-toolbar-separator>
      <kendo-toolbar-button kendoGridColumnChooserTool></kendo-toolbar-button>
      <kendo-toolbar-spacer></kendo-toolbar-spacer>
      <kendo-toolbar-button kendoGridPDFTool></kendo-toolbar-button>
      <kendo-toolbar-button kendoGridExcelTool></kendo-toolbar-button>
    </kendo-toolbar>

...

Sadly, I can't seem to get the first three directives (kendoGridFilterTool, kendoGridSortTool, kendoGridGroupTool) to work.

I'm in Webstorm which tells me: "Attribute kendoGridFilterTool is not allowed here".


Am I missing an import or something?

Please help.

Yanmario
Telerik team
 answered on 20 Jun 2025
0 answers
16 views

Hi,

 

i tried to use kendo ui at angular V19, i got the below errors when i ran ng server:

 

X [ERROR] TS2322: Type 'readonly [typeof TextBoxDirective, typeof TextBoxComponent, typeof InputSeparatorComponent, typeof TextBoxSuffixTemplateDirective, ... 49 more ..., typeof OTPInputCustomMessagesComponent]' is not assignable to type 'any[] | Type$1<any> | ModuleWithProviders<{}>'.
  The type 'readonly [typeof TextBoxDirective, typeof TextBoxComponent, typeof InputSeparatorComponent, typeof TextBoxSuffixTemplateDirective, ... 49 more ..., typeof OTPInputCustomMessagesComponent]' is 'readonly' and cannot be assigned to the mutable type 'any[]'. [plugin angular-compiler]

 

my package.json:

 

{
  "name": "kendo-angular-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^19.0.0",
    "@angular/common": "^19.0.0",
    "@angular/compiler": "^19.0.0",
    "@angular/core": "^19.0.0",
    "@angular/forms": "^19.0.0",
    "@angular/localize": "^19.0.0",
    "@angular/platform-browser": "^19.0.0",
    "@angular/platform-browser-dynamic": "^19.0.0",
    "@angular/router": "^19.0.0",
    "@progress/kendo-angular-buttons": "19.1.1",
    "@progress/kendo-angular-charts": "^19.1.1",
    "@progress/kendo-angular-common": "19.1.1",
    "@progress/kendo-angular-dateinputs": "19.1.1",
    "@progress/kendo-angular-dialog": "19.1.1",
    "@progress/kendo-angular-dropdowns": "19.1.1",
    "@progress/kendo-angular-excel-export": "19.1.1",
    "@progress/kendo-angular-grid": "^19.1.1",
    "@progress/kendo-angular-icons": "19.1.1",
    "@progress/kendo-angular-inputs": "19.1.1",
    "@progress/kendo-angular-intl": "19.1.1",
    "@progress/kendo-angular-l10n": "19.1.1",
    "@progress/kendo-angular-label": "19.1.1",
    "@progress/kendo-angular-layout": "19.1.1",
    "@progress/kendo-angular-navigation": "19.1.1",
    "@progress/kendo-angular-pager": "19.1.1",
    "@progress/kendo-angular-pdf-export": "19.1.1",
    "@progress/kendo-angular-popup": "19.1.1",
    "@progress/kendo-angular-progressbar": "19.1.1",
    "@progress/kendo-angular-toolbar": "19.1.1",
    "@progress/kendo-angular-treeview": "19.1.1",
    "@progress/kendo-angular-utils": "19.1.1",
    "@progress/kendo-data-query": "^1.0.0",
    "@progress/kendo-drawing": "^1.21.0",
    "@progress/kendo-licensing": "^1.5.0",
    "@progress/kendo-svg-icons": "^4.0.0",
    "@progress/kendo-theme-bootstrap": "^11.0.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^19.0.6",
    "@angular/cli": "^19.0.6",
    "@angular/compiler-cli": "^19.0.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.4.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.6.2"
  }
}

 

can you please help ?

 

 

David
Top achievements
Rank 1
Iron
 asked on 14 Jun 2025
1 answer
15 views
Telerik Treelist not working for save,edit,delete on telerik website  URL:  https://demos.telerik.com/kendo-angular-ui/demos/treelist/editing/in-cell-editing?theme=default-ocean-blue-a11y
Martin Bechev
Telerik team
 answered on 10 Jun 2025
1 answer
26 views
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>

Martin Bechev
Telerik team
 answered on 04 Jun 2025
1 answer
34 views

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

Martin Bechev
Telerik team
 answered on 13 May 2025
0 answers
27 views

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);
}
Sotiris
Top achievements
Rank 1
 updated question on 12 May 2025
0 answers
21 views
I have a date list which is binding in kendo grid. I what to filter multiple date range like 1st January 2025 to 31st January 2025 and 1st May 2025 - 31st May 2025. Can kendo grid support multi date range filter? If support, then how to implement it.
1 answer
51 views
i have upgraded my app from angular 13 to 19 , in doing so i have also updated the kendo-ui components from 7 to 18 , but many CSS related changes are not intact and same espesically in @progress/kendo-angular-grid, how to fix these breaking changes?
Martin Bechev
Telerik team
 answered on 23 Apr 2025
0 answers
41 views

Hi, 

 

I have few questions regarding kendo grid, i have implemented kendo grid for three nested levels, in every level it has checkboxes, i want to do if i select the parent level checkbox, it should  expand its child and all child checkboxes should also selected, is it possible in kendo-grid??
if so do you have any demo link?

i have attached the image for you understanding, but in that it has only one level, in my case i have two nested levels

Thank you

Arun
Top achievements
Rank 1
 asked on 11 Apr 2025
0 answers
30 views
How we can filter Dates same like excel. I want to filter dates quarterly in kendo gird. Can we achieve it using kendo search? If achieve then how.
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?