When I refresh the page using filterOCPPLogRefresh() function paging numbers are not displayed.
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],
messages: {
previous: Vestel.EVCMS.Common.PageableMessages.pagePrevious,
next: Vestel.EVCMS.Common.PageableMessages.pageNext,
last: Vestel.EVCMS.Common.PageableMessages.pageLast,
first: Vestel.EVCMS.Common.PageableMessages.pageFirst
}
},
filterable: {
operators: {
string: {
eq: Vestel.EVCMS.Common.Filter.eq,
neq: Vestel.EVCMS.Common.Filter.neq,
isnull: Vestel.EVCMS.Common.Filter.isempty,
isnotnull: Vestel.EVCMS.Common.Filter.isnotempty,
startswith: Vestel.EVCMS.Common.Filter.startswith,
doesnotstartwith: Vestel.EVCMS.Common.Filter.doesnotstartwith,
contains: Vestel.EVCMS.Common.Filter.contains,
doesnotcontain: Vestel.EVCMS.Common.Filter.doesnotcontain,
endswith: Vestel.EVCMS.Common.Filter.endswith,
doesnotendwith: Vestel.EVCMS.Common.Filter.doesnotendwith,
},
number: {
eq: Vestel.EVCMS.Common.Filter.eq,
neq: Vestel.EVCMS.Common.Filter.neq,
isnull: Vestel.EVCMS.Common.Filter.isempty,
isnotnull: Vestel.EVCMS.Common.Filter.isnotempty,
gte: Vestel.EVCMS.Common.Filter.gteNumber,
gt: Vestel.EVCMS.Common.Filter.gtNumber,
lte: Vestel.EVCMS.Common.Filter.lteNumber,
lt: Vestel.EVCMS.Common.Filter.ltNumber
},
date: {
eq: Vestel.EVCMS.Common.Filter.eq,
neq: Vestel.EVCMS.Common.Filter.neq,
isnull: Vestel.EVCMS.Common.Filter.isempty,
isnotnull: Vestel.EVCMS.Common.Filter.isnotempty,
gt: Vestel.EVCMS.Common.FiltergtDate,
gte: Vestel.EVCMS.Common.Filter.gteDate,
lt: Vestel.EVCMS.Common.Filter.ltDate,
lte: Vestel.EVCMS.Common.Filter.lteDate
},
enums: {
eq: Vestel.EVCMS.Common.Filter.eq,
neq: Vestel.EVCMS.Common.Filter.neq,
isempty: Vestel.EVCMS.Common.Filter.isempty,
isnotempty: Vestel.EVCMS.Common.Filter.isnotempty,
startswith: Vestel.EVCMS.Common.Filter.startswith,
doesnotstartwith: Vestel.EVCMS.Common.Filter.doesnotstartwith,
contains: Vestel.EVCMS.Common.Filter.contains,
doesnotcontain: Vestel.EVCMS.Common.Filter.doesnotcontain,
endswith: Vestel.EVCMS.Common.Filter.endswith,
doesnotendwith: Vestel.EVCMS.Common.Filter.doesnotendwith,
},
}
},
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();
}
$("#ExportOCPPLogs").click(function (e) {
var grid = $("#OCPPLogGrid").getKendoGrid();
var dataSource = grid.dataSource;
var filters = dataSource.filter();
var sort = dataSource.sort();
var allData = dataSource.data();
var query = new kendo.data.Query(allData);
var data = typeof (sort) !== "undefined" ? query.filter(filters).sort(sort).data : query.filter(filters).data;
var rows = [{
cells: [
{ value: Vestel.EVCMS.Common.OCPPLogsColumns.MessageDate },
{ value: Vestel.EVCMS.Common.OCPPLogsColumns.MessageID },
{ value: Vestel.EVCMS.Common.OCPPLogsColumns.MessageDirection },
{ value: Vestel.EVCMS.Common.OCPPLogsColumns.MessageType },
{ value: Vestel.EVCMS.Common.OCPPLogsColumns.MessageDetails },
]
}];
var messageDirectionArray = { 'ReceivedAtGateway': Vestel.EVCMS.Common.OCPPLogsColumns.Outgoing, 'SentByGateway': Vestel.EVCMS.Common.OCPPLogsColumns.Incoming };
var isSelectedRowOrAllRow = false;
var trs = $("#OCPPLogGrid").find('tr');
for (var i = 1; i < trs.length; i++) {
if ($(trs[i]).find(":checkbox").is(":checked")) {
isSelectedRowOrAllRow = true;
var dataItem = grid.dataItem(trs[i]);
var messageDirection = messageDirectionArray[dataItem.messageDirection];
rows.push({
cells: [
{ value: dataItem.messageDate }, //kendo.toString(kendo.parseDate(dataItem.messageDate), "yyyy.MM.dd h.mm.fff") },
{ value: dataItem.messageID },
{ value: messageDirection },
{ value: dataItem.messageType },
{ value: dataItem.messageDetails },
]
});
}
}
if (isSelectedRowOrAllRow === false) {
$.each(data, function (i, dataItem) {
var messageDirection = messageDirectionArray[dataItem.messageDirection];
rows.push({
cells: [
{ value: dataItem.messageDate }, //kendo.toString(kendo.parseDate(dataItem.messageDate), "yyyy.MM.dd h.mm.fff") },
{ value: dataItem.messageID },
{ value: messageDirection },
{ value: dataItem.messageType },
{ value: dataItem.messageDetails },
]
})
});
}
var data = [];
$.each(rows[1].cells, function (index, element) {
if (typeof element.value != 'undefined') {
data.push(index);
}
});
filterForExport(data);
function filterForExport(data) {
var eligibleColumns = data;
var filteredRows = [];
if (eligibleColumns != null) {
$.each(rows, function (index, element) {
var tempElement = [];
for (i = 0; i < eligibleColumns.length; i++) {
tempElement.push(element.cells[eligibleColumns[i]])
}
filteredRows.push({
cells: tempElement
});
});
}
else {
filteredRows = rows;
}
excelExport(filteredRows)
}
});
function excelExport(rows) {
for (var j = 1; j < rows.length; j++) {
for (var i = 0; i < rows[j].cells.length; i++) {
if (rows[j].cells[i].value instanceof Date) {
rows[j].cells[i].format = "dd.MM.yyyy HH.mm.sss";
if (rows[j].cells[i].value.toLocaleDateString() === "1/1/1" || rows[j].cells[i].value.toLocaleDateString() === "01.01.1970") {
rows[j].cells[i].value = "-";
}
}
}
}
var workbook = new kendo.ooxml.Workbook({
sheets: [
{
columns: [
{ autoWidth: true },
{ autoWidth: true }
],
title: "OCPP Logs",
rows: rows
}
]
});
kendo.saveAs({ dataURI: workbook.toDataURL(), fileName: "OCPPLogs.xlsx" });
}
});
$("#dropdowntree").kendoDropDownTree({
placeholder: Vestel.EVCMS.Common.OCPPLogsColumns.SellectMessageType,
checkboxes: true,
checkAll: true,
autoClose: false,
dataSource: [
{ text: "Authorize", value: "Authorize" },
{ text: "BootNotification", value: "BootNotification" },
{ text: "CancelReservation", value: "CancelReservation" },
{ text: "ChangeAvailability", value: "ChangeAvailability" },
{ text: "ChangeConfiguration", value: "ChangeConfiguration" },
{ text: "DataTransfer", value: "DataTransfer" },
{ text: "DiagnosticsStatusNotification", value: "DiagnosticsStatusNotification" },
{ text: "EmergencyStopTransaction", value: "EmergencyStopTransaction" },
{ text: "FirmwareStatusNotification", value: "FirmwareStatusNotification" },
{ text: "GetConfiguration", value: "GetConfiguration" },
{ text: "GetDiagnostics", value: "GetDiagnostics" },
{ text: "Heartbeat", value: "Heartbeat" },
{ text: "MeterValues", value: "MeterValues" },
{ text: "RemoteStartTransaction", value: "RemoteStartTransaction" },
{ text: "RemoteStopTransaction", value: "RemoteStopTransaction" },
{ text: "ReserveNow", value: "ReserveNow" },
{ text: "Reset", value: "Reset" },
{ text: "StartTransction", value: "StartTransction" },
{ text: "StatusNotification", value: "StatusNotification" },
{ text: "StopTransaction", value: "StopTransaction" },
{ text: "TriggerMessage", value: "TriggerMessage" },
{ text: "UnlockConnector", value: "UnlockConnector" },
{ text: "UpdateFirmware", value: "UpdateFirmware" }
],
animation: false
});
var dropdowntree = $("#dropdowntree").data("kendoDropDownTree");
dropdowntree.value([
"Authorize",
"BootNotification",
"CancelReservation",
"ChangeAvailability",
"ChangeConfiguration",
"DataTransfer",
"DiagnosticsStatusNotification",
"EmergencyStopTransaction",
"FirmwareStatusNotification",
"GetConfiguration",
"GetDiagnostics",
"Heartbeat",
"MeterValues",
"RemoteStartTransaction",
"RemoteStopTransaction",
"ReserveNow",
"Reset",
"StartTransction",
"StatusNotification",
"StopTransaction",
"TriggerMessage",
"UnlockConnector",
"UpdateFirmware"]
);
dropdowntree.trigger("change");
}
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) {
}
});
}
Hi Özgür,
I believe this behavior is due to the fact that you are updating the Grid data source vis the setDataSource method but instead of passing a DataSource instance, you are passing an array or object. You need to create a data source with all properties needed (ex. pageSize, pageSizes, etc) and pass it as an argument to the setDataSource().
var dataSource = new kendo.data.DataSource({ data: [ { name: "John Doe", age: 33 } ] }); var grid = $("#grid").data("kendoGrid"); grid.setDataSource(dataSource);Hope this helps.
Regards,
Nikolay
Hi Nikolay,
Thank you so much for your answer. Problem solved. :)
Hi Özgür,
You are welcome. I am happy to hear you managed to resolve the situation.
Please let us know if anything new arises.
Regards,
Nikolay