I am following this guide in order to implement a stepper where clicking on each step opens up a modal window.

The issue is when the stepper is on the Third step for example, clicking on it again does not trigger the select event.

What would be the way to have the select event trigger when the user clicks on the current step?

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");
}

I am facing this challenge, when i made some upgrades to Kendo UI controls.

kendo.multiselect.min.js:25

       Uncaught TypeError: Cannot read properties of undefined (reading 'renderChipList')

    at init._tagList (kendo.multiselect.min.js:25:20983)

    at new init (kendo.multiselect.min.js:25:1453)

    at HTMLSelectElement.<anonymous> (kendo.core.min.js:25:40814)

    at Function.each (jquery-1.12.4.min.js:2:2881)

    at n.fn.init.each (jquery-1.12.4.min.js:2:846)

    at n.fn.init.g.fn.<computed> [as kendoMultiSelect] (kendo.core.min.js:25:40791)

    at HTMLDocument.<anonymous> (TrackingTicketInquiry:3590:71)

    at i (jquery-1.12.4.min.js:2:27449)

    at Object.fireWith [as resolveWith] (jquery-1.12.4.min.js:2:28213)

    at Function.ready (jquery-1.12.4.min.js:2:30006)

Hi,

I'm using the .open() method on a timeline. When opening an event with this method, the little triangular caret on the event card is not consistently displayed.

This is what I expect to see. The triangle is displayed when I click on an event.

When an event is opened via the .open() method, the caret is not usually displayed (but sometimes it is, this is not consistent).

Code:

// eventData comes from an ajax call, this function is invoked in the callback

