grid column virtualization issue with hidden column.
When you scroll further in your grid having one or multiple hidden column(s) the value of the hidden column appears in a side column.

<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/column-virtualization">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(function() {
var columns = [];
var data = [];
var numberOfColumns = 500;
var numberOfRows = 100;
var field;
var row;
var i;
var j;
for (i = 1; i <= numberOfColumns; i++) {
field = ("Field" + i);
if(i==2)
columns.push({ field: field, title: field, width: 200, hidden: true });
else
columns.push({ field: field, title: field, width: 200 });
}
for (i = 1; i <= numberOfRows; i++) {
row = {};
for (j = 1; j <= numberOfColumns; j++) {
field = ("Field" + j);
row[field] = "R" + i + ":C" + j;
}
data.push(row);
}
var dataSource = new kendo.data.DataSource({
pageSize: 10,
transport: {
read: function(e) {
e.success(data);
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
sortable: true,
scrollable: {
virtual: "columns"
},
width: 1000,
navigatable: true,
filterable: true,
columnMenu: true,
pageable: {
refresh: true,
pageSize: 10,
pageSizes: true,
buttonCount: 5
},
columns: columns
});
});
</script>
</div>
</body>
</html>