Missing icons on the TreeList command buttons

11 posts, 2 answers
  1. Vedad
    Vedad avatar
    86 posts
    Member since:
    Jun 2018

    Posted 10 Sep 2018 Link to this post

    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
    }

  2. Preslav
    Admin
    Preslav avatar
    580 posts

    Posted 11 Sep 2018 Link to this post

    Hello Vedad,

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Vedad
    Vedad avatar
    86 posts
    Member since:
    Jun 2018

    Posted 11 Sep 2018 in reply to Preslav Link to this post

    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

  4. Vedad
    Vedad avatar
    86 posts
    Member since:
    Jun 2018

    Posted 11 Sep 2018 Link to this post

    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

  5. Vedad
    Vedad avatar
    86 posts
    Member since:
    Jun 2018

    Posted 12 Sep 2018 in reply to Preslav Link to this post

    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

  6. Answer
    Preslav
    Admin
    Preslav avatar
    580 posts

    Posted 13 Sep 2018 Link to this post

    Hi Vedad,

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Vedad
    Vedad avatar
    86 posts
    Member since:
    Jun 2018

    Posted 17 Sep 2018 in reply to Preslav Link to this post

    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.

  8. Preslav
    Admin
    Preslav avatar
    580 posts

    Posted 17 Sep 2018 Link to this post

    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:


    Regards,
    Preslav
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. Vedad
    Vedad avatar
    86 posts
    Member since:
    Jun 2018

    Posted 17 Sep 2018 in reply to Preslav Link to this post

    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

  10. Answer
    Preslav
    Admin
    Preslav avatar
    580 posts

    Posted 17 Sep 2018 Link to this post

    Hi again,

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  11. Vedad
    Vedad avatar
    86 posts
    Member since:
    Jun 2018

    Posted 17 Sep 2018 in reply to Preslav Link to this post

    Hi Preslav, thanks.

    I already applied workaround. 

    Thanks for the help.

    Best regards,

    Vedad

Back to Top