Hey,
I tried to play around with the new Toolbar inside the Grid.
From the documentation I copied:
<kendo-grid<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.
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:
can you please help ?
<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>
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
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
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
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
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);
}
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