How to get the updated data source of TreeView after performing its any operation

How to get the updated data source of TreeView after performing its any operation.

Solution:

In our TreeView component, we have provided the method getTreeData to get the updated data source of TreeView after performing some operation like drag and drop, node editing, node selecting/unselecting, node expanding/collapsing, node checking/unchecking, adding and removing node.

• If you pass the ID of TreeView node as arguments for this method, then it will return the updated data source of the corresponding node. Otherwise, it will return the entire updated data source of TreeView.
• The updated data source also contains custom attributes, if you specified in data source.

Refer the below code block.

   
 // Render the TreeView with checkboxes
    let treeObj: TreeView = new TreeView({
        fields: { dataSource: (dataSource as any).checkboxData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' },
        showCheckBox: true,
        nodeChecked: nodeChecked
    });
    treeObj.appendTo('#tree');
 
  function nodeChecked(args: NodeCheckEventArgs) {
    //Create the instance for tree 
    var tree = (document.getElementById('tree') as any).ej2_instances[0]; 
    //Get the checked Nodes id 
    var checkedNodes = tree.checkedNodes; 
    var checkedNodesData = []; 
    //Get checked Nodes Data 
    for (var i = 0; i < checkedNodes.length; i++) { 
      checkedNodesData.push(JSON.stringify(tree.getTreeData(checkedNodes[i]))); 
    } 
    console.log(checkedNodesData); 
  }
 

Sample link: https://stackblitz.com/edit/gettreedata

Refer to the below links to know more about Syncfusion TreeView control.

Documentation: https://ej2.syncfusion.com/documentation/treeview/getting-started/

API reference: https://ej2.syncfusion.com/documentation/api/treeview/

Live demo: https://ej2.syncfusion.com/demos/#/material/treeview/default.html