1. Home
  2. Forum
  3. Angular - EJ 2
  4. event for expansion of tree node

event for expansion of tree node

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

8 Replies 1 reply marked as answer
SP Sowmiya Padmanaban Syncfusion Team November 9, 2020 11:56 AM UTC

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. 
 
 
Please, refer to the below links to know more about the DropdownTree component. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


AM Aditya Murthy November 10, 2020 03:53 PM UTC

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

SP Sowmiya Padmanaban Syncfusion Team November 11, 2020 01:40 PM UTC

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. 
 
 
Please, let us know if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Marked as answer
NT Nguyen Tuan Binh January 4, 2021 03:30 AM UTC

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


SP Sowmiya Padmanaban Syncfusion Team January 4, 2021 11:24 AM UTC

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. 
 
 
 
For your reference, we have attached a video demonstration for your requirement with DropdownTree component. 
 
 
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. 
 
 
 
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 


NT Nguyen Tuan Binh January 5, 2021 10:27 AM UTC

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


SP Sowmiya Padmanaban Syncfusion Team January 6, 2021 09:46 AM UTC

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"); 
    }; 
  } 
 
 
 
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.  
 
 
We appreciate your patience. 
 
Regards,  
Sowmiya.P 


SP Sowmiya Padmanaban Syncfusion Team April 7, 2021 01:19 PM UTC

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 


Loader.
Up arrow icon