Tree View in Dropdown

[sunithra]

Hi

I need a function and design option as a Tree View in Dropdown in Syncfusion have dropdown group but i need in Tree Structure , Herewith attached a Screenshot for your Reference, Could please help me to achieve this design functionality .

Kindly Reply as soon as Possible

Thanks in Advance .

Regards,

Sunithra.C

Attachment: demo_971e3dbb.zip

[Prince Oliver]

Hello Sunithra, 

Good day to you. 

We have prepared a sample with DropDownList control and TreeView control in the popup as per your requirement. Please find the sample in the following location: https://stackblitz.com/edit/angular-ht1jii 

In the above sample, we have rendered the TreeView control inside DropDownList ’s popup on the open event. Then on the nodeSelected event, we have updated the selected item in the DropDownList. Refer to the following code.   

  

public onOpen = () => { 

  // modifying the dropdownlist's classes for styling 

  this.dropdownObj.popupObj.element.firstElementChild.className = "e-content overflow"; 

  // rendering the treeview only on first time  

  if (this.treeObj == null || this.treeObj == undefined) { 

    this.treeObj = new TreeView({ 

      fields: { dataSource: this.localData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' }, 

      // use the nodeselected event to add the text to dropdown's input element. 

      nodeSelected: (args: any) => { 

        let drop = (document.getElementById("games") as any).ej2_instances[0]; 

        drop.inputElement.value = args.nodeData.text; 

      } 

    }); 

    this.treeObj.appendTo('#tree'); 

  } 

} 

  

We can get selected value using either DropDownList’s instance or TreeView’s instance. Kindly refer to the following code.  

  

document.getElementById("btn").addEventListener("click", function () {  

    //Using DropDownList's instance  

    alert("Using DropDownList's instance - " + dropDownListObj.element.value);  

    //Using TreeView's instance  

    alert("Using TreeView's instance - " + treeObj.getTreeData(treeObj.selectedNodes[0])[0].name);  

});   

Let us know if you need any further assistance on this.  

Regards, 

Prince 

[sunithra]

Hi

if i load the datasource inside function  innerHtml is not getting append.

it is getting append only if i reload the datasource only in ngOnInit .

Thanks in Advance.

Regards,

Sunithra.C

[Prince Oliver]

Hello Sunithra, 

 

Thank you for your update. 

 

We have checked the reported scenario. We have dynamically set the datasource in the open event and it is working fine in our end. Please find the sample from below link, 

https://stackblitz.com/edit/angular-ht1jii-349ume 

However we couldn’t replicate the reported issue in our end. Kindly check the above sample in your end. If the issue persists, please share below details. This will help us to check and provide exact solution at our end. 

1. Code snippet
2. Issue reproducing sample
3. If possible reproduce the issue in our provided sample

 

Regards, 

Prince 

[sunithra]

Hi

I am having problem on fetching data from the dropdown,record is coming on the grid but in the drop down its not coming,as mentioned below by using this type parentId.

<ejs-dropdownlist id='games' cssClass='question-label-popup' #sample1 formControlName="parentId"

(open)='onOpen()'>

<ng-template #noRecordsTemplate>

<div id='tree' class="labelList"></div>

</ng-template>

</ejs-dropdownlist>

sample Array below

this.labelData = [{

hasChild: true,

id: 83,

labelName: "formPageLAbel",

labelPageType: 2,

labelType: 1,

name: "formPageLAbel",

organisationId: 57,

parentId: 0,

userId: 2444

}, {

hasChild: false,

id: 84,

labelName: "labelunder",

labelPageType: 2,

labelType: 1,

name: "labelunder",

organisationId: 57,

parentId: 83,

          pid: 83,

userId: 2444

}, {

hasChild: false,

id: 84,

labelName: "labelunder",

labelPageType: 2,

labelType: 1,

name: "labelunder",

organisationId: 57,

parentId: 83,

          pid: 83,

userId: 2444

}];

Regards,

Sunithra.C

[Ashokkumar Balasubramanian]

Hello Sunithra, 

 

Sorry for the inconvenience. 

 

Based on your provided code blocks and replication steps to bind the labelData array as dataSource and properly mapping the parentId as fields Object in open event, but data are properly shown in DropDownList TreeView. Could you please check the below code block and sample? 

 

<form [formGroup]="skillForm"> 

    <h4> DropDown TreeView</h4> 

    <ejs-dropdownlist formControlName="parentId" name="parentId" id='games' #sample1 (open)='onOpen()'> 

        <ng-template #noRecordsTemplate> 

            <div id='tree'></div> 

        </ng-template> 

    </ejs-dropdownlist> 

</form> 

 

      constructor(private fb: FormBuilder) { 

            this.createForm(); 

        } 

        createForm() : void { 

            this.skillForm = this.fb.group({ 

                parentId: ['', Validators.required], 

            }); 

        } 

        public treeObj: TreeView; 

        public labelData: { [key: string]: Object } [] = null; 

        public onOpen = () => { 

            this.labelData = [{ 

                hasChild: true, 

                id: 83, 

                labelName: "formPageLAbel", 

                labelPageType: 2, 

                labelType: 1, 

                name: "formPageLAbel", 

                organisationId: 57, 

                parentId: 0, 

                userId: 2444 

            }, { 

                hasChild: false, 

                id: 84, 

                labelName: "labelunder", 

                labelPageType: 2, 

                labelType: 1, 

                name: "labelunder", 

                organisationId: 57, 

                parentId: 83, 

                pid: 83, 

                userId: 2444 

            }, { 

                hasChild: false, 

                id: 84, 

                labelName: "labelunder", 

                labelPageType: 2, 

                labelType: 1, 

                name: "labelunder", 

                organisationId: 57, 

                parentId: 83, 

                pid: 83, 

                userId: 2444 

            }]; 

 

            // modifying the dropdownlist's classes for styling 

            this.dropdownObj.popupObj.element.firstElementChild.className = "e-content overflow"; 

            // rendering the treeview only on first time  

            if (this.treeObj == null || this.treeObj == undefined) { 

                this.treeObj = new TreeView({ 

                    fields: { dataSource: this.labelData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' }, 

                    // use the nodeselected event to add the text to dropdown's input element. 

                    nodeSelected: (args: any) => { 

                        let drop = (document.getElementById("games") as any).ej2_instances[0]; 

                        drop.inputElement.value = args.nodeData.text; 

                    } 

                }); 

                this.treeObj.appendTo('#tree'); 

 

Sample: https://stackblitz.com/edit/angular-ht1jii-349ume?file=app.component.ts 

 

Note: Could you please ensure whether you have properly mapping the parentId and id fields for fields property in TreeView? 

 

Could you please check the above provided sample and get back to us, if you require any further assistance on this? 

 

Regards, 

Ashokkumar B.  

[sunithra]

Hi

  I need a help on this to fix this issue,if the record is not available on the drop down,we need a message no records found (it should show on the) drop down. Kindly find the attachment for your reference.

Thanks in Advance.

Regards,

Sunithra.C

Attachment: angularht1jii349ume_42ec1766.zip

[Vinoth Kumar Sundara Moorthy]

Hi Sunithra, 

 

Good day to you. 

 

We have achieved your requirement by rendering the Treeview in beforeOpen event. In open event, we will assign the value “No records found” when Treeview dataSource is empty. Please refer the below code snippet, 

 

[app.component.html] 

<ejs-dropdownlist formControlName="parentId" name="parentId" id='games' #sample1 (beforeOpen)='beforeOpen($event)' (open)="onOpen($event)"> 

    <ng-template #noRecordsTemplate> 

        <div id='tree'></div> 

    </ng-template> 

</ejs-dropdownlist> 

 

[app.component.ts]  

public onOpen(args){ 

    if(this.labelData.length == 0){ 

        this.dropdownObj.popupObj.element.querySelector('#tree').innerHTML = "No records found"; 

    } 

} 

 

Sample link: https://stackblitz.com/edit/angular-xhhweh?file=app.component.ts 

 

Could you please check the above details and get back to us if you need any further assistance on this? 

 

Regards, 

Vinoth Kumar S 

[thowfik]

Hi 

I need a ChangeEvent or OnSelectEvent in the Tree View Dropdown, when i select the value in the dropdown it should get selected and  then close dropdown popup.

I have the sample stackblitz url for your reference.
https://stackblitz.com/edit/angular-ht1jii?file=app.component.html

Thanks in Advance .

Regards,

Thowbik.

[Ashokkumar Balasubramanian]

Hi Thowbik, 

 

For this requirement, you can use the hidePopup method to close the popup element on Drop down List component in nodeSelected event of TreeView component. Please refer the below code block. 

 

    let drop = (document.getElementById("games") as any).ej2_instances[0]; 

    drop.inputElement.value = args.nodeData.text; 

    drop.hidePopup(); 

 

Modified Sample: https://stackblitz.com/edit/angular-ht1jii-kjdxv4?file=app.component.ts 

 

Kindly check the modified sample and get back to us if you need any further assistance. 

 

Regards, 

Ashokkumar B. 

[thowfik]

Hi Ashokkumar,

Thanks for your valuable reply,

I have multiple levels, if child have another one or more child then how can i populate data,

for example

parent 1-->

                 child 1

                 child 2 

parent 2-->

                 child 1-->

                                   sub child 1

                                   sub child  2

                 child 2 

Thanks in Advance

Regards 

Thowfik

[Gopi Govindasamy]

Hi Thowfik,  

Thanks for your update,  

We would like to inform you that, we are provided “field” property to FieldsSettingsModel. Binds the field settings for child nodes or mapping field for nested nodes objects that contain array of JSON objects. We have prepared sample based on your requirement with nested tree node. Please find the code snippet for your reference.  

[nested data] 

{ 

            "nodeId": "04", "nodeText": "Pictures", "icon": "folder", "expanded": true, 

            "nodeChild": [ 

                { 

                    "nodeId": "04-01", "nodeText": "Camera Roll", "icon": "folder", "expanded": true, 

                    "nodeChild": [ 

                        { "nodeId": "04-01-01", "nodeText": "WIN_20160726_094117.JPG"}, 

                        { "nodeId": "04-01-02", "nodeText": "WIN_20160726_094118.JPG"} 

                    ] 

                }, 

                { "nodeId": "04-02", "nodeText": "Wind.jpg", "icon": "images" }, 

                { "nodeId": "04-03", "nodeText": "Stone.jpg", "icon": "images" } 

            ] 

        }, 

 

Sample Link: https://stackblitz.com/edit/angular-ht1jii-osepz2?file=app.component.ts  

Output 

 

API Link: https://ej2.syncfusion.com/documentation/api/treeview/fieldsSettingsModel/#child  

Regards, 

Gopi G. 

[swatijal70]

I am getting the following error while using "https://stackblitz.com/edit/angular-ht1jii?file=app.component.ts" link:

ERROR TypeError: Cannot read property 'popupObj' of undefined

    at CategoryComponent.onOpen (master-master-module-ngfactory.js:1884)

    at Object.handleEvent (master-master-module-ngfactory.js:1550)

    at handleEvent (vendor.js:39764)

    at callWithDebugContext (vendor.js:40857)

    at Object.debugHandleEvent [as handleEvent] (vendor.js:40560)

    at dispatchEvent (vendor.js:37223)

    at vendor.js:38703

    at SafeSubscriber.schedulerFn [as _next] (vendor.js:33073)

    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (vendor.js:513583)

    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (vendor.js:513521)

Kindly resolve my issue.

[Sevvandhi Nagulan]

Hi Sunithra, 

 

We have checked the shared sample. Unfortunately, we cannot get the reported issue in the shared sample. And the shared sample working fine in our end. We suspect that you did not defined the div element in the noRecordsTemplate. Please check the below sample, 

 

Sample Link: https://stackblitz.com/edit/angular-ht1jii?file=app.component.html 

 

Regards, 

Sevvandhi N 

[Raza Nasir]

Hi Syncfusion team,

I'm trying to load EJ2 dropdown and then I have to show the selected value in that dropdown upon loading this dropdown component. But when I try it with the following way, it gives me this error "Cannot read property 'popupObj' of undefined". Kindly, help me out to fix this issue. Also, let me what change is required in the html to show the selected value in the dropdown on loading the component.

[Sevvandhi Nagulan]

Hi Raza, 

Greetings from Syncfusion support. 

We checked your query. We provided the separate DropDownTree component which meets your requirement. So we suggest that you to use the DropDownTree component. Please refer the below demo sample and UG documentation link. 

Demo sample link: https://ej2.syncfusion.com/angular/demos/#/material/drop-down-tree/default 

UG link: https://ej2.syncfusion.com/angular/documentation/drop-down-tree/getting-started/ 

Regards, 

Sevvandhi N 

[Raza Nasir]

Hi Sevvandhi Nagulan,

In fact, this component only loads its data upon opening the dropdown by clicking on it. I want a way that when my xyz component initialized, in which I'm using this EJ2 dropdown component. then it should load up with its provided data. Also, if I'm loading my xyz component for updating the data then previously save data must be reflected in the  EJ2 dropdown component and upon opening this  EJ2 dropdown component, the already saved value must be show as selected.

Kindly help me out.

Thanks.

[Sevvandhi Nagulan]

Hi Raza, 

We checked your query. We considered XYZ component as textbox component and prepared the sample based on the mentioned scenario. In the change event of textbox component, add the item using addItem method. Refer the following sample. 

Sample link: https://stackblitz.com/edit/angular-nwe8mk?file=app.component.ts 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N