How do I set icon for expand and collapse...

10 posts, 0 answers
  1. Danilo
    Danilo avatar
    3 posts
    Member since:
    Feb 2012

    Posted 10 Feb 2012 Link to this post

    Hello,

    I'm new worker with Kendo UI and now I'm working with TreeView.

    I put TreeView to run, but I don't know How can I change the image to expand and collapse...

    How Do I set this?

    Thank you.

    Danilo Fernandes
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 10 Feb 2012 Link to this post

    Hello Danilo,

     Such feature is not supported out of the box. However you can easily override the corresponding CSS rules. For example:

    .k-treeview .k-minus {
        background: url("customCollapsedIcon.png") center center;
    }
    .k-treeview .k-plus {
        background: url("customExpandedIcon.png") center center;
    }


      Greetings,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Danilo
    Danilo avatar
    3 posts
    Member since:
    Feb 2012

    Posted 10 Feb 2012 Link to this post

    Thanks Alexander for the reply... But nothing happened...

    I put 

    .k-treeview .k-minus {
        background-color:yellow;
        /*background: url("../img/SetaTreeViewLado.jpg") center center;*/
    }
    .k-treeview .k-plus {
        background: url("../img/SetaTreeViewBaixo.jpg") center center;
    }

    at my style file, but absolutely nothing happened...
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 13 Feb 2012 Link to this post

    Hello Danilo,

    Your code snippet looks OK. I'm afraid that without a working project I can't detect what is causing the problem. You could use a tool like Firebug or Chrome Developer Tools to check whether your CSS selectors are correct or if something else is overriding your styles.

    I am attaching my demo, please check it and let me know if you have any more questions.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Danilo
    Danilo avatar
    3 posts
    Member since:
    Feb 2012

    Posted 13 Feb 2012 Link to this post

    Thanks Alexander...

    I solved the problem... I'm using a custom css file and I needed set float, width and height...
    Now function perfect...

    Thanks a lot...
    Danilo Fernandes
  7. Charles
    Charles avatar
    8 posts
    Member since:
    Dec 2015

    Posted 13 Jan Link to this post

    Hi Alexander, (or other Telerik team member)

    Thank you for this post....  

    How can I override the css style for just one of two treeviews on the same page....

    (I am using ASP.Net and have master pages.)

    If I simply add this:

    <style>
    .k-treeview .k-minus {
    background: url("folder.png") center center;
    }
    .k-treeview .k-plus {
    background: url("folderopen.png") center center;
    }
    </style>

    It would affect both treeviews and I'd like to keep the default for one treeview, and only override the second treeview.

    Thank you in advance,

     - Charlie

     

  8. Charles
    Charles avatar
    8 posts
    Member since:
    Dec 2015

    Posted 13 Jan in reply to Charles Link to this post

    oh.... think I just need to use the hash (#) to specifiy which treeview.

    as in:

    #rightTreeview .k-treeview .k-minus {

    background: url("folder.png") center center;

    }

  9. Charles
    Charles avatar
    8 posts
    Member since:
    Dec 2015

    Posted 13 Jan in reply to Charles Link to this post

    Without the space... this works -->  #rightTreeview.k-treeview .k-minus {

    background: url("folder.png") center center;
    }

  10. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 15 Jan Link to this post

    Hi Charles,

    That is correct, IDs can help customize the appearance of a specific widget. Here is some additional information on the same topic:

    http://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling#customize-appearance

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. Charles
    Charles avatar
    8 posts
    Member since:
    Dec 2015

    Posted 15 Jan in reply to Dimo Link to this post

    Hi Dimo,

    Excellent...  Thank you for your additional information.

    Regards,

    - Charlie

Back to Top
Kendo UI is VS 2017 Ready