We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Tree View in Dropdown

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

17 Replies

PO Prince Oliver Syncfusion Team June 10, 2019 10:06 AM UTC

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 



SU sunithra July 16, 2019 10:22 AM UTC

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


PO Prince Oliver Syncfusion Team July 16, 2019 01:40 PM UTC

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, 

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 



SU sunithra August 5, 2019 10:46 AM UTC

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


AB Ashokkumar Balasubramanian Syncfusion Team August 6, 2019 10:29 AM UTC

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'); 
 
 
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.  



SU sunithra August 22, 2019 12:11 PM UTC

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


VK Vinoth Kumar Sundara Moorthy Syncfusion Team August 23, 2019 12:01 PM UTC

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"; 
    } 
} 
 
 
Could you please check the above details and get back to us if you need any further assistance on this? 
 
Regards, 
Vinoth Kumar S 



TH thowfik September 24, 2019 09:52 AM UTC

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.


AB Ashokkumar Balasubramanian Syncfusion Team September 25, 2019 05:58 AM UTC

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(); 
 
 
Kindly check the modified sample and get back to us if you need any further assistance. 
 
Regards, 
Ashokkumar B. 



TH thowfik October 1, 2019 10:41 AM UTC

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


GG Gopi Govindasamy Syncfusion Team October 2, 2019 06:28 AM UTC

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" } 
            ] 
        }, 

 


Output 

 


Regards, 
Gopi G. 





SW swatijal70 January 3, 2020 09:29 AM UTC

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.


SN Sevvandhi Nagulan Syncfusion Team January 6, 2020 12:59 PM UTC

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, 
 
 
Regards, 
Sevvandhi N 



RN Raza Nasir June 6, 2021 01:49 PM UTC

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.



SN Sevvandhi Nagulan Syncfusion Team June 7, 2021 06:10 AM UTC

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. 






Regards, 
Sevvandhi N 



RN Raza Nasir replied to Sevvandhi Nagulan June 22, 2021 10:42 PM UTC

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.



SN Sevvandhi Nagulan Syncfusion Team June 23, 2021 10:35 AM UTC

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. 



Kindly get back to us for further assistance. 

Regards, 
Sevvandhi N 


Loader.
Live Chat Icon For mobile
Up arrow icon