Kendo Angular TreeView --> How to do Text wrap on node name

[Sankar]

Hi Team,

I have a requirement with fixed width (300px) - Treeview with 4 levels.

When I expand fourth level it has the node name with 100 chars maximum. so when size is not fit with tree view width, Node name should be wrapped and display in two lines in the treeview.

Please refer the screen shot, end of 4th level node some text missed

Note : I don't want horizontal scroll bar when it has big text and Node name wrapped proper alignment.

Thanks

[Dimiter Topalov]

Hi Sankar,

You can overwrite the built-in TreeView styling so that the default behavior of text that would have overflown is this text to be wrapped, e.g.:

encapsulation: ViewEncapsulation.None,
  styles: [`
    .k-treeview .k-in {
      display: inline-block;
      white-space: normal;
    }
  `]

The following runnable example demonstrates the described approach:

https://plnkr.co/edit/zmEbfxUUNLcFpC6y7A5t?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Sankar]

Thanks.

This is working as expected.