We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Apply css to treeitems by level

Thread ID:

Created:

Updated:

Platform:

Replies:

128242 Jan 10,2017 03:07 PM UTC Jan 12,2017 06:08 AM UTC JavaScript 3
loading
Tags: ejTreeView
issam
Asked On January 10, 2017 03:07 PM UTC

hi,

is it possible to get one of these 2 options with the treeview control ? :

Option1
apply  custom  css to all nodes that have childrens  (or the inverse)


Option2
apply  custom  css by level


thanks and good day .

Piramanayagam Ramakrishnan [Syncfusion]
Replied On January 11, 2017 12:44 PM UTC

Hi Issam,   
   
Thanks for contacting Syncfusion support.   
   
We can achieve your requirement (“apply custom CSS to all nodes that have children’s”) in TreeView control from application level by using cssClass property. It sets the root CSS class for TreeView which allows to customize the appearance.   
   
We can apply custom CSS to all nodes that have children based on the “.e-icon” class. This class is present in sibling element of a node which have children. We can also apply the custom CSS to nodes by level based on the li element “.e-item” class. Please refer to the below code example,   
 
[Script] 
 
$("#customtree").ejTreeView({ 
    fields: { id: "id", parentId: "pid", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }, 
    cssClass: "mytree", //apply custom css class to TreeView 
}); 
 
[CSS] 
 
<style> 
    /*apply custom css to all nodes that have children's*/ 
    .mytree .e-text-wrap .e-icon + .e-text { 
        font-weight: bold; 
    } 
    /*apply custom css to first level*/ 
    .mytree > ul > .e-item > .e-text-wrap .e-text { 
        color: brown; 
    } 
    /*apply custom css to second level*/ 
    .mytree > ul > .e-item > ul > .e-item > .e-text-wrap .e-text { 
        color: darkmagenta; 
    } 
</style> 
 
 
For more details on the cssClass property, please refer to the help document link: https://help.syncfusion.com/api/js/ejtreeview#members:cssclass 
   
For your reference, we have prepared a sample, it can be downloaded from the following location: http://jsplayground.syncfusion.com/fc4okefx 
   
Please let us know whether the provided sample is helpful in achieving your requirement. If not, get back to us with more information.   
   
Regards, 
Piramanayagam R 


issam
Replied On January 11, 2017 02:34 PM UTC

this is exactly what i am looking for :)

thanks a lot .

Preethi Nesakkan Gnanadurai [Syncfusion]
Replied On January 12, 2017 06:08 AM UTC

Hi Issam,  
  
Most welcome. 
Please let us know if you need further assistance on this. 
  
Regards,  
Preethi 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;