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
}
10 Answers, 1 is accepted
Based on your post, I believe that the icons are not displayed due to the following breaking change:
To fix this, add the theme-related folders to your project:
These folders are available in the bundle in your account:
Further, about the "attributes", it tested the scenario, and it seems that the attributes are applied as expected on my side:
Could you please check the above Dojo, and let me know what are the differences with your project?
Regards,
Preslav
Progress Telerik
Rank 3
Bronze
Bronze
Iron
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
Rank 3
Bronze
Bronze
Iron
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
Rank 3
Bronze
Bronze
Iron
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
Indeed, the Grid solution is not working for the TreeList. Thus, I would suggest using a CSS only approach here. For example, use the "font-size: 0" style for the buttons.
The modified Dojo is available here:
I hope this helps.
Regards,
Preslav
Progress Telerik
Rank 3
Bronze
Bronze
Iron
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.
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:
Regards,
Preslav
Progress Telerik
Rank 3
Bronze
Bronze
Iron
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
It appeared that this behavior is a bug, and I logged it here:
For now, as a workaround, use the "columns.attributes.style" configuration.
Finally, as a small token of gratitude for pointing us to this bug, I updated your Telerik points.
Regards,
Preslav
Progress Telerik
Rank 3
Bronze
Bronze
Iron
Hi Preslav, thanks.
I already applied workaround.
Thanks for the help.
Best regards,
Vedad