How can I integrate Tree View component inside the List View item?

[Yura Ivanov]

Hi, How are you? I've a few problems in using the Syncfusion List View and Tree View component(React). I have List view as nested list on the left side menu of my app. The nested list has children and it has 3 level.

when I click list item, it navigates to the specific router pages.

As you can see 3 screenshots, level 1 is apps, level 2 is modules and level 3 is workflows. I'd like to place tree view component or something like tree view on the level 3. so If I click any module(level 2), the next sliding will show tree view.

How can I do it?

[LeoLavanya Dhanaraj]

Hi Yura,

Greetings from Syncfusion support.

Based on the shared details, we understand that you want to include the TreeView (or a similar treeview structure) component within the nested list support of the ListView component. However, it is not possible to integrate the TreeView component within a specific list item. The ListView component has Template support, which allows you to customize the entire ListView, but you cannot set a template for a single list item.

Please refer to the following links to know more about the ListView component with template and nested list support.

Feature tour : https://www.syncfusion.com/react-components/react-listview

Demos:

Nested List : https://ej2.syncfusion.com/react/demos/#/material3/listview/nested-list

Template : https://ej2.syncfusion.com/react/demos/#/material3/listview/template

Documentations :

Nested List : https://ej2.syncfusion.com/react/documentation/listview/nested-list

Template : https://ej2.syncfusion.com/react/documentation/listview/customizing-templates#template

Regards,

Leo Lavanya Dhanaraj