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.
Unfortunately, activation email could not send to your email. Please try again.

Styling the tree

Thread ID:

Created:

Updated:

Platform:

Replies:

121365 Dec 7,2015 04:29 AM Oct 4,2017 10:33 AM JavaScript 5
loading
Tags: ejTreeView
Michael Baas
Asked On December 7, 2015 04:29 AM

I am not too happy with the design of the treeview-control. I'd like to show the connecting lines between the branches and leafs of the tree (similiar to what we know from the "classic" treeview in windows and also some other JS-Controls do offer that). Is there a chance to achieve a similar effect with ejTreeView? Are there perhaps some samples around which should "maximum styling" of the tree? (Not that I want to do that - but just to get an idea of the possibilities...)

Harikrishnan P [Syncfusion]
Replied On December 9, 2015 07:43 AM

Hi Michael,


Thanks for contacting Syncfusion support.


Query 1: I'd like to show the connecting lines between the branches and leafs of the tree (similiar to what we know from the "classic" treeview in windows and also some other JS-Controls do offer that). Is there a chance to achieve a similar effect with ejTreeView?


At present there is no option in our TreeView component to achieve this requirement (“show connecting lines between the branches and leaf nodes”). We have logged this requirement as a new feature in our database and it will be implemented in any of our future releases.

Query 2: Are there perhaps some samples around which should "maximum styling" of the tree? (Not that I want to do that - but just to get an idea of the possibilities...)

We can customize the TreeView component using the ‘cssClass’ API. The value specified for this property will be added as a class in the root/wrapper of the Treeview component. So you can make use of this class to apply the necessary styles. We have attached a sample to showcase the use of ‘cssClass’ API, please check it.


http://jsplayground.syncfusion.com/wodw1djg


To know more about customizing the components, please refer the following link


http://help.syncfusion.com/js/theming-in-essential-javascript-components#customizing-themes


To know about the template support in TreeView component, please refer the following link


http://help.syncfusion.com/js/treeview/template-support


You can also refer the following “How-to” section in Treeview to achieve various functionalities,


http://help.syncfusion.com/js/treeview/how-to#customize-the-expandcollapse-icons-of-treeview


To know about the list of API’s, methods and events available in TreeView please refer the below link


http://help.syncfusion.com/js/api/ejtreeview


Regards,

HariKrishnan


Dave Lewis
Replied On October 1, 2017 03:25 PM

Is there a method to show connecting lines between the branches and leaves of the tree with the ASP.NET Core treeview control?


Ashokkumar Balasubramanian [Syncfusion]
Replied On October 2, 2017 06:48 AM

Hi Dave,    
    
Thanks for contacting Syncfusion Support.    
    
Currently, we don’t have an inbuilt option to connect the lines between the branches and leaves in TreeView component, but we can achieve this requirement by using the below styles. Please check the below code block.   
   
[css]    
    
.e-treeview .e-item {    
    background-imageurl(http://mvc.syncfusion.com/demos/ui/tools/MvcResourceHandler.axd?k=img&r=gbwjpbqMlCJ9MAp4aOJ5//p89Hibq6RCsmFGRuTOMiHnfODH6lIiBHOSBJArRCZi053ZP7mRwNdm4uorNalJd3hi0U/3XPiafieEgwNBplLCeFNeIlzaKX6eh3Z4RG8Fd/V95XCLbaGnKKr4McnNMTKktv3QFE81zhY1MgYq3BV3uR5lq5ak5BE6ojjAvCXNxBXnRMokv8LUxxNCu3z9v6iI19uFxvSi);    
    background-repeatrepeat-y;    
}    
    
.e-text-wrap:before {    
    displayblock;    
    content" ";    
    background-imageurl(http://mvc.syncfusion.com/demos/ui/tools/MvcResourceHandler.axd?k=img&r=gbwjpbqMlCJ9MAp4aOJ5//p89Hibq6RCsmFGRuTOMiHnfODH6lIiBHOSBJArRCZi053ZP7mRwNdm4uorNalJd3hi0U/3XPiafieEgwNBplLCeFNeIlzaKX6eh3Z4RG8Fd/V95XCLbaGnKKr4McnNMTKktv3QFE81zhY1MgYq3BV3uR5lq5ak5BE6ojjAvCXNS5DuMViUh340HlghHnXphmkxVK6VeMY_);    
    height14px;    
    positionabsolute;    
    width14px;    
    margin-left-7px;    
    margin-top4px;    
    background-position-3px -327px;    
}    
     
For your reference, we have prepared simple sample to showcase your requirement, please check the playground sample below.   
   
     
Please let us know if the provided information’s are helpful to achieve your requirement.   
     
Regards,    
Ashokkumar B.  


Dave Lewis
Replied On October 3, 2017 10:37 AM

This works pretty well.  However, is there a way to remove the first line of dashes (at the far left of the tree) that connects the top-level of nodes?  I only have two levels of nodes in my treeview, a parent node level for categories and a child level for items.  I only need to see the dashed (right angle) lines for the child item nodes that connect them to their parent (top-level) category nodes.


Ashokkumar Balasubramanian [Syncfusion]
Replied On October 4, 2017 10:33 AM

Hi Dave, 
 
Thanks for your update. 
 
You can made the slight modification of our previous code to achieve this requirement. Please find the below modified code. 
 
[CSS] 
 
.e-treeview .e-item .e-item { 
         background-repeat: repeat-y; 
       } 
 
For your reference, we have modified the previously provided sample, please find the modified sample in below location. 
 
 
Please let us know, if the provided information’s are helpful to achieve your requirement. 
 
Regards, 
Ashokkumar B.    


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.

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.

;