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">

Hello,

I am upgrading my application to Kendo version 2023.3.1114 and during the upgrade I fell over the fact, that the <span> tags do not show their assigned icons anymore.

I am using the code as explained here in the Basic Usage section: Font Icons - Sass Themes - Kendo UI for jQuery (telerik.com)
<span class="k-icon k-font-icon k-i-calendar"></span>
But the icon is not shown. If I put a text in between the <span> only the text is displayed.

Also the Dojo example, which should show how to display the icon (Font Icons - Sass Themes - Kendo UI for jQuery (telerik.com)), does not work in the Dojo: Kendo UI® Dojo by Progress (telerik.com).
Here the code:

So is this a bug in Kendo? Or am I and the Dojo missing something?

Thank you for a clarification.

Best,
Jeannine

Now that we are supposed to switch to svg icons, away from the font icons, I was wondering if there is an easy way to size the buttons? I use a custom class for the buttons right now and on two of the buttons I am using icons:

They seem to have shrunk. I am guessing this is because of the switch from font icons to the svg icons?

To be honest the icon on the refresh button for v 2020.1.118 disappeared and I had to find a suitable replacement.

So some of the sizing issue for that button might be caused by what icon I picked -- icon: "refresh" didn't seem to produce an icon, so I went with icon "arrowRotateCwIcon".

I just need some sugestions on how to maintain my custom style and get the icons to appear bigger. The style I am using is below:

.submit {
    width: 110px;
    height: 30px;
    padding: 20px 16px 20px 16px;
    border-radius: 4px;
    background-color: #1e98d7;
    box-sizing: border-box;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.35);
    font-family: "Roboto Medium", "Roboto", sans-serif;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    line-height: normal;
    letter-spacing: 0.4px;
}

    .submit:hover {
        background-color: #0084cf;
        box-sizing: border-box;
    }

    .submit:active {
        background-color: #50a5d5;
        box-sizing: border-box;
    }

Regards,

George

Hi....

Issue is the  icons don't change when clicking the expand/ contract button in the kendo-grid:

In the context of a hierarchical kendo grid,  it used to, in prior versions (2020.1.1118) swapped icons:

•  from + to - if the user desired to expand and show the child rows in a hierarchical table:

 from - to + if the user wanted collapse the child rows and show only the parent rows.

Now as of  version 2023.3.1010:

,,,something is interfering with my code, guessing that some  CSS references have changed.

Here is a DOJO link:

Untitled | Kendo UI Dojo (telerik.com)

If the link doesn't work (I am new to Kendo as of July and I still haven't gotten the hang of saving stuff on the DOJO) , I have attached a text file (with HTML) that the exact code to test in the DOJO.  You might need to stretch the right side that shows the active code to see the button in the header.

Also, the version prior to 2023.3.1010 showed an evil twin :) ... a little plus sign in addition to the default + plus icon... so you might want to go back a version to look at that too.

Can you give me some ideas on how to fix the issue of the icons NOT swapping on the 2023.3.1010 version when it was working fine previously?

Regards,

George

Use case: I have a button that triggers a long-running process.  I would like to add a spinning icon to the button itself to show that the process is already in progress (it has no reason to affect the rest of the page).  

I can add an imageUrl on the fly, however when the process completes, I would like to be able to remove the image, and it does not seem to work.  If I set imageUrl to null or empty string, nothing happens. 

This is not a huge problem as I can write jQuery code to hide the image, I just wondered if there was a simpler way.  

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!

I'd like to show / hide or change the icon of a toggle button and currently struggle getting this to work after changing to the current version.

I had no problems with older versions (2019 / 2021).

What I'm trying to achieve ist something like

setOptions({icon: "check"})

and (re)render()

I also tried to take the road via kendo.ui.icon(element....) and kendo.html.renderButton / renderIcon but so far to no avail.

Any hint would be greatly appreciated.

Kind regards

Frank

I want button add title tag.  "data refresh".

How can I make it simple?

Thank you.

Hello,

What should I write to get the value inside the cell? I run in angular, I want to assign the cell value I selected to the variable.

  @ViewChild('spreadsheet') spreadsheetEl!: ElementRef;

  constructor(private hostEl: ElementRef) {}

  ngAfterViewInit() {
    kendo.jQuery(this.spreadsheetEl.nativeElement).kendoSpreadsheet({
           columns: 3,
           //rows: 10,
           sheetsbar: false,
           toolbar: {
            home: [
              "open", "exportAs",

              {
                  type: "button",
                  text: "Material select",
                  showText: "both",
                  icon: "k-icon k-i-cog",
                  click: function(e: any) {



                    var sheet = this.spreadsheetEl.nativeElement.activeSheet();
                    var range = sheet.selection();
                  }
              }
          ],
            insert: false,
            data: false,
            },
...

thank you

regards