[Tree structure not working]

[Ciprian-Catalin]

Hi,

I'm using treeview control and I'm assigning the datasource using fields property, but the tree structure is not displayed correctly, all of the nodes have the same level. The treeview is used in a ejs-sidebar control. How to fix this issue? Also, is there a way to show different icons dynamically for each node based on a property value from the node model? Thank you!

<ejs-sidebar

              id="sidebar-treeview"

              class="dock-menu"

              #sidebarTreeviewInstance

              [enableDock]='enableDock'

              [width]='width'

              [dockSize]='dockSize'

              (created)="onCreated($event)"

              style="visibility: hidden"

              [mediaQuery]='mediaQuery'

              [target]='target'

              (close)="onClose($event)">

                <div class="main-menu">

                  <div>

                    <ejs-treeview #treeviewInstance

                      id="main-treeview"

                      [cssClass]="'mytree'"

                      expandOn='Click'

                      (nodeSelecting)="redirectTo($event)">

                    </ejs-treeview>

                  </div>

                </div>

            </ejs-sidebar>

This is the model of the nodes

{

        "nodeId": "48a73093-47b9-448f-a7a3-79534f462634",

        "idFunction": null,

        "nodeText": "Parent",

        "iconCss": "icon-circle-thin icon",

        "code": null,

        "position": 0,

        "nodeChild": [

            {

                "nodeId": "7fafe9bd-5c98-4fb0-90d7-86bb7322f74b",

                "idFunction": null,

                "nodeText": "Child 1",

                "iconCss": "icon-circle-thin icon",

                "code": null,

                "position": 0,

                "redirectInfo": {

                    "id_Process": 202,

                },

                "nodeChild": []

            },

            {

                "nodeId": "5e202f59-d0a4-41b0-9139-5c80720bf19d",

                "idFunction": null,

                "nodeText": "Child 2",

                "iconCss": "icon-circle-thin icon",

                "code": null,

                "position": 1,

                "redirectInfo": {

                    "id_Process": 1,

                },

                "nodeChild": []

            },

}

getMenuFunctions() {

    this.functionsService.getFunctions(this.currentUser?.userId!, this.selectedOrganization?.id)

    .subscribe(

      response => {

        this.menuItems = response;

        var ddTreeObj = (document.getElementById('main-treeview') as any).ej2_instances[0];

        ddTreeObj.fields = { dataSource: this.menuItems, id: 'nodeId', text: 'nodeText', child: 'nodeChild', redirectUrl: 'redirectInfo', iconCss: 'iconCss' };

        this.expandOnInit();

      },

      error => {

        console.log(error)

    });

  }

[Jafar Ali Shahulhameed]

Hi Ciprian,

Greetings from Syncfusion,

We have prepared the sample aligning with your requirement by making use of the TreeView dataBound event.

Also, we have dynamically changes the icons for the nodes in a button click. You can also make use of the TreeView selection events to achieve the sample. Kindly refer the code changes below,

[app.component.html]

 

<ejs-treeview id="defaultTree" [fields]="treeFields" (dataBound)='onDataBound($event)'>

</ejs-treeview>

 

<style>

.tree-element .e-circle.e-icons {

    margin-right: 5px;

}

.tree-element-1 .e-circle.e-icons, .tree-element .e-circle.e-icons {

    margin-right: 5px;

}

.tree-element .e-people.e-icons, .tree-element-1 .e-people.e-icons {

    margin-right: 5px;

}

.tree-element .e-icons.e-circle:before {

    content: "\e671"

}

.tree-element-1 .e-icons.e-circle:before {

    content: "\e424"

}

.tree-element .e-icons.e-people:before {

    content: "\e424"

}

.tree-element-1 .e-icons.e-people:before {

    content: "\e671"

}

</style>

[app.component.ts]

 

public onDataBound() {

    this._commonService.getAllProjectsByHierarchy(this.projectId).subscribe((result) => {

        if (result) {   

            this.treeFields = { dataSource: result as any[], id: 'nodeId', text: 'nodeText', child: 'nodeChild' };

        }

    });

}

[datasource.ts]

 

export let newData: any = [

    {

        icon: "e-icons e-circle",

        customClass: "parentEle",

        nodeChild: [

            {

                icon: "e-icons e-people",

                customClass: "childEle"

            },

            {

                icon: "e-icons e-people",

            }

        ]

    }

]

We have attached the sample for your reference,

Sample: https://stackblitz.com/edit/angular-noz1b4-gsstta?file=src%2Fapp.component.ts,src%2Fapp.component.html,datasource.ts

Kindly try out the shared details and get back to us if you need further assistance.

Regards,

Jafar