Styling the tree

[Michael Baas]

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]

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]

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]

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-image: url(http://mvc.syncfusion.com/demos/ui/tools/MvcResourceHandler.axd?k=img&r=gbwjpbqMlCJ9MAp4aOJ5//p89Hibq6RCsmFGRuTOMiHnfODH6lIiBHOSBJArRCZi053ZP7mRwNdm4uorNalJd3hi0U/3XPiafieEgwNBplLCeFNeIlzaKX6eh3Z4RG8Fd/V95XCLbaGnKKr4McnNMTKktv3QFE81zhY1MgYq3BV3uR5lq5ak5BE6ojjAvCXNxBXnRMokv8LUxxNCu3z9v6iI19uFxvSi);    

    background-repeat: repeat-y;    

}    

    

.e-text-wrap:before {    

    display: block;    

    content: " ";    

    background-image: url(http://mvc.syncfusion.com/demos/ui/tools/MvcResourceHandler.axd?k=img&r=gbwjpbqMlCJ9MAp4aOJ5//p89Hibq6RCsmFGRuTOMiHnfODH6lIiBHOSBJArRCZi053ZP7mRwNdm4uorNalJd3hi0U/3XPiafieEgwNBplLCeFNeIlzaKX6eh3Z4RG8Fd/V95XCLbaGnKKr4McnNMTKktv3QFE81zhY1MgYq3BV3uR5lq5ak5BE6ojjAvCXNS5DuMViUh340HlghHnXphmkxVK6VeMY_);    

    height: 14px;    

    position: absolute;    

    width: 14px;    

    margin-left: -7px;    

    margin-top: 4px;    

    background-position: -3px -327px;    

}    

     

For your reference, we have prepared simple sample to showcase your requirement, please check the playground sample below.   

   

http://jsplayground.syncfusion.com/55bcynza   

     

Please let us know if the provided information’s are helpful to achieve your requirement.   

     

Regards,    

Ashokkumar B.  

[Dave Lewis]

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]

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-image: url(http://mvc.syncfusion.com/demos/ui/tools/MvcResourceHandler.axd?k=img&r=gbwjpbqMlCJ9MAp4aOJ5//p89Hibq6RCsmFGRuTOMiHnfODH6lIiBHOSBJArRCZi053ZP7mRwNdm4uorNalJd3hi0U/3XPiafieEgwNBplLCeFNeIlzaKX6eh3Z4RG8Fd/V95XCLbaGnKKr4McnNMTKktv3QFE81zhY1MgYq3BV3uR5lq5ak5BE6ojjAvCXNxBXnRMokv8LUxxNCu3z9v6iI19uFxvSi); 

         background-repeat: repeat-y; 

       } 

 

For your reference, we have modified the previously provided sample, please find the modified sample in below location. 

 

Sample. 

 

Please let us know, if the provided information’s are helpful to achieve your requirement. 

 

Regards, 

Ashokkumar B.