How to get the Change with JQuery for Treeview?

[Alexandre]

Hello,

I am trying to get the "change" event for the Treeview control, but it is not working like an usual dropdown list. Could you help me with the corret code for that?

I am trying something like this: 

$("#ddtree").on('change', function () {}

But it is not working. I went through the forum issues and the documentation but could no find the answer.

Regards,

Alexandre

[Keerthana Rajendran]

Hi Alexandre, 

 

Thanks for contacting Syncfusion support.  

 

We checked your query and would like to mention that EJ2 components are independent of jQuery whereas EJ1 controls are jQuery dependent. Based on the query, we are not clear on whether you expect to detect node change with EJ1 or EJ2 TreeView.  

 

However, we have certain events(nodeSelect , nodeClick) in both platforms to detect the interactions with TreeView.  

 

Please find the links below for more details on EJ1 and EJ2 TreeView. 

 

Platform	Demo link	UG link	API link
EJ1 TreeView	https://aspnetcore.syncfusion.com/treeview/events	https://help.syncfusion.com/aspnet-core/treeview/tree-node#selection	https://help.syncfusion.com/api/js/ejtreeview#events:nodeselect
EJ2 TreeView	https://ej2.syncfusion.com/aspnetcore/TreeView/DefaultFunctionalities#/material	https://ej2.syncfusion.com/aspnetcore/documentation/treeview/getting-started/	https://ej2.syncfusion.com/documentation/api/treeview/#nodeselected

 

Please revert with exact platform (EJ1 or EJ2) if you need any further assistance. 

 

Regards, 

Keerthana R. 

[Alexandre]

Hello,

I am sorry for not being more specific regarding what I am using. It is the EJ2 controls. And I believe that what I need is the nodeClick event, to be able to get the value and the text of the selected node.

I could not do it myself with the provided documentation, and I would appreciate if you could send me just the sample function in Jquery that detect the select event and retrieve the required information.

Regards,

Alexandre 

[Keerthana Rajendran]

Hi Alexandre,  

 

Thanks for the details.  

 

As mentioned earlier, EJ2 components are independent of jQuery. Based on your request, we have prepared an Asp.Net Core EJ2 TreeView sample to detect the node click/select functionality and retrieve the node details.  

 

Refer to the following code. 

 

<ejs-treeview id="listdata" nodeClicked="onClick" nodeSelected="onSelect"> 

        <e-treeview-fields  dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"></e-treeview-fields> 

</ejs-treeview> 

<script> 

    function onClick(args) 

    { 

        console.log(args.node); 

    } 

    function onSelect(args) 

    {  

        console.log(args.nodeData); // get node data 

    } 

</script> 

 

With the above code, the selected node details will be printed to the console window of browser for each selection.  

 

Sample link: https://www.syncfusion.com/downloads/support/forum/168824/ze/TreeView-node_events-896151315 

 

Please get back to us if you need further assistance. 

 

Regards, 

Keerthana R. 

[Alexandre]

Hello  Keerthana,

Thank you very much for that sample. It is exactly what I needed.

Regards,

Alexandre

[Keerthana Rajendran]

Hi Alexandre, 

 

Most welcome. We are glad to hear that the provided sample helped you. Please get back to us if you need any further assistance. We will be happy to assist you. 

 

Regards, 

Keerthana R.