TreeView with lines between parent and child nodes

[F.Hayyam]

Hi,

Is there a way to show the lines between parent and child nodes at TreeView ?

[Stoyan]

Hi Fazil,

Thanks for the provided information.

Showing lines between the parent and child nodes in the Kendo TreeView is possible by utilizing the Node Template Directive. The template helps to customize the content of the nodes in any way the developer sees fit. 

I've prepared a short StackBlitz demo that demonstrates the desired behavior.

https://stackblitz.com/edit/angular-2hkz8t?file=app/app.component.ts

The [style.paddingTop] is used for pushing the border and [style.borderTop] for creating the border above the first child node. The TreeView knows where to put a border-top as in the data there is a boolean key (first), which when set to true will target the child item node and place a border.

I hope this sheds some light on this case.

Regards,
Stoyan
Progress Telerik

[Raju]

Hi Stoyan, What about treelist? Can we do the same for it as well?

[Stoyan]

Hi Raju,

To do the same thing with the TreeList The developer can use the rowClass which can be used to change the CSS styles of each individual row based on some condition.

More information can be found here:

https://www.telerik.com/kendo-angular-ui/components/treelist/styling/rows/

I hope this information helps.

Regards,
Stoyan
Progress Telerik