<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>
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.
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.
Regards,
Jyothi
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:
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.
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);
}
Hello,
I'm creating a Numeric Textbox that should be able to accept Empty. How do I add a ClearValue button in a Numeric Textbox?
We will be calling an external GenAI and would like the result to be displayed as animated, generated text like you see with Gemini or ChatGPT. Can the speed be adjusted to mimick this?
On a related note, i would like the response to animate the scroll bar as it does in the examples, but stop when the last message hits the top of the view pane if that message is longer than the pane height, so the user can start reading it and then scroll to read the rest. otherwise, they have to scroll up to read the beginning of the message.