Hi,

We recently upgraded to latest version (2018.2.620) from old one (2016.2.504). On most places all widgets are ok, but in this specific place, my treeList widget doesn't display icons on command buttons (command: ["edit", 'destroy']). When I manually overwrite current (latest) kendo.common.min.css on the server, icons are displayed, but wrong icon is displayed on edit button (chevron up I think). Also, on the same column, I have some classes applied on attributes, but headerAttributes are applied while attributes are not.

This is code for the column:
{
title: "edit",
attributes: {
'class': 'c-centered'
},
headerAttributes: {
'class': 'k-header c-centered'
},
command: ["edit", 'destroy'],
width: 135,
locked: true
}

Hello Vedad,

Based on your post, I believe that the icons are not displayed due to the following breaking change:

• https://docs.telerik.com/kendo-ui/backwards-compatibility/2017-backward-compatibility#kendo-ui-2017-r1

To fix this, add the theme-related folders to your project:

• https://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling#theme-related-folders

These folders are available in the bundle in your account:

• https://www.telerik.com/account/product-download?product=KENDOUICOMPLETE

Further, about the "attributes", it tested the scenario, and it seems that the attributes are applied as expected on my side:

• https://dojo.telerik.com/IqALaHib

Could you please check the above Dojo, and let me know what are the differences with your project?


Regards,
Preslav
Progress Telerik

Hi Preslav, 

Thank you for the response.

Regarding Icons, it seem that someone built form level class before me and applied transparent color on button, what caused button contents to be invisible in new version. To be honest, I don't know why previous versions didn't have this problem but, it seems to work. (I suspect there was something different in style file in previous version what ignored this setting and applied its own)

Only thing that remains is applying class on this column, which doesn't work yet, but this is something I can live with.

Your links were useful because it confirmed that set up files correctly. 

I will test and try to figure out why style apply doesn't work, and get back to you.

 

Thanks again,

Vedad

Hi, one more question.

I managed to make icons display, and no text for edit or destroy, but when i enter Edit mode, i have text "update" and "cancel" displayed in buttons. Is there any way I can change these to use only icons?

Thanks

Hi, I resolved problem with missing icons, but only partially.

I managed to find a way to display only icons, but still cannot manage to make Update and Cancel to be shown as icons when in Edit mode. I tried the same approach as it was described for grid, but it doesn't seem to work.

I created this dojo example

https://dojo.telerik.com/ohIjEkOP

I would appreciate any suggestion.

 

Thanks

Hi Preslav,

it does solve the problem. Only reason I didn't try it because one of your links (https://docs.telerik.com/kendo-ui/backwards-compatibility/2017-backward-compatibility#kendo-ui-2017-r1) said: The font-size: 0; rule is no longer applied to elements using Kendo UI icons. In this way, if they have text, it will now show up and obscure the icon. You should move it to a title attribute.

Thanks for the help and have a nice day.

Hello Vedad,

You are correct, the "font-size: 0;" rule should not be applied to the element that holds the icon(in our case the span of the button). However, we are applying it to the button itself, and this is okay. For example, check this video:

• https://www.screencast.com/t/SLVmnirO0NZ

Regards,
Preslav
Progress Telerik

Hi, Preslav,

ah, ok, now I see it. Got it. Thanks.

Btw. One more question if possible, if I define custom css class that centers text:

.c-centered {
text-align: center;
}

And apply it as attribute via  

attributes: {
'class': 'c-centered',
//style : "text-align: center"
},

it doesn't apply to the column with buttons, while direct style application (commented in example) works.

Is it again something I am missing or?

(I will mark question answered anyway).

Thanks a lot!

Regards, Vedad

Hi Preslav, thanks.

I already applied workaround. 

Thanks for the help.

Best regards,

Vedad