When Virtualization is true It is not display correct labels in footer while scrolling down to up
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/virtualization-local-data">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.119/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.1.119/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.119/js/kendo.all.min.js"></script>
</head>
<body>
<script src="../content/shared/js/people.js"></script>
<div id="example">
<div id="message" class="box"></div>
<div id="grid"></div>
<div class="box wide">
<div class="box-col">
<h4>Edit mode:</h4>
<input id="editMode" />
</div>
<div class="box-col">
<h4>Create at:</h4>
<input id="createAt" />
</div>
</div>
<script>
$(function() {
var count = 100000;
$("#message").text(kendo.format("Generating {0} items", count));
generatePeople(count, function(data) {
var initStart;
var renderStart;
$("#message").text("");
var nextId = data.length + 1;
var dataSource = new kendo.data.DataSource({
pageSize: 20,
transport: {
create: function(e) {
if (e.data.models) {
//batch editing
for (var i = 0; i < e.data.models.length; i++) {
e.data.models[i].Id = nextId++;
}
e.success(e.data.models);
} else {
e.data.Id = nextId++;
e.success(e.data);
}
},
read: function(e) {
e.success(data);
},
update: function(e) {
if (e.data.models) {
//batch editing
e.success(e.data.models);
} else {
e.success(e.data);
}
},
destroy: function(e) {
if (e.data.models) {
//batch editing
e.success(e.data.models);
} else {
e.success(e.data);
}
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number", editable: false, nullable: true },
FirstName: { type: "string", validation: { required: true } },
LastName: { type: "string" },
City: { type: "string" },
Title: { type: "string" },
}
}
}
});
setTimeout(function() {
initStart = new Date();
$("#grid").kendoGrid({
dataSource: dataSource,
height: 543,
scrollable: {
virtual: true
},
editable: {
mode: "inline",
createAt: "top"
},
toolbar: ["create"],
pageable: {
numeric: false,
previousNext: false,
info:true
},
columns: [
{ field: "Id", title: "ID", width: "110px" },
{ field: "FirstName", title: "First Name" },
{ field: "LastName", title: "Last Name" },
{ field: "City", title: "City" },
{ field: "Title" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }
]
});
initEnd = new Date();
$("#message").text(kendo.format("Kendo UI Grid bound to {0} items in {1} milliseconds", count, initEnd - initStart));
});
});
$("#editMode").kendoDropDownList({
dataSource: {
data: [
{ text: "Inline", value: "inline" },
{ text: "Incell", value: "incell" },
{ text: "Popup", value: "popup" }
]
},
dataTextField: "text",
dataValueField: "value",
change: function() {
applyOptions();
}
});
$("#createAt").kendoDropDownList({
dataSource: {
data: [
{ text: "Top", value: "top" },
{ text: "Bottom", value: "bottom" }
]
},
dataTextField: "text",
dataValueField: "value",
change: function() {
applyOptions();
}
});
});
function applyOptions() {
var columns = [
{ field: "Id", title: "ID", width: "110px" },
{ field: "FirstName", title: "First Name" },
{ field: "LastName", title: "Last Name" },
{ field: "City", title: "City" },
{ field: "Title" }
];
var createAt = $("#createAt").data("kendoDropDownList").value();
var editMode = $("#editMode").data("kendoDropDownList").value();
var inlineOptions = {
dataSource: { batch: false },
editable: { mode: "inline", createAt: createAt },
columns: columns.concat([{ command: ["edit", "destroy"], title: " ", width: "250px" }]),
toolbar: ["create"]
};
var incellOptions = {
dataSource: { batch: true },
editable: { mode: "incell", createAt: createAt },
columns: columns.concat([{ command: "destroy", title: " ", width: 150 }]),
toolbar: ["create", "save", "cancel"]
};
var popupOptions = {
dataSource: { batch: false },
editable: { mode: "popup", createAt: createAt },
columns: columns.concat([{ command: ["edit", "destroy"], title: " ", width: "250px" }]),
toolbar: ["create"]
};
var editOptions = {
incell: incellOptions,
inline: inlineOptions,
popup: popupOptions
};
var grid = $("#grid").data("kendoGrid");
grid.dataSource.page(1);
grid.setOptions($.extend({}, grid.getOptions(), editOptions[editMode]));
}
</script>
</div>
</body>
</html>