Problem with treeview

Question

HiFollowing the documentation example I created the nodeChecked () method which is called by (nodeCheked) I pass as parameter $ event. In the method I receive this parameter normally. So, if I check an item from my treeview it returns the value of that object with its properties. However, if there is an object with more levels, and I check the first level item, it marks all of its children, but it only returns the object to me with the parent's values. I need that when I check a parent item it returns all of its children's values ​​that were checked at the time the parent was checked.My structure looks something like this:- + Registration------ + Products------------ + View------------ + Add------------ + Delete------------ + Edit------ + Product Categories------------ + View------------ + Add------------ + Delete------------ + EditSo, if I check "Registration", the items Products and their children, and Product Categories and their children are also marked, but I only receive the value "Registration" in my method.I couldn't think of a solution for this, because my idea is to record this data all in the bank, because my treeview is part of my form.

Muthukrishnan Kandasamy · Accepted Answer

Hi Fabiano, 
 
Thanks for contacting Syncfusion support. 
 
We have validated your reported problem in TreeView control. We would like to let you know that, when we are checking the tree nodes then it only returns the data of available tree node in the DOM.  
 
By default, TreeView has load on demand (Lazy load). It reduces the bandwidth size when consuming huge data. It loads first level nodes initially, and when parent node is expanded, loads the child nodes based on the parentID/child member. 
 
For achieving your requirement in TreeView, we need to set loadOnDemand as false. So, that all tree nodes will be rendered on the initial time. 
 
We have prepared sample for your convenience, please refer to the below link for the sample. 
 
https://stackblitz.com/edit/angular-tree-nodechecked-data?file=app.component.ts 
 
Documentation: https://ej2.syncfusion.com/angular/documentation/treeview/getting-started/ 
 
API: https://ej2.syncfusion.com/angular/documentation/api/treeview/ 
 
Demo: https://ej2.syncfusion.com/angular/demos/#/material/treeview/treeview-checkbox 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K

Fabiano Melo · Answer

Tanks Muthukrishnan

Muthukrishnan Kandasamy · Answer

Hi Fabiano, 
 
Welcome. Please, get back to us if you need any further assistance. We will be happy to assist you. 
 
Regards, 
Muthukrishnan K

Fabiano Melo · Answer

HiAnother doubt arose. The getTreeData () method returns all the items that are IsChecked = true, how do I get an array of objects with the items IsChecked = true and the items IsChecked = "mixed". I need to have this information about the parents.Grateful for the help.

Sowmiya Padmanaban · Answer

Hi Fabiano Melo,  
 
We have checked your requirement with TreeView component. By default, we add aria-checked attribute for each TreeView list items. You can achieve your requirement by using that attribute. 
 
Refer the below code snippet. 
 




 check() { 
    var data = this.treeview.getTreeData(); 
    var elements = this.treeview.element.querySelectorAll( 
      ".e-checkbox-wrapper" 
    ); 
    var eleList = Array.from(elements); 
    var mixedList = eleList.filter( 
      x => x.getAttribute("aria-checked") == "mixed" 
    ); 
    var mixedID = []; 
    for (var i = 0; i < mixedList.length; i++) { 
      var id = mixedList[i].closest("li").getAttribute("data-Uid"); 
      mixedID.push(id); 
    } 
    console.log(mixedID); 
    var mixedData = data.filter(x => mixedID.includes(x.id.toString())); 
    // get the mixed parent node details 
    console.log(mixedData); 
  } 
 
Refer the sample link below. In this sample, check method will return the mixed parent node details on clicking the button. 
 
https://stackblitz.com/edit/angular-jfj82x-komzuu?file=app.component.ts 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P