With a Virtual-scrolled navigatable Kendo UI Grid, if you initially scroll down a couple pages and click on a row, the selection is not correct and the position changes.
The position shifts upon selecting a row.
The changing event is not fired when selecting a row the first time.
The position should not shift, and the changing event should be fired upon every selection change.
Bug report
Locked Rows wrong height calculation with line-height
td {
line-height: 1.1em;
}
A regression introduced in version 2025.1.211.
Reproduction of the problem
Dojo: https://dojo.telerik.com/AgrtkKSN
Environment
jQuery: 3.4.1
Kendo UI version: 2025.1.211 or newer
Browser: [all ]
Bug report
Grid in adaptive mode does not allow column resizing on mobile devices
Reproduction of the problem
adaptiveMode: "auto"Dojo: https://dojo.telerik.com/wrQNuNbR
Run on a mobile device and try to resize
Environment
jQuery: 2025.2.520
Kendo UI version: 2025.2.520
Browser: [all ]
When a user clicks on a locked column header (for example for sorting), the focus unexpectedly shifts to the first unlocked column instead of remaining on the clicked header.
The visual/keyboard focus immediately moves to the first unlocked column. If the user clicks the second locked column, the focus shifts to the second unlocked column.
Clicking on a locked column should retain focus on that column, not move to another grid column.
The issue is a regression starting with 2022.3.913 version
In a Grid with filterable set to "row" and reorderable enabled, if you type something in the filter input and try selecting the text with the mouse, the column is getting dragged.
Regression introduced with 2025.2.520
The column is being dragged, preventing you from selecting the text by dragging the mouse over it
The column shouldn't be dragged.
When a date is selected in the Grid and the value is cleared using the filter method, the filterMenu keeps the value of the Date fields.
The Grid is filtered and the filter is cleared correctly, but the value of the date remains in the filter menu.
When the Grid filter is cleared, the value of all inputs in the filter menu should be cleared as well.
$('.k-filter-menu-container [data-role="datepicker"]').data('kendoDatePicker').value(null)
When the Grid has scrollable.virtual enabled and pdfExport.allPages set to true, the loader is actually displayed, but it gets hidden immediately when the next page is loaded for exporting. This leads to the loader appearing as not visible. https://dojo.telerik.com/QlIlIbTZ
I would like the progress bar functionality to be improved and to have built-in support for displaying a progress bar in the virtual Grid when exporting all pages
Upon editing a Kendo UI Grid with inline editing with a hidden column, the Update/Save/Cancel buttons appear in the wrong placement.
Kendo UI version: 2025.3.812
Browser: [all ]
When using the Grid's GetSelectedData method with a selectable column, the method throws an error.
The following error message occurs:
kendo.all.js:143633 Uncaught TypeError: Cannot read properties of undefined (reading 'selectedRanges')
Kendo UI version: 2025.3.812
Browser: [all ]
Grid rows could not be properly selected on iPad
The rows could not be selected.
It should be possible to select a row in the Grid when it is loaded on iPad.
Used device for testing: iPad Pro iOS18.6
Calling the Grid's addRow method throws an error.
Regression introduced with version 2025.3.812
An error is thrown after adding the first row
No errors should be thrown
When a Grid is set to readonly mode, but it is also navigatable, and the user clicks on a cell and presses Tab, the next cell enters editable mode.
Tab.The cell is editable.
When the Grid is in readonly mode, it should not be editable when navigating using the tab key.
When the editable option is disabled in the navigatable Grid and the user presses the 'Delete' button, the row is removed.
The row is removed, although the Grid is not editable.
The rows should not be removed in the non-editable Grid.
When using column virtualization in Kendo Grid, the save event returns an incorrect field name. After scrolling to virtualized columns, editing a cell displays the value from a different column.
An incorrect value is displayed in the cell:
The field in the save event is not correct; instead, Field48 is logged.
The correct field should be edited and returned in the save event when editing a Grid with virtual columns.
I am trying to change the menu option for a column from false to true and others from true to false when a user selects an item from a dropdown. This isn't working. I'm using getOptions(), changing the menu setting in each column, and then setOptions(options) to set it.
Here is a dojo showing an example. In the example, firstName and lastName are initially hidden. I simulate a user choosing last name from some sort of selector (like a dropdown box). The code should then hide both name columns and unhide the lastName column. Instead it hides both name columns.
It seems to have something to do with setting any of the name columns to hidden on initialization. If I remove this from the column settings on initialization though it only works once and when I choose a different option from the dropdown (dropdown is simulated in the dojo so you can't try this but trust me) it breaks.
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.511/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.511/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.511/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.511/js/kendo.all.min.js"></script></head>
<body>
<div id="myGrid"></div>
<script>
let tableRows = [
{
ID: 1,
FirstName: "John",
LastName: "Smith",
Age: 21
},
{
ID: 2,
FirstName: "Jenny",
LastName: "Jones",
Age: 18
},
{
ID: 3,
FirstName: "Greg",
LastName: "Adams",
Age: 23
}
];
let tableColumns = [
{
title: "Employee ID",
field: "ID",
width: 100,
locked: true,
menu: false
},
{
title: "First Name",
field: "FirstName",
width: 150,
hidden: true,
attributes: { "class": "name" },
},
{
title: "Last Name",
field: "LastName",
hidden: true,
width: 150,
attributes: { "class": "name", "data-position": "last name" },
},
{
title: "Age",
field: "Age",
width: 100
}
];
var grid = $(`#myGrid`).kendoGrid({
dataSource: {
data: tableRows,
schema: {
model: {
id: "ID",
fields: { ID: {type: "number"}}
}
}
},
dataBound: function (e) {
if (e.sender.dataSource.view().length == 0) {
var colspan = e.sender.thead.find("th").length;
//insert empty row with colspan equal to the table header th count
var emptyRow = "<tr><td colspan='" + colspan + "'></td></tr>";
e.sender.tbody.html(emptyRow);
e.sender.table.width(800);
}
},
columns: tableColumns,
columnMenu: true,
sortable: true,
pageable: false
}).data("kendoGrid");
let options = grid.getOptions();
let columns = grid.columns;
let nameColumns = $(".name");
let lastNameColumn = $("[data-position='last name']");
let lockedColumnCount = 0;
for (var i = 0; i < columns.length; i++) {
if (columns[i].locked) {
lockedColumnCount++;
}
}
$.each(nameColumns, function (index, element) {
let elementIndex = $(element).index() + lockedColumnCount;
//kendoGrids[tableId].showColumn(elementIndex);
options.columns[elementIndex].menu = false;
options.columns[elementIndex].hidden = true;
});
// Let's pretend Last Name was chosen from a select box part of name to show.
$.each(lastNameColumn, function (index, element) {
let elementIndex = $(element).index() + lockedColumnCount;
options.columns[elementIndex].menu = true;
options.columns[elementIndex].hidden = false;
//kendoGrids[tableId].showColumn(elementIndex);
});
console.log(options);
grid.options = options;
grid.setOptions(options);
</script>
</body>
</html>