event for expansion of tree node

Question

Hi Team,As a part of requirement, im using dropdown tree.And as a part of performance and load efficiency, i have a requirement to to a Api call upon expansion of a tree node.i need guidance on the same i.e event for capturing the expansion of a node in dropdown tree.Regards,Aditya

Sowmiya Padmanaban · Accepted Answer

Hi Aditya Murthy,

Sorry for the inconvenience.

DropdownTree has no event trigger when expanding its tree nodes. We suggested you to use TreeView’s expanding event to fulfill your requirement as we have used TreeView component in the pop-up DropdownTree Component. But the TreeView instance object is a private member used in our DropdownTree component. Your current reported error occurred due to this reason.

Based on your shared details, we suspect that you want to load the child nodes only on expanding the parent node to increase the performance of DropdownTree component. We have provided a loadOnDemand support in DropdownTree component.

When setting loadOnDemand as true in treeSettings of DropdownTree component. DropdownTree loads the child nodes in DOM only on expanding the parent node.

Note: Default value of LoadOnDemand property is false

Please, refer the below code snippet.

<ejs-dropdowntree id="multiselect" #dropdownTree [fields]="field"

[allowMultiSelection]="allowMultiSelection" [treeSettings]="treeSettings" popupHeight="220px"

placeholder="Select items"></ejs-dropdowntree>

public treeSettings: any = { loadOnDemand: true };

Please, refer the sample link below.

https://stackblitz.com/edit/angular-wefh4b-gckw6m?file=app.component.ts

Please, let us know if you need any further assistance.

Regards,

Sowmiya.P

Sowmiya Padmanaban · Answer

Hi Aditya Murthy,

Greetings from Syncfusion support.

We have checked your requirement with DropdownTree component. To achieve your requirement, you need to bind the nodeExpanding event of TreeView object in Created event of DropdownTree component.

Please, refer the below code snippet.

<ejs-dropdowntree

id="multiselect"

#dropdownTree

[fields]="field"

[allowMultiSelection]="allowMultiSelection"

popupHeight="220px"

placeholder="Select items"

(created)="created($event)"

></ejs-dropdowntree>

created() {

this.dropdownTree.treeObj.nodeExpanding = function(args) {

alert("event triggered");

};

}

Please, refer the sample link below.

https://stackblitz.com/edit/angular-wefh4b?file=app.component.ts

Please, refer to the below links to know more about the DropdownTree component.

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

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

API reference- https://ej2.syncfusion.com/angular/documentation/api/drop-down-tree/

Please let us know, if you need any further assistance.

Regards,

Sowmiya.P

Aditya Murthy · Answer

Hi Sowmiya,Thank for the solution but when i try using it , it gives me the following error :error TS2341: Property 'treeObj' is private and only accessible within class 'DropDownTree'.Please help me on this

Nguyen Tuan Binh · Answer

How can I Trigger event expansion of a tree node in dropdown tree. I want to load data from server when I expand node selected

Sowmiya Padmanaban · Answer

Hi Nguyen Tuan Binh,

We have checked your requirement with DropdownTree component. To achieve your requirement, we suggest you to use DataManager component for loading the datasource for DropdownTree component.

By using DataManager, when expanding the parent node, DropdownTree component will send the request to the sever side for fetching the child nodes details.

Please, refer to the below link for DataManager component.

https://ej2.syncfusion.com/angular/documentation/drop-down-tree/data-binding/#remote-data

https://ej2.syncfusion.com/angular/documentation/data/adaptors/

For your reference, we have attached a video demonstration for your requirement with DropdownTree component.

https://www.syncfusion.com/downloads/support/forum/159481/ze/DropdownTree-1829391980.zip

Please, refer the below code snippet.

<ejs-dropdowntree id='dropdowntree' #treeview [fields]='fields' (dataBound)="dataBound($event)"

placeholder='Select a Item' [treeSettings]="treeSettings"></ejs-dropdowntree>

public treeSettings: any = { loadOnDemand: true };

ngOnInit(): void {

this.fields = {

dataSource: new DataManager({

url: "https://localhost:44376/Home/Get",

adaptor: new WebApiAdaptor()

}),

id: "prog_id",

text: "prog_name",

hasChildren: "hasChild",

parentId: "pid"

};

}

Please, refer to the sample link.

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

Controller to fetch the datasource: https://www.syncfusion.com/downloads/support/forum/159481/ze/TreeView_server-1714773137.zip

Note: Run the controller and refer the controller method url in sample.

Please let us know, if you need any further assistance.

Regards,

Sowmiya.P

Nguyen Tuan Binh · Answer

I just want to trigger event and get node selected data when click on arrow to expand child node

Sowmiya Padmanaban · Answer

Hi Aditya Murthy,   
 
As mentioned in our previous update, we don’t have any direct event for node expanding. To achieve your requirement, we suggest you to use the private TreeView object. 
 
Please, refer to the below code snippet. 
 




created() { 
    (this.dropdownTree as any).treeObj.nodeExpanding = function(args) { 
      alert("event triggered"); 
    }; 
  } 
 
 
Sample link: https://stackblitz.com/edit/angular-wefh4b-vz5knp?file=app.component.ts 
 
However, we have considered this as a feature from our end. We will include the feature in our Volume 1 release which is expected to be rolled out by the end of March 2021.  
  
You can track the status of this feature using the following feedback portal link.  
 
https://www.syncfusion.com/feedback/21151/provide-event-for-node-expansion-of-dropdowntree-component 
 
We appreciate your patience. 
 
Regards,  
Sowmiya.P

Sowmiya Padmanaban · Answer

Hi Aditya Murthy,  
 
Currently, we are implementing the nodeExpanding event of DropdownTree component. We need to some details to proceed further with this implementation. Could you please share the below details. 
 
1.     By using this event, whether you need to fetch the data from server and load it into Dropdown Tree component? 
2.     Or will process the some other external operations (not in Dropdown Tree). 
3.     What are the details you are expecting within the event arguments. 
4.     Please share the original use case of this new event in your application. 
 
The above details will helpful for us to implement this feature. 
 
Regards, 
Sowmiya.P