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"

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 have tow KendoUI grids with one row and multiple columns.

If we change value of Column1 dropdown in Grid1, it should change value of Column1 Dropdown in Grid2,

Please share your inputs how we can implement this requirement in Jquery.

I have implemented both grids dropdown lists using Column Template.

Please find attachment for grid structures.

Hi

How I can make cascade drop downlist inside a grid like in this example :

https://demos.telerik.com/kendo-ui/grid/editing-custom

Hello

I'm using an editable GRID with CREATE toolbar. I would like to customise my editable pop-up to add a kendoDropDownList for selecting a element in a list. 

In my exemple I have a grid with "accessoires"  I can ADD new one or DELETE existing ones

If I create I want to choose the new element in a kendoDropDownList  NOT in TYPE=INPUT 

How to do this ?

Here is the code of my GRID

  //Grille des accessoires
    $("#gvAccessoires").kendoGrid({
        columns: [
            {
            field: "LibelleObj",
            title: "Accessoire"
            },
            { command: [{ name: "destroy", text: "Supprimer", visible: function (dataItem) { return !dataItem.IsPublie } }], title: " ", width: "250px" },
        ],

        editable: {
            mode: "popup",
            window: {
                title: "Saisie des accessoires",
                width: 600
            }
        },

        toolbar: ["create"],
        edit: function (e) {

???? how to add here the kendoDropDownList

        },
        save: function (e) {

            Accessoires.add(new Accessoire(false, e.model));

        },
        remove: function (e) {     
            _.forEach(selectedOP.Accessoires, function (item) {
                if (item.idObj == e.model.idObj) Accessoires.remove(item);
            });
        }

    });

        var ds3 = new kendo.data.DataSource({
            data: Accessoires,
            schema: {
                model: {
                    id: "idObj",
                    fields: {
                        id: { editable: false, nullable: true },
                        LibelleObj: { validation: { required: true } },
                    }
                }
            }
        });
        $("#gvAccessoires").data("kendoGrid").setDataSource(ds3);

Thank you