function initTimeline(eventData) {
    $("#timeline").unbind();
    $("#timeline").html('');
    $("#timeline").removeClass();

    timeline = $("#timeline").kendoTimeline({
        eventTemplate: kendo.template($("#eventTemplate").html()),
        dateFormat: "MMMM yyyy",
        orientation: timelineOrientation,
        collapsibleEvents: true,
        dataSource: {
            data: eventData, 
            schema: {
                model: {
                    fields: {
                        date: {
                            type: "date"
                        },
                    }
                }
            }
        },
        dataBound: function (e) {
            data = e.sender.dataSource.data();

            // Create the timeline type filter menu
            createTimelineFilterMenu();

            // Initalize any timeline datatables
            fInitAllDataTables();
        },
        change: function (e) {
            setTimeout(fInitAllDataTables, 1000);
        }
    });

// this is called on button click, it opens the first event in the timeline
function goToFirst() {
    var kendoTimeline = $("#timeline").data().kendoTimeline;
    var firstEvent = kendoTimeline.element.find(".k-timeline-track-item:not(.k-timeline-flag-wrap):first");
    kendoTimeline.open(firstEvent);
}

I used the kendoGrid for years, and there's something that were never able to fix, until today I think...

When we use resizable + scrollable, we set the "width" value for all of our columns.

If the total of visible columns is less then the width of the grid, when we resize, all columns move in any random width and it's almost unusable.

Over the years, we tried, to add a fake column, we show-hide it, and we tried other sort of hack, or show-hide the first visible column, etc.

But I think that I found the reason why it doesn't work, and kendo can easily fix it.,

There are 2 tables that are sync for header and body:

<table role="grid" >...  which are defined in the "_scrollable" function.

When a resize, or show-hide occurs, a function is run to set the css "width" of that table.

But, initially, it is not set. 

That's why a hack using a columnShow-Hide sometimes fix the problem, as the width is set on these tables.

But, what we just found, is that, if we call the function _updateContentWidth on our kendoGrid after creating it, the width is correctly set on these tables, and it works as expected.

Can you confirm that this method can be used without problem, and, by the way, is possible that you fix the problem, and always call that function in that situation?

Actually, I see in the code that it is only called from inside the showColumn function.

I think that it is called if a "virtual" property is also set, but I think it should be called in other conditons also, like, when there is a specific width on ALL columns.

https://dojo.telerik.com/@foxontherock/oXocEqOh/5

Hello,

I'm working with a Kendo Form. My goal is to get the certain parameter to populate its respective dropdownlist in the kendo form once the user clicks the link provided.

URL Example - User will click this link and navigate to form with their respective session code and paper/abstract code populated in dropdownlist item:

https://website.com/SpeakerRegistration?sessioncode=1234&abstractcode=16143

Test Commentary:

I am able to validate that upon page load, it does get the parameters and prints to console. BUT, I am not able to get it to populate in the dropdownlist. 

The Kendo Form Code & Window.load code at the bottom:

$(document).ready(function () {
            var validationSuccess = $("#validation-success");
 
            $("#exampleform").kendoForm({
                orientation: "vertical",
                formData: {
                    Email: "john.doe@email.com"
                },
                items: [{
                    type: "group",
                    items: [
                        {
                            field: "FirstName",
                            label: "First Name",
                            editor: "TextBox",
                            validation: { required: true }
                        },
                        {
                            field: "LastName",
                            label: "Last Name",
                            editor: "TextBox",
                            validation: { required: true }
                        },
                        {
                            field: "Degrees",
                            label: "Degrees",
                            editor: "TextBox"
                        },
 
                        {
                            field: "Session_ID",
                            label: "Session ID",
                            id: "sessions",
                            editor: "DropDownList",
                            validation: { required: true },
                            editorOptions: {
                                placeholder: "Session #",
                                filter: "contains",
                                dataSource: {
                                    type: "Data",
                                    serverFiltering: true,
                                    transport: {
                                        read: {
                                            url: "@Url.Action("SessionDropdown", "ConfSessions2022")",
                                            contentType: "application/json",
                                            type: "POST"
                                        }
                                    }
                                },
                                change: function (e) {
                                    var paperDrop = $("#Paper_ID").data("kendoDropDownList");
                                    paperDrop.dataSource.read();
                                },
                            }
                        },
 
                        {
                            field: "Paper_ID",
                            label: "Paper ID",
                            id: "papers",
                            editor: "DropDownList",
                            validation: { required: true },
                            editorOptions: {
                                placeholder: "Paper #",
                                filter: "contains",
                                dataSource: {
                                    type: "Data",
                                    serverFiltering: true,
                                    transport: {
                                        read: {
                                            url: "@Url.Action("PaperDropdown", "ConfSessions2022")",
                                            contentType: "application/json",
 
                                            data: ReadData
 
 
 
 
                                        }
                                    }
                                }
                            }
 
                        },
                        {
                            field: "File",
                            editor: function (container, options) {
                                 $('<input type="file" name="' + options.field + '" id="' + options.field + '"/>')
                                    .appendTo(container)
                                    .kendoUpload({
                                        async: {
                                            chunkSize: 11000,// bytes
                                            autoUpload: false,
                                            saveUrl: "@Url.Action("Chunk_Upload_Save", "ConfSessions2022")",
                                            removeUrl: "remove"
 
                                        },
                                        upload: onUpload,
                                        validation: {
                                            allowedExtensions: [".mp4"],
                                            maxFileSize: 524288000
                                        },
                                        select: onSelect
 
                                    });
                            }
                        }
 
 
                    ]
                }],
                validateField: function (e) {
                    validationSuccess.html("");
                },
                submit: function (e) {
                    e.preventDefault();
                    var upload = $("#File").data("kendoUpload");
                    upload.upload();
 
                    validationSuccess.html("<div class='k-messagebox k-messagebox-success'>Form data is valid!</div>");
                },
                clear: function (ev) {
                    validationSuccess.html("");
                }
            });
 
        });
 
        function onUpload(e) {
            e.sender.options.async.saveUrl = "@Url.Action("Chunk_Upload_Save", "ConfSessions2022")" + "?FirstName=" + document.getElementById("FirstName").value + "&LastName=" + document.getElementById("LastName").value + "&SessionID=" + document.getElementById("Session_ID").value + "&PaperID=" + document.getElementById("Paper_ID").value;
        }
 
 
 
        function ReadData() {
            var dropdownVal = document.getElementById("Session_ID").value;
 
            return {
                sessionDrop: dropdownVal
            };
        };
 
        function onSelect(e) {
            $("div.k-action-buttons").hide();
        }
 
 
 
        window.onload = function() {
            try {
                const input = document.getElementsByName('Session_ID');
                const inputTwo = document.getElementsByName('Paper_ID');
                var url_string = (window.location.search).toLowerCase(); //
                var url = new URLSearchParams(url_string);
                var session = url.get('sessioncode');
                var paper = url.get('abstractcode');
                var inputThree = document.getElementsByClassName('k-input-value-text');
                input.value = session;  // fill the form with the SessionID
                inputTwo.value = paper;
                console.log(session+ " and "+paper);
                
            } catch (err) {
                console.log("Issues with Parsing URL Parameter's - " + err);
            }
        }

Thank you, look forward to receiving your help.

Lee

Hi,

I am looking for a way to change the font size & font family after the spreadsheet is loaded.

I know that this can be done when we loop through all the cells and set it individually, i am looking for a more elegant way to do in a sheet/control level. Is it possible?

I saw the defaultCellStyle attribute but i am not able to get it working even changing the values.

TIA

Regards,

Brian

I have followed this guide on how to add checkboxes to the Kendo Grid and have it persist the checkbox states. I also have a Reload button that calls $("#grid").data("kendoGrid").dataSource.read(); when clicked.

The data reloads properly but the checked checkboxes from the previous grid is still retained. How do I have set it so that the checkboxes for the grid will all be unchecked upon clicking the Reload button defined above?

A possible solution I've found is to set all checkboxes to unchecked before calling .read() function. But I have about 8000 records in the grid so running this code will take more than thirty seconds. I've found this function grid.clearSelection(); but it only clears the current page's checkboxes and leaves the subsequent pages checked.

So my question is, is there a fast way have the grid not retain the previous selected checkboxes when the Reload button is clicked?

Update:

I've found the following guide on how to clear selections across all pages. I've tested and the performance is fast. Thank you for your interest in viewing this post.

var grid = $("#grid").data("kendoGrid");
grid._selectedIds = {};
grid.clearSelection();