Paging numbers are not displayed in a Kendo Grid - kendo-ui

Question

When I refresh the page using filterOCPPLogRefresh() function, paging numbers are not displayed.
getOCCPLog.js:
Vestel.EVCMS.OCPPLogs.GetOCPPLogs = function (chargePointID) {
$(".k-loading-image").show();
$(document).ready(function () {
// OCPP Log Grid
filterStart = $("#start").data("kendoDateTimePicker").value();
filterEnd = $("#end").data("kendoDateTimePicker").value();
messageType = $("#dropdowntree").data("kendoDropDownTree").value();
var direction = "AllMessageDirection";
var wnd, detailsTemplate;
var messageDirection = {
'ReceivedAtGateway': Vestel.EVCMS.Common.OCPPLogsColumns.Outgoing,
'SentByGateway': Vestel.EVCMS.Common.OCPPLogsColumns.Incoming
};
$("#OCPPLogGrid").kendoGrid({
dataSource: {
transport: {
read: {
url:
Vestel.EVCMS.Common.Global.EVCApiUrl +
"api/ChargePoint/GetOCPPLogs?ChargePointID=" + chargePointID +
"&filterStart=" + filterStart.toDateString() +
" &filterEnd=" + filterEnd.toDateString() +
"&messageType=" + messageType +
"&direction=" + direction,
headers: {
"accept": "application/json;odata=verbose",
'Authorization': 'Bearer ' + Vestel.EVCMS.Common.Global.accessToken,
},
dataType: "json"
}
},
schema: {
model: {
id: "id",
fields: {
messageDate: {
type: "date",
editable: false,
},
messageID: {
editable: false,
},
messageDirection: {
editable: false,
},
messageType: {
editable: false,
},
messageDetails: {
type: "dynamic",
editable: false,
}
}
},
}
},
pageable: {
pageSize: 20,
pageSizes: [10, 20, 30, 40, 50]
},
scrollable: true,
persistSelection: true,
resizable: true,
sortable: true,
columnMenu: true,
toolbar: kendo.template($("#ocpplogtemplate").html()),
columns: [
{ selectable: true, width: "50px" },
{
field: "messageDate",
format: "{0:dd.MM.yyyy HH.mm.ss.fff}",
title: Vestel.EVCMS.Common.OCPPLogsColumns.MessageDate
},
{
field: "messageID",
title: Vestel.EVCMS.Common.OCPPLogsColumns.MessageID
},
{
field: "messageDirection",
title: Vestel.EVCMS.Common.OCPPLogsColumns.MessageDirection,
template: function (dataItem) {
return messageDirection[kendo.htmlEncode(dataItem.messageDirection)]
}
},
{
field: "messageType",
title: Vestel.EVCMS.Common.OCPPLogsColumns.MessageType
},
//{ field: "messageDetails", title: Vestel.EVCMS.Common.OCPPLogsColumns.MessageDetails, width: 550 },
{
command: {
text: Vestel.EVCMS.Common.OCPPLogsColumns.MessageDetails,
click: showDetails
},
width: "200px"
}
],
editable: "popup"
});
wnd = $("#loggrid")
.kendoWindow({
title: Vestel.EVCMS.Common.OCPPLogsColumns.CustomDimensionsRaw,
modal: true,
visible: false,
resizable: false,
scrollable: true,
draggable: true,
width: '700px',
height: '200px'
}).data("kendoWindow");
detailsTemplate = kendo.template($("#template").html());
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
}
}
Here the read, create, update and destroy functions work well. But the paging is not working.
pageSize: 20 is working. Only 20 items are showing, but the footer part is not working. I can not change to next page, the buttons are not working and the footer showing no items available.
I searched and found some similar questions, but the answers didn't work for me.
Screenshot of grid showing the problem
filterOCPPLogRefresh() function:
function filterOCPPLogRefresh(e) {
filterStart = $("#start").data("kendoDateTimePicker").value();
filterEnd = $("#end").data("kendoDateTimePicker").value();
messageType = $("#dropdowntree").data("kendoDropDownTree").value();
chargePointID = $("#chargePointID").val();
direction = $("#messageDirection").data("kendoDropDownList").value();
$.ajax({
type: "GET",
url: Vestel.EVCMS.Common.Global.EVCApiUrl +
"api/ChargePoint/GetOCPPLogs?ChargePointID=" + chargePointID +
"&filterStart=" + filterStart.toDateString() +
" &filterEnd=" + filterEnd.toDateString() +
"&messageType=" + messageType +
"&direction=" + direction,
contentType: "application/json; charset=utf-8",
headers: {
"accept": "application/json;odata=verbose",
'Authorization': 'Bearer ' + Vestel.EVCMS.Common.Global.accessToken,
},
dataType: "json",
success: function (data) {
for (var i = 0; i < data.length; i++) {
if (data[i].messageDate) {
var messageDate;
var messageDateFormatted;
if (data[i].messageDate != null) {
messageDate = new Date(data[i].messageDate.toString());
messageDateFormatted =
("0" + messageDate.getDate()).slice(-2) + "." +
("0" + (messageDate.getMonth() + 1)).slice(-2) + "." +
messageDate.getFullYear() + " " +
("0" + messageDate.getHours()).slice(-2) + ":" +
("0" + messageDate.getMinutes()).slice(-2) + ":" +
("0" + messageDate.getSeconds()).slice(-2) + ":" +
("0" + messageDate.getMilliseconds()).slice(-3);
} else {
messageDateFormatted = " - ";
}
data[i].messageDate = messageDateFormatted;
}
}
$("#OCPPLogGrid").data("kendoGrid").setDataSource(data);
},
error: function (error, data) {
}
});
}