Issues with changing icons on a Kendo button (2023.3.1010)

1 Answer 250 Views
Button General Discussions Grid
George
Top achievements
Rank 2
Iron
Iron
Iron
George asked on 16 Oct 2023, 10:07 PM

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

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Neli
Telerik team
answered on 19 Oct 2023, 01:51 PM

Hello George,

As of the R1 SP1 2023 release, the Kendo UI for jQuery supports rendering of SVG icons instead of the traditional Font icons. I would suggest taking a look at the articles linked below for more information:

https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/svg-icons

https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/font-icons-migration

In the Dojo example sent in your reply, a possible approach would be to destroy the custom Button and recreate it using the new icon:

          e.sender.destroy()
          e.sender.element.empty()

          e.sender.element.kendoButton({
            icon: 'minus'
          })

Here you will find the modified example using the latest Kendo version 2023.3.1010.

I hope this helps.  

Regards,
Neli
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
George
Top achievements
Rank 2
Iron
Iron
Iron
commented on 24 Oct 2023, 02:46 PM

Nelli,

Thank you for the fix. so far so good. I put it my real project today.

George

Tags
Button General Discussions Grid
Asked by
George
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Neli
Telerik team
Share this question
or