Paging numbers are not displayed.

0 Answers 8 Views
Grid
Özgür
Top achievements
Rank 1
Özgür asked on 11 Apr 2022, 05:57 AM

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) {
        }
    });
}
Nikolay
Telerik team
commented on 13 Apr 2022, 10:11 PM

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

Özgür
Top achievements
Rank 1
commented on 15 Apr 2022, 06:46 AM

Hi Nikolay, 

Thank you so much for your answer. Problem solved. :)

 

Nikolay
Telerik team
commented on 20 Apr 2022, 06:11 AM

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

No answers yet. Maybe you can help?

Tags
Grid
Asked by
Özgür
Top achievements
Rank 1
Share this question
or