Product: Kendo UI for jQuery — TreeList (also related Grid issues below)
Version: 2026.2.520 (2026 Q2), jQuery 3.5.1
Browser / AT: Google Chrome 155 (Windows 11) with NVDA (latest)
Severity: Accessibility (WCAG 2.2 SC 1.3.1 Info and Relationships)
Summary
In a TreeList that has a locked column, NVDA announces the locked column's header instead of the current column's header when keyboard focus moves to a cell in the scrollable part.
A Grid with the same layout (locked column + scrollable columns + hidden columns) is announced correctly, so the problem seems specific to how the TreeList builds its accessible table (`role="treegrid"` with rows assembled through `aria-owns`).
Here is a Dojo showing the issue: https://dojo.telerik.com/QYJCWJUj
Steps to reproduce
1. Create a TreeList with `navigatable: true`, one or more locked columns (including a hidden locked column) and several unlocked columns (sample here).
2. Open it in Chrome with NVDA running.
3. Click a cell in the first unlocked column ("April"), or Tab into the TreeList and use the arrow keys to reach it.
Expected
NVDA announces the cell, its row and its own column header, e.g.:
`0 / 8, row 2, April, column 2`
Actual
NVDA announces the locked column's header and wrong column number:
`0 / 8 April row 2 Hierarchy column 4`
<div id="treelist"></div>
<script>
$("#treelist").kendoTreeList({
navigatable: true,
height: 300,
dataSource: {
data: [
{ id: 1, parentId: null, name: "Region A", apr: "0 / 8", may: "1 / 8", jun: "2 / 8", jul: "3 / 8" },
{ id: 2, parentId: 1, name: "Store 1", apr: "0 / 2", may: "1 / 2", jun: "2 / 2", jul: "2 / 2" }
],
schema: { model: { id: "id", parentId: "parentId", expanded: true } }
},
columns: [
{ field: "id", title: "Id", hidden: true, locked: true, width: 80 },
{ field: "name", title: "Hierarchy", locked: true, width: 220 },
{ field: "mar", title: "March", hidden: true, width: 120 },
{ field: "apr", title: "April", width: 120 },
{ field: "may", title: "May", width: 120 },
{ field: "jun", title: "June", width: 120 },
{ field: "jul", title: "July", width: 120 }
]
});
</script>Moving right through the unlocked columns keeps announcing "Hierarchy" as the column header. The correct header is only heard because each cell's `aria-describedby` points to its header cell.
What we checked in the DOM
- The `role="treegrid"` table owns the `thead` and `tbody` row groups (`aria-owns`).
- The header row and every data row each own the same number of cells (locked cells first, then scrollable cells) in the same order. No element is owned twice.
Kendo grid in version 2026.3.811 moves scroll to start when navigatable: true in RTL. It makes impossible to edit.
Same setting in version 2025.3.812 works well.
Same grid configuration with different kendo version dojo:
dojo with scroll jump 2026.3.811
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/right-to-left-support">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="https://kendo.cdn.telerik.com/themes/14.6.1/meridian/meridian-main.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2026.3.1015/js/kendo.all.min.js"></script>
</head>
<body>
<script src="../content/shared/js/products.js"></script>
<div id="example">
<div class="k-rtl">
<div id="grid"></div>
</div>
<script>
const columns = [
{
"title": " ",
"field": "IS_CHECKED",
"type": "string",
"width": 45
},
{
"title": " ",
"field": "IS_PERIOD_LOCKED",
"type": "string",
"width": 100
},
{
"title": " ",
"field": "HAS_COPY_ROW",
"type": "number",
"width": 45
},
{
"title": "STATUS_VAL",
"field": "STATUS_VAL",
"type": "string",
"width": 45
},
{
"title": "קוד עובד",
"field": "CHANNEL_CODE",
"type": "string",
"width": "155px"
},
{
"title": "שם העובד",
"field": "CHANNEL_NAME",
"type": "string",
"width": "155px"
},
{
"title": "Sales Type",
"field": "FLEX1",
"type": "string",
"width": "135px"
},
{
"title": "Amount",
"field": "QUANTITY",
"type": "number",
"width": "120px"
},
{
"title": "Amount Type",
"field": "FLEX4",
"type": "string",
"width": "145px"
},
{
"title": "FOP",
"field": "FLEX5",
"type": "string",
"width": "120px"
},
{
"title": "Product",
"field": "FLEX6",
"type": "string",
"width": "120px"
},
{
"title": "Customer Type",
"field": "FLEX7",
"type": "string",
"width": "165px"
},
{
"title": "Customer",
"field": "FLEX8",
"type": "string",
"width": "115px"
},
{
"title": "Order Date",
"field": "FLEX9",
"type": "string",
"width": "135px"
},
{
"title": "file row",
"field": "FILE_ROW_NUMBER",
"type": "string",
"width": "115px"
},
{
"title": "file name",
"field": "FILE_NAME",
"type": "string",
"width": "125px"
},
{
"title": "דשגשדג",
"field": "FLEX135",
"type": "string",
"width": "120px"
},
{
"title": "lov search",
"field": "FLEX2",
"type": "string",
"width": "135px"
},
{
"title": "Date field",
"field": "FLEX10",
"type": "date",
"width": "135px"
},
{
"title": "steve",
"field": "FLEX55",
"type": "string",
"width": "120px"
},
{
"title": "My file",
"field": "FLEX15",
"type": "string",
"width": "120px"
},
{
"title": "Approval Description",
"field": "APPROVAL_DESC",
"type": "string",
"width": "235px"
},
{
"title": "Approval Status",
"field": "APPROVAL_STATUS",
"type": "string",
"width": "185px"
},
{
"title": "CheckCFLEX",
"field": "CFLEX116",
"type": "boolean",
"width": "135px"
},
{
"title": "BBBBBBBB123",
"field": "CFLEX117",
"type": "string",
"width": "145px"
},
{
"title": "aaa",
"field": "CFLEX54",
"type": "string",
"width": "120px"
},
{
"title": "AAAAAAA123",
"field": "CFLEX3",
"type": "string",
"width": "135px"
},
{
"title": "Creation date -CF",
"field": "CFLEX26",
"type": "date",
"width": "205px"
}
];
const data = [
{
"IS_PERIOD_LOCKED": "N",
"HAS_COPY_ROW": 7,
"STATUS_VAL": "",
"CHANNEL_CODE": "GS100",
"CHANNEL_NAME": "GS100",
"FLEX1": "",
"QUANTITY": 542.8,
"FLEX4": "454646",
"FLEX5": "",
"FLEX6": "AAAA",
"FLEX7": "",
"FLEX8": "reerwe",
"FLEX9": "g",
"FILE_ROW_NUMBER": "",
"FILE_NAME": "",
"FLEX135": "",
"FLEX2": "",
"FLEX10": null,
"FLEX55": "",
"FLEX15": "245",
"APPROVAL_DESC": "The text for REJECTION 2",
"APPROVAL_STATUS": "N",
"CFLEX116": false,
"CFLEX117": "",
"CFLEX54": "",
"CFLEX3": "",
"CFLEX26": null
},
{
"IS_PERIOD_LOCKED": "N",
"HAS_COPY_ROW": 2,
"STATUS_VAL": "",
"CHANNEL_CODE": "GS105",
"CHANNEL_NAME": "GS105",
"FLEX1": "",
"QUANTITY": 542.8,
"FLEX4": "454646",
"FLEX5": "",
"FLEX6": "AAAA",
"FLEX7": "",
"FLEX8": "reerwe",
"FLEX9": "g",
"FILE_ROW_NUMBER": "",
"FILE_NAME": "",
"FLEX135": "",
"FLEX2": "",
"FLEX10": null,
"FLEX55": "",
"FLEX15": "240",
"APPROVAL_DESC": "The text for approval",
"APPROVAL_STATUS": "Y",
"CFLEX116": false,
"CFLEX117": "",
"CFLEX54": "",
"CFLEX3": "",
"CFLEX26": null
},
{
"IS_PERIOD_LOCKED": "N",
"HAS_COPY_ROW": 6,
"STATUS_VAL": "",
"CHANNEL_CODE": "GS106",
"CHANNEL_NAME": "GS106",
"FLEX1": "",
"QUANTITY": 142.8,
"FLEX4": "454646",
"FLEX5": "",
"FLEX6": "BBBB",
"FLEX7": "",
"FLEX8": "reerwe",
"FLEX9": "g",
"FILE_ROW_NUMBER": "",
"FILE_NAME": "",
"FLEX135": "",
"FLEX2": "",
"FLEX10": null,
"FLEX55": "",
"FLEX15": "242",
"APPROVAL_DESC": "The text for approval",
"APPROVAL_STATUS": "Y",
"CFLEX116": false,
"CFLEX117": "",
"CFLEX54": "",
"CFLEX3": "",
"CFLEX26": null
},
{
"IS_PERIOD_LOCKED": "N",
"HAS_COPY_ROW": 3,
"STATUS_VAL": "",
"CHANNEL_CODE": "GS107",
"CHANNEL_NAME": "GS107",
"FLEX1": "",
"QUANTITY": 542.8,
"FLEX4": "454646",
"FLEX5": "",
"FLEX6": "AAAA",
"FLEX7": "",
"FLEX8": "reerwe",
"FLEX9": "g",
"FILE_ROW_NUMBER": "",
"FILE_NAME": "",
"FLEX135": "",
"FLEX2": "",
"FLEX10": null,
"FLEX55": "",
"FLEX15": "241",
"APPROVAL_DESC": "The text for approval",
"APPROVAL_STATUS": "Y",
"CFLEX116": false,
"CFLEX117": "",
"CFLEX54": "",
"CFLEX3": "",
"CFLEX26": null
},
{
"IS_PERIOD_LOCKED": "N",
"HAS_COPY_ROW": 5,
"STATUS_VAL": "",
"CHANNEL_CODE": "GS100",
"CHANNEL_NAME": "GS100",
"FLEX1": "",
"QUANTITY": 600,
"FLEX4": "454646",
"FLEX5": "",
"FLEX6": "BBBB",
"FLEX7": "",
"FLEX8": "reerwe",
"FLEX9": "g",
"FILE_ROW_NUMBER": "",
"FILE_NAME": "",
"FLEX135": "",
"FLEX2": "",
"FLEX10": null,
"FLEX55": "",
"FLEX15": "240",
"APPROVAL_DESC": "The text for approval 2",
"APPROVAL_STATUS": "Y",
"CFLEX116": false,
"CFLEX117": "",
"CFLEX54": "",
"CFLEX3": "",
"CFLEX26": null
},
{
"IS_PERIOD_LOCKED": "N",
"HAS_COPY_ROW": 2,
"STATUS_VAL": "",
"CHANNEL_CODE": "GS105",
"CHANNEL_NAME": "GS105",
"FLEX1": "",
"QUANTITY": 234,
"FLEX4": "454646",
"FLEX5": "",
"FLEX6": "AAAA",
"FLEX7": "",
"FLEX8": "reerwe",
"FLEX9": "g",
"FILE_ROW_NUMBER": "",
"FILE_NAME": "",
"FLEX135": "",
"FLEX2": "",
"FLEX10": null,
"FLEX55": "",
"FLEX15": "240",
"APPROVAL_DESC": "",
"APPROVAL_STATUS": "",
"CFLEX116": false,
"CFLEX117": "",
"CFLEX54": "",
"CFLEX3": "",
"CFLEX26": null
},
{
"IS_PERIOD_LOCKED": "N",
"HAS_COPY_ROW": 2,
"STATUS_VAL": "",
"CHANNEL_CODE": "GS106",
"CHANNEL_NAME": "GS106",
"FLEX1": "",
"QUANTITY": 255,
"FLEX4": "454646",
"FLEX5": "",
"FLEX6": "AAAA",
"FLEX7": "",
"FLEX8": "reerwe",
"FLEX9": "g",
"FILE_ROW_NUMBER": "",
"FILE_NAME": "",
"FLEX135": "",
"FLEX2": "",
"FLEX10": null,
"FLEX55": "",
"FLEX15": "240",
"APPROVAL_DESC": "",
"APPROVAL_STATUS": "",
"CFLEX116": false,
"CFLEX117": "",
"CFLEX54": "",
"CFLEX3": "",
"CFLEX26": null
},
{
"IS_PERIOD_LOCKED": "N",
"HAS_COPY_ROW": 2,
"STATUS_VAL": "",
"CHANNEL_CODE": "GS107",
"CHANNEL_NAME": "GS107",
"FLEX1": "",
"QUANTITY": 12,
"FLEX4": "454646",
"FLEX5": "",
"FLEX6": "AAAA",
"FLEX7": "",
"FLEX8": "reerwe",
"FLEX9": "g",
"FILE_ROW_NUMBER": "",
"FILE_NAME": "",
"FLEX135": "",
"FLEX2": "",
"FLEX10": null,
"FLEX55": "",
"FLEX15": "240",
"APPROVAL_DESC": "",
"APPROVAL_STATUS": "",
"CFLEX116": false,
"CFLEX117": "",
"CFLEX54": "",
"CFLEX3": "",
"CFLEX26": null
}
];
const fields = {
"IS_CHECKED": {
"type": "",
"hidden": false,
"filterable": false,
"sortable": false
},
"CHANNEL_ID": {
"editable": false,
"type": "number",
"hidden": true,
"defaultValue": -1
},
"ITEM_ID": {
"editable": false,
"type": "number",
"hidden": true,
"defaultValue": -1
},
"IS_PERIOD_LOCKED": {
"editable": false,
"type": "string",
"hidden": false,
"defaultValue": "N",
"sortable": false
},
"HAS_COPY_ROW": {
"editable": false,
"type": "number",
"hidden": false,
"defaultValue": 0,
"sortable": false
},
"ROWID": {
"editable": false,
"type": "string",
"hidden": true,
"defaultValue": "-1"
},
"CHANNEL_CODE": {
"hidden": false,
"type": "string"
},
"CHANNEL_NAME": {
"hidden": false,
"type": "string"
},
"MANUALLY_CHANGED": {
"editable": false,
"type": "string",
"hidden": true,
"defaultValue": "N"
},
"FLEX1": {
"type": "string",
"hidden": false
},
"QUANTITY": {
"type": "number",
"hidden": false
},
"FLEX4": {
"type": "string",
"hidden": false
},
"FLEX5": {
"type": "string",
"hidden": false
},
"FLEX6": {
"type": "string",
"hidden": false
},
"FLEX7": {
"type": "string",
"hidden": false
},
"FLEX8": {
"type": "string",
"hidden": false
},
"FLEX9": {
"type": "string",
"hidden": false
},
"FILE_ROW_NUMBER": {
"type": "string",
"hidden": false
},
"FILE_NAME": {
"type": "string",
"hidden": false
},
"FLEX135": {
"type": "string",
"hidden": false
},
"FLEX2": {
"type": "string",
"hidden": false
},
"FLEX10": {
"type": "date",
"hidden": false
},
"FLEX55": {
"type": "string",
"hidden": false
},
"FLEX15": {
"type": "string",
"hidden": false
},
"APPROVAL_DESC": {
"type": "string",
"hidden": false
},
"APPROVAL_STATUS": {
"type": "string",
"hidden": false
},
"CFLEX116": {
"type": "boolean",
"hidden": false
},
"CFLEX117": {
"type": "string",
"hidden": false
},
"CFLEX54": {
"type": "string",
"hidden": false
},
"CFLEX3": {
"type": "string",
"hidden": false
},
"CFLEX26": {
"type": "date",
"hidden": false
}
};
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: data,
schema: {
model: {
fields: fields
}
},
pageSize: 20
},
columns: columns,
height: 550,
navigatable: true,
sortable: true,
groupable: true,
resizable: true,
pageable: true,
});
});
</script>
</div>
</body>
</html>
When navigating in Grid with default/default-ocean-blue-a11y theme the border is gray, while it should be black
Steps to reproduce the behavior:
1. Open the demos: https://demos.telerik.com/kendo-ui/grid/keyboard-navigation?autoRun=true&theme=default-ocean-blue-a11y or https://www.telerik.com/kendo-angular-ui/components/grid/keyboard-navigation
2. Select the Default theme Ocean Blue A11Y swatch
The border color of the focused elements should be black.
The border color is gray
The Kendo Chart widget's documentation describes the setting messages.noData. However, it is missing in the typescript typings.
The documentation matches the source code, but the typings do not.
there is no binding for noData
e.g.
noData?: boolean | undefined; interface ChartOptions {
name?: string | undefined;
autoBind?: boolean | undefined;
axisDefaults?: ChartAxisDefaults | undefined;
categoryAxis?: ChartCategoryAxisItem | ChartCategoryAxisItem[] | undefined;
chartArea?: ChartChartArea | undefined;
dataSource?: any|any|kendo.data.DataSource | undefined;
legend?: ChartLegend | undefined;
panes?: ChartPane[] | undefined;
pannable?: boolean | ChartPannable | undefined;
pdf?: ChartPdf | undefined;
persistSeriesVisibility?: boolean | undefined;
plotArea?: ChartPlotArea | undefined;
renderAs?: string | undefined;
series?: ChartSeriesItem[] | undefined;
seriesColors?: any;
seriesDefaults?: ChartSeriesDefaults | undefined;
theme?: string | undefined;
subtitle?: string | ChartSubtitle | undefined;
title?: string | ChartTitle | undefined;
tooltip?: ChartTooltip | undefined;
transitions?: boolean | undefined;
valueAxis?: ChartValueAxisItem | ChartValueAxisItem[] | undefined;
xAxis?: ChartXAxisItem | ChartXAxisItem[] | undefined;
yAxis?: ChartYAxisItem | ChartYAxisItem[] | undefined;
zoomable?: boolean | ChartZoomable | undefined;
axisLabelClick?(e: ChartAxisLabelClickEvent): void;
dataBound?(e: ChartDataBoundEvent): void;
drag?(e: ChartDragEvent): void;
dragEnd?(e: ChartDragEndEvent): void;
dragStart?(e: ChartDragStartEvent): void;
legendItemClick?(e: ChartLegendItemClickEvent): void;
legendItemHover?(e: ChartLegendItemHoverEvent): void;
legendItemLeave?(e: ChartLegendItemLeaveEvent): void;
noteClick?(e: ChartNoteClickEvent): void;
noteHover?(e: ChartNoteHoverEvent): void;
noteLeave?(e: ChartNoteLeaveEvent): void;
paneRender?(e: ChartPaneRenderEvent): void;
plotAreaClick?(e: ChartPlotAreaClickEvent): void;
plotAreaHover?(e: ChartPlotAreaHoverEvent): void;
plotAreaLeave?(e: ChartPlotAreaLeaveEvent): void;
render?(e: ChartRenderEvent): void;
select?(e: ChartSelectEvent): void;
selectEnd?(e: ChartSelectEndEvent): void;
selectStart?(e: ChartSelectStartEvent): void;
seriesClick?(e: ChartSeriesClickEvent): void;
seriesHover?(e: ChartSeriesHoverEvent): void;
seriesOver?(e: ChartSeriesOverEvent): void;
seriesLeave?(e: ChartSeriesLeaveEvent): void;
zoom?(e: ChartZoomEvent): void;
zoomEnd?(e: ChartZoomEndEvent): void;
zoomStart?(e: ChartZoomStartEvent): void;
}
After applying filter or page number, the table content gets changed but the screen reader didn't inform about the same.
Repro-Steps:
Actual Result:
After performing below action's, the table content gets changed but the narrator didn't announce about the content change:
User Impact:
I created a forum post and it was suggested that I create a feature request for improved Kendo Grid keyboard accessibility when the grid contains locked columns and/or clickable elements such as buttons, links, and input boxes. I noted the following issues that I feel should be supported without having to write a bunch of workarounds or create a poor user experience for regular (mouse and keyboard) users.
This is an urgent concern because many of our clients are requiring our site to meet accessibility standards and with the heavy use of Kendo grids in their current state, it does not seem to.
I have a grid with 2 locked columns with a button in the first column and a hyperlink in the second column, the other columns just have text. I set navigatable to true. None of my fields are editable.
Here is a dojo: https://dojo.telerik.com/KUcMekCh
When the user tabs to the grid, they first get the search bar in my custom grid toolbar. Next they tab to the button (which happens to be a bootstrap dropdown menu but I don't think that is relevant). Here is where the issues start:
Good morning,
currently the compatible JQuery versions are only listed in this article: https://docs.telerik.com/kendo-ui/intro/supporting/jquery-support.
Most of the time also with great delay (as of today: 3 versions behind)
Would it be possible to include the compatible versions directly into the Release Notes of new versions?
This way we can safely upgrade JQuery along with new Kendo UI Releases.
When adding a command to a column, passing the command options via an array or not makes a difference only for the visible option of the command. See DoJo:
Kendo UI Snippet | Kendo UI Dojo (telerik.com)
All options for command work both with and without the array, except the visible function.
Require an Editor method to provide the cursor position as an integer representing the offset of the current cursor position from the start of the document with respect to the text displayed in the editor.
For example consider an editor displaying 'This is text content'. The underlying html will be <p><span>This is text content</span></p>. When cursor is placed after 'text', I would like to obtain the cursor position as 12 i.e. the offset based on the text displayed irrespective of the underlying html.
A difference between kendo.culture.ar.min.js:
pattern: ["-n %","n %"],
and other Arabic cultures, e.g. kendo.culture.ar-AE.min.js:
pattern: ["-n%","n%"],
A space is present in between the % symbol and the number and the position of the percent symbol differs.
Format consistency.
Hi Team,
I would like to request the functionality to be able to export (an) Excel file(s) with the built-in Kendo UI API into a ZIP file.
Thank you!
Hi
I found bug into the Items of Tab component.
When you create Tab and write 3 TabItems for it, all of the component are correct but when you want create other tab into the first or second part of TabItem with 2 tabitems, you will expect to see one main Tab with 3 TabItems and other Tab with 2 Tabitems into the first tabItem of first Tab. But you will see one Tab with 5 Tabitems So main Tab merge all of TabItems with together.
<Tab id="mainTab">
<TabItem id="item1">
<Tab id="childTab">
<TabItem id="childItem1">
Content 1
</TabItem>
<TabItem id="childItem2">
Content 2
</TabItem>
</Tab>
</TabItem>
<TabItem id="item2">
Content 2
</TabItem>
<TabItem id="item3">
Content 3
</TabItem>
</Tab>Thanks for solving this problem or for guiding me.
I see this most often in the All Day slot of the Timeline view. I do not believe it is isolated to just that though. Here's using the native code:
Here's the same page with the code fixed:
Please note that two events are covered up: recur3 and an event that is NOT an all day event starting at 2pm. That's what the gap is. So yes, this gap is correct. Also note: In the first window I can press F12 to open the inspector, and manually delete the event elements which reveal the missing ones underneath. They are overlaid on top of each other.
After some debugging, here is the fix. The file, version, method, and line numbers are all here for you. The fix is highlighted on line 2855. The highlighted "start" should be "end".
When using Kendo's Upload component when you select a file/files to upload there is a 20% chance that it will upload the same file twice. We switched auto upload off to help, but when you delete one of the dupped files the upload button disappears causing you to delete both of them and then re-upload the file.
Upload Code -
var w = $("#winFiles").data("kendoWindow");
w.setOptions({
width: $(window).width() - 150,
height: $(window).height() - 150
});
w.center().open();
$("body").on("click", "#lnkShowUpload", function () { showWinUpload(associationId, typeId) });
function showWinUpload(associationId, typeId) {
var w = $("#winUpload").data("kendoWindow");
$("#fileUpload").kendoUpload({
async: {
saveUrl: `/api/File/?typeId=${typeId}&associationId=${associationId}`,
autoUpload: false
},
validation: {
allowedExtensions: ["pdf", "jpg", "img", "png", "gif", "doc", "docx", "xls", "xlsx", "csv", "txt"]
}
});
w.setOptions({
height: $(window).height() - 175
});
w.center().open();
}