mdb-tree Expand each treeview component individually


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
      }

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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • 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