When the following code is run, I get an error in the console indicating that .kendoDateTimePicker is not a function, but the controls render when the convertNewPickerControl() method is called outside the $(document).ready() function.

I also get the same error when I try to convert cloned inputs dynamically (e.g., when a user presses the "Add" button.

The following is the code for the entire page (I'm getting the same issue in our product using similar code).

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/kendo/2022.3.1109/kendo.all.min.js"></script>

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/kendo/styles")
@Styles.Render("~/Content/kendo/css")

<style>
    .row {
        padding-top: 12px;
        padding-bottom: 12px;
    }
</style>

<main>

    <div id="cloneDiv" style="display:none;">
        <div id="row0" class="row">
            <div class="col-md-1 form-label">Date/Time:</div>
            <div class="col-md-5">
                <input id="dateTimePickerFrom_row0" />
            </div>
            <div class="col-md-5">
                <input id="dateTimePickerTo_row0" />
            </div>
            <btn id="button_row0" class="col-md-1 btn btn-outline-info" onclick="addNewRow(this);">Add</btn>
        </div>
    </div>

    <div id="parentDiv">
        <div id="row1" class="row">
            <div class="col-md-3">
                <input id="dateTimePickerBase_row1" class="date-time-picker" />
            </div>
            <div class="col-md-3">
                <input id="dateTimePickerFrom_row1" class="date-time-picker" />
            </div>
            <div class="col-md-3">
                <input id="dateTimePickerTo_row1" class="date-time-picker" />
            </div>
            <btn id="button_row1" class="col-md-1 btn btn-outline-info" onclick="addNewRow(this);">Add</btn>
        </div>
    </div>
</main>

<script>

    var row = parseInt(1);

    console.log('converting before document ready...');
    convertNewPickerControl("dateTimePickerBase_row1")

    $(document).ready(function () {
        console.log('converting within document ready...');
        convertNewPickerControl("dateTimePickerFrom_row1");
    });

    console.log('converting after document ready...');
    convertNewPickerControl("dateTimePickerTo_row1");

    function convertNewPickerControl(sender) {

        var savedStartDate = new Date();

        $("#" + sender).kendoDateTimePicker({
            format: "MM/dd/yyyy hh:mm:ss tt",
            value: savedStartDate,
            min: savedStartDate
        });
        console.log('...successfully converted.');
    }

    function addNewRow(sender) {

        var sourceRow = $('#row0');
        var newRow = $('#row' + row);
        var currentRowNumber = 'row' + row;
        var regex = new RegExp(currentRowNumber, "g");
        var proxyListRegex = new RegExp(/\.ProxyList\[\d+\]/g);
        var _rowRegex = new RegExp(/\_row\d+/g);

        var clonedRow = $('<div>').append(sourceRow.clone()).html().replace(regex, 'row' + (parseInt(row) + 1)).replace(proxyListRegex, '.ProxyList[' + row + ']').replace(_rowRegex, '_row' + (parseInt(row) + 1));

        clonedRow = clonedRow.replace("row0", "row" + (parseInt(row) + 1));
        newRow.after(clonedRow);

        /* convert new inputs to datetimepickers */
        var newFromControl = "dateTimePickerFrom_row" + row;
        var newToControl = "dateTimePickerTo_row" + row;

        convertNewPickerControl(newFromControl);
        convertNewPickerControl(newToControl);

        row = (parseInt(row) + 1);

    }
</script>

As can be seen in the console, the first and last calls to convertNewPickerControl() work, but the call within $(document).ready() does not (and neither do the calls made to convertNewPicker() in addNewRow() -- not shown below):

So...I know $(document).ready is executing as the console.log entry is noted.  Why would it be working outside $(document).ready() but not within it (or via the call when adding a new row)?

I want to create a global onOpen function that will apply to all dropdownlists without the need to manually attach it to each one's open option on the site. For example, I want to hide the optionLabel if it has a class of disabled in it but I don't want to have to manually attach it to each dropdownlist created. 

                    open: function () {
                        let optionLabel = this.element.getKendoDropDownList().list.find(".k-list-optionlabel");
                        let isDisabled = $(optionLabel).find(".disabled").length > 0;
                        if (isDisabled) {
                            $(optionLabel).hide();
                        }
                    },

Hi

I export various grids to pdf using some page templates for headers and footers.

This works basically fine but if I fiddle around resizing the columns manually, the pdf starts to break the grid content at the wrong place and it seems to ignore the margins set as options.
Attached you find three examples, one with columns in original width, another one with resized columns, the pdf still applying bottom-margin, the third one with resized columns, the pdf now ignoring the bottom-margin.

Is this a know problem or do I miss an important setting?

Download kendo ui trial and in exmaple i just try following code

place these two file at "Kendo 2023\examples\dropdownlist" and run you will find "Blocked a frame with origin "null" from accessing a cross-origin frame."

parent.html is as below

<html lang="en">

<head>
    <title>Parent Frame</title>
    <script>
        ___data = [
            { CityID: 1, CityName: "Lisboa" },
            { CityID: 2, CityName: "Moscow" },
            { CityID: 3, CityName: "Napoli" },
            { CityID: 4, CityName: "Tokyo" },
            { CityID: 5, CityName: "Oslo" },
            { CityID: 6, CityName: "Pаris" },
            { CityID: 7, CityName: "Porto" },
            { CityID: 8, CityName: "Rome" },
            { CityID: 9, CityName: "Berlin" },
            { CityID: 10, CityName: "Nice" },
            { CityID: 11, CityName: "New York" },
            { CityID: 12, CityName: "Sao Paulo" },
            { CityID: 13, CityName: "Rio De Janeiro" },
            { CityID: 14, CityName: "Venice" },
            { CityID: 15, CityName: "Los Angeles" },
            { CityID: 16, CityName: "Madrid" },
            { CityID: 17, CityName: "Barcelona" },
            { CityID: 18, CityName: "Prague" },
            { CityID: 19, CityName: "Mexico City" },
            { CityID: 20, CityName: "Buenos Aires" }
        ]
    </script>
</head>

<body>
    <iframe src="./child.html" style="height: 100vh;width: 100vw;border: 0;"></iframe>
</body>

</html>

and child.html is as below

I have a kendo datepicker that is required, however when it is not filled out and the dateInput format is set to true, the required message does not display.

Here is a dojo

https://dojo.telerik.com/ucOdILoT

Hello, I am studying a lot because I am using Kendo for JQuery for the first time in this project.

Currently, I am creating a function that registers a favorite for each row of data, and I need to create it as shown in the picture.

The favorite column is assigned a Y/N cutoff value, and the icon changes accordingly.

And when the icon is clicked, the icon should change if the favorite status is successfully switched through ajax communication.

Thanks a lot for all your help!

Hi,

I am using kendo ui treeview for sort of selectable hierarchical menu. This menu can contain pretty much data with deep tree hierarchy.

Ever since we implemented it (few years ago), we used approach suggested here:
https://docs.telerik.com/kendo-ui/knowledge-base/filter-out-search-results

This was working fine so far. However, we finally started updating things to the newer versions, and after update to 2022.2.802 this method became 3-4 times slower than before.
For example same filtering method with exactly same dataset and the same search keyword has following values:

Before update:
measure filter 0.4153999999985099

After update:
measure filter 2.279300000000745

Even this piece of code gets slower

      if (data) {
        // Re-apply the filter on the children.
        dataSource.filter({ field: "hidden", operator: "neq", value: true });
      }

(same iteration)

Old:
measure dsFilter 0.001200000002980232

New:
measure dsFilter 0.013800000000745058

Unfortunately, we cannot update directly to the latest version to test if it is better. This is because of styling braking changes which we have to address and other constraints that we have. We have to do it gradually.

Could you please advise what to do, since depending on the dataset size, filtering can last more than 7-8 seconds, and reseting filtering even longer. This basically renders the feature unusable. 

Thank you very much.

Regards, Vedad