Hello,

We have upgraded our Kendo jQuery package. The previous version was 2019.1.220 and our latest version is 2023.3.1114. We observed that

• Some classes were changed in the new js say buttons in the kendo grid.
• Some CSS files are removed. (Assuming it is not compatible with the current version.

After upgrading some of our css are not getting applied. Attaching the screenshots for reference. I'm attaching my sample code.

<link href="{{ URL::asset('css/boostrap_v4_alpha.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ URL::asset('kendo/styles/material-main.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ URL::asset('kendo/styles/font-icons/index.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ URL::asset('kendo/styles/bootstrap-main.css') }}" rel="stylesheet" type="text/css">

Hi,

as the title says i'm trying to open an alert on the Select Event of a kendoContextMenu, but the alert is shown only after the Select function is completed, is it possible to show an alert as soon as the user clicks on the ContextMenu option (at the start of the Select Event)?

Below the Select Event of my code:

 select: function (e) {
     alert("Test Alert"); //This one appears only after that the Select function ends, but i'd want it to appear as soon as the select function starts

    //MY CODE
}

Thanks in advance,

- Antonio

Please advise me to change the default Open Close animation of the Kendo grid popup window,

I tried to like this, but the default open-close animation(zoom-in and zoom-out) can't change,

anyone knows the way to change the open & close animation.

Hello experts

How do I match the front line? (When I set kendoForm, orientation: 'horizontal')

please Answerㅠㅠ

link : https://docs.telerik.com/kendo-ui/api/javascript/ui/form/configuration/items#itemscolspan

<form id="myForm"></form>


<script>
  $("#myForm").kendoForm({
    formData: {
        ID: 1,
        FirstName: "John",
        LastName: "Doe",
        Address: "London",
        Postcode: "SW1A 1AA"
    },
    layout:"grid",
    orientation: 'horizontal',
    grid: {
        cols: 2,
        gutter: 20
    },
    items: [{
        type: "group",
        label: "Personal Information",
        layout: "grid",
        colSpan: 2,
        grid: {
            cols: 2,
            gutter: 10
        },
        items:[{
            field: "FirstName",
            label: "First Name:",
            validation: { required: true },
            colSpan: 1
        },{
            field: "LastName",
            label: "Last Name:",
            validation: { required: true },
            colSpan: 1
        },{
            field: "Addresss",
            label: "Address:",
            validation: { required: true },
            colSpan: 2
        },{
            field: "Postcodee",
            label: "Postcode:",
            validation: { required: true },
            colSpan: 2
        }]
    },{ 
        type: "group",
        label: "Shipping Address",
        layout: "grid",
        colSpan: 2,
        grid: {
            cols: 4,
            gutter: 10
        },
        items:[{
            field: "Address",
            label: "Address:",
            colSpan: 2,
        },{
            field: "Postcode",
            label: "Postcode:",
            colSpan: 2
        }]
    }]
  });
</script>