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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Tree View in Dropdown

Thread ID:

Created:

Updated:

Platform:

Replies:

145122 Jun 7,2019 12:33 PM UTC Jan 6,2020 12:59 PM UTC Angular - EJ 2 13
loading
Tags: DropDownList
sunithra
Asked On June 7, 2019 12:33 PM UTC

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 [Syncfusion]
Replied On 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 


sunithra
Replied On 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

Prince Oliver [Syncfusion]
Replied On 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 


sunithra
Replied On 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

Ashokkumar Balasubramanian [Syncfusion]
Replied On 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.  


sunithra
Replied On 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

Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On 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 


thowfik
Replied On 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.

Ashokkumar Balasubramanian [Syncfusion]
Replied On 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. 


thowfik
Replied On 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

Gopi Govindasamy [Syncfusion]
Replied On 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. 




swatijal70
Replied On 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.

Sevvandhi Nagulan [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon