We are trying to Update kendo from 2020.3.1021 to 2024.1.319, we download the version and then we just copy the kendo.all.min.js, but when we start running the application the drop downs are all oversize, the arrow grouping for the grids is black, but the main thing is we use the kendoMobileSwitch, but every where we try to use we get the error "Uncaught TypeError: $(...).kendoMobileSwitch is not a function".

The questions is, do we need to add any additional js reference file to use this function ?

this is how all the drop downs were affected.

this is the arrow grouping image that is back

and the js error is when we try to call like this: $("#element").kendoMobileSwitch({ checked: true });, we get the error "Uncaught TypeError: $(...).kendoMobileSwitch is not a function"

let me explain what issue i am facing , i have two cloumns in kendogrid one is dropdown and other is simple textbox

let say dropodown column has (emailadress, website dropdown) now i want to match the exact expression of mail to the other column

if it matches then save the record if not matches than show the toolptip and prevent for saving changes

this is the code

save: function(e) {
                                    // Get the data item being saved
                                    var dataItem = e.model;

                                    // Access properties of the data item and perform actions accordingly
                                    var addressType = dataItem.intInternetAddressTypeID;
                                    var inputField = dataItem.strInternetAddress;

                                    // Perform validation or other actions based on the properties
                                    if (addressType === "2") {
                                        // Email validation for input field
                                        var emailRegex = /^[^\s@@]+@@[^\s@@]+\.[^\s@@]+$/;
                                        if (!emailRegex.test(inputField)) {
                                            // Set validation message on the corresponding cell
                                            e.container.find("[name=strInternetAddress]").closest("td").attr("data-strInternetAddress-msg", "Invalid email address format");
                                            e.preventDefault(); // Prevent saving the record
                                        }
                                    } else if (addressType === "10") {
                                        // Phone number validation for input field
                                        var phoneRegex = /^[0-9]+$/;
                                        if (!phoneRegex.test(inputField)) {
                                            // Set validation message on the corresponding cell
                                            e.container.find("[name=strInternetAddress]").closest("td").attr("data-strInternetAddress-msg", "Invalid phone number format");
                                            e.preventDefault(); // Prevent saving the record
                                        }
                                    }
                                },

i also enable the tooltip from databound
dataBound: function (e) {
   e.sender.element.find("[data-strInternetAddress-msg]").each(function () {
                                    $(this).kendoTooltip({
                                        position: "bottom",
                                        content: $(this).attr("data-strInternetAddress-msg"),
                                    });
                                });
}but tooltip is not showing in the page , it preventing from saving but not showing tooltip after inspection i found that it creating this html

<td role="gridcell" data-container-for="strInternetAddress" data-strinternetaddress-msg="Invalid email address format"><input type="text" class="k-input k-textbox k-valid" name="strInternetAddress" required="required" data-required-msg="Internet Address is required" data-bind="value:strInternetAddress"></td>


Help me how to show the tooltip not alert i dont want alert

Hi,

I am currently attempting to upgrade the Kendo UI from 2022.2.510 to 2023.2.829 and need some assistance figuring out which .css files and .js files are the closest match to what I have for 2022.2.510. Wow it's different....seems like most of the css and javascript libraries have been reorganized.

    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="Kendo/2023.2.829/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="Kendo/2023.2.829/styles/kendo.bootstrap.min.css" />
    <link rel="stylesheet" href="Kendo/2023.2.829/styles/kendo.bootstrap.mobile.min.css" />
    <link rel="stylesheet" href="FontAwesome/font-awesome-4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="styles/jquery_1.12.0-rc2/jquery-ui.min.css" />

    <!-- JAVASCRIPT -->
    <script type="text/javascript" src="Kendo/2023.2.829/js/jquery.min.js"></script>
    <script type="text/javascript" src="Kendo/2023.2.829/js/jszip.min.js"></script>
    <script type="text/javascript" src="Kendo/2023.2.829/js/kendo.all.min.js"></script>
    <script type="text/javascript" src="Kendo/2023.2.829/js/kendo.timezones.min.js"></script>
    <script type="text/javascript" src="scripts/jquery-ui.min.js"></script>
    <script type="text/javascript" src="scripts/populateTable.js"></script>
    <script type="text/javascript" src="scripts/interimDataRecs.js"></script>
    <script type="text/javascript" src="scripts/payrollDataRecs.js"></script>

I am fairly new at working with the Kendo UI -- I may just need to be pointed to documentation or a README that maps the old files to the new(?). I am not using anything fancy...these are pretty much the default controls.

So far I have not attempted to swap out ANYTHING.... I don't even know where to begin.. I am however, starting to do this shortly.  Yikes! 

FYI: I am using the following controls:

• kendoDropDownList
• kendoButton
• kendoGrid (detailInit -- using the hiarchical stuff).
• kendoSwitch
• kendoNotification
• kendoToolTip

Be curious if you all have a recommend approach or stratedgy to upgrading Kendo UI for jQuery libraries?

I'd also like to know the best approach to minifying the Kendo folders?

The Kendo stuff is stashed in the wwwroot (I did not design this structurer ... but I am stuck with it.):

Thanks for your help and patience  ^__^

George

After Implmenting the Content Security Policy (CSP) in our application, various Kendo controls have stopped working. The CSP, blocks execution of inline scripts and since the Kendo controls are creating scripts while they render, CSP finds it as a threat and hence blocks its execution.

Below is a snapshot of the browser console error. All of the 5 errors are being thrown by kendo Controls.

