Tree from self referencing data with unknown depth

I want to build one page to show book like structure from one table. The table has self referencing data. table columns are id, parent, title and detail.

Is it possible to show this data in tree component as the levels are not pre-defined and can be any number?

Thanks

Umesh

I am able to do it using one of the forum.

Hi @umeshhodwala,

Yes, this is possible. Here is how a treeview should be configured:

Levels:

Events:

In this case the tree is data-bound to the Employees table from the Northwind database which is self-referencing ReportsTo -> EmployeeID.

The root levels have ReportsTo set to null and are retrieved like that:

Thanks I have done this. But now a trivial question, How can i change the html component content based on 'html' field in same table.

  1. I used handler for node selected.
  2. get the value in by select parameter as ${event.data.html}
  3. Now want to set html component content to this. How?

Secondly how can i fit html component in column width, there is no such attribute.

thanks

  1. Use the Set property action in the NodeSelect event. Set Name to "html" and Value to ${event.data.html}
  2. Set the Content property of the HTML component to
<div [innerHTML]="html"></div>

Use the style attribute of the <div> to specify width, height or other settings.

Thanks it is functioning now. but why html component is showing title of page as shown in pic.

thanks

No idea. Only you have access to your data and can troubleshoot.

The portion highlighted is title of html file kept in database. Normally title (given in html code) is not visible in preview in browser. I am attaching same in my present system.

.

Both radzen and present system is using same database. Even when i open the same html file in any web browser, title is never visible.

Capture 1
Thanks

You should never embed a full HTML document inside another one. Your HTML contains html, head and body tags - you have to remove them when you want to embed them inside another existing HTML page.

1 Like