Topic: mdb-tree Expand each treeview component individually
Frank Kreutzer asked 4 years ago
Expected behavior
We currently are using the MDB angular treeview component to display some data as multiple trees within the same page/section. Some functionality that we're looking to implements is that when you click the top level of one tree, all sub-levels and their respective children will all expand at the same time, expanding to the deepest level.
Actual behavior
As we have it set up now, if you click on one tree, all of the other trees will also expand, even though they are completely separate from that one. If there a way that we can do this will only targeting one tree based on the top level item that is clicked - thus only having that tree expand, and leave the others in their default state.
Resources (screenshots, code snippets etc.)
Here is how we have the `mdb-tree` component setup in out HTML:
<mdb-tree #tree textField="Name" childrenField="children" [nodes]="testTechnicalQualifications"
[toggleOnTitleClick]="true" (click)="expandAllNodes($event)" [expandAll]="expanded"
></mdb-tree>
Here is the TypeScript function where we expand the tree to it's the deepest level, but we get the issue where ALL trees expand, where we only want the one that was clicked to expand. Is there a way that an ID or some type of unique identifier can be added to each tree so that we know exactly which one to toggle based on the top-level item that was clicked. Or is there some other fix/workaround that you can recommend?
expandAllNodes(event: any) {
if (!this.expanded) {
this.expanded = true;
}
else return
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.10.1
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Grzegorz Bujański staff commented 4 years ago
Hi. Have you tried to create a separate component for treeview and add our component to it? If you add such a created component on your website many times, everything should work.