When the Kendo Control, such as a grid, is rendered, a script tag is generated. Please check the below screenshot for reference.

Here, we have a grid, divIFAResults, when it is rendered on the screen, a script tag with Kendo.syncReady() is generated. The Kendo Grid relies on this script for its smooth execution, but our CSP blocks this script, inturn making the control unusable.

We have added 'unsafe-eval' as per the telerik docs for CSP. We are using the Kendo files hosted in our own project, not from CDN.

Hello community, how are you?

I need to replicate a filter like the one in this image. This is inside a kendoGrid filter, but I can't replicate something similar with MultiSelect and CheckboxGroup. 

Supposedly this function is what makes this filter look like that:

function categoryDropdownEditor(container, options) {
        $('<input required data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                dataSource: fk_categoriesDatasource,
                dataTextField: "category",
                dataValueField: "id",
                filter: "contains",
                minLength: 1
            });
    }

My kendoGrid is configured like this:

$("#grid").kendoGrid({
        dataSource: dataSourceGrid,
       
        autoBind: true,
        scrollable: true,
        sortable: true,
        filterable: true,
        groupable: true,
        resizable: false,
        loaderType: "skeleton",
        pageable: {
            refresh: true,
            numeric: false,
            input: true,
            previousNext: true,
            alwaysVisible: true
        },
        noRecords: {
            template: function (e) {
                return "No hay datos disponibles.";
            }
        },
        columns: [
            {
                title: "Categoría",
                field: "category_id",
                dataTextField: "category",
                dataValueField: "id",
                editor: categoryDropdownEditor,
                filterable: {multi: true},
                dataSource: {
                    transport: {
                        read: {
                            url: apibaseurl + endpoint + "/categories",
                            type: "GET",
                            dataType: "json",
                            beforeSend: addToken,
                        },
                    },
                    schema: {
                        data: "data",
                        total: "total",
                        model: {
                            id: "id",
                            fields: {
                                category: {type: 'string'},
                            }
                        }
                    },
                },
            },
            
            {
                command: [
                    "edit",
                    {
                        name: " ",
                        iconClass: "k-icon k-i-more-vertical",
                    }
                ],
                title: " ",
                width: 210
            }],
        editable: "popup",
    });

I apologize if it is not understood or if I forgot to put something, it is my first post here.

Thank you very much for your attention.

Jonathan.

I have a filter on a datasource which in return updates a grid. The following are the code to filter and its' template handler.

The problem with this is that, I can load the categories at first when I'm creating the filters. But when I save and reload the filter from local storage, the category dropdown does not load. Please help me with this. It loads up only on a fresh filter.

Thanks in advance.

@(Html.Kendo().Filter<Lovely>()
                                .Name("OrgFilter")
                                .ApplyButton(true)
                                .ExpressionPreview(true)
                                .DataSource("DataSource")
                                .Fields(f =>
                                {
                                    f.Add(p=>p.OrgName).Label("Organization");
                                    f.Add(p=>p.CategoryId).Label("Category").EditorTemplateHandler("CategoryDropdown");
                                    f.Add(p=>p.AsAtDate).Label("As At Date");
                                }))

<script>
function CategoryDropdown(container, options) {
        $('<input data-bind="value: value" name="' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                dataTextField: "CategoryId",
                dataValueField: "CategoryId",
                dataSource: @Json.Serialize(ViewData["Catogories"])
            });
    }
</script>

Hi,

We are using keno grid component, in one of the grid column we are appending kendo multiselect to user to select option ,on selecting we are setting other columns , on setting of other columns selected option from dropdown is going off

Scenario1: once we set the remaining columns the selected option from kendo multiselect is going off.

Scenario2: if we select second time the same option then the selected option is not going off.

Scenario3: if we add the row to the grid , the second time selected option is going off again.

can u please suggest is there anything wrong in the code.

for reference:  http://dojo.telerik.com/iNaqIYEh/27

Thank you

I'm new to Kendo UI/Telerik, but have been a web developer for over 15 years.

Please forgive my title as well, as I could be doing it completely wrong by doing this:

            dataBound:function(){
                $('.toolbar').kendoToolBar({
                    items: [ {
                        type: "splitButton",
                        text: "Edit",
                        click:function(e){
                            var grid = $('#grid').data('kendoGrid');

                            grid.editRow(e.target.parents('tr'))
                        },
                        menuButtons: [
                            { id: "foo", text: "Print", click:function(){alert('print')} },
                            { id: "bar", text: "Delete", click:function(e){
                                    var grid = $('#grid').data('kendoGrid');

                                    grid.removeRow(e.target.parents('tr'))
                                } },
                        ]
                    } ]
                });
            }

But that's what the demo shows. I’m a bit confused as to why this works with a hardcoded data source:

https://dojo.telerik.com/eMUwAqUH

I've been piecing together quite a bit on my own, but one thing has me stumped -- this seems like such a common requirement for Grid usage, and yet my searches don't seem give me anything for jQuery UI.

But as soon as I swap in my real data source (API call), when I hit Edit, then hit Edit again to save the change, the entire box disappears.

I took a short video:

https://www.loom.com/share/9d894316b4364efbae18c01e8ede9db4

This is a pretty big deal for me because all of my data tables are going to be API driven, and I want to use a dropdown for the action columns NOT individual buttons. A lot of the time I’m going to have more than just “Edit and Delete” so a dropdown makes more sense.

Any help would be appreciated, I'm sure you can literally swap out the dataSource and columns with a sample one, and you should get the exact same error. I'm running on the latest version of Edge, but same thing happens in Chrome.