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

[Danilo]

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

[Alexander Valchev]

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

[Danilo]

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...

[Alexander Valchev]

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

[Danilo]

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

[Charles]

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

 

[Charles]

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;

}

[Charles]

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

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

[Dimo]

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

 

 

[Charles]

Hi Dimo,

Excellent...  Thank you for your additional information.

Regards,

- Charlie